Как сделать свой виджет в вордпресс с помощью плагина acf

Что такое тема?

Тема WordPress — это набор css, js, php файлов, которые в связке с WordPress и плагинами выводят информацию из базы данных на экран в красивом и удобном виде (дизайне). Ну или в некрасивом и неудобном, тут смотря какую тему выбрать… В других движка тему еще называют «шаблоном», но в WordPress принято говорить именно тема — theme, а не шаблон — template. Хотя и то и другое по сути одно и тоже…

Необходимые файлы

Чтобы создать тему необходимы лишь два файла:

1. index.php — главный файл темы, отвечает за вывод содержимого
2. style.css — главный файл стилей, отвечает за css стили

Но ни одна тема по факту не состоит всего из двух файлов. Их больше: PHP, языковые файлы, файл CSS и JS, текстовые файлы. Тему начинают с двух файлов, а затем, чтобы было удобнее, её расширяют, добавляя такие файлы как:

• header.php — отвечает за вывод шапки
• footer.php — отвечает за вывод подвала
• sidebar.php — отвечает за вывод боковой панели
• page.php — отвечает за вывод отдельной страницы (записи)
• и т.д. смотрите полный список.

Возможности темы

Возможности темы по сути безграничны, ведь там можно полностью использовать PHP. НО! Тема, как призвана отображать содержимое сайта определенным образом, а не добавлять функционала сайту. Поэтому возможности темы принято ограничивать до тех, которые отвечают за внешний вид, а все остальные возможности: голосование, рейтинги, редиректы, СЕО и т.п. принято выносить в плагины…

Таким образом, тема может:

• Отвечать за вывод содержимого сайта под разные типы устройств: мониторы и смартфоны. Такие темы называются адаптивные. Также темы могут быть фиксированные, одноколоночные, двухколоночные и т.п.;
• Тема может выводить любое содержимое;
• Может указать, какой контент будет отображаться для разных пользователей;
• Может использовать любые элементы дизайна (картинки, видео).

Как и на любом сайте, тема — это не только цветовое решение, макет и красивая картинка. По-настоящему качественные темы еще и очень функциональны. Функциональность темы, заключается в её гибкой настройке. Т.е. она не добавляет ничего нового на сайт, но отлично настраивается по вкусу владельца. Например: устанавливается фоновая картинка, меняется цвета элементов, настраивается меню и блоки с контентом (виджеты).

Чем тема отличается от плагина?

С точки зрения кода, можно сказать, ничем — в теме можно создать полноценный плагин. А вот с точки зрения логики — всем! Задача плагина, добавить что-то новое на сайт, например добавить опрос. Задача темы — вывод содержимого, в том числе, этого опроса…

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

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

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

Старт

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

1. настроить локальную среду разработки.
2. Затем можно посмотреть примеры WordPress-тем.
3. Ну и начать разработку своей первой темы.

Этот раздел в процессе разработки… И вообще, я его начал писать и забросил, неинтересное занятие получается. Будет время, желание продолжу…

Администрирование сайта и создание контента

Чтобы сделать жизнь пользователей Вордпресса проще, разработчики создали админку — специальную страницу, где собраны все возможности движка по созданию и обработке контента. Вот что можно там сделать:

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

Это базовые возможности админки на Вордпрессе, и каждый плагин или тема расширяют её возможности.

Начальная страница стандартной панели администрирования Вордпресса.

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

Стандартные виджеты ВордПресс

Не все новички знают, но сразу после установки движка WP, у вас уже будет набор из ряда стандартных виджетов, которые можно и нужно использовать, если они будут полезны в конкретном проекте. Рассмотрим часть этих инструментов чуть подробнее:

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

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

Как работать с виджетами в обновлении WordPress 5.8

Помните, в конце 2018 года вышло обновление WordPress, которое принесло новый редактор записей и страниц Guttenberg. Он представлял собой блочный визуальный редактор. Тогда многие вебмастера спешили возвращать всё на старое место и устанавливали плагин Classic Editor, который включал старый редактор. Даже сейчас есть те, кто до сих пор пользуются классическим редактором.

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

Поэтому рекомендуется осваивать новый интерфейс и не возвращаться к старому. Давайте рассмотрим, как пользоваться новыми виджетами в WordPress 5.8. Здесь всё очень просто.

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

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

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

Есть два способа добавить виджет в область виджетов.

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

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

Чтобы закрыть список блоков, нажмите снова на кнопку в виде плюса.

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

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

Обзор интерфейса управления меню

Управление меню производится в разделе «Внешний вид» — «Меню», это единственное место для создания меню на вашем сайте.

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

Интерфейс управления меню

Давайте введём название нового меню. Пусть это будет «Главное меню» или «Основное меню», как вам больше нравится. Это необходимо для того, чтобы вы всегда могли в списке всех доступных меню при настройке сайта выбрать нужное вам. Не называйте его «1» или как-то «криво», впишите осмысленное название.

