Несколько виджетов в одном сайдбаре вордпресс программируем. Сайдбары в WordPress. Как добавить свой сайдбар

Большинство шаблонов WordPress оснащены сайдбарами с областями виджетов. Это позволяет поместить в боковую колонку тот или иной , и таким образом увеличить функциональность сайта. Сайдбар WordPress традиционно выполняется в вертикальном виде в боковой колонке. Но это вовсе не аксиома.

Сайдбар WordPress может быть и горизонтальным, и располагаться вверху или внизу сайта. Это пространство тоже может быть полезно использовано виджетами. В этой статье мы покажем вам, как сделать такую область виджета под контентом, то есть внизу сайта. Мы не будем применять распространённый метод, связанный с PHP программированием и редактированием шаблона. Мы покажем более простой способ – плагин.

Горизонтальный нижний сайдбар WordPress с плагином Add Widget After Content

По названию плагина Add Widget After Content уже понятно, для чего он нужен. Он добавляет сайдбар WordPress (а, соответственно, и область виджетов) после контента, то есть внизу сайта. Плагин отличается простотой и мягким методом работы, то есть он безопасно инъекцирует новый сайдбар в установленный шаблон, и если функциональность плагина вас не устраивает, вы можете удалить его и вернуть всё так, как было. Это не создаст больших затрат времени.

Чтобы начать работать с плагином, скачайте его, установите и активируйте. Чтобы появился новый сайдбар WordPress, необходимо сначала настроить это дополнение. Для этого переходим в пункт консоли «Внешний вид» и выбираем подпункт «Add Widget After Content Options». Как и было сказано вначале, здесь всё очень просто, всего две опции:

• Post Types. Выбираем, в каких типах контента будет отображаться новый сайдбар WordPress. Можно выбрать записи и страницы. Также плагин поддерживает и пользовательские типы контента, которые имеются в установленном шаблоне.
• Post Formats. Выбираем? в каких форматах контента будет отображаться дополнительный сайдбар. Так же, как и в первом случае, есть поддержка костюмных типов форматов.

Выполните соответствующие настройки и сохраните изменения. Теперь перейдите в пункт консоли «Внешний вид» и выберите подпункт «Виджеты». В первой части, где указывается перечень имеющихся сайдбаров WordPress, вы увидите новый, который называется «After content». Теперь можно в него перетаскивать нужные виджеты, и смотреть, как это всё будет выглядеть на сайте.

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

Для добавления необходимых плагинов и дополнений на страницу в WordPress необходимо просто перетащить в админке интересующий вас виджет на sidebar. Таким образом, даже новички в движке WordPress могут без осложнений видоизменить свою боковую панель (и не только её).

Порой разработчики темы предоставляют на выбор несколько возможных сайдбаров, куда вы можете перетащить widget . Но бывают и темы, где сайдбаров 1-2, и они используются чисто для нужд самой темы (то есть новые виджеты вы туда запихнуть не сможете).

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

Для начала необходимо зарегистрировать ваш сайдбар. Это можно сделать в файле functions.php в папке с шаблоном. Некоторые разработчики шаблонов создают спец. функцию по регистрации сайдбаров. К примеру, function twentyten_widgets_init() {} . Это не принципиально. Просто найди то место в коде, где происходит регистрация. Выглядит это примерно так:

