Спасибо за статью этому сайту.
Будем переделывать стандартную тему wordpress — Twenty Twelve: зададим размер миниатюре, поместим миниатюру под заголовок, удалим ненужные мета теги на главной странице, отредактируем кнопку «Читать далее», удалим ссылку в подвале (footer).
Изначально стандартная тема wordpress — Twenty Twelve (версия 1.3) выглядит так:
Приступим к ее исправлению:
1. Зададим размер миниатюры (thumbnail)
Почему-то размер миниатюры не ограничен — что очень не удобно, так как при загрузке картинок разного размера — миниатюры также будут разными.
Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл functions.php (Функции темы) и ищем в его коде следующую строчку:
1 |
set_post_thumbnail_size( 624, 9999 ); |
Именно она и задает размер миниатюры в теме Twenty Twelve (621 — это ширина, а 9999 — это высота миниатюры в px), давайте например исправим ее на следующую строчку:
1 |
set_post_thumbnail_size( 150, 400 ); |
И у нас должно получиться следующее:
2. Переместим миниатюру под заголовок
Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл content.php и ищем в его коде следующую строчку:
1 |
<?php the_post_thumbnail(); ?> |
Данная сточка отвечает за отображение миниатюры.
Её перенесем чуть ниже за сточку:
Также обернем код вывода миниатюры в отдельный блок и пропишем к нему стили оформления — для того, чтобы сделать отступ от заголовка сверху, в итоге должно получиться следующее:
3 |
<?php the_post_thumbnail(); ?> |
То есть мы обернули код вывода миниатюры в блок с id «tumba».
Для блока tumba пропишем следующий код в файле стилей — style.css — открываем его: заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редакор», справа в списке шаблонов выбираем файл style.css и в самый его низ вставляем следующий код:
То есть мы создали отступ в 30px сверху.
В итоге у нас получиться следующее:
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 --> |
и
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() ) : |
5 |
<div class="author-info"> |
6 |
<div class="author-avatar"> |
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); |
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">→</span>','twentytwelve' ), get_the_author() ); ?> |
20 |
</div><!-- .author-link --> |
21 |
</div><!-- .author-description --> |
22 |
</div><!-- .author-info --> |
24 |
</footer><!-- .entry-meta --> |
В итоге ваш файл content.php должен выглядеть так:
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' ); ?> |
19 |
<header class="entry-header"> |
21 |
<?php if ( is_single() ) : ?> |
22 |
<h1 class="entry-title"><?php the_title(); ?></h1> |
24 |
<h1 class="entry-title"> |
25 |
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> |
29 |
<?php the_post_thumbnail(); ?> |
31 |
</header><!-- .entry-header --> |
33 |
<?php if ( is_search() ) : |
34 |
<div class="entry-summary"> |
35 |
<?php the_excerpt(); ?> |
36 |
</div><!-- .entry-summary --> |
38 |
<div class="entry-content"> |
39 |
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>','twentytwelve' ) ); ?> |
40 |
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __('Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?> |
41 |
</div><!-- .entry-content --> |
43 |
</article><!-- #post --> |
После чего сайт будет выглядеть уже так:
Как видите ничего лишнего.
4. Отредактируем кнопку «Читать далее»
Для этого достаточно опять перейти в файл стилей — style.css и добавить в самый низ его кода следующие строчки:
6 |
border: 1px solid #21759B; |
10 |
font: bold 12px Arial, Helvetica, sans-serif; |
К кнопке «Читать далее» можно также прописать фоновое изображение с помощью следующей сточки:
1 |
background: url(images/nav-button-bg.gif) repeat-x; |
А для того, чтобы кнопка «Читать далее» отображалась справа, а не слева можно вставить следующий код:
В итоге у нас получилось следующее:
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 будет выглядеть так:
12 |
</div><!-- #main .wrapper --> |
13 |
<footer id="colophon" role="contentinfo"> |
15 |
</footer><!-- #colophon --> |
В итоге ссылка на «wordpress.org» — у нас из подвала исчезла.
6. Как убрать после поля для комментариев надпись “Можно использовать следующие HTML-теги и атрибуты:…» (You may use these HTML tags and attributes:…)
То есть до изменений форма комментариев выглядит так:
А после удаления данной строки так:
Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем файл comments.php и удаляем в нем следующий код (3 строчка снизу):
1 |
<?php comment_form(); ?> |
и вместо него вставляем следующий код:
1 |
<?php comment_form(array('comment_notes_after' => '')); ?> |
7. Добавляем постраничную навигацию
Устанавливаем плагин 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">←</span> Older posts', 'twentytwelve' ) ); ?></div> |
4 |
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</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 следующий код:
2 |
@media screen and (min-width: 600px) { |
9. Добавляем разбивку комментариев на страницы
Если у вас скопилось уже достаточно много комментариев на странице, то можно добавитьпостраничную навигацию для комментариев и в этом нам поможет следующий плагин:
WP-CommentNavi
Последнее обновление: 2014-12-19
Количество загрузок: 46000+
Страница плагина: «wordpress.org/plugins/wp-commentnavi/»
Добавляет в комментариях пагинацию, то есть разбивает комментарии на страницы.
Здесь понадобиться небольшая настройка…
9.1. Устанавливаем и активируем плагин WP-CommentNavi через панель управления wordpress: Админка — Пункт «Плагины» — подпункт «Добавить новый» — в строку «Поиск плагинов» вводим WP-CommentNavi.
9.2. После установки плагина в пункте «Настройки» вашей панели управления появиться новый подпункт «CommentNavi», изначально, количество отображаемых комментариев стоит равное 5:
9.3. Далее идем в пункт «Настройки» и меняем количество комментариев, отображаемых на странице.
Заходим в админке в пункт «Настройки» — подпункт «Обсуждение», изначально настройки выглядят так:
Здесь вам нужно поставить галочку напротив пункта:
«Разбивать комментарии верхнего уровня на страницы по…» и уменьшить количество с 50 штук до 5 штук:
Здесь же можно изменить какая страница будет отображаться (последняя или первая), а также ранние или поздние комментарии будут располагаться сверху.
9.4. Теперь отредактируем немного тему Twenty Twelve, чтобы у нас появилась разбивка комментариев на страницы.
Для этого заходим в пункт «Внешний вид» и его подпункт «Редактор», справа в списке шаблонов выбираем — comments.php (файл, который отвечает за вывод комментариев в теме Twenty Twelve):
В открывшемся коде файла 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( __( '← Older Comments', 'twentytwelve' ) ); ?></div> |
4 |
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →','twentytwelve' ) ); ?></div> |
Этот код заключен в теги «nav» и он отвечает за вывод стандартной навигации комментариев в теме Twenty Twelve.
Удаляем вышеуказанные строчки кода, заключенные в теги «nav» и вместо него вставляем следующий код:
1 |
<?php if(function_exists('wp_commentnavi')) { wp_commentnavi(); } ?> |
Вот код после изменения:
После чего заходим на сайт и смотрим — что получилось:
Все получилось!
10. Вопрос Александра: «В актуальной на данный момент версии 1.6 темы Twenty Twelve ссылка “добавить комментарий” находится над миниатюрой.Пожалуйста расскажите как переместить ее под запись,расположив в одном ряду с метатегами. Спасибо»
Для чтобы перенести ссылку «добавить комментарий» заходим в админку wordpress, выбираем в меню пункт «Внешний вид», подпункт «Редактор», справа в списке шаблонов выбираем файл content.php и с помощью поиска браузера находим leave-reply:
Здесь видим, что за ссылку отвечает код:
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 --> |
Можно вовсе удалить данный код, чтобы ссылка «Добавить комментарий» пропала.
Если же вы хотите перенести ее в ниже в мета-теги, то нужно найти чуть ниже код:
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 --> |
В итоге у вас получиться следующее:
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> |
В итоге должно получиться так:
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> |
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 --> |
14 |
</header><!-- #masthead --> |
Результат:
12. Редактируем отступы в теме Twenty Twelve
Вопрос: как управлять отступами между анонсами постов на странице? После удаления мета осталось лишнее место…
До:
После:
Чтобы редактировать отступы — можно воспользоваться инструментами для разработчиков, встроенными во все современные браузеры. Так, например, в Яндекс.Браузере и Google Chrome, чтобы вызвать данные инструменты нужно нажать правой клавишей мыши на странице сайта и выбрать в выпадающем списке пункт «Посмотреть код элемента»:
У вас появиться окошко «Developer Tools» («Инструменты разработчика»), здесь выбираем инструмент «лупа» (слева вверху), далее наводим на нужный нам элемент и смотрим его код — его можно редактировать и смотреть, что измениться (по скриншоту ниже можно кликнуть, чтобы увеличить):
В итоге видим, что за отступы отвечает класс «.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; |
4 |
margin-bottom: 5.142857143rem; |
6 |
padding-bottom: 1.714285714rem; |
Нам важны свойства 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; |
4 |
margin-bottom: 1.142857143rem; |
6 |
padding-bottom: 0.14285714rem; |
