Выполняем настройку WordPress-темы Twenty Seventeen

Дата публикации:Январь 3, 2017

Twenty Seventeen – новая тема по умолчанию, поставляемая вместе с WordPress 4.7. Эта бизнес-ориентированная тема значительно отклоняется от стандартных тем, выходивших ранее, и отражает более широкий переход WordPress от платформы, подходящей для блогов, к платформе, подходящей для создания всех типов сайтов.

Если вы попробуете поработать с Twenty Seventeen, вы быстро поймете: эта тема не имеет ничего общего со своими предшественниками. Ранее темы по умолчанию требовали только минимальной настройки, являясь функциональными темами «из коробки». Twenty Seventeen – другой случай.

Конечно, вы можете использовать эту тему для блогов, однако изначально она разрабатывалась для других целей. Тема создана для проектирования бизнес-сайтов, использующих секционную посадочную страницу (landing page) в качестве главной страницы – вы можете быстро понять это, изучив официальный демо-пример.

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

Знакомство с темой Twenty Seventeen

Wordpress-тема по умолчанию Twenty Seventeen

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

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

Навигация является достаточно простой благодаря использованию прилепленной верхней панели. В теме используется единственный шрифт — Libre Franklin, который применяется в разных стилях и с разным начертанием.

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

Как создать секции на главной странице в теме Twenty Seventeen

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

Ярлыки редактирования в кастомайзере

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

WordPress 4.7 также вводит новую возможность, которая носит название «видимые шорткаты (ярлыки) редактирования»  — это голубые иконки, отраженные на изображении выше. При нажатии на любой из этих ярлыков откроется соответствующее меню кастомайзера, в котором можно будет настроить данный участок сайта.

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

WordPress 4.7 также идет вместе с новой возможностью кастомайзера под названием Additional CSS. Мы уже писали про нее ранее, однако сейчас еще раз укажем на то, что это является особенностью ядра, а не отличительной чертой именно темы Twenty Seventeen.

Чтобы продемонстрировать процесс настройки темы Twenty Seventeen, я установлю тему на свой персональный сайт. Давайте приступим к этому.

Шаг 1. Создаем страницы для каждой секции главной страницы.

Создаем страницы

Для начала нам нужно будет создать несколько страниц;

  • Страницу, которая будет являться статичной главной страницей
  • Страницу, которая будет использоваться в качестве страницы блога
  • Четыре дополнительных страницы, содержащие контент, который будет выводиться в секциях главной страницы. Если вы хотите использовать страницу блога в качестве одной из секций главной страницы, то в таком случае достаточно будет создать три страницы, а не четыре.

В моем случае я создал главную страницу, страницу блога, страницу «О себе», страницу с услугами, а также страницу с контактами.

Шаг 2. Добавляем миниатюру к каждой странице.

Чтобы реализовать параллакс-эффект, необходимо добавить широкую миниатюру к каждой странице. Эта миниатюра будет являться частью секций главной страницы. Вам понадобится добавить миниатюры ко всем страницам, исключая, возможно, только главную страницу.

Добавление миниатюры к страницам

В демо-примере Twenty Seventeen используются изображения шириной в 2000 пикселей и высотой 1200 пикселей. Изображения, приближенные к данному размеру, работают прекрасно. Не используйте слишком мелкие изображения, иначе результаты будут посредственными.

Я решил воспользоваться сервисом StockSnap и отобрал изображения, изменив их размеры до 2000 пикселей на 1200 пикселей.

Шаг 3. Привязываем статичную главную страницу и страницу записей

Задаем статичную страницу

Пришла пора начать настройку темы. Переходим в кастомайзер, выбираем раздел Appearance > Customize в панели администратора или щелкаем по кнопке Customize в админ-баре.

Выбираем пункт меню Static Front Page, после чего выполняем следующие настройки:

  • Под Front page displays выбираем пункт A static page.
  • В выпадающем меню Front page выбираем главную страницу сайта.
  • В выпадающем меню Posts page выбираем страницу блога или страницу записей.

Не забудьте нажать Save & Publish. Переходим к следующему шагу.

Шаг 4. Привязываем страницы к каждой конкретной секции главной страницы.

Привязываем страницы к секциям

Чтобы привязать разные страницы, созданные ранее, к секциям на главной странице, необходимо выбрать пункт меню Theme Options в кастомайзере. Далее используем выпадающие меню для привязки каждой страницы к соответствующей секции главной страницы.

Шаг 5. Создаем базовое навигационное меню

Вы можете создать навигационное меню двумя способами: либо выбрав пункт Menus в меню кастомайзера, либо перейдя в раздел Appearance > Menus в панели администратора. Создание меню в WordPress не изменилось в версии 4.7.