Вводим название нового меню

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

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

Пример выбора из нескольких меню

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

Пример чистого меню

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

Пример существующего меню

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

Редактирование свойств пункта меню

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

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

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

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

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

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

Дополняем внешний вид сайта

Теперь на главной странице появились все записи, которые мы сделали еще до того, как начали создавать тему. И у них тот внешний вид, который мы сами указали в предыдущем шаге.

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

$post_title = the_title(‘<h1 style=»color: gray»>’, ‘</h1>’, false);

на

$post_title = the_title(‘<h1 style=»color: red»>’, ‘</h1>’, false);

Обновите страницу, вы увидите, что все заголовки записей стали красными.

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

Строчку
<h1 style=»color: red»>  лучше потом заменить на
<h1 class=»red»> , а в CSS-файле указать правило
.red{colorred}  Это будет более корректным и общепринятым стилем.

Пользователи

В разделе консоли «Пользователи» отображается полный список зарегистрированных на сайте пользователей. Здесь собрана вся информация о них:

• логин,
• имя,
• e-mail,
• роль,
• количество записей.

У каждого пользователя есть своя роль (начиная от простых читателей и заканчивая редакторами и авторами):

• читатель может только просматривать опубликованные записи и комментировать их. Присваивается по умолчанию при регистрации;
• участник может создавать и редактировать свои записи, но не может их публиковать;
• автор может создавать, редактировать и публиковать свои (только свои) записи;
• редактор может создавать и публиковать свои посты, редактировать и удалять чужие;
• администратор – это создатель сайта. Имеет полный набор прав.

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

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

Установка

Здесь всё аналогично установке плагинов, т.к. программно они ничем не отличаются. Заходим в «Плагины => Добавить плагин», выбираем «Загрузить файл» и закачиваем .zip-архив widget’а.

Или делаем то же самое, но через FTP или админ-панель хостинга: находим в корневом каталоге сайта папку wp-content, в ней plugins и туда «кладём» разархивированную папку с виджетом.

После установки — активируем.

Если всё прошло успешно, то в разделе «Дизайн => Виджеты» появится новый widget, который мы установили. Его нужно «затащить» на область виджетов справа — просто зажимаем левой кнопкой мышки и тащим:

JQuery Vertical Mega Menu Widget

Несмотря на добавленное в название слово «Mega», ничего сверхъестественного тут нет. Однако, добавить вертикальное меню с расширенным функционалом — возможно. Главное достоинство этого меню виджет wordpress — бесплатная лицензия на использование. Это означает, что без каких либо дополнительных расходов, Вы получаете качественное меню для сайта.

С помощью JQuery Vertical Mega Menu Widget можно делать всплывающие меню, добавлять виджеты. Присутствуют настройки анимации, вывода и категорий. В результате получится нечто схожее с accordion. Редактируйте классы и стили CSS. Не забываем про активацию плагина через «Внешний вид» и перемещаем его в нужную область сайта.

Дополнительные материалы по API Widget

Код для вывода всех опций стандартных виджетов.

Код работы c опциями стандартных виджетов

function get_dashboard_widget_options( $widget_id=» )
{
//Берем все опции виджетов из базы данных
$opts = get_option( ‘dashboard_widget_options’ );

//Если не указан идентификатор виджета, то берем все опции
if ( empty( $widget_id ) )
return $opts;

//Если указан идентификатор виджета, то возвращаем только опции этого виджета, если таковые есть
if ( isset( $opts ) )
return $opts;

//если ни одно условие не подошло возвращаем false…
return false;
}

Для вывода одной опции виджета можно использовать функцию:

public static function get_dashboard_widget_option( $widget_id, $option, $default=NULL ) {

$opts = get_dashboard_widget_options($widget_id);

//если опции не найдены false
if ( ! $opts )
return false;

//В противном случаи, если есть опция и она не пустая, выводим содержимое опции
if ( isset( $opts ) && ! empty($opts) )
return $opts;
else
return ( isset($default) ) ? $default : false;
}

Для обновления опций виджета кодекс WordPress предлагает следующую функцию:

Обновление опций виджета WordPress. Update widget options.

public static function update_dashboard_widget_options( $widget_id , $args=array(), $add_only=false )
{
//достаем все опции виджета из базы данных…
$opts = get_option( ‘dashboard_widget_options’ );

//берем опции только нашего виджета или объявляем пустой массив
$w_opts = ( isset( $opts ) ) ? $opts : array();

if ( $add_only ) {
//Flesh out any missing options (existing ones overwrite new ones)
$opts = array_merge($args,$w_opts);
}
else {
// Добавляем к существующим опциям новые
$opts = array_merge($w_opts,$args);
}

//Сохраняем весь массив опций виджета обратно в базу данных
return update_option(‘dashboard_widget_options’, $opts);
}

