Здравствуйте, сегодня попробуем переделать стандартную тему wordpress – Twenty Fourteen: отцентрируем тему,

PS: Статья в процессе написания…

Тема позволяет создать отзывчивый сайт (корректное отображение сайта на разных экранах). Есть возможность создать сразу под шапкой сетку или слайдер из рекомендуемого контента (нужно добавить к записям соответствующие метки). Тема имеет 3 области виджетов и отдельный шаблон страницы на весь экран.

Приступим к настройке темы.

Для начала лучше всего установить плагин – Simple Custom CSS, которые позволит легко вносить изменения в CSS стили темы Twenty Fourteen:
Сведения о плагине Simple Custom CSS:
Активные установки: 300 000+
Сайт плагина: “ru.wordpress.org/plugins/simple-custom-css/”
Автор плагина: John Regan, Danny Van Kooten
Установка плагина стандартная – через админку wordpress.

1. Как установить Слайдер или Сетку в теме Twenty Fourteen

Чтобы выбрать Слайдер или Сетку в теме Twenty Fourteen зайдите в раздел консоли “Внешний вид” — “Настроить”.

На вкладке “Избранное содержимое” в поле “Разметка” выберите «Сетка» или «Слайдер».

Чтобы Сетка или Слайдер появился – нужно поставить метку (в данном примере – featured) к тем запясям, которые должны в них отображаться.

Установить метки легко – нужно зайти в пункт “Записи”, подпункт “Все записи”, затем под названием нужной записи найти ссылку “Свойства” и кликнуть по ней:

И в поле “Метки” вписать нужную метку (в данном примере – featured) и нажать кнопку “Обновить”:

Если выбираем “Сетку”, то сайт будет выглядеть так:

Если выбираем “Слайдер”, то сайт будет выглядеть так:

Вот примеры сайтов с Сеткой и Слайдером в теме Twenty Fourteen:

2. Отцентрируем тему Twenty Fourteen:

Было:

Стало:

Для этого переходим в пункт “Внешний вид”, подпункт “Пользовательский CSS” и добавляем в него следующий код:

/*this center aligns site */

.site {
 margin: 0 auto;
 }
 
/*end center align code */

3. Показываем миниатюры записей во всю ширину:

 /* span featured images full-width of content */

.post-thumbnail img {
 width: 100%;
 }

/* end span featured image code */

4. Используйте это для настройки отступа содержимого в миниатюре записи:

/* remove/adjust featured image indent (default -48px) change to 0 (zero) for no indent */

.site-content .has-post-thumbnail .entry-header {
 margin-top: -48px;
}

/* end indent code */

5. Отрегулируйте отступ между верхней частью содержимого и заголовком:

/* adjust padding between top of content and header 72px default */

.content-area, .content-sidebar {
 padding-top: 72px;
}

/* end adjust padding between top of content & header */

6. Отрегулируйте максимальную ширину содержимого (не используйте это, если вы использовали код для удаления левой боковой панели):

/*  Content max-width adjust 630px as needed (default 474px)  */

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    margin: 0 auto;
    max-width: 630px;}
    
    /*  End of max-width code  */​

7. Код поможет выровнять меню:

.header-main {
 text-align: right;
}

.primary-navigation {
 float: none;
}

.primary-navigation li {
 text-align: left;
}

/*end align nav menu*/

8. Отрегулируйте цвет ссылки и её подчеркивание:

/* link color - current & hover change text-decoration to none if link underline not wanted*/
		
		a:active, a:hover {
	color: #41a62a;
	  text-decoration: underline;
}

/* end current & hover link code */

9. Настройка цвета ссылок в боковой панели:

/* link color - content sidebar widget links */

.content-sidebar .widget a {
  color: #224488;
}

/* end content-sidebar widget link code */

10. Отрегулируйте цвет ссылки, её подчеркивание:

/* link color -can underline links by changing text-decoration to underline */
a {
  color: #24890D;
  text-decoration: none;
}

/* end link color */

11. Отрегулировать высоту рекомендуемого контента в шапке.

/*controls height of featured content padding*/

.grid .featured-content .entry-header {
  height: 70px;
}

/*end code height of featured content padding*/

12. Удалить метаданные в избранном контенте (в сетке):

/*removes meta data of categories by display: none*/

.featured-content .entry-meta {
  color: #FFFFFF;
  display: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.09091;
  margin-bottom: 12px;
}

/* end meta data categories */

13. Настройка размера шрифта заголовка страницы и поста:

/*Page titles*/

.entry-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.09091;
  margin: 0 0 12px;
  text-transform: uppercase;
}

/* end page titles*/

14. Настройка размера и цвета шрифта заголовка сайта

/*site title font size & color, etc*/

.site-title a, .site-title a:hover {
  color: #FFFFFF;
  font-size: 26px;
}

/* end site title */

15. Удалить автоматические переносы в тексте:

/*No auto text hyphenation*/

.entry-content,
.entry-summary,
.page-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.nav-links {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	hyphens:         none;
	word-wrap: normal;
}

.comment-content {
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	word-wrap: normal;
}

.widget {
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
	line-height: 1.2857142857;
	margin-bottom: 48px;
	width: 100%;
	word-wrap: normal;
}

/* end no auto text hyphenation*/

16. Используйте так, чтобы элемент навигации подменю в левой боковой панели не был покрыт изображением слайдера:

/*This is so a sub-navigation menu item in the left sidebar menu is not
 covered by a slider image*/

#secondary {
  z-index: 9999;
}

/* end sub-menu code */

PS: Отредактированная тема Twenty Fourteen – улучшен слайдер, добавлено всплывающее меню для мобильной версии сайта и др.
Скачать отредактированную тему Twenty Fourteen можно – здесь.
Скачать ход редактирования данной темы (всё что поменяли в стандартной теме) можно – здесь.