Двадцать Семнадцать является самой универсальной темой WordPress по умолчанию. Однако встроенные в тему опции оставляют желать лучшего.
В этом уроке я покажу вам пять способов настроить эту тему в соответствии с вашими предпочтениями. ваш блог. Мы начнем с основ и перейдем к более сложным и эффективным настройкам.
Когда мы закончим, вы сможете превратить Twenty Seventeen в красивый и современный сайт для бизнеса или блогов. Ты мне не веришь? Посмотрите, вот что вы можете создать:
#1 Создать меню социальных ссылок
Ну, эта первая часть - больше, чем просто взлом. Но это персонализация только на Двадцать Семнадцать.
Двадцать семнадцать имеет привлекательное меню для социальных ссылок в нижнем колонтитуле.
Проблема в том, что некоторые пользователи сообщают, что им трудно понять, как добавить ссылки на социальные сети в это меню. К счастью, это действительно очень просто, если вы знаете, как это сделать.
Все, что вам нужно сделать, это создать меню со ссылками на ваши социальные сети и назначить его местоположению меню социальных ссылок.
- Давайте рассмотрим весь процесс.
- Начните с открытия «Настройщика» (Внешний вид> Настроить).
- Выберите вариант «Меню», затем выберите «Меню социальных ссылок».
- Переименовать новое меню.
- Добавьте ссылку на каждую из доступных социальных сетей.
- Установите флажок рядом с " Социальные ссылки Меню .
Когда закончите, ваше меню должно выглядеть так:
Последний шаг - нажать кнопку «Сохранить и опубликовать» в настройщике, чтобы сохранить новое меню. Ваши ссылки на социальные сети теперь будут отображаться в меню внизу страницы.
# 2 Изменить подпись «Сайт работает на 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 .
Приложив немного усилий, вы получите убедительный результат:
Это, конечно, не все, что мы можем сделать с Двадцать Семнадцать, позже мы предложим другие учебники по Двадцать Семнадцать.
странно,
символы с диакритическими знаками не принимаются! Вместо этого у меня возникают вопросительные знаки.
ps: спасибо за эти советы в любом случае!
Привет Нико,
Иногда используйте вместо этого:
é
'(аппостроф)
Привет,
Я выполнил ваши инструкции, но мои значки появляются только в мобильной версии моего блога, а не в версии для ПК, если вы можете мне помочь, это было бы здорово!
спасибо,
Джули
Bonsoir,
можешь скрины поделиться?
Привет,
вы должны проверить, что стиль меню реально загружен. Вы также можете проверить код меню, чтобы убедиться, что теги, которые несут иконы присутствуют.