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

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

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

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

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

 

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

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

 

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 сверху.

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

 

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 -->

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

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

 

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;

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

 

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. Добавляем постраничную навигацию.

Устанавливаем плагин 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:

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

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

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

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

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

В открывшемся коде файла 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(); } ?>

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

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

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

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

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

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

<?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() ?>

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

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 -->

...

Результат:

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

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

До:

После:

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

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

В итоге видим, что за отступы отвечает класс “.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).