Виджеты WordPress: как использовать и ими управлять

Виджеты в Wordpress

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

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

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

Области для вывода виджетов

Подчеркну, что с помощью расширения WordPress можно просто прибавить код для определения виджетов и расширяемых областей (сайдбаров). Каталог плагинов WordPress предлагает тысячи расширений с тегами: widget.

Страница виджетов WordPress

Чтобы из панели управления WordPress  перейти на страницу с виджетами нужно нажать Внешний вид=> Виджеты.

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

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

Информация, которая создана или исправлена в добавленном виджете, немедленноотобразится в колонке на странице.

Виджеты WordPress по умолчанию

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

Стандартные виджеты:

  • Архивы. Предоставьте ссылки на опубликованные сообщения на вашем сайте, организованные по месяцам.
  • Аудио. Вставьте аудиоплеер в область виджетов на своем сайте.
  • Календарь. Номера дат в календаре действуют как ссылки на посты, опубликованные в соответствующие даты.
  • Категории. Сгруппируйте опубликованные сообщения по категориям и покажите категории сообщений на боковой панели вашего сайта.
  • Галерея. Отображение нескольких изображений в виде фотогалереи в формате сетки или слайд-шоу на боковой панели.
  • Изображение. Покажите изображение в области боковой панели вашего сайта.
  • Мета. Предоставьте метаданные, включая RSS-каналы и ссылки для входа.
  • Навигация. Отображение меню навигации для вашего веб-сайта.
  • Страницы. Показывайте страницы своего сайта в области боковой панели сайта для более удобной навигации.
  • Недавние комментарии. Покажите самые последние комментарии, оставленные на вашем сайте.
  • Недавние Посты. Предоставьте ссылки на ваши последние сообщения в блоге на боковой панели сайта.
  • Показывайте сообщения из любого RSS-канала, в том числе с других сайтов или, например, из вашего Instagram-канала, в области боковой панели.
  • Поиск. Добавьте окно поиска, чтобы помочь пользователям найти любую публикацию на вашем веб-сайте.
  • Облако тегов. Отображение до 75 наиболее часто используемых почтовых тегов, причем самые популярные почтовые теги отображаются увеличенным размером шрифта.
  • Видео. Вставьте видео в область виджетов на своем сайте.
Стандартные виджеты в WordPress

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

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

Управление отображением виджетов

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

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

Расширение WordPress: отображать виджеты

Мое любимое решение для управления видимостью виджетов — это бесплатный плагин WordPress: AH Display Widgets.

Это расширение от Andreas Hecht позволяет изменять содержимое боковой консоли или области боковой панели на каждой странице.

Плагин для расширения возможностей работы с виджетами в WordPress
Плагин для расширения возможностей работы с виджетами

После установки в WordPress этот плагин прибавит добавочные критерии в виде флажков во все виджеты на вашем блоге.

Во-первых, вы сможете выбирать между скрытием или отображением виджета, когда флажок установлен.

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

Затем вы можете выбрать тип страницы, на которой виджет будет скрыт или отображен, установив флажок по вашему выбору.

В области «Разное +/-» вы можете проверить:

  • Первая страница: соответствует главной странице вашего сайта.
  • Страница блога: соответствует всем страницам вашего сайта.
  • Страница архивов: соответствует всем страницам архива
  • Страница билетов: соответствует только страницам статей
  • Страница 404: соответствует странице ошибки 404.
  • Страница поиска: соответствует страницам поиска.

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

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

Чтобы найти соответствующий идентификационный номер, необходимо в режиме редактирования/изменения статей или страниц нажать на кнопку «Получить короткую ссылку» и отметить номер, который пишется после? p=

Короткая ссылка, с указанием номера виджета
Короткая ссылка, с указанием номера виджета

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

Плагин WordPress: виджеты страниц Light

Widgetize Pages Light — это плагин для создания добавочных областей, чтобы вставлять виджеты в любое место на ваших страницах или в статьях WordPress.

После установки в WordPress меню сперва позволяет создать новую боковую панель. Вы вводите заголовок и описание, затем подтверждаете это нажатием кнопки «Сохранить боковую панель». После на странице виджетов WordPress вы заметите эту новую область, куда вы сумеете перетаскивать свои виджеты.

В разделе «Редактор WordPress» вы увидите значок, который позволит автоматически вставлять шорткод боковой панели в содержимое вашей статьи или страницы.

