twenty twelve wordpress

Twenty Twelve: настраиваем стандартную тему wordpress

Здравствуйте, сегодня попробуем переделать стандартную тему wordpress — Twenty Twelve: зададим размер миниатюре, поместим миниатюру под заголовок, удалим ненужные мета теги на главной странице, отредактируем кнопку «Читать далее», удалим ссылку в подвале.

Скачать исходники для статьи можно ниже

Стандартные темы wordpress: Twenty Eleven, Twenty Twelve, Twenty Ten, Twenty Thirteen, Twenty Fourteen — являются отличным framework (фреймворк, структура, каркас), на основе которых каждый день создаются новые, многофункциональные wordpress темы.

Изначально стандартная тема wordpress — Twenty Twelve (версия 1.3) выглядит так:

twenty twelve

Приступим к ее исправлению:

 

1. Зададим размер миниатюры (thumbnail).

Почему-то размер миниатюры не ограничен — что очень не удобно, так как при загрузке картинок разного размера — миниатюры также будут разными.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл functions.php (Функции темы) и ищем в его коде следующую строчку:


set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop

Именно она и задает размер миниатюры в теме Twenty Twelve (621 — это ширина, а 9999 — это высота миниатюры в px), давайте например исправим ее на следующую строчку:


set_post_thumbnail_size( 150, 400 ); // Unlimited height, soft crop

И у нас должно получиться следующее:

настраиваем twenty twelve wordpress

 

2. Переместим миниатюру под заголовок.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл content.php и ищем в его коде следующую строчку:


<?php the_post_thumbnail(); ?>

Данная сточка отвечает за отображение миниатюры.

Её перенесем чуть ниже за сточку:


<?php endif; // is_single() ?>

Также обернем код вывода миниатюры в отдельный блок и пропишем к нему стили оформления — для того, чтобы сделать отступ от заголовка сверху, в итоге должно получиться следующее:


<?php endif; // is_single() ?>
<div id="tumba">
 <?php the_post_thumbnail(); ?>
</div>

То есть мы обернули код вывода миниатюры в блок с id «tumba».

Для блока tumba пропишем следующий код в файле стилей — style.css — открываем его: заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл style.css и в самый его низ вставляем следующий код:


#tumba {
 margin-top: 30px;
}

То есть мы создали отступ в 30px сверху.

В итоге у нас получиться следующее:

изменяем фреймвок - twentytwelve

 

3. Удалим ненужные мета теги.

Опять возвращаемся к файлу content.php — для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл content.php и удаляем в нем следующие строчки:


<?php if ( comments_open() ) : ?>
 <div class="comments-link">
 <?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
 </div><!-- .comments-link -->
 <?php endif; // comments_open() ?>

и


<footer class="entry-meta">
 <?php twentytwelve_entry_meta(); ?>
 <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
 <?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
 <div class="author-info">
 <div class="author-avatar">
 <?php
 /** This filter is documented in author.php */
 $author_bio_avatar_size = apply_filters( 'twentytwelve_author_bio_avatar_size', 68 );
 echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
 ?>
 </div><!-- .author-avatar -->
 <div class="author-description">
 <h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
 <p><?php the_author_meta( 'description' ); ?></p>
 <div class="author-link">
 <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
 <?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' ), get_the_author() ); ?>
 </a>
 </div><!-- .author-link -->
 </div><!-- .author-description -->
 </div><!-- .author-info -->
 <?php endif; ?>
 </footer><!-- .entry-meta -->

В итоге ваш файл content.php должен выглядеть так:


