Настройка и установка. Виджеты WordPress. Обзор плагинов для новых виджетов WordPress Лучшие виджеты плагины для wordpress

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

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

Зайдите в админку WP и перейдите в раздел «Внешний вид» — «Виджеты». В центре страницы представлены все доступные на данный момент виджеты, а справа - используемые в теме колонки (или сайдбары).

Для использования виджета на блоге — откройте колонку, в которой он будет размещаться, и просто перетащите его в эту колонку (Drag and Drop). После перетаскивания станут доступны его настройки. Последовательность виджетов в сайдбаре можно менять так же перетаскиванием. Если вам какой-то из используемых виджетов стал временно не нужен, его можно не удалять, а перетащить в поле «Неактивные». Оттуда вы всегда сможете его восстановить.

После доступны следующие виджеты:

• Календарь — это не просто календарь, а календарь ваших записей. В нем отмечаются те дни, в которые были опубликованы записи.
• Облако меток — визуальное представление меток или рубрик блога. Чем чаще используется метка/рубрика, тем жирнее и большее ее написание в облаке меток.
• Рубрики — это меню, в котором отображаются все созданный на блоге рубрики, в которых есть хотя бы одна опубликованная статья.
• Свежие комментарии — виджет выводит список последних комментарий блога;
• Страницы — список опубликованных страниц блока. Список можно упорядочить по заголовкам, порядку или ID страницы. Так же можно исключить не нужные страницы, указав их ID через запятую в поле «Исключить».
• RSS — добавление на блог RSS ленты другого сайта/блога.
• Архив — виджет добавляет архив записей блога по месяцам, то есть можно посмотреть, в каком месяце каких статьи были написаны.
• Мета — добавляет блог содержащий следующие пункты: Управление сайтом (переход в админку), Выход (выйти из админки), RSS комментариев, ссылку на WordPress.org.
• Поиск — данный виджет добавляет поиск по блогу. Большинство тем уже имеют встроенный поиск по блогу, поэтому не стоит его дублировать.
• Произвольное меню — позволяет выбрать меню, созданное в разделе «Внешний вид» -> «Меню».
• Свежие записи — добавляет заголовки последних опубликованных записей.
• Ссылки — отображает ссылки, созданные в разделе «Ссылки» панели администратора WordPress.
• Текст — очень полезный виджет, в который можно засунуть любой текст или HTML-код. Используется для вывода всевозможных счетчиков, подписки, социальных кнопок, карт и так далее — всего стороннего функционала, который представлен не в виде плагинов, а в виде HTML-кода.

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

Установить плагин – SiteOrigin Widgets Bundle вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

После установки и активации плагина, перейдите на страницу: Плагины – SiteOrigin Widgets . Здесь вы сможете включать или отключать виджеты. Чтобы включить виджет, нажмите на кнопку – Activate , а чтобы отключить виджет, нажмите на кнопку – Deactivate .

В вашем распоряжении будут следующие виджеты: (описание по порядку, сверху вниз и слева на право)

– Button, виджет для создания кнопок.

– Call-To-Action, виджет для создания призыва к действию.

– Contact Form, виджет для создания простой контактной формы.

– Editor, виджет визуальный редактор, как и при создании записи или страницы.

– Features, виджет с набором иконок.

– Google Maps, виджет для создания Google карт.

– Headline, виджет для создания заголовков.

– Hero Image, виджет для добавления изображений.

– Icon, виджет набор значков.

– Image, простой виджет изображений.

– Image Grid, виджет для добавления на сайт сетки изображений.

– Image Slider, простой виджет слайдер изображений.

– Layout Slider, адаптивный слайдер с дополнительными функциями.

– Post Carousel, виджет для отображения записей в виде карусели.

– Price Table, виджет для создания ценовых таблиц.

– Simple Masonry Layout, создание макетов, изображений с ссылками.

– Social Media Buttons, виджет для добавления кнопок соцсетей с вашими профилями.

