Тема Twenty Seventeen – настройка и возможности

Всем привет!

Тема 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.

«Свойства сайта». Здесь находятся стандартные настройки: логотип, название сайта, краткое описание, иконка сайта.

«Цвета». Можно выбрать цветовую схему: светлая, тёмная и пользовательская. Здесь также можно задать цвет заголовка.

«Медиафайл заголовка». Здесь находится самое интересное в теме Twenty Seventeen. Настройки позволяют оформить заголовок следующими способами: 1) видео заголовок; 2) изображение в заголовке; 3) несколько изображений в заголовке случайным образом меняющихся при каждом новом входе на сайт.

В вариантах с изображениями всё просто. Если нужно одно единственное изображение, то просто загружаете его в «Текущем заголовке». Или добавляете несколько изображений и включаете опцию «В случайном порядке».

Настройка темы Twenty Seventeen

В этом случае при каждом входе на сайт пользователь будет видеть в шапке разные изображения.

С видео заголовком немного сложнее. Здесь следует учитывать следующие нюансы.

1) Видео должно быть в формате .mp4.

2) Размер видео, которое вы хотите загрузить может превышать максимальный размер загружаемых файлов. Максимальный размер зависит от настроек сервера. Например, он может быть равен 8 Мб. В этом случае нужно загружать видео не превышающее 8 Мб либо обратиться в техподдержку хостинг-провайдера с просьбой увеличить размер загружаемых файлов.

3) Избежать лимита на размер загружаемых файлов можно, если не загружать видео на сайт, а загрузить видео с YouTube, введя URL в соответствующее поле:

Настройка видео заголовка в теме Twenty Seventeen

Однако в этом случае получаются чёрные поля по краям, что выглядит некрасиво:

Видео в заголовке сайта на Twenty Seventeen

4) Рекомендуемые размеры видео 2000×1200 пикселей. Однако это нестандартный формат. Опытным путём я установил, что всё будет смотреться отлично и в случае если брать стандартное видео формата 1280×720 или 1920×1080 пикселей.

Ради эксперимента я из видео разрешением 3840×2160 пикселей сделал видео разрешением 2000×1128 пикселей, но оно не стало воспроизводиться по непонятным мне причинам. То есть не следует заморачиваться с подгонкой видео к рекомендуемым значениям, а можно использовать видео со стандартным разрешением.


200 бесплатных сервисов


Итак, если вы решите использовать видео заголовок, то оптимальным вариантом будет загружать видео непосредственно на сайт разрешением 1280×720 или 1920×1080 пикселей формата .mp4.

«Меню». В теме Twenty Seventeen предусмотрены две области для меню: «Верхнее меню» (в шапке) и «Меню социальных ссылок» (в подвале).

«Виджеты». Для размещения виджетов предусмотрены две области в подвале и «Боковая колонка».

«Статическая главная страница». Раздел дублирующий настройки в консоли, которые находятся в «Настройки – Чтение – На главной странице отображать».

«Настройки темы». Здесь выбирается разметка страницы (в один столбец или два столбца) и содержимое «Главной страницы».

«Главная страница» помимо собственного контента может содержать ещё до четырёх разделов. В качестве содержимого раздела указывается какая-либо страница. Можно указывать типовую страницу, например, «О нас», «Услуги», «Контакты», а можно создавать страницу специально для использования в качестве раздела для «Главной страницы».

Весь контент с указанной страницы (в том числе и изображения) будет отображаться в соответствующем разделе «Главной страницы». Таким образом, можно сделать очень привлекательную «Главную страницу».

Мы рассмотрели все основные настройки. В видео ниже вы можете посмотреть видеообзор темы Twenty Seventeen.

Обзор темы Twenty Seventeen

Настройка темы Twenty Seventeen на конкретном примере

Тема Twenty Seventeen достаточно универсальна и может быть использована для блогов, сайтов различных фирм и для бизнес-сайтов.

В видео ниже я покажу шаг за шагом как настроить тему под конкретные требования. В видео я разберу настройку темы Twenty Seventeen на примере сайта для ателье по пошиву одежды.

Настройка темы Twenty Seventeen

Начиная с этого выпуска, я буду периодически делать обзоры тем WordPress и показывать их настройку.

На этом я прощаюсь. До скорых встреч!

Комментарии 23 комментария

  • Здравствуте, Алексей. Вы знаете, что Ваше видео в полном варианте используется на другом канале?

    Канал — Автоматизация любого бизнеса в Интернет.

    Видео — Как настроить тему WordPress Twenty Seventeen.

    Там вступление другое, а потом полностью Ваше видео

    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 стало уезжать верхнее меню, а также появилось — Эта тема не поддерживает видео заголовки на этой странице. Перейдите на главную или другую страницу, которая поддерживает видео заголовки.

    Спасибо

    • Добрый день. Я так понимаю, что вы создали и активировали дочернюю тему и появилось это сообщение. Если так, то это ошибка в подключении дочерней темы. Посмотрите мою статью про то, как подключать дочерние темы aleksderk.ru/temy-wordpre...u-wordpress.html и проверьте свою дочернюю тему на ошибки

  • Добрый день! Можно ли настроить мобильную версию этой темы?

    Можно ли сделать фото в Заголовке меньше? Такое ощущение, что у меня оно выходит за пределы сайта, хотя размеры соответствуют. Спасибо

    • Здравствуйте!

      При отображении на мобильных устройствах края изображения в заголовке скрываются, это особенность этой темы. Как будет время покопаюсь в коде, посмотрю можно ли настроить чтобы этого не происходило.

  • Здравствуйте, Алексей!

    Спасибо за полезную информацию! Статья мне очень помогла.

    Не могли бы Вы еще подсказать:

    1. как изменить характеристики шрифта в хедере — Хотелось бы размер шрифта описания увеличить.

    2. можно ли в хедере добавить еще одну строку, чтобы вписать свой телефон и e-mail.

    Если да, то как?

    • Здравствуйте, Сергей! Рад, что статья оказалась полезной.

      1. Чтобы поменять характеристики шрифта в хедере нужно внести изменения в файл стилей style.css. Например, чтобы увеличить шрифт описания нужно найти следующий код:

      .site-description {

      font-size: 16px;

      font-size: 1rem;

      }

      И вместо 1rem поставить, например, 2rem, тогда шрифт увеличится в 2 раза. Так можно подобрать нужное значение. При этом лучше работать не с оригинальной темой, а с дочерней, так как при обновлении темы все изменения пропадут.

      2. Добавить можно. Это делается через виджеты. Но в теме Twenty Seventeen в хедере отсутствует область для виджетов. Как добавлять области для виджетов описано в документации по ссылке 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 и тема были обновлены до последней версии.

  • Здравствуйте! В странице записей (на моем сайте «услуги») все записи отображаются полностью, а хочется только анонсы. Как это сделать? Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *