Как добавить виджеты для сайта WordPress?

Как добавить виджеты для сайта WordPress?

Приветствую вас, дорогие друзья!

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

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

Как правило, в теме предусмотрено две области виджетов для сайта WordPress: в сайдбаре и в подвале. Но в зависимости от темы, количество доступных к использованию областей может меняться.

Так же может отличаться и набор виджетов. Расширить набор виджетов для сайта WordPress можно, добавив необходимые вам плагины.

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

Как добавить виджет для сайта WordPress?

Добавление виджета для сайта WordPress происходит очень просто. Вам для этого нужно:

  1. 1.Перейти в раздел главного меню «Внешний вид»«Виджеты»
  2. 2.На открывшейся странице нам доступны для работы две области. Слева расположена область с доступными для использования виджетами, а с права расположены области, в которых можно эти виджеты разместить:
    Страница добавления виджетов
    Обратите внимание. В данной теме изначально уже доступно для использования четыре области виджетов.
  3. 3.Далее, выбираем нужный нам виджет и, кликнув по нему, в открывшемся раскрывающемся списке выбираем нужную область. После чего, нажимаем на кнопку «Добавить виджет».
    Добавляем виджеты на сайт WordPress
  4. 4.В выбранной области появится новый элемент, доступный для настройки. Задаем ему заголовок, настраиваем или добавляем нужную информацию и нажимаем на кнопку «Сохранить».
    Сохранить виджет

Как объявить свою область виджетов WordPress?

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

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

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

Для объявления свое области виджетов нам нужно:

  1. 1.В редакторе кода NotePad++ открываем файл functions.php, который находится в папке с активной темой, по пути:

    В этой статье вы найдете инструкцию по работе с NotePad++:
    «Редактирование файлов сайта в Notepad++»
  2. 2.Далее, нам нужно найти в этом файле фрагмент кода, в котором происходит объявления области с помощью функции register_sidebar. Для этого открываем поиск нажатием CTRL+F, вставляем в строку поиска название функции и нажимаем на кнопку «Искать далее»:
    Поиск в NotePad++
  3. 3.Теперь нам нужно скопировать один из таких фрагментов кода и поставив после последней такой записи несколько «Enter-ров» вставить его ниже.
    Вставляем фрагмент кода
  4. 4.Теперь нам нужно изменить здесь несколько строк:
    1. 1.)В поле ‘name’ заменяем значение в скобочках ‘Masthead’ на наше, например ‘TopBar’. Здесь задается название области виджетов, которое будет отображаться в разделе «Внешний вид»«Виджеты».
    2. 2.)В поле ‘id’ задаем уникальный идентификатор нашей области. Например, с topbar:
    3. 3.)В поле ‘description’ задаем описание области.
  5. 5.Вот, что в результате должно получиться:

    Данный фрагмент кода вы можете использовать для объявления области виджетов у себя на сайта. Но иногда, попадаются темы, в которых разработчики используют немного другой вариант объявления. Поэтому, я вам рекомендую брать фрагмент кода из своей темы и исправлять его.
  6. 6.Далее сохраняем файл и в браузере переходим в раздел «Внешний вид»«Виджеты». Здесь должна появиться новая область:
    Своя область виджетов

Как вывести свою область виджетов на сайте WordPress?

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

  1. 1.Так как мы делаем топбар, то он должен располагаться над шапкой сайта. Соответственно, нам нужно добавить вывод области в файле header.php, который, так же как и functions.php, находится в папке с активной темой.
  2. 2.Открываем его в NotePad++ и вставляем следующий фрагмент кода сразу же после открытия тега <body>:

    Вот так:

    Вывод области виджетов на страницу сайта

    В данном фрагменте мы добавляем блок с произвольным идентификатором topbar-inner, в котором находится функция dynamic_sidebar, предназначенная для вывода на страницы сайта новой области. Здесь нам нужно вставить название идентификатора, которое мы задавали при объявлении области.

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

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

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

Успехов вам в создании своего сайта и до встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

3 комментария

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

  2. Здравствуйте Юлия, а подскажите пожалуйста, что за плагин создаёт такую красивую форму подписки, как у Вас под статьёй и что за плагин отвечает ща такие красивые социальные иконки?

    • Здравствуйте, Юрий!
      Форма и соцсети выводится не плагином. Я вручную их верстала и выводила в коде :)

Добавить комментарий

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif