Как использовать виджеты для блога на WordPress. Виджеты wordpress, все про полезные виджеты для вордпресс

Всем привет! У моего молодого человека появился новый друг — мотоцикл! Теперь он проводит большую часть дня в его компании, а я сижу дома и занимаюсь блогом. У меня тоже появилось новое хобби, но об этом позже:)

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

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

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

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

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

Вот доступные виджеты темы Twenty Thirteen (Консоль – Внешний вид – Виджеты):

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

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

Сбоку, как видите, чтобы добавить WordPress-виджеты предусмотрены две области: основная (в нижней части сайта – футер) и дополнительная (боковая колонка).

Соответственно, нужно перетащить понравившуюся вам опцию в основную или дополнительную область.

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

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

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

Вот так выглядит блог перед добавлением виджетов:

Нет ничего ни в сайдбаре, ни в футере.

Теперь, для примера, перенесем несколько виджетов в одну и в другую панель:

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

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

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

Посмотрим, как изменился наш блог с виджетами:

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

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

Справа появился календарь и облако меток, и в подвале сайта 3 добавленные нами опции.

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

Функции шаблонных виджетов Вордпресс

После того как вы и установили его, вам станут доступны такие WordPress-виджеты:

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

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

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

Вот, например, код счетчика Рамблер:

И вот он отображен в сайдбаре:

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

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

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

Некоторые плагины виджетов WordPress

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

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

Вспомним некоторые из них.

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

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

Определение интерфейса панели параметров

Шаг 5: Сохранить параметры панели настроек

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

Панель параметров не поддерживает загрузку файлов. Вы не можете добавить поле файла на панели параметров виджета.

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

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

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

Теперь мы будем определять сам виджет. Первый аргумент конструктора родительского класса является уникальным для виджета, определенного этим классом. Имя этого элемента этого элемента будет установлено в это значение. описание - описание виджета, как оно будет показано в разделе «Администрирование виджета».

Твиты возвращаются как ассоциативный массив.
Функция принимает ассоциативный массив.
Содержимое виджета будет заключено в элемент.
Этот атрибут класса этого элемента будет установлен в это значение.

Затем мы регистрируем виджет в теле функции.

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

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Дополнительный блок", "before_widget" => "", "after_widget" => "", "before_title" => "

", "after_title" => "

",));

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

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

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

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

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

Виджеты облегчают жизнь пользователям

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

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

Как добавить или удалить виджеты (для начинающих)

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

Использовать короткие коды в виджетах без плагина

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

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

Если с этим разобрались, переходим в админке на страницу Внешний вид > Виджеты. Видите список доступных виджетов? Для того, чтобы добавить виджет на сайт, нужно перетащить его в одну из областей справа (сайдбаров).

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

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

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

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

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

Почему моя тема не похожа на демо?

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

Мне не нравятся значки социальных сетей рядом с заголовком в этой теме

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

Для того, чтобы удалить виджет, нажимаем ссылку «Удалить» (её видно на предыдущем скриншоте). Если же вы хотите лишь временно отключить виджет, сохранив его настройки, перетаскиваем его в блок «Неактивные виджеты», который находится под блоком «Доступные виджеты».

Отключение стандартных виджетов WordPress

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

Для отключения виджетов можете воспользоваться готовым кодом ниже:

Вставьте код в файл functions.php текущей темы.
Удалите или закомментируйте строки с теми виджетами, которые удалять не нужно.
И только потом можете сохранить файл.