Для более полного изучения материала вам могут понадобиться статьи:

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

Функционал WordPress

Итак, пройдемся по основным возможностям движка WordPress:

1. Позволяет создавать, удалять и редактировать статические страницы (например, «О компании», «Контакты», «Товар X» и т. д.).
2. Позволяет создавать, удалять и редактировать записи (публикации).
3. Широкие возможности по работе с комментариями (включить, отключить, древовидный формат, максимальное число на одной странице и т. д.).
4. Поддержка ЧПУ (человеко-понятный URL), написание собственных URL, большой выбор форматов.
5. Поддержка меток, рубрик, RSS, поиска.
6. Отличный текстовый редактор WYSIWYG (What You See Is What You Get – что ты видишь, то и получишь), работающий в двух режимах: визуальный и html.
7. Онлайн редактор фотографий и изображений, позволяющий обрезать, поворачивать, масштабировать и т. д.
8. Большой выбор готовых шаблонов, что значительно упрощает процесс создания сайта.
9. Большой набор различных плагинов и виджетов, позволяющих добавлять нестандартные функции.

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

Плагины для добавления виджетов

1. Breadcrumb NavXT. Ходит множество споров по поводу полезности данного плагина. Он позволяет добавлять «хлебные крошки» в сайдбаре. С одной стороны, это полезно, с другой, — обычно подобная навигация встраивается в шапке контента. Использовать Breadcrumb NavXT или нет — решать вам.

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

4. Easy Random Posts — это необязательный widget, который позволит вам создать блок со списком случайных записей из блога. Неизвестно, насколько этот инструмент влияет на индексацию, но зато пользователи будут видеть не одни и те же ссылки, а каждый раз разные.

5. WP-Cumulus — это аналог стандартного виджета «Облако меток». Только в отличии от него, данный плагин являет собой красивый слайдер в 3D-формате.

6. Local Time Clock и WP-FlashTime Widget — инструмент для добавления часов на страницах сайта. Добавлять их не обязательно, только если в ваших статьях есть какая-то привязка к времени. Плагин позволяет создавать разностилевые часы с множеством параметром, которые можно менять.

7. Profile Builder — без этого виджета сложно обойтись любому крупному ресурсу. Он предназначен для отображения форм регистрации и авторизации пользователь. Также в нем есть кнопка «Забыли пароль».

8. Ajax Event Calendar — виджет для планирования предстоящих событий и мероприятий, связанных с вашим блогом. Отлично подойдет для обучающих сайтов с вебинарами, семинарами и т. д.

9. WP-Polls — инструмент, который позволит вам лучше узнать интересы своей целевой аудитории. Он добавляет опросы на страницы.

10. EasyRotator — простой плагин, который позволит вам создать слайдер в виджете, либо разместить его в произвольном месте на любой странице портала.

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

Как добавить новый блок виджетов?

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

Для этого, нужно добавить еще один блок. А сделать это можно, прописав в файле вашей темы functions.php следующий код:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name' => 'Дополнительный блок',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));

Таким образом, вы добавили функцию, которая должна вывести новый блок. Заходите в раздел админки «Внешний вид» — «Виджеты», там должна появиться новая область под названием «Дополнительный блок».

Затем, чтобы виджеты отображались в нашем случае в сайдбаре, нужно зайти в соответствующий файл sidebar.php и внести в него такие строки:

<div class="new-sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Дополнительный блок") )  ?>
<?php endif; ?>
</div>

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

Удачи!

Как создать виджет «Об Авторе»?

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

Для начала перечислим требующиеся функции для отображения личных данных из профиля автора:

Во первых, это аватарка пользователя

Об этом мы писали в прошлой статье, но напоминаю код для вывода изображения: <?php echo get_avatar( get_the_author_meta( ‘user_email’ ), 80 ); ?>
Не менее важно вывести биографическую информацию, которую автор указал в своём профиле WordPress. В системе этот пункт зовётся «О себе»: <?php the_author_meta( ‘description’ ); ?>
Ну и ещё один немаловажный элемент оформления – ссылка на авторские публикации

Это автоматически генерируемая страница с выводом полного списка записей одного из пользователей: <?php the_author_posts_link(‘namefl’); ?><?php get_the_author(); ?>

