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


Спасибо за статью этому сайту.

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

Будем переделывать стандартную тему wordpress - Twenty Twelve: зададим размер миниатюре, поместим миниатюру под заголовок, удалим ненужные мета теги на главной странице, отредактируем кнопку «Читать далее», удалим ссылку в подвале (footer).

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

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

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

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

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

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

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

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

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

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

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

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

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

1 <?php the_post_thumbnail(); ?>

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

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

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

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

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

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

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

1 #tumba {
2  margin-top: 30px;
3 }

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

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

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

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

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

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

и

1 <footer class="entry-meta">
2  <?php twentytwelve_entry_meta(); ?>
3  <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">','</span>' ); ?>
4  <?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. ?>
5  <div class="author-info">
6  <div class="author-avatar">
7  <?php
8  /** This filter is documented in author.php */
9  $author_bio_avatar_size = apply_filters( 'twentytwelve_author_bio_avatar_size', 68 );
10  echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size);
11  ?>
12  </div><!-- .author-avatar -->
13  <div class="author-description">
14  <h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
15  <p><?php the_author_meta( 'description' ); ?></p>
16  <div class="author-link">
17  <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
18  <?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>','twentytwelve' ), get_the_author() ); ?>
19  </a>
20  </div><!-- .author-link -->
21  </div><!-- .author-description -->
22  </div><!-- .author-info -->
23  <?php endif; ?>
24  </footer><!-- .entry-meta -->

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

1 <?php
2 /**
3  * The default template for displaying content
4  *
5  * Used for both single and index/archive/search.
6  *
7  * @package WordPress
8  * @subpackage Twenty_Twelve
9  * @since Twenty Twelve 1.0
10  */
11 ?>
12
13 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
14  <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
15  <div class="featured-post">
16  <?php _e( 'Featured post', 'twentytwelve' ); ?>
17  </div>
18  <?php endif; ?>
19  <header class="entry-header">
20
21  <?php if ( is_single() ) : ?>
22  <h1 class="entry-title"><?php the_title(); ?></h1>
23  <?php else : ?>
24  <h1 class="entry-title">
25  <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
26  </h1>
27  <?php endif; // is_single() ?>
28 <div id="tumba">
29  <?php the_post_thumbnail(); ?>
30 </div>
31  </header><!-- .entry-header -->
32
33 <?php if ( is_search() ) : // Only display Excerpts for Search ?>
34  <div class="entry-summary">
35  <?php the_excerpt(); ?>
36  </div><!-- .entry-summary -->
37  <?php else : ?>
38  <div class="entry-content">
39  <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>','twentytwelve' ) ); ?>
40  <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __('Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
41  </div><!-- .entry-content -->
42  <?php endif; ?>
43  </article><!-- #post -->

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

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

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

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

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

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

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

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

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

1 float: right;

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

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

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

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

1 <div class="site-info">
2  <?php do_action( 'twentytwelve_credits' ); ?>
3  <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>
4  </div><!-- .site-info -->

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

1 <?php
2 /**
3  * The template for displaying the footer
4  *
5  * Contains footer content and the closing of the #main and #page div elements.
6  *
7  * @package WordPress
8  * @subpackage Twenty_Twelve
9  * @since Twenty Twelve 1.0
10  */
11 ?>
12  </div><!-- #main .wrapper -->
13  <footer id="colophon" role="contentinfo">
14
15  </footer><!-- #colophon -->
16 </div><!-- #page -->
17
18 <?php wp_footer(); ?>
19 </body>
20 </html>

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

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

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

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

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

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

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

1 <?php comment_form(); ?>

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

1 /*-- move sidebar to the left --*/
2 @media screen and (min-width: 600px) {
3     .site-content {
4         float: right;
5     }
6     .widget-area {
7         float: left;
8     }
9 }
10
11 /* for IE8 and IE7 ----------------*/
12 .ie .site-content {
13     float: right;
14 }
15 .ie .widget-area {
16     float: left;
17 }

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

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

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

Здесь понадобиться небольшая настройка…

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 <footer class="entry-meta">

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

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

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

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

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

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

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

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

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

1 <?php if ( get_header_image() ) : ?>
2         <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>
3         <?php endif; ?>

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

1 ...
2 </hgroup>
3
4         <?php if ( get_header_image() ) : ?>
5         <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>
6         <?php endif; ?>
7
8 <nav id="site-navigation" class="main-navigation" role="navigation">
9             <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
10             <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content','twentytwelve' ); ?></a>
11             <?php wp_nav_menu( array( 'theme_location' => 'primary','menu_class' => 'nav-menu' ) ); ?>
12         </nav><!-- #site-navigation -->
13
14     </header><!-- #masthead -->
15
16 ...

Результат:

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

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

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

До:

 

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

После:

 

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

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

 

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

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

 

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

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

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

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

1 .site-content article {
2 border-bottom: 4px double #ededed;
3 margin-bottom: 72px;
4 margin-bottom: 5.142857143rem;
5 padding-bottom: 24px;
6 padding-bottom: 1.714285714rem;
7 word-wrap: break-word;
8 -webkit-hyphens: auto;
9 -moz-hyphens: auto;
10 hyphens: auto;
11 }

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

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

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

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

1 .site-content article {
2     border-bottom: 4px double #ededed;
3     margin-bottom: 16px;
4     margin-bottom: 1.142857143rem;
5     padding-bottom: 1.6px;
6     padding-bottom: 0.14285714rem;
7     word-wrap: break-word;
8     -webkit-hyphens: auto;
9     -moz-hyphens: auto;
10     hyphens: auto;
11 }