Установка и настройка виджетов WordPress

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

Виджеты не нагружают сервер и не замедляют загрузку страницы. Делают настройку интернет-сайта простой и гибкой. А стандартный набор WordPress поможет в реализации практически любых ваших задумок.

Что такое виджеты

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

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

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

Баннер с призывом к действию – ещё один часто используемый вид оформления. Например, бесплатная книга от автора сайта в обмен на подписку.

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

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

Изначально с WordPress версии 5 и выше вы получите 17 предустановленных виджетов. Буквально несколько слов о каждом:

  • html код – из названия понятно, что предназначен для размещения кода, один из самых многофункциональных (используется для вставки баннеров, адсенс, карт и т.д.);
  • RSS – осуществляется подписка на рассылку;
  • архивы – здесь все записи по месяцам и количеству;
  • аудио – встраивает любое аудио из библиотеки (приветствие, подкаст и т. д);
  • видео – выводит видео файлы из вашей медиа-библиотеки или стороннего сервиса (например, youtube, vimeo);
  • изображение – добавляет картинки из вашего архива, даёт возможность сделать ссылкой;
  • галерея – покажет не просто картинки, а полноценную галерею;
  • календарь – выглядит как обычный календарь с обведенными датами, в которые размещались посты;
  • меню навигации – возможность вывода меню;
  • мета – это быстрые ссылки на страницу входа, ленту записей и комментариев и т.д.
  • облако меток – дополнительная навигация по популярным тематикам;
  • поиск – нужен для поиска нужной информации на сайте;
  • рубрики – для быстрого перехода к определенной тематике;
  • свежие записи и комментарии – вполне понятно из названия;
  • ●        страницы – отображает опубликованные страницы (как правило, 5- 10 последних);
  • текст – произвольный текст любого формата.

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

Как разместить виджет на сайте

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

Первым делом войдите в административную панель. Затем в левом меню найдите пункт «Внешний вид» и подпункт «Виджеты».

Захватите мышкой выбранный элемент и перетащите правее в область под названием «Боковая колонка». Перетаскиванием также можно двигать блоки выше или ниже в боковой панели. От этого зависит очерёдность отображения.

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

Третий вариант. Найдите вверху страницы кнопку «Перейти к визуальной настройке».

Наверху указано название области, в которую собираемся добавлять элементы. Ниже уже добавленные элементы. Под этим блоком есть кнопка «+Добавить виджеты». Раскроется список всех доступных, выберите нужный. Плюс этого способа в том, что сразу увидите результат действий. Чтобы изменения вступили в силу, нажмите кнопку «Опубликовать».

Если вы не видите ни одну область, сбоку или снизу, то возможно туда нужно добавить хотя бы один блок. Либо вашей темой вообще не предусмотрено наличие областей. Хотя такое встречается редко.

Настройка основных функций

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

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

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

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

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

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

Как добавлять виджеты

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

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

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

Рассмотрим инструкцию добавления плагина пошагово:

  • в главном меню административной панели перейдите в категорию «Плагины»;
  • далее в подкатегорию – «Добавить новые» через меню или нажатием на одноименную кнопку;
  • в поисковую строку введите название;
  • затем поочерёдно в карточке нужного плагина нажмите на клавиши «Установить» и «Активировать».

Но не стоит слишком увлекаться установкой дополнительных приложений. Потому как виджеты должны привлекать внимание, а не рассеивать его. Идеально если у вас будет 2-3 интересных блока.

Топ виджетов для WordPress

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

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

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

  • Search by Google – поиск по сайту, но встроенная система поиска показала низкую эффективность, а Гугл отличается надежностью и мощными функциями;
  • NextGEN Gallery – супер популярный плагин для создания галерей любой сложности и вида;
  • Youtube Channel Gallery – для показа свежих видео с Ютуб;
  • Slick Contact Forms разработан для создания формы обратной связи;
  • WP-Cumulus – с его помощью создается красивое 3d облако тегов, для улучшения навигации и увеличения времени посещения сайта;
  • WP-Polls – плагин для создания и публикации опросов на вашем портале;
  • социальные сети – выводятся путем вставки полученного кода в текстовое поле или HTML;
  • Jetpack – приложение со ссылками на соц.сети в виде официальных иконок;
  • вывод корзины покупок возможен с плагином Woocommerce, чтобы посетители имели доступ к корзине из любой точки веб-сайта;
  • Q2W3 Fixed Widget – предназначен для закрепления виджета при прокручивании страницы, чтобы внизу не было пустого места, а читатели видели интересное предложение;
  • Display Widgets – популярный и надежный плагин, с его помощью можно выбрать, на каких страницах показывать определенный виджет, а на каких нет.

Добавление новой области

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

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

Для начала нужно зайти в боковое меню в раздел «Внешний вид», а затем выберите подраздел «Редактор тем». В колонке с правой стороны под названием «Файлы темы» найдите документ functions.php .

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

Вот так выглядит кусок кода, скопируйте эти строки и вставьте после всех блоков «register_sidebar». Теперь немного отредактируем его.

  • в переменную ‘name’ впишите название  ‘Еще одна область’;
  • ‘id’ => ‘bottombar’, уникальное значение;
  • в ‘description’ впишите описание области.

После ввода своих данных нажмите на кнопку «Обновить файл». Для проверки перейдите в раздел «Внешний вид» – «Виджеты» и удостоверьтесь в появлении новой области с вашим названием. И добавьте любой виджет в него.

Теперь сделаем так, чтобы область появилась на страницах сайта. Мы будем выводить его боттом бар над футером. Опять вернемся в «Редактор тем». Найдите и откройте файл footer.php (Подвал).

Вставьте данный код, заменив ‘bottombar’ на указанный вами ‘id’:

<div id="bottombar-inner">
	<?php dynamic_sidebar( 'bottombar' ); ?>
</div>

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

Заключение

Виджеты — это простая встроенная функция Вордпресс, но не стоит ее недооценивать. Используя их можно настроить привлекательные боковые панели без знания кода. Еще одно преимущество – размещение сразу на всех страницах, без дублирования контента. Поэтому обязательно стоит разобраться с этим инструментом и использовать в своих проектах.