После следует за компоновать перечисленные функции, воспользовавшись стилями CSS. Например, аватарку располагаем с левого края страницы (float: left;), сверху помещаем подзаголовок (<h3> или <h4>), для текста «О себе» можно добавить размер шрифта и цвет (font-size: 12px; color: #333333;), ну и в конце добавить ссылку на все авторские публикации.

Примечание!   Код полученного виджета размещаем в файле «single.php» — шаблон одной записи (или «content-single.php в зависимости от темы оформления»). Вставляем сразу за выводом основного контента (<?php the_content(); ?>), либо после приоритетных элементов дизайна!

Пример кода виджета «Об авторе»

Вставить в single.php:

<div id="authorarea">
<h3>Об Авторе: <?php the_author_posts_link('namefl'); ?> <?php get_the_author(); ?></h3>
<?php echo get_avatar( get_the_author_meta( 'user_email' ), 80 ); ?>
<div class="authorinfo">
<?php the_author_meta( 'description' ); ?>
<a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">Просмотреть все записи автора <?php get_the_author(); ?> <span class="meta-nav">&rarr;</span></a>
</div>
</div>

Вставить в style.css:

#authorarea{
background: #f0f0f0;
border: 1px solid #d2d2d2;
padding: 10px;
width: 540px;
overflow:hidden;
color: #333;
}
#authorarea h3{
font-size: 18px;
color:#333;
margin:0;
padding:10px 20px 5px 10px;
}
#authorarea h3 a{
text-decoration:none;
color: #333;
font-weight: bold;
}
#authorarea img{
margin:0;
padding:10px;
float:left;
border: 1px solid #ddd;
width: 80px;
height: 100%;
}
#authorarea p{
color:#333;
margin:0;
padding:0px 10px 10px 10px;
}
#authorarea p a{
color:#333;
}
.authorinfo{
padding-left:120px;
}

Полезные виджеты ВордПресс

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

Social Icons Widget by WPZoom. Еще один плагин, аналогичный упомянутому в статье Simple Social Icons. Позволяет разместить виджет с большим количеством ссылок на самые разные соцсети — поддерживается более 80 проектов. Особенность заключается в большом количестве иконок, что позволяет настроить внешний вид элемента. Так он будет лучше гармонировать с дизайном сайта. Например, есть скругленные, простые квадратные, проименнованные иконки.

Instagram Feed. Бесплатный инструмент ВордПресс от стороннего, но проверенного разработчика. Позволяет разместить в боковой панели или подвале виджет, который будет отображать фотографии из одного или нескольких аккаунтов Инстаграма. Особенно удобно, что можно гибко настраивать размер сетки и изображений, а также многие другие параметры. Это позволяет придать виджету оптимальный для вашего сайта внешний вид.

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

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

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

WP Polls. Один из самых популярных плагинов для ВордПресс с виджетом для голосования

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

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

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

Ads Widget Easy. Большинство сайтов в интернете зарабатывает за счет рекламы. Если ваш проект не является исключением из этого правила, тогда данный плагин вам попросту необходим (хотя, можно изучить также и аналоги, но этот инструмент является самым популярным в своем роде). Он простой и интуитивно понятный. Для размещения рекламы в сайдбаре или нижнем колонтитуле, вам потребуется лишь прописать заголовок, добавить ссылку и выбрать изображение. Конечно, ту же задачу можно решить и текстовым виджетом, но посредством данного плагина это делается намного проще.

Google Maps Widget. Завершим нашу подборку плагином ВордПресс, позволяющим разместить на боковой панели или в нижнем колонтитуле карту, показывающую местоположение вашего офиса, магазина, или места, где проводится рекламируемое на сайте мероприятие. Карта будет интерактивной: пользователь сможет приближать ее, отдалять, рассматривать местность вокруг, чтобы спланировать путь. Виджет легко размещается и настраивается, и пожалуй, является лучшим из инструментов-карт.

Что такое виджеты для сайтов?

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

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

У CMS WordPress есть свои виджеты, которые по сути своей, являются плагинами, позволяющими легко добавить информацию в сайдбар (боковые колонки), футер (нижнюю часть сайта) и куда-нибудь ещё. Есть, например, widget 404-й страницы — добавляет html-код на страницу, возвращающую 404-й код ошибки, т.е. «не найдено» .

JQuery Mega Menu Widget

JQuery Mega Menu Widget

Очередной плагин с припиской «Mega». Для работы плагина используются библиотеки Jqery, в коде сайта используется JavaScript. С помощью данного плагина можно создать виджет со списком категорий.

У плагина JQuery Mega Menu Widget огромное количество опций:

1) Настраивайте собственный сценарий на нажатие кнопок меню. Какие действия будут происходить при выборе нужной категории; 2) Произвольные категории; 3) Настраиваемый внешний вид через CSS; 4) Настройка анимированных эффектов Animation Effect. Используйте эффект «исчезновения» или появления; 5) Регулируйте скорость анимации через Animation Speed; 6) Добавляйте свои виджеты для меню wordpress.

С этим плагином можно полностью отключить анимацию и создать меню с автоматической настройкой под шаблон. Конечно, назвать этот модуль «Mega» язык не поворачивается. Однако, распространяется расширение бесплатно. Установка занимает не более 10-15 мин.