Как добавить в шаблон собственную область для вывода виджетов

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

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

Иногда хочется добавить в существующий шаблон собственную область виджетов и WordPress предоставляет для этого простые и удобные инструменты.

Рассмотрим добавление области виджетов в тему на простом примере. Здесь я предполагаю, что у читателя есть базовые знания php и структуры шаблонов WP.

Добавим в шапку сайта область для наполнения такими элементами как контактные телефоны.

Для этого потребуется выполнить 3 шага:

  1. зарегистрировать новую область виджетов в файле functions.php;
  2. наполнить ее информацией в панели управления;
  3. сделать вывод области в вашем шаблоне.

Регистрация области виджетов производится специальной функцией register_sidebar.

Основные параметры здесь означают:

  • name — заголовок виджета;
  • description — описание;
  • id — идентификатор.

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

Затем выводим область виджетов в нашей теме (у меня это нужно сделать внутри тега header, чтобы выводилось на всех страницах). Делается это функцией dynamic_sidebar, в качестве аргумента для которой указываем наш идентификатор top-area.

Применяем необходимо стилевое оформление к элементу и вот как он выводится у меня. Здесь правда слева еще один виджет с адресом компании.
widget2

Теперь клиент может самостоятельно изменять телефоны и адрес в шапке на своем сайте.

Оцените статью
Делаем сайт своими руками
Комментарии: 26
  1. Николя

    Спасибо большое! Работает!

    Ответить
  2. Сергей Игоревич Самохвалов

    Большое спасибо. Редко найдешь доходчивую статью! Все работает.

    Ответить
  3. валентин

    помогите, все вроде вышло — 1 и 2 пункты. а вот с третьим — не получается.
    нужно вставить тут: http://prntscr.com/db0fci, а оно не там вылазит..

    Ответить
    1. Ложников Андрей (автор)

      Сейчас на сайте там уже видно телефон.

      Ответить
  4. Ложников Андрей (автор)

    Денис, это сильно зависит от верстки темы. Обычно свойства display: inline-block и float: left помогают выстроить элементы по горизонтали.

    Ответить
  5. Сергей

    Вопрос такой, как сделать так что бы некоторые дивы были скрыты пока этот виджет не включен?

    Ответить
    1. Ложников Андрей (автор)

      А что значит «виджет включен»?

      Ответить
  6. Андрей

    Как разместить два виджета рядом?
    То есть как в вашем примере: виджет с адресом, а рядом виджет с телефоном.

    Ответить
    1. Ложников Андрей (автор)

      нужно или в одном виджете разместить 2 элемента или сделать 2 разных виджета

      Ответить
      1. Андрей

        Какой код применить чтобы сделать 2 разных виджета (как в вашем примере — адрес и телефон)?

        Ответить
        1. Ложников Андрей (автор)

          сделайте 2 функции
          register_sidebar( array(
          ‘name’ => __( ‘Телефон в шапке’, » ),
          ‘id’ => ‘top-area’,
          ‘description’ => __( ‘Шапка’, » ),
          ‘before_widget’ => »,
          ‘after_widget’ => »,
          ‘before_title’ => ‘

          ‘,
          ‘after_title’ => ‘

          ‘,
          ) );
          с разными значениями id

          Ответить
          1. Андрей

            так сделал.
            а как же их разместить рядом?
            в header указал:

            и виджеты встали друг под другом, а не рядом.
            что и где исправить?
            или что-то не дописал?

    2. Ложников Андрей (автор)

      позиционирование элементов делается через стили. Нужно добавить инструкции в файл style.css

      Ответить
      1. Андрей

        Спасибо за помощь!
        А вы что указали в style.css чтобы элементы (функции) расположить рядом?

        Ответить
        1. Ложников Андрей (автор)

          можно оформить 2 элемента в разные div. И для этих div указать свойство display: inline-block. Тогда они будут находится горизонтально на одной строке.

          Ответить
  7. Сергей

    После ввода этой фукции:

    ничего не меняется. Хотя и внутри тега и вне его добавляю. Мне кажется что именно эту функцию надо в другом фале добавлять, т.к. есть еще родительская тема. Это в function.php тоже добавляется, правильно?

    Ответить
    1. Ложников Андрей (автор)

      название функции пропало

      Ответить
  8. Сергей

    Admin! Поясните по человеческий, как нормально написать виджет Телефон в шапке.
    Не выходит область area в виджета

    Ответить
    1. Ложников Андрей (автор)

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

      Ответить
  9. Grace

    Помогите, пожалуйста(( Что можно попробовать? Вместо виджета в шапке появляется вторая шапка под меню.
    https://prnt.sc/jlkibe

    Ответить
    1. Ложников Андрей (автор)

      Grace, можете прислать адрес сайта. Нужно посмотреть код.

      Ответить
  10. Руслан

    Чтобы расположить виджеты в новой зоне сайдбара, в той папке, куда вы его вставили (не зарегистрировали, а вставили — index, woocommerce, header или другая)

    В этом варианте будет использоваться принцип колонок самого вордпресса — все вставленные виджеты нового сайдбара расположатся колонками в одной общей зоне (если ей задать background цвет, то станет понятно). Это адаптивный вариант.
    Есть еще вариант в котором создается несколько отдельных новых сайдбаров, они регистрируются и вставляются как описано выше. Style каждого нужно прописать отдельно. Колонками их сделают параметры display: inline-block; и vertical-align: bottom;- этот «приклеит длину к низу, а top «приклеит» к верху:

    Так же описываете второй, третий, сколько угодно сайдбаров
    В этом варианте width лучше прописать не в px, а в %. Вариант не адаптивный. Чтобы сделать резиновым нужно мудрить дальше.
    И есть третий вариант, описанный самим вордпрессом, оставлю ссылку: https://ru.support.wordpress.com/advanced-html/. Тоже не адаптивный способ.

    Надеюсь, кому-то поможет. Я не программист, насколько это правильно, я не знаю, но у меня сработали все три варианта. На сайте стоит первый вариант — новый сайдбар в который вставлены виджеты фильтрации woocommerce, соответственно, вставлено в woocommerce.php и работает как фильтр ajax, но с перезагрузкой страницы.
    Шаблон темы вордпресс у меня на гутенберге — возможно это важно.

    Ответить
  11. Вадим

    Огромное спасибо! Нашёл единственный рабочий плагин способный нормально отобразить RSS из Livejournal, это Superr RSS Reader, но он работает только в виджетах, а мне нужно было на всю ширину страницы. Благодаря Вашим советам создал новую область виджета (на всю ширину) и всё работает!

    Ответить
  12. Елена

    Спасибо большое за ваше руководство!
    Мучилась, мучилась, вообще не понимаю, почему не все шаблоны Вордпресса дают возможность разместить виджет под текстом, а не сбоку и не сверху.

    Ответить
  13. Екатерина

    Пожалуйста, подскажите, как разместить виджет в строку самом верху страницы.
    Это должно быть официальная ссылка на регистрацию учреждения в ЕСИР
    Код для вставки:

    Помогите человеку, который много лет работал в другом конструкторе

    Ответить
    1. Ложников Андрей (автор)

      Екатерина, в вашем случае можно просто добавить код для вывода ссылки в файл header.php, чтобы не разбираться с виджетами. header.php — как правило это файл, отвечающий за вывод шапки сайта.

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