Изменение темы в WordPress. Тема 2012 (Twenty Twelve)

Тема Twenty Twelve разработана командой WordPress и является одной из «базовых». Есть в установочном файле WordPress.

Twenty_Twelve

Тема 2012 (Twenty Twelve) для WordPress создана по принципам адаптивного дизайна и превосходно выглядит на любом устройстве.
Она содержит шаблон главной страницы со своими собственными виджетами, дополнительный шрифт, стили для форматов записей, а также одноколоночный шаблон для страниц. Сделайте её своей, добавив произвольное меню, изображение заголовка и фон.

Изображение для «шапки» сайта (рекомендуется заголовок размером 960 × 250 пикселей), как и фон — добавляется по своему усмотрению в консоли панели управления.

izm_temy

 

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;

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

 

knopka

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» — у нас из подвала исчезла.

 

Как убрать после поля для комментариев надпись “Можно использовать следующие 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' => '')); ?>

 

 

Добавляем постраничную навигацию (вместо предыдущие записи)
postran_navigacia
Устанавливаем плагин 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 -->

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

 

Редактируем отступы в теме 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;
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 }

 

 

сделать чтобы отображалось название рубрики на странице записи, просто когда я удаляю по вашей рекомендации мета данные, то нет названий рубрики не на странице «рубрики» не на странице самого поста.
Константин Says:
Октябрь 3rd, 2014 at 08:38
Artem, для вывода категорий воспользуйтесь следующим тегом:

the_category
Более подробно читайте тут:
«codex.wordpress.org/Теги_шаблонов/the_category»

Как делать миниатюры записей смотрим здесь m-ua.info/1562