<?php
/**
 * The default template for displaying content
 *
 * Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
 <div class="featured-post">
 <?php _e( 'Featured post', 'twentytwelve' ); ?>
 </div>
 <?php endif; ?>
 <header class="entry-header">

 <?php if ( is_single() ) : ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <?php else : ?>
 <h1 class="entry-title">
 <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
 </h1>
 <?php endif; // is_single() ?>
<div id="tumba">
 <?php the_post_thumbnail(); ?>
</div>
 </header><!-- .entry-header -->

<?php if ( is_search() ) : // Only display Excerpts for Search ?>
 <div class="entry-summary">
 <?php the_excerpt(); ?>
 </div><!-- .entry-summary -->
 <?php else : ?>
 <div class="entry-content">
 <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
 </div><!-- .entry-content -->
 <?php endif; ?>
 </article><!-- #post -->

После чего сайт будет выглядеть уже так:

улучшаем тему twenty twelve

Как видите ничего лишнего.

 

4. Отредактируем кнопку «Читать далее».

Для этого достаточно опять перейти в файл стилей — style.css и добавить в самый низ его кода следующие строчки:


.more-link {
margin-right: 22px;
margin-top: 20px;
padding: 5px 12px;
text-decoration: none;
border: 1px solid #21759B;
width: 90px;
color: #21759B;
white-space: nowrap;
font: bold 12px Arial, Helvetica, sans-serif;
}

К кнопке «Читать далее» можно также прописать фоновое изображение с помощью следующей сточки:


background: url(images/nav-button-bg.gif) repeat-x;

А для того, чтобы кнопка «Читать далее» отображалась справа, а не слева можно вставить следующий код:


float: right;

В итоге у нас получилось следующее:

framework twenty twelve

 

5. Удалим ссылку в подвале.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл footer.php и удаляем в нем следующий код:


<div class="site-info">
 <?php do_action( 'twentytwelve_credits' ); ?>
 <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentytwelve' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>
 </div><!-- .site-info -->

В итоге файл footer.php будет выглядеть так:


<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
 </div><!-- #main .wrapper -->
 <footer id="colophon" role="contentinfo">

 </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

В итоге ссылка на «wordpress.org» — у нас из подвала исчезла.

 

6. Как убрать после поля для комментариев надпись “Можно использовать следующие HTML-теги и атрибуты:…» (You may use these HTML tags and attributes:…)

То есть до изменений форма комментариев выглядит так:

редактируем форму комментариев

А после удаления данной строки так:

улучшаем форму комментариев

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл comments.php и удаляем в нем следующий код (3 строчка снизу):

<?php comment_form(); ?>

и вместо него вставляем следующий код:

<?php comment_form(array('comment_notes_after' => '')); ?>

Можете скачать исправленный файл comments.php с моего сайта — скачать.

 

7. Добавляем постраничную навигацию.

постраничная цифровая навигация в twenty twelve

настройка wp-pagenavi

Устанавливаем плагин WP-PageNavi — он есть в официальном репозитории wordpress, поэтому установка стандартная — через панель управления (админка) wordpress:

Количество скачиваний плагина: 4,938,430 — огромное количество
Страница плагина в репозитории: «wordpress.org/plugins/wp-pagenavi/»

Устанавливаем и активируем плагин WP-PageNavi, но это еще не все, так как его еще нужно привязать к нашей теме, для этого — заходим в файл functions.php темы Twenty Twelve (Админка — пункт «Внешний вид» — подпункт «Редактор» — справа в списке шаблонов находим файл functions.php), после чего ищем в его коде следующие строчки:

<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
	<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
	<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
	<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
</nav><!-- #<?php echo $html_id; ?> .navigation -->

И заменяем их на следующие:

<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
	<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
	<?php if ( function_exists( 'wp_pagenavi' ) ) wp_pagenavi(); ?>
</nav><!-- #<?php echo $html_id; ?> .navigation -->

Все после этого наша постраничная навигация заработает!

 

8. Перемещаем сайдбар справа налево.

Для этого вам достаточно добавить в файл стилей — style.css следующий код:

/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
    .site-content {
        float: right;
    }
    .widget-area {
        float: left;
    }
}

/* for IE8 and IE7 ----------------*/
.ie .site-content {
    float: right;
}
.ie .widget-area {
    float: left;
}

9. Добавляем разбивку комментариев на страницы.

Если у вас скопилось уже достаточно много комментариев на странице, то можно добавить постраничную навигацию для комментариев и в этом нам поможет следующий плагин:

WP-CommentNavi
Последнее обновление: 2014-12-19
Количество загрузок: 46000+
Страница плагина: «wordpress.org/plugins/wp-commentnavi/»
Или же можете скачать данный плагин с моего сайта — скачать WP-CommentNavi.

Добавляет в комментариях пагинацию, то есть разбивает комментарии на страницы.

Здесь понадобиться небольшая настройка…
Возьмем для примера стандартную тему wordpress — Twenty Twelve (скачать можно здесь), а версия движка wordpress на примере будет 4.1.

9.1. Устанавливаем и активируем плагин WP-CommentNavi через панель управления wordpress: Админка — Пункт «Плагины» — подпункт «Добавить новый» — в строку «Поиск плагинов» вводим WP-CommentNavi.

