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


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

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



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

Изначально стандартная тема 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. Удалим ссылку в подвале.

Для этого заходим в панель управления сайтом на 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 }