Новый виджет для WordPress — легко! Создание виджетов WordPress.

android:layout_width=»fill_parent»

android:layout_height=»wrap_content»/>

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

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

Что собой представляет WordPress-виджет?

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

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

Создание виджета в WordPress

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

В данном руководстве мы создадим простой виджет, который просто приветствует посетителей. Скопируйте следующий код и поместите его в плагин или в functions.php вашей темы.

// Creating the widget class wpb_widget extends WP_Widget { function __construct() { parent::__construct(// Base ID of your widget "wpb_widget", // Widget name will appear in UI __("WPBeginner Widget", "wpb_widget_domain"), // Widget description array("description" => __("Sample widget based on WPBeginner Tutorial", "wpb_widget_domain"),)); } // Creating widget front-end // This is where the action happens public function widget($args, $instance) { $title = apply_filters("widget_title", $instance["title"]); // before and after widget arguments are defined by themes echo $args["before_widget"]; if (! empty($title)) echo $args["before_title"] . $title . $args["after_title"]; // This is where you run the code and display the output echo __("Hello, World!", "wpb_widget_domain"); echo $args["after_widget"]; } // Widget Backend public function form($instance) { if (isset($instance[ "title" ])) { $title = $instance[ "title" ]; } else { $title = __("New title", "wpb_widget_domain"); } // Widget admin form ?>

"> " name="get_field_name("title"); ?>" type="text" value="" />

Теперь перейдите в раздел Внешний вид – Виджеты и перетащите виджет WPBeginner Widget в свой сайдбар, чтобы увидеть его в действии.

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

В этом коде некоторые вещи могут вызвать у вас вопросы. Скажем, к примеру, что делает wpb_text_domain. WordPress использует gettext для обработки трансляции и локализации. Так вот: wpb_text_domain и __e указывают gettext на то, что эти строки доступны для перевода. , смотрите в нашем руководстве.

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

Перед тем, как вы начнете это руководство, вам понадобится следующее:

• Доступ к панели управления WordPress
• Любой текстовый редактор

Немного о WordPress виджетах

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

Перед началом руководства

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

Как работают пользовательские виджеты WordPress: Widgets API

WordPress позволяет вам создавать свои виджеты, предоставляя вам доступ к Widgets API . Чтобы создать пользовательский виджет, вы должны использовать стандартные классы WP_Widget из API. Эти базовые классы предлагают более 20 функций, которые вы можете свободно использовать и комбинировать. Из всех этих функций, 4 являются минимальным требованием для работы любого виджета. Вот список этих функций:

• __construct() – функция конструктора
• widget() – содержит вывод виджета
• form() – определяет настройки виджета в панели управления WordPress
• update() – обновляет настройки виджета

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

Как создать виджеты для WordPress

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

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

Теперь откройте любой текстовый редактор на вашем компьютере и создайте новый класс, который расширит базовый класс WP_Widget , вот так:

