Виджеты ВордПресс: что это, для чего нужны, как добавить

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

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

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

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

Где размещаются виджеты ВордПресс

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

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

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

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

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

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

Как добавить виджет ВордПресс

Чтобы добавить виджет, неважно, стандартный от создателей WP или установленный вами дополнительно, нужно:

  • открыть панель администратора ВордПресс;
  • на вкладке Внешний вид перейти в подпункт Виджеты;
  • перетащите необходимый виджет из списка слева в одну из областей справа.

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

Где брать новые виджеты ВордПресс

Узнав, как работать со стандартными виджетами, вы наверняка захотите подключить себе что-нибудь еще. Все же, всегда хочется сделать проект более функциональным и интересным, особенно если вы создаете его «для себя», а не на заказ для сторонней организации. Для этого нужно подключить дополнительные плагины, включающие в себя виджеты. Их можно найти в официальной библиотеке ВордПресс, в крупных магазинах инструментов WP (например, в EnvatoMarket, премиальные продукты из которого мы обозреваем в блоге) и на сторонних сайтах.

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

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

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

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

Виджеты ВКонтакте для ВордПресс

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

В случае с ВКонтакте следует перейти по адресу https://vk.com/dev, а затем найти в меню пункт с виджетами для сайтов. Их доступно более 15:

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

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

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

Виджет «лайка» Facebook для WordPress

Не всегда большая часть аудитории проекта пользуется соцсетью VK, особенно если ваши пользователи не русскоязычные. Гораздо универсальнее виджет «лайка» от FB. Для получения кода его размещения перейдите по ссылке https://developers.facebook.com/docs/plugins/like-button. Там можно настроить внешний вид кнопки и ее функциональность. Размещение на вашем WP-сайте выполняется также, как и в случае с ВК, посредством инструмента текст во вкладке Виджеты в разделе админ-панели Внешний вид.

Также по ссылке https://developers.facebook.com/docs/plugins/share-button можно подключить виджет «Поделиться» от FB, позволяющий посетителям сайта рассказывать о статье свои друзьям или подписчикам. Полный список виджетов Facebook вы можете получить, изучив страницу https://developers.facebook.com/products/. Кстати, там же рассказывается о виджетах Instagram — данная соцсеть, в некотором смысле, является частью FB.

Виджеты Twitter для ВордПресс

Твиттер предлагает 5 видов стандартных виджетов, доступных бесплатно:

  • Профиль. Инструмент будет выводить в отдельном блоке на вашем сайте все твиты конкретного пользователя. Единственное условие — профиль должен быть открытым.
  • Нравится. Виджет будет показывать все твиты, которые «лайкнул» определенный пользователь (например, ваш личный аккаунт). Таким образом, можно сформировать список из любых твитов из разных источников.
  • Список. Будет показывать посты Твиттера из каких-либо открытых списков, с которыми вы можете подробнее ознакомиться по ссылке https://help.twitter.com/en/using-twitter/twitter-lists.
  • Коллецкция. Еще один способ отображения избранных постов. Виджет будет показывать избранные твиты из спецколлекции, подробнее о которой можно прочитать по ссылке https://help.twitter.com/ru/using-twitter/advanced-tweetdeck-features.
  • Момент. Будет выводить публикации из источника, называющегося «моментом». Подробнее о том, что это такое и как сделать свой «момент» можно прочитать по ссылке https://help.twitter.com/ru/using-twitter/embed-twitter-feed.

Теперь рассмотрим, как получить код виджета для его встраивания на сайт. Для этого откройте ссылку https://publish.twitter.com/ и укажите там необходимые данные. Система выдаст вам HTML-код, который можно будет вставить на сайт также, как и в случае с другими соцсетями, используя инструмент текст.

Отдельно хочется рассказать о возможности подключения премиального плагина Твиттера, продающегося в магазине Code Canyon. Это AccessPress Twitter Feed Pro, самый популярный из подобных платных инструментов для ВордПресс. Его особенность заключается в наличии множества функций, которых нет в стандартных виджетах Твиттера. За $17 вы получите:

  • возможность формирования ленты из постов, опубликованных под определенными хэштегами;
  • в одной ленте могут быть твиты нескольких пользователей;
  • поддержку фото и видео в постах;
  • 22 шаблона для оформления ленты, которые с одной стороны, имеют узнаваемый для пользователей Twitter дизайн, а с другой стороны, не будут портить внешний вид сайта, поскольку будут соответствовать и ему;
  • многие другие дополнительные возможности — обязательно изучите инструмент подробнее, если решите добавить на свой сайт ленту Твиттера.

Размещение видео с YouTube в ВордПресс

Многие думают, что для размещения видеороликов с Ютуба на ВордПресс-сайте тоже нужен дополнительный виджет. На самом деле все гораздо проще. Чтобы встроить видео:

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

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

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

  • 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. Завершим нашу подборку плагином ВордПресс, позволяющим разместить на боковой панели или в нижнем колонтитуле карту, показывающую местоположение вашего офиса, магазина, или места, где проводится рекламируемое на сайте мероприятие. Карта будет интерактивной: пользователь сможет приближать ее, отдалять, рассматривать местность вокруг, чтобы спланировать путь. Виджет легко размещается и настраивается, и пожалуй, является лучшим из инструментов-карт.

В заключение

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