WordPress настройка темы twenty seventeen

Тема Twenty Seventeen: настройка контента на всю ширину страницы с сайдбаром

В обновлении платформы WordPress версии 4.7 была добавлена новая официальна тема оформления под названием Twenty Seventeen (двадцать семнадцать – год выпуска). Она сразу стала довольно популярной, и на данный момент активных ее установок превышает более одного миллиона.

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

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

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

Twenty Seventeen: Сайдбар на страницах

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

Шаг 1

Копируем файл page.php и переименовываем его в page-sidebar.php . Вверху этого файла удаляем весь комментарий от строки 2 до 16, вместо него вставляем эту надпись:

В середине этого файла найдите такой код:

Замените его на следующий:

Затем, в самом низу после закрывающего блока

Шаг 2

Теперь нам нужно скопировать папку template-parts, но все ее содержимое нам не нужно, поэтому удаляем в ней все кроме папки page, а в этой папке удалите файл content-front-page-panels.php . В итоге должно остаться два файла: content-front-page.php , content-page.php .

Переименовываем файл content-page.php в content-page-sidebar.php и сразу открываем его. В 16 строке меняем класс в теге header.

И в строке 20, блок контента, меняем класс.

Шаг 3

Открываем файл functions.php и вставляем небольшое условие.

Шаг 4

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

Источник

Настройка темы Twenty Seventeen за 7 шагов

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

Однако, если вы не знаете с чего начать, процесс настройки покажется вам немного сложным. Эта статья поможет вам настроить и запустить свой сайт на WordPress за 7 шагов. Не тратьте много времени на технические моменты, потратьте его на свое дело.

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

В качестве примера рассмотрим сборку сайта-визитки частного консультанта Маши Петровой 🙂

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

Шаг 1. Знакомство с настройкой

Сразу после установки движка в консоли админки нажимаем кнопку «Настройте свой сайт»

В разделе настройки видим, что слева расположено меню для настройки, справа — вид сайта по умолчанию.

Обратите внимание на структуру меню:

Тут же мы видим ярлычки редактирования — это такие голубые иконки, при нажатии на которые открывается соответствующие настройки для данного участка сайта.

Шаг 2. Меняем название сайта

Меняем название сайта, нажав на иконку, или открываем пункт «Свойства сайта»:

Шаг 3. Меняем медиафайл в шапке

Тема Twenty Seventeen позволяет установить в шапке видео и альтернативную картинку (она будет показываться на внутренних страницах).
Видео не должно превышать 8 МБ, а его рекомендованный размер 2000 на 1200 пкс. Такие же размеры используем для картинок.
Меняем медиафайл шапке. Щелкаем на ярлык редактирования или открываем пункт «Медиафайл заголовка»

Настраиваем шапку – добавляем видео и альтернативную картинку.

Шаг 4. Меняем структуру меню

Изменим структуру меню, добавив страницу «Услуги». Нажимаем на иконку возле меню или пункт «Меню»:

Настраиваем меню – добавляем новый пункт «Услуги».

Шаг 5. Настройка главной страницы

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

Установим разметку в 1 столбец.

Далее, как мы видим, структура главной страницы включает 5 секций:
1. В самом верху — содержимое «Главной страницы»
2. Содержимое 1 раздела главной страницы — «Раздел главной страницы»
3. Содержимое 2 раздела главной страницы — «О нас»
4. Содержимое 3 раздела главной страницы — «Блог»
5. Содержимое 4 раздела главной страницы — «Контакты»

Изменим структуру под себя, сделаем так:
1. В самом верху — содержимое «Главной страницы»
2. Содержимое 1 раздела главной страницы — «Раздел главной страницы» — потом переименуем в «Мои услуги»
3. Содержимое 2 раздела главной страницы — «Блог»
4. Содержимое 3 раздела главной страницы — «Контакты»

Шаг 6. Меняем картинки — превью

Затем переходим к списку страниц и меняем картинки-превью на свои в тех страницах, которые выводятся на главной.

Делаем это на страницах:
«Блог»
«Контакты»
«О нас» — кстати, тут изменим название на «Об авторе»
«Раздел главной страницы» — меняем название на «Мои услуги»
«Услуги»

Смотрим как можно изменить картинку на примере страницы «Об авторе»

Посмотрим, как изменилась главная, например, на телефоне:

Видим, что надо изменить секцию «Контакты» в подвале.

Шаг 7. Меняем контакты в подвале

Чтобы быстро перейти в режим редактирования, жмем на ссылку «Настроить» в верхней части сайта. Переходим в подвал, нажав на ярлык редактирования меняем секцию «Контакты».

Вот и все! Главная страница обновлена. Осталось заполнить разделы сайта своим контентом.

То, что получилось в результате, можно увидеть по ссылке

Источник

Как настроить WordPress-тему Twenty Seventeen

Twenty Seventeen – новая тема по умолчанию, поставляемая вместе с WordPress 4.7.

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

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

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

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

Знакомство с темой 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 пикселей, но все равно смотрелось неплохо.

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

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

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

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

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

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

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

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

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

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

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

Этот 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-стилях правило:

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

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

Источник