Register_sidebar(array("name"=>"Site description", "before_widget" => "

Как добавить свой сайдбар?

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

Register_sidebar(array("name" =>"Second sidebar", "id" => "secondary-widget-area", "before_widget" => "

", "after_title" => "

Name — название вашего sidebar. оно будет отображаться в админке.

id — уникальный идентификатор. Он вам понадобиться при добавлении на страницу (об этом ниже).

before_widget — код/текст, который будет вставлен перед каждый виджетом.

after_widget — соответственно, код/текст, который будет вставлен после каждого виджеа.

before_title — код/текст, который будет вставлен перед заголовком виджетов.

after_title — код/текст, который будет вставлен после заголовком виджетов.

После добавления выше приведённого кода в файл, сохраните его и зайдите на страницу виджетов в административной панели. Теперь точно так же, как и с остальными сайдбарами, вы можете перетаскивать на новый необходимые виджеты. Чтобы этот сайдбар отобразился на вашем веб-сайте, вам нужно открыть соответствующий файл шаблона, а именно sidebar.php , и найти код:

Вам необходимо в том месте, где вы хотите видеть свой сайдбар, добавить его между открывающим и закрывающими тегами. Будет примерно так:

Как вы уже наверно заметили secondary-widget-area при выводе на странице — это имя сайдбара. Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php . Теперь, редактируя файл style.css придать сайдбару нужный вид.

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

• Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
• Сайдбар в WordPress — это любая область на сайте, в которой выводятся виджеты;

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

Единственное отличие определения сайдбара в WordPress это то, что он может находится где угодно на странице сайта (но чаще всего это боковые колонки справа и слева от контента и футер).

В этом шагу мы рассмотрим пошагово как создать два сайдбара — один в боковой колонке и один в подвале (футере) сайта.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.

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

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php:

function true_register_wp_sidebars() { /* В боковой колонке - первый сайдбар */ register_sidebar( array ( "id" => "true_side" , // уникальный id "name" => "Боковая колонка" , // название сайдбара "description" => "Перетащите сюда виджеты, чтобы добавить их в сайдбар." , // описание "before_widget" => "

" , // по умолчанию заголовки виджетов в

"after_title" => "

" ) ) ; /* В подвале - второй сайдбар */ register_sidebar( array ( "id" => "true_foot" , "name" => "Футер" , "description" => "Перетащите сюда виджеты, чтобы добавить их в футер." , "before_widget" => "

" , "after_widget" => "

" , "before_title" => "

" , "after_title" => "

" ) ) ; } add_action ( "widgets_init" , "true_register_wp_sidebars" ) ;

Вот что получилось у меня на странице Внешний вид > Виджеты:

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

Шаг 2. Как отобразить сайдбары на страницах сайта?

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

В двух словах о том, для чего нужны эти функции:

• — проверяет, есть ли в сайдбаре виджеты,
• — выводит сайдбар;

Давайте теперь выведем те два сайдбара, которые мы создавали в прошлом шаге. И начнем с боковой колонки:

Куда вставлять код? Ну где хотите вывести сайдбары, туда и вставляйте. Не уверены в какой файл? Ну, вообще это полностью зависит от вашей темы, но вероятнее всего, что код боковой колонки вставлять в sidebar.php , а код футера в footer.php . Возможно вам ещё пригодится документация функций и .

Каждый из нижеперечисленных советов поможет избежать весьма серьёзных багов на сайте, однако, если вы хорошо разбираетесь в PHP и WordPress, ничего нового из этих советов вы не узнаете.

• Если выводимый садбар не имеет виджетов, то при помощи if и else можно задать код, который будет выполняться в этом случае:

  if ( is_active_sidebar( "true_foot" ) ) : dynamic_sidebar( "true_foot" ) ; else : // код по умолчанию на случай, если сайдбар пустой endif ;

• Не нужно использовать PHP-функцию function_exists() для функции и других функций WordPress. Просто иногда используют. Это ни к чему.
• Некоторые подключают файл sidebar.php через include() или require() . Чего вы хотите этим добиться? Увеличения производительности? Сомневаюсь, что причина медленной загрузки вашего сайта кроется именно в этом. А для подключения sidebar.php используем специально предназначенную для этого функцию

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

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

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

1. SiteOrigin Widgets Bundle (бесплатный)

Плагин для виджетов, который можно назвать «всё-в-одном». Он имеет 20 замечательных виджетов и все необходимые функции.

Вот некоторые из его опций:

• Кнопки призыва к действию.
• Контактная форма.
• Карты Google.
• Таблица цен.
• Отзывы.
• Слайдер изображений.

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

2. WooSidebars (бесплатный)

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

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

3. Relevanssi (бесплатный)

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

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

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

4. Ninja Forms (бесплатный)

Сайдбар – удобное место для размещения контактной формы, где ваши посетители смогут вас найти.

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

5. Testimonials Widget (бесплатный)

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

Testimonials Widget позволяет отображать отзывы в виде текста, изображений или видео в стильных слайдерах. Вы сможете отображать отзывы на основе определённой категории.

6. Recent Posts Widget Extended (бесплатный)

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

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

7. WordPress Popular Posts (бесплатный)

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

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

8. Contextual Related Posts (бесплатный)

Related Posts является наиболее сложным навигационным виджетом – требуется алгоритм для определения сопутствующих записей.

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

9. Monarch (с Elegant Themes Membership от $89/год)
Большинство из нас уже добавили кнопки социальных сетей в свои блоги – почему бы и нет? Однако далеко не все блоггеры понимают, что область сайдбара – отличное место для подобных кнопок.

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

10. Image Widget (бесплатный)

Хотите сделать свой сайт более привлекательным? Тогда почему бы не использовать область сайдбара для демонстрации изображений?

Если вы хотите разместить отдельное изображение, Image Widget является прекрасным выбором.

Image Widget позволяет отображать любое изображение из вашей библиотеки. Также вы сможете регулировать настройки изображения, такие, как размер, выравнивание и заголовок. Можно вставить в изображение свой URL-адрес, на который пользователь перейдёт при клике.

11. Instagram Feed (бесплатный)

Возможно, вы изображениям из своей медиа-библиотеки предпочитаете изображения из Instagram? Если это так, то данный плагин подойдёт вам как нельзя лучше. При 300 000+ загрузках он имеет прекрасный рейтинг – 5 из 5.

Instagram Feed позволяет отображать миниатюры, средние и полноразмерные изображения. Вы сможете также использовать несколько Instagram аккаунтов. Изображения не должны быть из вашей учётной записи – но вы сможете отображать изображения из любого неприватного аккаунта. И, если посетителям понравится то, что они видят, они смогут выбрать для загрузки дополнительные изображения, нажав кнопку «Загрузить ещё».

12. Slider Revolution ($19)

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

Имеющий мощный набор функций и доступную цену, WinningWP недавно заявил, что Slider Revolution – лучший слайдер-плагин. Он имеет в комплекте специальный виджет для слайдера, позволяющий размещать прокручиваемые изображения в любой области виджета.

13. Compact Archives (бесплатный)

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

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

14. Meks Smart Author Widget (бесплатный)

Meks Smart позволяет отображать информацию об авторе в стильном виджете. Его можно использовать как для блогов с несколькими авторами, так и для персональных блогов.

15. Thrive Leads (от $67)
Большинство тем WordPress отображают сайдбар на каждой странице. Такой подход позволяет использовать область сайдбара для отображения списка адресов электронной почты.

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

16. Taqyeem ($22)

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

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

Плагин поддерживает три типа виджетов: для самых лучших, для самых последних и случайных отзывов.

17. Business Contact Widget (бесплатный)

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

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

Плагин имеет несколько опций настройки: стиль иконок, размер значков и цвет вкладок.

18. Poll, Survey, Quiz & Form by OpinionStage (бесплатный)

У вас есть какой-нибудь насущный вопрос, который вы хотите задать своим посетителям? Может быть, вы хотите получить ответ на самый актуальный вопрос? Или, может быть, просто хотите заставить людей улыбнуться?

Данный плагин поможет вам в любом случае – с его помощью вы сможете даже проводить конкурсы.

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

19. Google Maps Widget (бесплатный)

Хотите показать посетителям ваше физическое местоположение на карте? Тогда вам нужен данный плагин – специально предназначенный для работы с картами Google.

Он имеет настраиваемые уровни размеров и масштабирования, а также позволяет использовать свои карты для создания пользовательских контактов.

20. WP PRO Advertising System ($29)

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

WP PRO является одним из лучших плагинов для управления рекламой. Он включает в себя 15+ стилей рекламы, включая, разумеется, рекламу виджета. Все эти объявления отображаются стильной плиткой.

Добавив аддон WooCommerce, вы сможете даже напрямую продавать на сайте место под рекламу.

21. Awesome Weather Widget (бесплатный)

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

Виджеты погоды великолепно выглядят и имеют настраиваемые цветовые схемы. Самое главное, что погодные данные предоставлены OpenWeatherMap, так что вы вполне можете им доверять.

22. YouTube Channel Gallery (бесплатный)

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

Channel Gallery позволяет отображать миниатюрные кадры из вашего видео в любой области виджета – всё, что вам нужно, это ключ API на YouTube. Когда посетитель кликает по одному из видео, оно начинает играть. Можно также добавить виджеты с демонстрацией нескольких роликов YouTube на одной странице, что позволит продвигать различные видео и каналы одновременно.

23. Widget Content Blocks (бесплатный)

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

Теперь по умолчанию текстовый виджет поддерживает только форматирование HTML. Если вы пытаетесь добавить шорткод, у вас ничего не получится.

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

Ещё лучше плагин решает эту проблему, используя визуальный редактор WordPress в области виджета. Это означает, что вы сможете форматировать ваши виджеты, как и любые другие записи/страницы. Вы можете добавлять медиа, ссылки или HTML-форматирование в ваши виджеты за несколько кликов.

24. PHP Code Widget (бесплатный)
Данный плагин по своему функционалу похож на предыдущий, за исключением того, что он позволяет вставить PHP-код в текст виджета по умолчанию. Это делает его обязательным для разработчиков WordPress.

25. Widget Importer & Exporter (бесплатный)

Данный плагин позволит вам перенести ваши виджеты с одного сайта на другой. Если у вас имеются настройки сайдбара, которые вам нравятся, плагин позволит вам добавить их на любые ваши сайты.

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

На чтение 3 мин. Опубликовано 29.11.2016

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о Супер полезном плагине, который позволит вам создавать новые сайдбары для своего сайта, в неограниченном количестве! Вы сможете выводить сайдбары в любом месте вашего сайта. Добавлять сайдбары на сайт можно с помощью простого шорткода или php кода. Сайдбары можно будет очень просто добавлять в записи, страницы, виджеты, боковые панели, подвал сайта (footer), заголовок сайта (header) и т.д.

Вы сможете создавать сайдбары для определённых страниц или записей, указав в настройках название страницы. Например, можно создать сайдбар, который будет отображаться только для одной записи. Можно настроить показ сайдбаров для определённых пользователей. Очень простые настройки. Супер полезный плагин!

Добавить сайдбар виджет плагин WordPress

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Боковые панели – Добавить новую . Укажите название для нового сайдбара. Нажав по полю “Select content type” вы можете выбрать где конкретно будет отображаться новый сайдбар. Если вы выберите тип – страницы или записи, то вы сможете выбрать на каких конкретно страницах будет отображаться сайдбар.

Далее, внизу страницы справа, в поле “Action” вы можете выбрать значение – Shortcode / Template Tag . У вас появится шорткод и php код, которые нужно вставить в то место сайта, где и будет отображаться созданный вами сайдбар. В поле “Visibillity” можно выбрать пользователей, для которых будет отображаться данный сайдбар.

Далее, перейдите на страницу: Внешний вид – Виджеты . Здесь у вас будут отображаться все созданные сайдбары. Просто перетащите виджет в сайдбар и он будет отображаться в том месте где установлен сайдбар.

Если вы хотите добавить сайдбар в запись или страницу, то откройте для редактирования страницу или запись. Вставьте в содержание страницы шорткод сайдбара. Обновите страницу.

Всё готово! На странице будут отображаться ваши виджеты.

Чтобы сайдбар отображался только в боковой панели, вам нужно в настройках “Action” ничего не менять.