Шаг 6. Добавляем видео хэдер.

Добавляем видео хэдер

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

Загружаем видео или выбираем видео из уже загруженных. Также вы можете указать URL видео с YouTube, которое будет воспроизводиться в хэдере. Если вы планируете загружать видео, учтите, что в инструкциях к теме рекомендовано загружать видео размерами 2000 на 1200 пикселей.

Я выбрал бесплатное стоковое видео для сайта. Оно было чуть меньшего размера, 1920 на 1080 пикселей, но все равно смотрелось неплохо.

Готово! Статичная главная страница с секциями создана.

An animated GIF that shows the completed Twenty Seventeen front page panels.

Создаем динамическую навигацию

Одна особенность, которая отсутствует в Twenty Seventeen – это встроенная поддержка навигации между секциями главной страницы. Было бы неплохо, если бы навигация переводила нас сразу к соответствующим секциям главной страницы. Мы можем быстро поправить этот момент.

Первое, что нам потребуется сделать – это создать меню, которое будет ссылаться на ID атрибуты, а не на разные страницы сайта. Чтобы реализовать это, создайте произвольные ссылки, напоминающие нечто подобное:

Произвольное меню с ID

При разработке ID просто используйте заголовки страниц для каждой страницы из секций. Обязательно преобразуйте заголовки в нижний регистр и замените все пробелы в заголовке на тире.

Если вы установили WordPress в подкаталог – достаточно популярная практика для сайтов, находящихся в локальной среде разработки – вам нужно будет включить подкаталог в ссылку. К примеру, для данного проекта URL моего сайта — http://localhost/wp4point7.  Это означает, что WordPress установлен в подкаталог /wp4point7. Чтобы ссылки работали корректно, нужно будет включить подкаталог в URL. Пример: /wp4point7/#about.

Если вам не нужно работать с подкаталогами, вы можете опустить этот пункт и создать структуру, показанную на изображении выше.

Как только ваша навигация будет создана, вам нужно будет добавить ID к каждой секции главной страницы. Сделать это можно двумя способами.

Самое простое решение – добавить ID непосредственно в заголовок страницы с помощью редактора записей WP.

Добавляем ID в заголовки

Обратите внимание: чтобы добавить ID, я обернул заголовок в элемент span. Сам ID – это заголовок страницы в нижнем регистре с тире вместо пробелов. Данный ID будет соответствовать тому, что мы добавили в ссылки навигационного меню. Также я добавил атрибут style и верхний отступ в 96 пикселей. Когда произойдет клик по ссылке, это значение отступа позволит вынести контент вниз, чтобы его можно было видеть под прилепленной навигационной панелью.

Честно говоря, данный подход – скорее определенный хак, чем устоявшаяся техника. Мы можем сделать все эффективнее и чище. Для этого нужно будет добавить span, id и отступы через jQuery. Это позволит избежать «загрязнения» заголовков в редакторе, но при этом мы получим тот же самый результат.

Вот код, который позволит получить тот же результат:

jQuery( "h2.entry-title" ).each( function() {
  var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-");
  jQuery( this ).wrapInner(function() {
    return "<span style='padding-top:96px;' id='" + panelId + "'></span>";
  })
})

Что он делает? Сначала мы ищем заголовок каждой секции и обертываем его в span с требуемыми стилями. Также код создает значение id, получая заголовок секции и преобразуя его в нижний регистр, меняя пробелы на тире. Таким образом, если у вас имеется секция с заголовком My Blog (как на изображении выше), данный код будет добавлять id атрибут id=’my-blog’.

Этот id соответствует синтаксису, рекомендованному мной для использования в ссылках меню.

Чтобы загрузить код на сайте, вы должны будете добавить его в одну из локаций: либо в JS-файл дочерней темы Twenty Seventeen, либо в плагин, который будет подгружать произвольный код.

Мне больше нравится второй способ. Вы можете просто воспользоваться плагином Simple Custom CSS and JS, чтобы добавить jQuery-код.

С помощью создания навигационного меню и добавления некоторого jQuery-кода мы создали удобную и практичную навигацию.

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

Добавить редиректы для тех, кто хочет перейти на одну из страниц, которая является секцией главной страницы. В таком случае пользователь будет перенаправляться на соответствующую секцию главной страницы. К примеру, можно перенаправлять страницу http://example.com/contact на страницу http://example.com/#contact.

Если вы решили использовать jQuery для навигации между секциями главной страницы, то в таком случае используйте условные теги для загрузки кода только на главной странице.

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

Выпадающее меню

Убираем надпись про WordPress из футера в Twenty Seventeen

Делается это просто. Достаточно задать в CSS-стилях правило:

.site-info { display: none; }

Также можно открыть файл footer.php в дочерней теме и удалить строку:

