Двадцать Семнадцать является самой универсальной темой WordPress по умолчанию. Однако встроенные в тему опции оставляют желать лучшего.

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

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

Двадцать семнадцать настроек

#1 Создать меню социальных ссылок

Ну, эта первая часть - больше, чем просто взлом. Но это персонализация только на Двадцать Семнадцать.

Двадцать семнадцать имеет привлекательное меню для социальных ссылок в нижнем колонтитуле.

Двадцать семнадцать социальных ссылок

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

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

  • Давайте рассмотрим весь процесс.
  • Начните с открытия «Настройщика» (Внешний вид> Настроить).
  • Выберите вариант «Меню», затем выберите «Меню социальных ссылок».
  • Переименовать новое меню.
  • Добавьте ссылку на каждую из доступных социальных сетей.
  • Установите флажок рядом с " Социальные ссылки Меню .

Когда закончите, ваше меню должно выглядеть так:

Двадцать семнадцать страниц персонализации

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

# 2 Изменить подпись «Сайт работает на WordPress»

Ситуация с Wordpress

Есть две причины, по которым вы можете захотеть отредактировать текст в нижнем колонтитуле, который гласит, что ваш сайт «Сайт работает на WordPress». "

Возможно, вы захотите расширить его, добавив дополнительный текст: «Создается на базе WordPress, разработан WebPress Designs и размещен на LAMPress». хостинг. "

Может быть, вы хотите полностью изменить свою подпись на что-то более личное.

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

Создав и активировав дочернюю тему, скопируйте файл «footer.php». Затем откройте этот файл "footer.php" и найдите этот фрагмент кода: get_template_part ('template-parts / footer / site', 'info');.

Теперь у вас есть два варианта. Вы можете просто закомментировать эту строку, добавив «//» непосредственно перед кодом, или вы можете подумать о замене ее собственным текстом нижнего колонтитула. Вот код, который нужно добавить для создания текста нижнего колонтитула.

Пользовательский нижний колонтитул

#3 Расширенное меню навигации

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

Сначала мы начнем добавлять следующий код в вашу (дочернюю) тему:

/ * Одностраничный навигационный код * / jQuery (document) .ready (function () {/ * Добавить отступы и идентификаторы в каждый раздел первой страницы * / jQuery ("h2.entry-title") .each (function () {var panelId = jQuery (this) .html (). toLowerCase (). replace (/ s + / g, "-"); jQuery (this) .wrapInner (function () {return " ";})}) / * Убрать выделение навигационной ссылки * / jQuery ('# top-menu li'). RemoveClass ('current-menu-item current_page_item'); / * Добавить выделение при нажатии * / jQuery ('# top -menu li a '). on (' щелчок ', функция (событие) {jQuery (this) .parent (). parent (). find (' li '). removeClass (' current-menu-item '); jQuery (this) .parent (). addClass ('current-menu-item');}); / * Проверить текущий URL-адрес и выделить навигацию для текущей страницы * / jQuery ('# top-menu li a'). each (function () {var pageUrl = jQuery (location) .attr ('href'); var navUrl = jQuery (this) .attr ('href'); if (navUrl == pageUrl) {jQuery (this) .parent (). addClass ('текущий-пункт-меню');}})})

Вы можете добавить этот код на файл JavaScript загружается дочерней темой (что рекомендуется) или используйте плагин, который позволяет добавлять JavaScript на ваш сайт. Обязательно загрузите код после того, как jQuery уже загружен.

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

Кроме того, мы можем сделать перемещение к каждому разделу более плавным, установив и активировав плагин. бесплатно: JQuery Smooth Scroll.

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

Например, чтобы создать ссылку на раздел «О программе», вам нужно создать настраиваемую ссылку и использовать #about Как якорь ссылки. Дополнительные сведения см. В разделе «Как настроить тему» Двадцать Семнадцать WordPress .

Приложив немного усилий, вы получите убедительный результат:

Двадцать семнадцать результатов навигации

Это, конечно, не все, что мы можем сделать с Двадцать Семнадцать, позже мы предложим другие учебники по Двадцать Семнадцать.