9.2. После установки плагина в пункте «Настройки» вашей панели управления появиться новый подпункт «CommentNavi», изначально, количество отображаемых комментариев стоит равное 5:

comments3

9.3. Далее идем в пункт «Настройки» и меняем количество комментариев, отображаемых на странице.
Заходим в админке в пункт «Настройки» — подпункт «Обсуждение», изначально настройки выглядят так:

comments4

Здесь вам нужно поставить галочку напротив пункта:
«Разбивать комментарии верхнего уровня на страницы по…» и уменьшить количество с 50 штук до 5 штук:

comments5

Здесь же можно изменить какая страница будет отображаться (последняя или первая), а также ранние или поздние комментарии будут располагаться сверху.

9.4. Теперь отредактируем немного тему Twenty Twelve, чтобы у нас появилась разбивка комментариев на страницы.

Для этого заходим в пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем — comments.php (файл, который отвечает за вывод комментариев в теме Twenty Twelve):

разбиваем комментарии на страницы в wordpress

В открывшемся коде файла comments.php находим вот такие строчки:

<nav id="comment-nav-below" class="navigation" role="navigation">
<h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentytwelve' ) ); ?></div>
</nav>

Этот код заключен в теги «nav» и он отвечает за вывод стандартной навигации комментариев в теме Twenty Twelve.

Удаляем вышеуказанные строчки кода, заключенные в теги «nav» и вместо него вставляем следующий код:

<?php if(function_exists('wp_commentnavi')) { wp_commentnavi(); } ?>

Вот код после изменения:
comments7

После чего заходим на сайт и смотрим — что получилось:

comments8

Все получилось!

10. Вопрос Александра: «В актуальной на данный момент версии 1.6 темы Twenty Twelve ссылка “добавить комментарий” находится над миниатюрой.Пожалуйста расскажите как переместить ее под запись,расположив в одном ряду с метатегами. Спасибо»

Для чтобы перенести ссылку «добавить комментарий» заходим в админку wordpress, выбираем в меню пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл content.php и с помощью поиска браузера находим leave-reply:

commentlink

Здесь видим, что за ссылку отвечает код:

<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>

Можно вовсе удалить данный код, чтобы ссылка «Добавить комментарий» пропала.
Если же вы хотите перенести ее в ниже в мета-теги, то нужно найти чуть ниже код:

<footer class="entry-meta">

И сразу после него вставить код ссылки «Добавить комментарий», вот так:

<footer class="entry-meta">
<?php if ( comments_open() ) : ?>
				<div class="comments-link">
					<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
				</div><!-- .comments-link -->
			<?php endif; // comments_open() ?>

В итоге у вас получиться следующее:

commentlink2

11. Переносим главное меню под изображение заголовка (картинку в шапке).

Заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл header.php, далее находим в нем код, отвечающий за вывод главного меню:

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

Вырезаем его и переносим под код вывода изображения заголовка.

За вывод изображения заголовка отвечает следующий код:

<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
		<?php endif; ?>

В итоге должно получиться так:

...
</hgroup>

		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
		<?php endif; ?>

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

	</header><!-- #masthead -->

...

Результат:

как перенести меню под изображения заголовка в twentytwelve

12. Редактируем отступы в теме Twenty Twelve:

Вопрос: как управлять отступами между анонсами постов на странице? После удаления мета осталось лишнее место…

До:

otstup1

После:

otstup2

Чтобы редактировать отступы — можно воспользоваться инструментами для разработчиков, встроенными во все современные браузеры. Так, например, в Яндекс.Браузере и Google Chrome, чтобы вызвать данные инструменты нужно нажать правой клавишей мыши на странице сайта и выбрать в выпадающем списке пункт «Посмотреть код элемента»:

otstup3

У вас появиться окошко «Developer Tools» («Инструменты разработчика»), здесь выбираем инструмент «лупа» (слева вверху), далее наводим на нужный нам элемент и смотрим его код — его можно редактировать и смотреть, что измениться (по скриншоту ниже можно кликнуть, чтобы увеличить):

otstup4

В итоге видим, что за отступы отвечает класс «.site-content article».