get_template_part( ‘template-parts/footer/site’, ‘info’ );

Почему это нужно делать в дочерней теме? Чтобы не потерять изменения при последующем обновлении темы.

Источник: https://premium.wpmudev.org

Поделиться

46 комментариев

  1. boosters says:

    добрый день! скажите пожалуйста, если тема на вордпрессе на оптимизирована под мобильное устройство, вордпресовский плагин jetpack сможет сгенерить мобильную версию?

    • Дмитрий says:

      Здравствуйте! Да, все верно. Плагин генерирует мобильную версию темы, которая выводится посетителям с мобильными ОС.

      • Ivan says:

        Рекомендую установить плагин для WPtouch Mobile Plugin. Число посетителей с мобильных устройств растёт неуклонно и такая тенденция будет продолжаться.
        По этой причине, чтобы не заморачиваться с дополнительными правками кода или плагинами, лучше сразу выбрать шаблон оптимизированный под мобильные устройства и забыть о проблемах.

  2. Mark says:

    Огромное спасибо — сэкономили мне время. С Новым Годом !
    Ваш постоянный читатель
    Марк О.

  3. boosters says:

    а если тема оптимизирована под мобильное устройство, и сверху установить jetpack с настройкой мобильной оптимизации. какая мобильная версия будет отображаться посетителю: «шаблоновская» или «плагиновская»?

    • Дмитрий says:

      Если включена мобильная тема от Jetpack, то будет использоваться именно она. Если нет, то тема по умолчанию.

  4. Давно смотрю я на новую тему от вордпресса, новые возможности движка и данной темы я проанализировал. Все очень сыро и 4.7 и сама тема, не внушают доверия, мое мнение.

  5. Да не ))) Только последние обновления, сам вордпресс офигеть как мне нравиться. )))

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

  7. Илья says:

    Многие пренебрегают дефолтными шаблонами, а зря. Шаблон действительно хорош — аккуратный, светлый, приятный.

  8. Юлия says:

    Здравствуйте! Пропал пункт в меню Настройка темы (Внешний вид — Настроить). Раньше после пункта Статическая главная страница шел как раз пункт Настройка темы, где можно было менять настройки вывода информации (в один или два столбца). А сейчас этот пункт пропал. Как его вернуть?

  9. Дима says:

    огромное спасибо за своевременный труд!

    а как увеличить ширину контента?

    на мониторах десктопов контент слишком мало занимает места

    • Дмитрий says:

      В три подхода.

      1. Увеличиваем ширину обертки

      .wrap {
      max-width: 1145px;
      padding-left: 3em;
      padding-right: 3em;
      }

      2. Расширяем область контента слева:

      #primary {
      width: 70% !important;
      }
      

      3. Ужимаем область сайдбара.

      .has-sidebar #secondary {
      width: 26% !important;
      }
      • Юлия says:

        После установки этот пункт был, это точно. Потом я стала убирать надпись в «подвале» сайт работает на WordPress. После позже решила вернуться к этому пункту, но его не обнаружила. Тему удалила, потом заново установила — не помогло.
        Я не исключаю, что что-то в разделе Внешний вид — Редактировать могла случайно удалить, не смотря на то, что все коды перед экспериментами сохраняла, а потом на место вставляла.

        • Дмитрий says:

          Попробуйте перейти вручную на страницу настроек. Откроется ли она?
          Вбейте в адресную строку браузера:

          http://url_вашего_сайта/wp-admin/customize.php

          Вместо url_вашего_сайта подставьте адрес вашего сайта.

          Если перейдет на страницу, то значит просто что-то сломалось в админке, но сама система работает. Если же не откроется, то проблемы серьезные и спасет только переустановка WP.

          • Юлия says:

            Перешёл на страницу.Но в пунктах меню так и не появился пункт Настройка темы. Пункты меню:
            Свойства сайта
            Цвета
            Медиафайл заголовка
            Меню
            Виджеты
            Статическая главная страница
            Дополнительные CSS.
            Вот после Статической главной страницы и шёл пункт Настройки темы. А у меня он пропал.

            • Дмитрий says:

              Видимо какие-то локальные перебои с WordPress. Бывает, что помогает ручное обновление до последней версии.

              • Юлия says:

                Но у меня, я так понимаю, и так последняя версия.
                В этом пункте меню были настройки вывода информации на странице: в два столбца или в один. Т.е. название статьи было слева, а сама статья справа. А когда этот пункт пропал, название и статья стали в одном столбце.

                • Дмитрий says:

                  Тогда понятно. Значит проблема вряд ли связана именно с WP. Видимо, какие-то из правок привели к тому, что в теме перестал работать этот функционал. Непонятно только, почему после переустановки темы она все равно работает не так, как положено. У вас стоят плагины кэширования? Если да, то вы чистили кэш после внесения изменений?

                  • Юлия says:

                    Нет, не стоят.

                    • Юлия says:

                      После многократных переустановок wordpress, я наконец поняла в чем дело! Пишу, может кому пригодиться.
                      Этот подпункт Настройки темы пропадает, если в Настройках — Чтение выбрать, чтобы на главной странице отображались ваши последние записи. И появляется обратно, если выбрать Статическую страницу! Вот так вот всё просто оказалось)

  10. Дима says:

    спасибо!

  11. Юрий says:

    День добрый ! Спасибо за статью. Подскажите, как настроить , чтобы главная была на всю ширину , а другие страницы с колонкой (сайдбаром) . Необходимо создать шаблон страницы ? А как

  12. Юрий says:

    Спасибо за ответ! Там есть тонкость. При создании шаблона надо указать
    А в теме стоит функция в файле сайдбара if ( ! is_active_sidebar( ‘sidebar-1’ ) ) {
    return;
    }.
    Я так понимаю пока не активна отметка. Сайдбар не показывается. Как быть . Я не очень силен ( понимаю, но сказать не могу :). Может убрать эту функцию и переименовать файл сайдбара и его подключит типа .Но как разве возможно

  13. Юрий says:

    Извиняюсь, срезало . Возможно ли — php get_sidebar2(); Т.Е. назвал файл sidebar2 ?

  14. Юрий says:

    Там еще есть php dynamic_sidebar( ‘sidebar-1’ ); Что написать вместо ‘sidebar-1’

    • Дмитрий says:

      Вообше, можно попробовать добавить в functions.php:

      function twentyseventeen_body_classes_child( $classes ){
      if ( is_active_sidebar( 'sidebar-1' ) &&  is_page() ) {
      		$classes[] = 'has-sidebar';
      	}
      	return $classes;
      }
      add_filter( 'body_class', 'twentyseventeen_body_classes_child' );

      Потом открываете page.php и в самом низу меняете код на следующий:

      </main><!-- #main -->
      	</div><!-- #primary -->
      	<?php get_sidebar(); ?>
      </div><!-- .wrap -->
      
      <?php get_footer();

      Все, в принципе. Должен появиться сайдбар у страниц. Но тут есть одна тонкость — если потом захотите обновить тему, то все изменения пропадут. Чтобы не пропали, нужно создавать отдельную дочернюю тему, но это уже совсем другая история.

  15. Юрий says:

    Еще раз спасибо. Перерыл интернет и не мог найти.

  16. roma says:

    огромное спасибо

  17. Роман says:

    Добрый день, а как установить атрибут для ссылок соцсетей… target=»_blank»

    • Дмитрий says:

      Вообще, когда создаете меню, есть опция Link Target для пунктов. Если ее нет, то открываете Screen Options и там включаете ее. Если нужно, то можно и просто установить атрибут вручную. Смотря где вы вообще выводите эти пункты.

  18. Юлия says:

    Добрый вечер! Установила в этой теме плагин bbpress для создания форума. Но когда регистрируется новый пользователь, ничего ему на почту не приходит (хотя пишет, что Вам на почту отправлена ссылка и т.д.). Что с этим делать?

    • Дмитрий says:

      Бывает, что фильтры почты настроены достаточно жестко. Бывает, что попадает в Спам. Попробуйте для начала протестировать, приходят ли вообще регистрационные письма в WordPress (т.е. на каком уровне эта проблема — на уровне WP или на уровне BBpress). Далее можно будет попробовать установить альтернативные плагины для отправки писем. К примеру, такой https://wordpress.org/plugins/wp-smtp/, хоть он и устарел. Или посмотреть альтернативы ему. Но там понадобится настраивать плагин.

  19. Здравствуйте!
    Образовалась такая проблема.
    Установил в настройках статические страницы — Главная и Блог.
    На странице Блог записи стали выводиться полностью, не в укороченном виде.
    Что я сделал не так?

    • Дмитрий says:

      В записях нужно проставлять тег More в некоторых темах. Он есть в редакторе.Вставьте его в запись в каком-нибудь месте и проверьте работоспособность.

  20. Да, Дмитрий, верно, сработало.

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

    Переустановил вордпресс и записи автоматически стали выводиться анонсами.

  21. Александр says:

    У меня не показывает демо контент из этой темы. Все говорят что надо всего лишь нажать «Опубликовать» и все появится. Я переустанавливал ВП, тему, ничего не помогает. Думаю может дело в том что изначально на хостинге установилась более старая версия, я обновил и поэтому не показывает. А те кто сразу ставит последнюю версию у них он отображается. Но а мне то что делать?

Оставить комментарий

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

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