Здравствуйте, сегодня попробуем переделать стандартную тему wordpress – Twenty Fourteen: отцентрируем тему,
PS: Статья в процессе написания…
Скачать исходники для статьи можно ниже
Бизнес сообщество BizNet - здесь
Тема позволяет создать отзывчивый сайт (корректное отображение сайта на разных экранах). Есть возможность создать сразу под шапкой сетку или слайдер из рекомендуемого контента (нужно добавить к записям соответствующие метки). Тема имеет 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 можно – здесь.
Скачать ход редактирования данной темы (всё что поменяли в стандартной теме) можно – здесь.