В итоге виджет(ы) в этой боковой панели будут отображаться на вашей странице или в статье.

Как создавать пользовательские виджеты на WordPress

Прежде всего, вам нужно запомнить следующие три функции, если вы хотите создавать собственные виджеты:

виджет функции () – эта функция отвечает за рендеринг внешнего интерфейса или за то, как ваш виджет (HTML-макет) будет выглядеть как внешний вид веб-сайта.

функциональная форма () – эта функция позволяет нам создать форму (обычно содержит поля формы ввода HTML, т. е. текстовое поле, выбор и т. д.).

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

Теперь вам нужно создать файл с именем custom-widget.phpс этим кодом:

  1. <?php
  2. // Создание виджета
  3. класс cw_widget расширяет WP_Widget
  4. {
  5. функция __construct ( )
  6. {
  7. родитель:: __construct (
  8. // Базовый идентификатор вашего виджета
  9. ‘cw_widget’ ,
  10. // Имя виджета появится в пользовательском интерфейсе
  11. __ ( ‘Виджет Cloudways’ , ‘cw_widget_domain’ ) ,
  12. // Описание виджета
  13. массив (
  14. ‘description’ => __ ( ‘Пример виджета на основе тестируемых виджетов’ ,
  15. ‘cw_widget_domain’ )
  16. ) ) ;
  17. }
  18. // Создание интерфейса виджета
  19. // Здесь происходит действие
  20. виджет публичной функции ( $args, $instance )
  21. {
  22. $title = apply_filters ( ‘widget_title’ , $instance [ ‘title’ ] ) ;
  23. // аргументы до и после виджета определяются темами
  24. echo $args [ ‘before_widget’ ] ;
  25. если ( ! пусто ( $ title ) )
  26. echo $args [ ‘before_title’ ] . $название . $args [ ‘after_title’ ] ;
  27. // Здесь вы запускаете код и отображаете вывод
  28. echo __ ( $title, ‘cw_widget_domain’ ) ;
  29. echo $args [ ‘after_widget’ ] ;
  30. }
  31. // Бэкенд виджета
  32. форма публичной функции ( $instance )
  33. {
  34. если isset ( $ экземпляр [ ‘название’ ] ) ) {
  35. $title = $экземпляр [ ‘название’ ] ;
  36. } еще {
  37. $title = __ ( ‘Новый заголовок’ , ‘cw_widget_domain’ ) ;
  38. }
  39. // Форма администратора виджета
  40. ?>
  41. <метка для=”<?php
  42. echo $this-> get_field_id ( ‘заголовок’ ) ;
  43. ?>”><?php
  44. _e ( ‘Заголовок:’ ) ;
  45. ?>
  46. <input class= “widefat” id=”<?php
  47. echo $this-> get_field_id ( ‘заголовок’ ) ;
  48. ?> ” имя=” <?php
  49. echo $this-> get_field_name ( ‘title’ ) ;
  50. ?> ” тип=” текст ” значение=” <?php
  51. эхо esc_attr ( $title ) ;
  52. ?>” />
  53. <?php
  54. }
  55. // Обновляем виджет, заменяя старые экземпляры новыми
  56. обновление общедоступной функции ( $new_instance, $old_instance )
  57. {
  58. $экземпляр = массив ( ) ;
  59. $экземпляр [ ‘заголовок’ ] = ( ! пустой ( $новый_экземпляр [ ‘заголовок’ ] ) } )
  60. strip_tags ( $new_instance [ ‘заголовок’ ] ) : ” ;
  61. вернуть $экземпляр;
  62. }
  63. } // Класс cw_widget заканчивается здесь
  64. // Зарегистрируйтесь и загрузите виджет
  65. функция cw_load_widget ( )
  66. {
  67. register_widget ( ‘cw_widget’ ) ;
  68. }
  69. add_action ( ‘widgets_init’ , ‘cw_load_widget’ ) ;

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

Как интегрировать пользовательский виджет

Вы можете интегрировать пользовательский виджет в function.php своей темы, используя следующий код:

require_once(‘пользовательский виджет.php’);

Затем, вы регистрируетесь и загружаете виджет. Перейдите в «Внешний вид»> «Виджеты». Теперь вы можете увидеть свой собственный виджет. Перетащите виджет на любую боковую панель вашей темы.

Вывод

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

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

Поделиться в: