Как отображать боковые панели с учетом содержимого для любой страницы или типа публикации WordPress

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

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

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

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

Готов идти? Тогда приступим.

В чем смысл боковых панелей с учетом содержимого?

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

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

• Адаптация - посетители, впервые посещающие сайт, могут нуждаться в другом контенте как постоянные посетители. Например, зарегистрированным пользователям не нужно видеть призыв к действию «зарегистрируйтесь», который призван побудить людей присоединиться к вашему сайту или в вашем списке рассылки.
• Специальная информация - некоторая информация имеет больше смысла на одних страницах, чем на других. Примеры включают дополнительную контактную информацию на странице контактов, лучшие или последние статьи на странице блога, специальные предложения на странице магазина - вы понимаете суть.
• Улучшенное SEO - хотя это и не является важным фактором, содержимое боковой панели по-прежнему имеет значение для поисковой оптимизации (особенно, если заголовки виджетов правильно заключены в теги заголовков). Таким образом, вы можете использовать боковые панели с учетом содержимого, чтобы сделать свои страницы еще более целенаправленными.
• Призывы к действию - вы также можете использовать этот тип боковой панели, чтобы настроить призывы к действию для разных мест на вашем веб-сайте.
• Языки - они также позволяют создавать боковые панели для разных языковых версий вашего сайта и ориентироваться на разные рынки.

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

Как реализовать боковые панели с учетом содержимого в WordPress

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

После этого боковую панель обычно меняют одним из трех способов:

• Фильтр виджетов - одна боковая панель заполнена виджетами, и какая-то логика в фоновом режиме решает, какие виджеты появляются в каком месте, а какие скрыты.
• Настроить целые боковые панели. Другой способ - создать полностью отдельные боковые панели, которые будут отображаться в одном месте при выполнении различных условий. Они могут содержать индивидуальные конфигурации виджетов.
• Жестко запрограммировано в тему - конечно, вы также можете добавить пользовательские боковые панели к файлам темы, если у вас есть для этого возможности кодирования.

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

Используйте видимость виджета Jetpack для фильтрации виджетов

Самый простой способ отфильтровать внешний вид виджета на вашем сайте - это модуль Widget Visibility с подходящим названием, включенный в Jetpack. Если у вас уже есть плагин на вашем сайте, создать пользовательские боковые панели так же просто, как активировать модуль (если он еще не активен по умолчанию). Кроме того, вы также можете использовать эту автономную версию.

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

Условия видимости следующие:

• Категория - виджеты могут отображаться на страницах определенных категорий или на всех из них.
• Автор - Отображение на всех страницах авторов или только для определенных пользователей.
• Пользователь - проверяет, вошел ли пользователь в систему или нет.
• Роль - управление виджетами в зависимости от роли пользователя
• Тег - работает как страницы категорий, но для тегов.
• Дата - управление датой появления виджетов архивов.
• Страница - установка видимости виджета для главной страницы, страницы сообщений, страниц архива, страницы ошибки 404, типов сообщений, архивов типов сообщений и статических страниц.

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

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

Второе решение, о котором мы хотим поговорить, - это плагин Content Aware Sidebars. Как упоминалось ранее, этот плагин позволяет настраивать целые боковые панели, которые затем можно заполнять виджетами и назначать сообщениям и страницам. Пользоваться им довольно просто.

После установки вы найдете новый пункт меню под названием Боковые панели в меню WordPress.

Когда вы выбираете Добавить здесь, вы попадаете на этот экран:

Здесь первое, что нужно сделать, - это назвать свою боковую панель. После этого самое время настроить условия для его отображения. Доступные варианты аналогичны Jetpack:

• Статические страницы - выберите статические страницы для отображения боковой панели, такие как главная страница, результаты поиска или страницы ошибок 404.
• Сообщения - те же параметры, что и выше, но для сообщений.
• Страницы - выберите, на каких страницах вашего сайта будет отображаться боковая панель.
• Медиа - определяет, на каких страницах мультимедиа отображается ваша боковая панель.
• Авторы - ограничьте отображение страницами авторов.
• Шаблоны страниц - выберите шаблоны страниц, на которых будет отображаться боковая панель.
• Категории - выберите определенные категории или все архивы категорий.
• Теги - те же параметры, но для тегов
• Форматы - опять те же настройки для форматов архивов.
• Даты - И еще раз для архивов дат
• URL-адреса (только для версии Pro) - ограничьте отображение боковой панели определенными URL-адресами.

Дополнительные настройки:

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

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

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

Создание настраиваемых боковых панелей вручную

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

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

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

С этим:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

После этого конечный результат на интерфейсе:

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

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

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

Логика виджетов

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

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

Пользовательские боковые панели

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

Простые боковые панели страницы

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

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

Боковые панели с учетом содержимого в двух словах

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

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

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

Каков ваш опыт работы с боковыми панелями с учетом содержимого? Дайте нам знать в комментариях ниже!

Миниатюра статьи Kit8.net/ shutterstock.com