Последнее обновление статьи
Всем привет!
Тема Twenty Seventeen – это новая тема от разработчиков WordPress. Twenty Seventeen является стандартной темой, то есть идёт вместе с дистрибутивом Вордпресс. Появилась эта тема в версии WordPress 4.7.
После установки WordPress эта тема уже будет установлена в качестве активной темы. Если WordPress уже был установлен ранее, то шаблон Twenty Seventeen можно установить из официального репозитория WordPress или скачать на странице https://wordpress.org/themes/twentyseventeen/.
Обзор и возможности темы Twenty Seventeen
Тема Twenty Seventeen идёт с демо контентом. Это позволяет сразу оценить все возможности шаблона. Когда тема становится активной, то демо контент по умолчанию не активируется. Для активации демо контента достаточно зайти в настройки темы («Внешний вид – Настроить») и нажать «Сохранить и опубликовать».
После активации демо контента на сайте появляется меню в шапке, несколько страниц и главная страница с разделами.
Рассмотрим настройки темы Twenty Seventeen.
«Свойства сайта». Здесь находятся стандартные настройки: логотип, название сайта, краткое описание, иконка сайта.
«Цвета». Можно выбрать цветовую схему: светлая, тёмная и пользовательская. Здесь также можно задать цвет заголовка.
«Медиафайл заголовка». Здесь находится самое интересное в теме Twenty Seventeen. Настройки позволяют оформить заголовок следующими способами: 1) видео заголовок; 2) изображение в заголовке; 3) несколько изображений в заголовке случайным образом меняющихся при каждом новом входе на сайт.
В вариантах с изображениями всё просто. Если нужно одно единственное изображение, то просто загружаете его в «Текущем заголовке». Или добавляете несколько изображений и включаете опцию «В случайном порядке».
В этом случае при каждом входе на сайт пользователь будет видеть в шапке разные изображения.
С видео заголовком немного сложнее. Здесь следует учитывать следующие нюансы.
1) Видео должно быть в формате .mp4.
2) Размер видео, которое вы хотите загрузить может превышать максимальный размер загружаемых файлов. Максимальный размер зависит от настроек сервера. Например, он может быть равен 8 Мб. В этом случае нужно загружать видео не превышающее 8 Мб либо обратиться в техподдержку хостинг-провайдера с просьбой увеличить размер загружаемых файлов.
3) Избежать лимита на размер загружаемых файлов можно, если не загружать видео на сайт, а загрузить видео с YouTube, введя URL в соответствующее поле:
Однако в этом случае получаются чёрные поля по краям, что выглядит некрасиво:
4) Рекомендуемые размеры видео 2000х1200 пикселей. Однако это нестандартный формат. Опытным путём я установил, что всё будет смотреться отлично и в случае если брать стандартное видео формата 1280х720 или 1920х1080 пикселей.
Ради эксперимента я из видео разрешением 3840х2160 пикселей сделал видео разрешением 2000х1128 пикселей, но оно не стало воспроизводиться по непонятным мне причинам. То есть не следует заморачиваться с подгонкой видео к рекомендуемым значениям, а можно использовать видео со стандартным разрешением.
Итак, если вы решите использовать видео заголовок, то оптимальным вариантом будет загружать видео непосредственно на сайт разрешением 1280х720 или 1920х1080 пикселей формата .mp4.
«Меню». В теме Twenty Seventeen предусмотрены две области для меню: «Верхнее меню» (в шапке) и «Меню социальных ссылок» (в подвале).
«Виджеты». Для размещения виджетов предусмотрены две области в подвале и «Боковая колонка».
«Статическая главная страница». Раздел дублирующий настройки в консоли, которые находятся в «Настройки – Чтение – На главной странице отображать».
«Настройки темы». Здесь выбирается разметка страницы (в один столбец или два столбца) и содержимое «Главной страницы».
«Главная страница» помимо собственного контента может содержать ещё до четырёх разделов. В качестве содержимого раздела указывается какая-либо страница. Можно указывать типовую страницу, например, «О нас», «Услуги», «Контакты», а можно создавать страницу специально для использования в качестве раздела для «Главной страницы».
Весь контент с указанной страницы (в том числе и изображения) будет отображаться в соответствующем разделе «Главной страницы». Таким образом, можно сделать очень привлекательную «Главную страницу».
Для увеличения возможностей по настройке можно воспользоваться плагинами, которые расширяют настройки темы Twenty Seventeen, создавая дополнительные разделы в настройках темы. Например, плагин Options for Twenty Seventeen.
Мы рассмотрели все основные настройки. В видео ниже вы можете посмотреть видеообзор темы Twenty Seventeen.
Обзор темы Twenty Seventeen
Настройка темы Twenty Seventeen на конкретном примере
Тема Twenty Seventeen достаточно универсальна и может быть использована для блогов, сайтов различных фирм и для бизнес-сайтов.
В видео ниже я покажу шаг за шагом как настроить тему под конкретные требования. В видео я разберу настройку темы Twenty Seventeen на примере сайта для ателье по пошиву одежды.
Настройка темы Twenty Seventeen
Начиная с этого выпуска, я буду периодически делать обзоры тем WordPress и показывать их настройку.
На этом я прощаюсь. До скорых встреч!
Здравствуте, Алексей. Вы знаете, что Ваше видео в полном варианте используется на другом канале?
Канал — Автоматизация любого бизнеса в Интернет.
Видео — Как настроить тему WordPress Twenty Seventeen.
Там вступление другое, а потом полностью Ваше видео
https://www.youtube.com/watch?v=mtwl3XazuMQ
Здравствуйте, Лариса! Спасибо большое за информацию. Буду разбираться.
Здравствуйте, Алексей. При настройке данной темы WP версия 4.8.2 пропало меню, верхнее и в подвале (было или нет, не знаю даже). Подскажите, как быть, может есть инструкция по настройке на новой версии или еще что… Спасибо
Здравствуйте, Андрей. Для версии 4.8.2 настройка такая же как и для предыдущих версий. Меню в теме после её установки изначально не отображается. Чтобы оно отображалось нужно зайти в настройки темы («Внешний вид – Настроить») и нажать «Сохранить и опубликовать», в начале статьи я показываю как это делать.
Как добавить количество
Содержимое раздела главной страницы ?
По-умолчанию в теме предусмотрено 4 раздела для содержимого главной страницы. Чтобы добавить 5-й раздел нужно в файл function.php добавить следующий код
add_filter(‘twentyseventeen_front_page_sections’, function() { return 5; });
Чтобы добавить больше разделов (6, 7 и т.д.) меняем 5 на соответствующее число.
Добрый день. А как в данной теме поменять остальные картинки (кофе, сендвич), те, что идут ниже? Думал подменить картинки с тем же названием в папке wp-content , но тогда нужно будет самому делать уменьшенные копии для вида планшет и телефон.
Здравствуйте! Как менять картинки я показываю в видео «Настройка темы Twenty Seventeen» (примерно на 23-25 минутах). Уменьшенные копии будут созданы автоматически, главное чтобы изначальная картинка соответствовала требованию по ширине (2000px).
Добрый вечер. После создания дочерней темы Twenty Seventeen Child стало уезжать верхнее меню, а также появилось — Эта тема не поддерживает видео заголовки на этой странице. Перейдите на главную или другую страницу, которая поддерживает видео заголовки.
Спасибо
Добрый день. Я так понимаю, что вы создали и активировали дочернюю тему и появилось это сообщение. Если так, то это ошибка в подключении дочерней темы. Посмотрите мою статью про то, как подключать дочерние темы https://aleksderk.ru/temy-wordpress/kak-pravilno-vnosit-izmeneniya-v-temu-wordpress.html и проверьте свою дочернюю тему на ошибки
Добрый день! Можно ли настроить мобильную версию этой темы?
Можно ли сделать фото в Заголовке меньше? Такое ощущение, что у меня оно выходит за пределы сайта, хотя размеры соответствуют. Спасибо
Здравствуйте!
При отображении на мобильных устройствах края изображения в заголовке скрываются, это особенность этой темы. Как будет время покопаюсь в коде, посмотрю можно ли настроить чтобы этого не происходило.
Здравствуйте, Алексей!
Спасибо за полезную информацию! Статья мне очень помогла.
Не могли бы Вы еще подсказать:
1. как изменить характеристики шрифта в хедере — Хотелось бы размер шрифта описания увеличить.
2. можно ли в хедере добавить еще одну строку, чтобы вписать свой телефон и e-mail.
Если да, то как?
Здравствуйте, Сергей! Рад, что статья оказалась полезной.
1. Чтобы поменять характеристики шрифта в хедере нужно внести изменения в файл стилей style.css. Например, чтобы увеличить шрифт описания нужно найти следующий код:
.site-description {
font-size: 16px;
font-size: 1rem;
}
И вместо 1rem поставить, например, 2rem, тогда шрифт увеличится в 2 раза. Так можно подобрать нужное значение. При этом лучше работать не с оригинальной темой, а с дочерней, так как при обновлении темы все изменения пропадут.
2. Добавить можно. Это делается через виджеты. Но в теме Twenty Seventeen в хедере отсутствует область для виджетов. Как добавлять области для виджетов описано в документации по ссылке https://codex.wordpress.org/Widgetizing_Themes. Я не пробовал, будет время изучу этот вопрос.
Спасибо большое за помощь Александр!
Я еще нашел плагин Advanced Twenty Seventeen и с ним удобно менять многие характеристики шрифтов в 2017, но почему-то у меня опция изменения цвета неактивна.
Есть еще плагин для этой темы Bold Page Builder, но у меня он работать вообще не хочет. На редактируемой странице в консоли появляется значок плагина на 1-2 секунды и тут же пропадает.
И если можно, еще вопрос: не подскажите, какой плагин лучше подойдет этому шаблону для фотогалереи. Тот виджет, который есть в теме неинтересный. Фото стоят только в 2 узких столбика посредине широкой страницы. Хотелось бы сделать 4 столбца и с возможностью увеличения размера фото при клике на нее.
Еще раз спасибо! И всего доброго!
Здравствуйте, Сергей!
У меня тоже не работает опция изменения цвета в Advanced Twenty Seventeen. Скорее всего это связано с тем, что плагин не обновлялся уже более года, а с тех пор были несколько обновлений темы и WordPress.
Bold Page Builder у меня работает. Попробуйте в консоли зайти в Настройки — Bold Builder и нажать Save. После этого у меня на редактируемой странице появилась кнопка Switch Editor.
Насчёт плагинов фотогалереи сложно сказать, что лучше подойдёт, нужно пробовать разные плагины, их очень много. Попробуйте, например, Gallery by BestWebSoft — плагин с кучей настроек и с увеличением размера фото при клике, как вы хотели. Также в настройках темы выставите разметку страницы в 1 столбец, иначе галерея будет отображаться только на пол страницы.
Спасибо, Александр за подсказки!
Bold Page Builder заработал. Осталось только с ним разобраться.
Алексей, пожалуйста, извините, что назвал Вас Александром. Просто переписывался одновременно на другом сайте с Александром. Пожалуйста, Извините.
Ничего, бывает)
Добрый день, подскажите пожалуйста, а где можно изменить общий темный цвет темы, когда выбрана темная цветовая схема? Хочется сделать темный цвет немного светлее.
Я понимаю что это делается в css, но там столько параметров!!
Здравствуйте! В данной теме при адаптации сайта в мобильном приложении меню сворачивается и перестает работать. Подскажите данную ошибку можно исправить, либо придется менять шаблон
Здравствуйте! У меня всё работает без проблем. На мобильных устройствах меню сворачивается, но раскрывается при нажатии на него. Проверьте, чтобы WordPress и тема были обновлены до последней версии.
Здравствуйте! В странице записей (на моем сайте «услуги») все записи отображаются полностью, а хочется только анонсы. Как это сделать? Спасибо.
Алексей, приветствую!
Пытаюсь поднять заголовок наверх, никак не могу понять как.
Подскажете как?