Пропустить

3 новая тема пользовательских настроек Двадцать Семнадцать

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

# 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 .

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

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

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

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

Эта статья содержит комментарии 5

  1. странно,

    символы с диакритическими знаками не принимаются! Вместо этого у меня возникают вопросительные знаки.

    ps: спасибо за эти советы в любом случае!

  2. Привет,

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

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

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх