Здравствуйте, сегодня попробуем переделать стандартную тему 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 можно – здесь.
Скачать ход редактирования данной темы (всё что поменяли в стандартной теме) можно – здесь.