Виджеты для сайдбара. Как создать сайдбар WordPress под контентом, не редактируя код
Сайдбар в WordPress стал неотъемлемой частью сайта. Его использование открывает огромные возможности для разработчиков тем и пользователей платформы WordPress. На всевозможных блогах отводиться большое количество времени описанию добавления, удаления и настройкам сайдбара. В данном вопросе и мой блог не стал исключением, сегодня я постараюсь рассказать о как можно большем количестве настроек и всех возможных махинациях над боковой колонкой сайта на WordPress.
Эту статью я специально публикую перед написанием очередной статьи по посвященной выводу сайдбара и его внедрением в шаблон. Хочу при написании урока уже иметь необходимую базу материала о сайдбарах WordPress, что бы не останавливаться и не рассказывать все до мелочей.
После небольшого отступления перейдем к нашим «баранам» и окунемся в суть работы с темами, а именно рассмотрим боковое меню WordPress.
Перед тем, как приступить к рассказу и вникнуть в код и настройки, очерчу несколько нюансов, которые вы скорее всего знаете, связанных с боковыми панелями:
Сайдбар сайта - правая или левая части сайта, отвечающая за донесение дополнительной информации и участвующая в навигации по сайту. Возможно использование и правой и левой боковой колонки одновременно.
Использование сайдбара в WordPress имеет более широкий диапазон действий, он может быть размещен где угодно, в шапке, сбоку, в подвале, и вмещать в себя самые разнообразные элементы, о которых и пойдет речь в этой статье.
Регистрация сайдбара в WordPress. Как добавить сайдбар в WordPress
Вывод сайдбара WordPress происходит по определенному принципу, при помощи вызова в файлах шаблона и регистрации в файле functions.php функцией register_sidebar().
Будьте внимательны, перед регистрацией сайдбара убедитесь что он ранее не был зарегистрирован. При наличии нескольких регистраций с одним и тем же id, возможно возникновение ошибок. Перед редактированием сторонних шаблонов, стоит убедиться что сайдбар не «завязан» к каким-то функционалом шаблона.
Первым делом откроем файл functions.php и напишем функцию регистрации сайдбара:
Function my_register_sidebars() { /* регистрация правого сайдбара */ register_sidebar(array("id" => "right-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Правая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "
", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => " "after_title" => "
")); /* регистрация левого сайдбара */ register_sidebar(array("id" => "left-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Левая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "", // если оставить пустым, будет выводиться в "after_title" => "
")); /* регистрация сайдбара для футера */ register_sidebar(array("id" => "footer-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Нижний сайдбар", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "", // если оставить пустым, будет выводиться в "after_title" => "
")); } add_action("widgets_init", "my_register_sidebars");
Вставив этот код в файл functions.php мы зарегистрировали сразу два сайдбара боковых - правый, левый и отдельно сайдбар для футера. Также вы можете регистрировать только один сайдбар или добавить еще по необходимости, к примеру в средину страницы.
Сайдбар зарегистрирован, теперь нужно его вывести в нужном месте. Именно этим мы и займемся далее.
Как добавить sidebar в wordpress тему
Принцип добавления сайдбаров
Если вы пишите тему для своего сайта, и регистрировали сайдбар для виджетов WordPress что бы в нем что-то находилось, тогда смело можете выводить его в нужном месте используя следующий код:
При написании шаблонов на заказ или для стороннего использования, стоит проверять наличие виджетов WordPress, о них можно почитать . Возможно пользователь вашей темы откажется от использования сайдбара на сайте и ему ни к чему будут пустые блоки на странице. Для проверки использования виджетов и добавления сайдбара в WordPress тему используют следующее:
Мы проверили существуют ли виджеты в правом сайдбаре и вывели их на странице. По аналогии, заменяя лишь значение ID сайдбара (right-side) на нужный нам, мы сможем вывести все блоки на страницу в необходимом месте.
Куда добавить код для вывода сайдбара в WordPress
Для сайдбаров в вордпресс зарезервирован файл шаблона sidebar.php. Именно в нем в большинстве случаев описывается все необходимое (обертки панелек, условия для вывода на определенных страницах и т.д.)
Если у вас один сайдбар, тогда добавляйте его код в sidebar.php, и подключайте его в нужном месте в файле index.php с помощью функции:
При использовании нескольких сайд баров вам нужно будет создавать дополнительные файлы к примеру sidebar-right.php, sidebar-left.php и sidebar-footer.php.
Поместив необходимый участок кода в нужный файл, подключение к индексному будет происходить следующим образом:
Месторасположение подключения вы выбираете самостоятельно. Значение в скобках должно соответствовать названию файла (sidebar-right .php), выделено жирным.
Как убрать сайдбар в WordPress?
Я детально рассказал как добавить сайдбар в WordPress, теперь пойдем от обратного и начнем удалять. Составлю небольшой план как убрать сайдбар в WordPress (перед редактированием файлов обязательно сделайте их копии и пользуйтесь , не редактируйте с админки):
- Заходим в папку с темой и открываем следующие файлы functions.php, sidebar.php и index.php;
- ищем и удаляем регистрацию сайдбара в файле функций, как он выглядит описано выше в статье.
- переходим к файлу sidebar.php и удаляем вызов боковой колонки (нужно удалить все что связано с dynamic_sidebar(), пример так же есть выше).
- идем в индексный файл и удаляем подключение файлов сайдбара (get_sidebar()).
Это муторная работа, и для не знающих может быть проблемой, но если вам это действительно нужно, тогда разберетесь.
Для добавления необходимых плагинов и дополнений на страницу в 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 традиционно выполняется в вертикальном виде в боковой колонке. Но это вовсе не аксиома.
Сайдбар 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 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 (бесплатный)
Данный плагин позволит вам перенести ваши виджеты с одного сайта на другой. Если у вас имеются настройки сайдбара, которые вам нравятся, плагин позволит вам добавить их на любые ваши сайты.
Мысли в заключение
На этом мы завершим свой обзор лучших плагинов для виджетов.