Class hstngr_widget extends WP_Widget { //Вставляйте функции сюда }

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

Function __construct() { parent::__construct(// widget ID "hstngr_widget", // widget name __("Тестовый Виджет Hostinger", " hstngr_widget_domain"), // widget description array("description" => __("Как создать виджеты для WordPress", "hstngr_widget_domain"),)); }

Public function widget($args, $instance) { $title = apply_filters("widget_title", $instance["title"]); echo $args["before_widget"]; //if title is present if (! empty($title)) echo $args["before_title"] . $title . $args["after_title"]; //output echo __("Привет мир, от сайт", "hstngr_widget_domain"); echo $args["after_widget"]; }

Здесь мы настроили вывод виджета так, чтобы он отобразил ‘Привет мир, от сайт’, и название виджета указанного пользователем.

Теперь нам необходимо написать бек-энд виджета с помощью метода form() :

Public function form($instance) { if (isset($instance[ "title" ])) $title = $instance[ "title" ]; else $title = __("Стандартный Заголовок", "hstngr_widget_domain"); ?>

"> " name="get_field_name("title"); ?>" type="text" value="" />

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

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

Public function update($new_instance, $old_instance) { $instance = array(); $instance["title"] = (! empty($new_instance["title"])) ? strip_tags($new_instance["title"]) : ""; return $instance; }

Этот код принимает текущий заголовок вновь созданного экземпляра, удаляет любые теги HTML/PHP, передает заголовок экземпляру и возвращает его.

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

Function hstngr_register_widget() { register_widget("hstngr_widget"); } add_action("widgets_init", "hstngr_register_widget");

Обратите внимание, что этот код должен быть помещен вне функции hstngr_widget .

Мы определили новую функцию под названием hstngr_register_widget() , которая регистрирует наш виджет с помощью ID виджета, указанного в функции __construct() . Затем мы связали эту функцию при помощи widgets_init , которая загружает этот виджет в WordPress через встроенный метод add_action() . В финальном варианте ваш WordPress виджет должен выглядеть примерно вот так:

Function hstngr_register_widget() { register_widget("hstngr_widget"); } add_action("widgets_init", "hstngr_register_widget"); class hstngr_widget extends WP_Widget { function __construct() { parent::__construct(// widget ID "hstngr_widget", // widget name __("Тестовый Виджет Hostinger", " hstngr_widget_domain"), // widget description array("description" => __("Как создать виджеты для WordPress", "hstngr_widget_domain"),)); } public function widget($args, $instance) { $title = apply_filters("widget_title", $instance["title"]); echo $args["before_widget"]; //if title is present if (! empty($title)) echo $args["before_title"] . $title . $args["after_title"]; //output echo __("Привет мир, от сайт", "hstngr_widget_domain"); echo $args["after_widget"]; } public function form($instance) { if (isset($instance[ "title" ])) $title = $instance[ "title" ]; else $title = __("Стандартный Заголовок", "hstngr_widget_domain"); ?>

"> " name="get_field_name("title"); ?>" type="text" value="" />

Вы можете использовать Файловый Менеджер, FTP-клиент или Редактор WordPress для добавления этого кода в файл functions.php вашей темы. Добавьте код в файл function.php активной темы и нажмите Обновить файл для сохранения изменений.

Теперь зайдите в панель управления WordPress и перейдите во вкладку Внешний вид → Виджеты . Далее вы должны найти виджет под названием Тестовый Виджет Hostinger в списке виджетов.

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

Поздравляем, вы успешно узнали, как создать виджеты для WordPress. Теперь вы можете посмотреть как выглядит ваш виджет.

Заключение

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

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

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

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

Include("widget_gnat_thumb.php");

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

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

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

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

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

Public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>

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

• title_thumb - Название виджета, которое задается при его активации и выведется на странице сайта. Вам больше он знаком как - Заголовок .
• cat_thumb - Это настройка выбора категории из которой будут выводится наши записи. То есть мы будем выбирать рубрику и от этого будет зависеть наш список.
• numper_post_thumb - Данная настройка будет задавать количество записей что будет выводится. Мы сделаем просто текстовое поле, где нужо будет вводить число.
• size_thumb - Это настройка, которая предложит выбрать размер миниатюры (картинки) рядом с названием записи.

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

$instance["название_настройки"] = strip_tags($new_instance["название_ настройки"]);

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

Первая настройка выведет поле - Заголовок . добавляем дальше следующий кусок кода.

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

Как и писал выше, мы просто добавляем input, в который нужно будет вводить заголовок. Как видите в коде мы 4 раза задаем имя настройки - title_thumb . Используя данный пример, можно не только заголовок задавать, но и что-нибудь еще, как например далее мы таким же способом зададим вывод количества постов. Выглядеть в админке эта настройка будет вот так:

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

Код, который нужно добавить в наш файл виджета, будет следующим:

">Выберите рубрику " id="get_field_id("cat_thumb"); ?>"> term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; } ?>

Как видите здесь так же везде указано название настройки - cat_thumb . Так что если вы ввели в начале свое название, то и тут оно должно быть соответственным. Данный список, автоматически сгенерирует все категории. В админке это будет выгладить так:

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

Как и в предыдущих настройках, в коде ниже указано везде одно название - numper_post_thumb . Следующий код добавляем к нашему файлу:

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

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

">Выберите ширину миниатюры " id="get_field_id("size_thumb"); ?>"> ... 45 75 100 125

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

Еще момент. В value , я задал значения size_1,size_2,size_3 и тд. Эти значения в будущем будут классами. То есть каждому классу будут заданы свои стили, что и будут регулировать размер миниатюр. В настройках виджета в админке появится еще один элемент:

С настройками закончили, теперь перейдем к выводимой части. То есть к тому, что будет видно на сайте, как на картинке в самом начале статьи. По сути мы добавим разметку которая выведется в виде HTML кода на сайте. Для этого добавляем дальше еще кусок кода:

have_posts()) { $populargb->the_post(); ?>
• ">
  " title="">
  " title="">Смотреть больше

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

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

  То что Вы зададите под этим названием выведется при таком вызове.

• Дальше идет ul список, который собственно и выводит название записей с миниатюрами. Для вывода, я использую WP_Query. Подробно останавливаться на том как это работает не буду, если хотите можно прочитать в статье - или . Тут везде применяется WP_Query.

  Для WP_Query задаем следующие параметры:

  • posts_per_page= - Это количество выводимых записей. Естественно, ему присваиваем нашу настройку numper_post_thumb.
  • cat= - Это параметр отвечающий за категорию из которой будет выбирать свои записи цикл. Тут присваиваем cat_thumb.
• Дальше идет уже разметка выводимой записи. По коду видно. что мы выводим Миниатюру, название записи, дату публикации и ссылку - Смотреть больше . Можете менять, добавлять и удалять все в зависимости от потребностей.
• Наша миниатюра завернута в и ему присвоен class="thumb и рядом подключение настройки. То есть присвоено два класса, один постоянный - thumb и второй задается в настройках виджета. Это как раз то о чем я писал выше при описании настроек размера миниатюры. Тоесть в зависимости от того, какой размер миниатюры Вы выберите, такой и класс присваивается. Например, если указать размер 45 на 45, то присваивается класс - size_1 . В HTML коде будет такой вид - class="thumb size_1".

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

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

В четвертой строке указываем имя виджета, которое указали еще в самом начале - Gnat_thumb_Widget

Теперь весь код целиком:

__("Виджет для вывода записей с маленькими миниатюрами", "text_domain"),)); } public function update($new_instance, $old_instance) { $instance = array(); $instance["title_thumb"] = strip_tags($new_instance["title_thumb"]); $instance["cat_thumb"] = strip_tags($new_instance["cat_thumb"]); $instance["numper_post_thumb"] = strip_tags($new_instance["numper_post_thumb"]); $instance["size_thumb"] = strip_tags($new_instance["size_thumb"]); return $instance; } public function form($instance) { ?>

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

">Выберите рубрику " id="get_field_id("cat_thumb"); ?>"> term_id) . """ . selected($instance["cat_thumb"], $link_cat->term_id, false) . ">" . $link_cat->name . "\n"; } ?>

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

">Выберите ширину миниатюры " id="get_field_id("size_thumb"); ?>"> ... 45 75 100 125

have_posts()) { $populargb->the_post(); ?>
• ">
  Смотреть больше

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

Titlebg{background:#eee;line-height:35px;text-align:center;letter-spacing:-0.2px;font-size:16px;margin-bottom:20px;} .widget{margin-bottom:25px;box-sizing:padding-box;padding:0 5px;} .widget ul{font-size:11px;margin:0;padding-right:15px;text-transform:none;line-height:15px;} .widget ul ul{margin-left:15px;} .widget ul li{color:#222;padding:5px 0;border-bottom:1px dotted #ddd;} .widget .comment-author-link{font-weight:bold;} .widget ul li:last-child{border-bottom:none;} .widget a{text-decoration:none;color:#444;font-weight:normal;} .widget a:hover,.widget a:focus,.widget a:active{text-decoration:underline;} .gnat_thumb{padding:5px;} .gnat_thumb a{font-size:11px;line-height:11px;margin-bottom:5px;display:block;} .thumb{float:left;border:1px solid #eee;padding:2;margin:0 10px 10px 0;} a.more_read{font-size:11px;text-align:right;font-weight:bold;} .size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}

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

Size_1 img{width:45px;height:auto;} .size_2 img{width:75px;height:auto;} .size_3 img{width:100px;height:auto;} .size_4 img{width:125px;height:auto;}

Статья получилась, как и обещал, не маленькой. Старался написать понятнее, так что если что не так извините. Более подробно отвечу в комментариях.

На этом все, спасибо за внимание. 🙂