function true_remove_default_widget() { unregister_widget("WP_Widget_Archives" ) ; // Архивы unregister_widget("WP_Widget_Calendar" ) ; // Календарь unregister_widget("WP_Widget_Categories" ) ; // Рубрики unregister_widget("WP_Widget_Meta" ) ; // Мета unregister_widget("WP_Widget_Pages" ) ; // Страницы unregister_widget("WP_Widget_Recent_Comments" ) ; // Свежие комментарии unregister_widget("WP_Widget_Recent_Posts" ) ; // Свежие записи unregister_widget("WP_Widget_RSS" ) ; // RSS unregister_widget("WP_Widget_Search" ) ; // Поиск unregister_widget("WP_Widget_Tag_Cloud" ) ; // Облако меток unregister_widget("WP_Widget_Text" ) ; // Текст unregister_widget("WP_Nav_Menu_Widget" ) ; // Произвольное меню } add_action( "widgets_init" , "true_remove_default_widget" , 20 ) ;

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

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

Создание собственного виджета

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

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

По своей структуре наш виджет будет похож на стандартный виджет WordPress «Свежие записи », т е он будет иметь похожие параметры (заголовок и количество отображаемых постов) и похожий HTML-шаблон для вывода постов (заголовки записей со ссылками в виде

Вставляем этот код в functions.php:

/* * создание виджета */ function __construct() { parent::__construct( "true_top_widget" , "Популярные посты" , // заголовок виджета array ( "description" => "Позволяет вывести посты, отсортированные по количеству комментариев в них." ) // описание ) ; } /* * фронтэнд виджета */ public function widget( $args , $instance ) { $title = apply_filters( "widget_title" , $instance [ "title" ] ) ; // к заголовку применяем фильтр (необязательно) $posts_per_page = $instance [ "posts_per_page" ] ; echo $args [ "before_widget" ] ; if ( ! empty ( $title ) ) echo $args [ "before_title" ] . $title . $args [ "after_title" ] ; $q = new WP_Query("posts_per_page=$posts_per_page &orderby=comment_count" ) ; if ( $q ->have_posts () ) : ?>

/* * бэкэнд виджета */ public function form( $instance ) { if ( isset ( $instance [ "title" ] ) ) { $title = $instance [ "title" ] ; } if ( isset ( $instance [ "posts_per_page" ] ) ) { $posts_per_page = $instance [ "posts_per_page" ] ; } ?>

">Заголовок " name="get_field_name ( "title" ) ; ?> " type="text" value=" " />

">Количество постов: " name="get_field_name ( "posts_per_page" ) ; ?> " type="text" value=" " size="3" />

/* * сохранение настроек виджета */ public function update( $new_instance , $old_instance ) { $instance = array () ; $instance [ "title" ] = ( ! empty ( $new_instance [ "title" ] ) ) ? strip_tags ( $new_instance [ "title" ] ) : "" ; $instance [ "posts_per_page" ] = ( is_numeric ( $new_instance [ "posts_per_page" ] ) ) ? $new_instance [ "posts_per_page" ] : "5" ; // по умолчанию выводятся 5 постов return $instance ; } } /* * регистрация виджета */ function true_top_posts_widget_load() { register_widget( "trueTopPostsWidget" ) ; } add_action( "widgets_init" , "true_top_posts_widget_load" ) ;

Я перетащил этот код «как есть» (естественно удалив первую строчку Внешний вид > Виджеты мы видим наш виджет:

Давайте перетащим его в какой-нибудь сайдбар справа:

Вот и всё, указываем заголовок виджета (если нужно), количество постов, которое мы хотим вывести и нажимаем «Сохранить» — после этого виджет появится на сайте.

Список плагинов с полезными виджетами

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

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

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

Beautiful Yahoo Weather — виджет прогноза погоды, довольно неплохой и красивый по сравнению с аналогами. Но для этих целей наверное лучше использовать текстовый виджет WordPress в связке с информерами от Gismeteo, Яндекса и т.д.
NextGEN Gallery — плагин для создания и управления галереями изображений в WordPress, одна из функций которого — виджет галереи.
Search by Google — форма поиска по сайту от Google (Google Custom Search).
Slick Contact Forms — виджет формы обратной связи.
Tabbed Login Widget — виджет авторизации, сделан в виде трех вкладок — «Вход», «Регистрация», «Забыли пароль», весьма удобный.
WP Currency Converter — конвертер валют.
WP Editor Widget — используйте редактор WordPress для заполнения этого виджета.
WP-Cumulus — добавляет флэш-облако тегов и/или категорий.
WP-Polls — удобный плагин для создания опросов на сайте.
Yet Another Related Posts Plugin (YARPP) — мощный плагин для вывода похожих записей.
Youtube Channel Gallery — виджет со свежими видео с канала на YouTube. Виджет выглядит очень красиво, хорошо и легко настраивается.

Со временем список будет пополняться.

Я не стану рассматривать все остальные виджеты социальных сетей (Facebook, Вконтакте, Twitter и т.д.) — в принципе официальные виджеты вполне удобные — просто копируем код, который нам дают и вставляем его в вордпрессовский виджет «Текст ».

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Помощь по Теле2, тарифы, вопросы