– Taxonomy, виджет для отображения категорий, рубрик, меток, для выбранного поста.

– Testimonials, виджет для создания отзывов.

– Video Player, виджет видео плеер.

Все включенные и активированные виджеты будут отображаться на странице: Внешний вид – Виджеты , и вы сможете добавить их на свой сайт.

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

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

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

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

Кстати, у меня осталось всего две лицензии . По условиям предыдущей акции её стоимость составляла 3500 руб. Но у меня сегодня просто ну очень хорошее настроение и я решил презентовать их всего за 2500руб. Вот повезет же кому-то! Я сам покупал эту лицензию аж за 4.500 руб., так что предложение самое что не на есть выгодное! Спешите!!!

А теперь, вернемся к нашей серьезной теме — виджеты...

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

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

Например это может быть:

• архив;
• облако меток;
• форма поиска;
• свежие записи;
• страницы;
• ссылки;
• форма подписки;
• и многое другое (даже произвольный код можно вывести html или php).

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

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

Установка виджетов на Вордпресс

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

Смотрим и что мы видим?! Там есть такие заголовки: «Неактивные» и «Доступные». В правой стороне находятся блоки, которые обозначают места в вашей теме, в которые вы сможете установить виджет.

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

Как в виджете обработать php-код?

Бывают такие ситуации что в виджете необходимо разместить php код, но по умолчанию движок не выполняет там такие команды, как же быть?! А все очень просто $) Нужно прописать в functions.php следующее:

function php_in_widgets ($widget_content) {
if (strpos ($widget_content, " ob_start();
eval("?" . ">" . $widget_content);
$widget_content = ob_get_contents ();
ob_end_clean (); }
return $widget_content; }

add_filter ("widget_text", "php_in_widgets", 99);

Удаление виджетов для WordPress

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

Настройка виджетов для WordPress

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

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

Сегодня существуют плагины (Dynamic Widgets, Widget Logic), которые позволяют увеличить количество виджетов на вашем блоге, а так же расширяющие их функционал! Например, плагин Cforms 2 — который создает информационный блок, где можно выводить разные формы обратной связи, от простой до сложной формы бронирования.

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

Хотели бы вы добавить виджет WordPress в область хидера своего сайта? Виджеты позволяют вам легко добавлять блоки контента в определенные места вашей темы. В сегодняшней статье мы покажем вам как легко добавить виджет WordPress в хидер сайта.

Зачем и когда может потребоваться добавлять виджет в хидер

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

Область для виджетов в хидере или перед контентом может быть использована для отображения рекламы, свежих материалов и т.п.

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

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

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

Шаг 1. Создаем область для виджетов в хидере

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

Для этого добавляем следующий код в файл functions.php темы:

Function wpb_widgets_init() { register_sidebar(array("name" => "Произвольная область для виджетов в хидере", "id" => "custom-header-widget", "before_widget" => "

", "after_title" => "

Этот код регистрирует новый сайдбар или область для виджетов в вашей теме.

Теперь можно перейти на страницу Внешний вид » Виджеты и вы увидите новую область под названием ‘Произвольная область для виджетов в хидере’.

Добавляем в нее текстовый виджет для проверки и сохраняем.

Шаг 2: Выводим произвольную область для виджетов в хидере

Если сейчас вы перейдете на сайт, то не увидите добавленный текстовый виджет.

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

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

Теперь переходим на сайт и видим добавленный виджет в в шапке.

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

Шаг 3: Стилизируем виджет в хидере с помощью CSS

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

Самым простым способом сделать это будет использование плагина CSS Hero. Он позволит вам воспользоваться интуитивно понятным интерфейсом для изменения CSS любой WordPress темы.

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

Появится интерфейс кастомайзера тем WordPress. Здесь выбираем владку ‘Произвольный CSS’.

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

Ниже пример кода для минимального оформления области виджетов.

Div#header-widget-area { width: 100%; background-color: #f7f7f7; border-bottom:1px solid #eeeeee; text-align: center; } h2.chw-title { margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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