Далее заходим в админку wordpress, выбираем в меню пункт «Внешний вид», его подпункт «Редактор», справа в списке файлов откроется файл стилей (style.css), здесь нам и нужно найти данный класс.
Для поиска нужного кода можно воспользоваться функцией поиска, встроенной в браузер, например, для Яндекс.Браузера можно нажать сочетание клавиш Ctrl+F или зайти в меню (Пункт «Дополнительно» и подпункт «Найти…»), в строку поиска вводим, например: класс (site-content article) или же непосредственно код отступа, который ищем (margin-bottom: 5.142857143rem;).

В нашем случае за отступ отвечает следующий код:

.site-content article {
border-bottom: 4px double #ededed;
margin-bottom: 72px;
margin-bottom: 5.142857143rem;
padding-bottom: 24px;
padding-bottom: 1.714285714rem;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Нам важны свойства margin-bottom и padding-bottom — здесь они заданы в двух единицах измерения — в «px» и в «rem», чем они отличаются?

«px» — это абсолютная единица измерения, а «em» — относительная.
«rem» — размер относительно базового (определённого в .html{}) размера шрифта. По идее должен быть дружелюбнее к мобильным устройствами и ресайзу.
По единицам измерения можно почитать статью тут:
«web-standards.ru/articles/boring-bits-of-css/»

По умолчанию, если ничего не делать, 1rem = 16px.

После корректировки отступа мне понравился вот этот вариант:

.site-content article {
	border-bottom: 4px double #ededed;
	margin-bottom: 16px;
	margin-bottom: 1.142857143rem;
	padding-bottom: 1.6px;
	padding-bottom: 0.14285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

PS: Скачать переделанную тему  Twenty Twelve (версия 1.3) — можете с моего сайта — загрузить Twenty Twelve (исправлена mnogoblog.ru).

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Twenty Twelve: настраиваем стандартную тему wordpress: 28 комментариев

  1. Василий

    Добрый день! А не подскажите как оптимизировать теги h1 т.к их количество увеличивается с размещением каждой новой статьи а так же как ссделать что бы на главной странице был аноyс а не полностью статьи?

  2. Всеволод Ли

    Это чертовски полезная статья!! Наконец-то довел свой шаблон до ума.

    Узнать бы еще, как убрать после поле для комментариев надпись «Можно использовать следующие HTML-теги и атрибуты:

    "

  3. Artem

    А как сделать чтобы отображалось название рубрики на странице записи, просто когда я удаляю по вашей рекомендации мета данные, то нет названий рубрики не на странице «рубрики» не на странице самого поста.

  4. Сергей

    Здравствуйте. Очень полезный материал. Но у меня вопрос: как в этой теме в рубриках вообще убрать ссылку «читать далее»? Чтобы в запись можно было перейти только через ссылку в заголовке анонса?

  5. Константин

    Владимир, спасибо за полезный совет — добавил пункт 8 — о том как переместить сайдбар слева направо.
    По созданию двух сайдбаров по бокам — придется написать новую статью…

  6. Alex

    По сравнению с остальными вопросами, мой достаточно глупый)
    Но, как установить Вашу переделанную тему? Выдается ошибка, по причине уже имеющийся темы. менял название, все равно выдает ошибку.

  7. Максим

    Здравствуйте! Подскажите пожалуйста, а как можно в данной теме переместить окошко и кнопку «поиск» из сайтбара в строку «меню» (так, как сделано у вас)?
    Заранее спасибо.

  8. Тимур

    Здравствуйте!
    Помогите пожалуйста удалить ссылку «изменить» внизу страницы в теме Twenty Thirteen, а также поднять повыше контент с изображением фото на странице в той же теме. Заранее спасибо.

  9. Александр

    В актуальной на данный момент версии 1.6 темы Twenty Twelve ссылка «добавить комментарий» находится над миниатюрой.Пожалуйста расскажите как переместить ее под запись,расположив в одном ряду с метатегами.Спасибо

  10. Ксения

    Отличная статья, спасибо! Вопрос есть: как управлять отступами между анонсами постов на странице? После удаления мета осталось лишнее место…
    Заранее спасибо!

  11. Михаил

    Здравствуйте , Константин!
    Очень полезная для меня информация . Удачно зашел .
    Не подскажите как сделать меню во всю страницу (по длине)?
    И может подскажите как переместить ,заголовок сайта (текст) ,в правую часть ? Как правильно это все прописать и куда ?
    Заранее спасибо , Михаил .

Добавить комментарий для Василий Отменить ответ