Как написать wordpress виджет.
 |
Условно в wordpress`е все элементы дизайна можно разделить на несколько частей:
Единственное, что здесь может быть незнакомо для вас – это сайдбар. По сути, это обобщенная модель боковых колонок на большинстве сайтов. В них обычно ставят всякие блоки с навигацией, выводят новости, формы для авторизации и т.д. |
В wordpress все эти блоки обобщили под названием виджет.
Таким образом, сайдбар – это просто список из виджетов и ничего больше.
Теперь вернемся к теме плагинов. Плагины в wordpress - это независимые подпрограммы, которые дополняют или изменяют функциональность wordpress`а. Если вы хотите как-то визуализировать ваш плагин на страницах вашего блога, то вам нужно написать виджет для этого плагина. Другими словами, да, виджет – это визуальная часть вашего wordpress плагина.
Хотя, если быть точным, то виджет может существовать и независимо от плагина.
Быстрый старт.
Рассмотрим простейший виджет.
/*
Plugin Name: My first widget
*/
function my_first_widget($args) {
extract($args);
echo $before_widget;
echo $before_title;
echo 'Title';
echo $after_title;
echo '<center>My first widget</center>';
echo $after_widget;
}
function register_my_widget() {
register_sidebar_widget('Widget name', 'my_first_widget');
}
add_action('init', 'register_my_widget');
?>
После активации этого плагина в сайдбар можно будет добавить виджет с именем ‘Widget name’. Этот виджет просто выводит текст “My first widget” в блок с заголовком Title.
Выглядит это примерно так:
Теперь разберу про исходник… В wordpress каждый виджет определяется двумя вещами – уникальным именем и функцией вывода. С именем понятно, а функция вывода – это любая функция, которая что-то выводит в браузер.
В моем случае это функция my_first_widget.
Строка
extract($args);
просто вытаскивает перменнные $before_widget, $before_title, $after_title, $after_widget из массива $args.
Зачем нужны эти переменные? Дело в том, что все виджеты в некоторой степени унифицированы в плане дизайна при выводе. В моей теме, например все виджеты размечаются через html так:
<h2 class="widgettitle">Title</h2>
<center>My first widget</center>
</li>
Здесь как раз видно все эти переменные:
- $before_widget = <li class=”widget my_first_widget” id=”widget-name”>
- $before_title = <h2 class=”widgettitle”>
- $after_title = </h2>
- $after_widget = </li>
И все они задаются глобально для всей темы. Таким образом и достигается стандартный дизайн всех виджетов.
Следующая функция
register_sidebar_widget
нужная для регистрации виджета (чтобы он появился в адмике).
Такой специфический способ ее запуска (через add_action(‘init’, ‘register_my_widget’)) я выбрал не случайно. Может так получиться, что код вашего виджета будет подключен раньше, чем библиотека с функцией register_sidebar_widget. Привязка регистрации моего виджета к действию init исключит такую вероятность, так как оно вызывается после подключения всех библиотек.
Так вот, допустим, теперь нам нужно добавить возможность изменять заголовок виджета. Чтобы вместо Title писалось что-то другое. Знакомая задачка да? 
Но нет. На этот раз мы решим ее по-другому.
В wordpress для виджетов есть свои настройки, которые предназначены для управления внешним видом, например.
Виджеты, которые так можно настроить в админке, выглядят так:
У моего виджета пока нет настроек, поэтому нет и значка.
Ничего, сейчас исправим ?
Для регистрации панели управления виджетом нужно тоже только две функции.
Первая – выводит список полей с настройками, а вторая – регистрирует эту панель управления.
Вот первая :
function my_widget_control() {
if (!empty($_REQUEST['my_widget_title'])) {
update_option('my_widget_title', $_REQUEST['my_widget_title']);
}
?>
Заголовок : <input type="text" name="my_widget_title" />
<?
}
?>
Как вы уже заметили функция обработки выводит только поле для ввода, без формы и кнопки для ее сабмита (как в случае с плагином). Это работает потому, что все поля всех виждетов, которые сейчас на сайдбаре – находятся внутри одной формы. Поэтому имена для этих полей нужно придумывать уникальные.
Вторую функцию
register_widget_control(‘Widget name’, ‘my_widget_control’ );
помещаем внутрь register_my_widget.
Теперь мой виджет полностью работоспособен.
Вот его код:
/*
Plugin Name: My first widget
Plugin URI: https://i-novice.net/files/my_first_widget.zip
Author: Novice
Author URI: https://i-novice.net
*/
function my_first_widget($args) {
extract($args);
echo $before_widget;
echo $before_title;
echo get_option('my_widget_title');
echo $after_title;
echo '<center>My first widget</center>';
echo $after_widget;
}
function register_my_widget() {
register_sidebar_widget('Widget name', 'my_first_widget');
register_widget_control('Widget name', 'my_widget_control' );
}
function my_widget_control() {
if (!empty($_REQUEST['my_widget_title'])) {
update_option('my_widget_title', $_REQUEST['my_widget_title']);
}
?>
Заголовок : <input type="text" name="my_widget_title" />
<?
}
add_action('init', 'register_my_widget');
?>
Скачать его для препарирования можно здесь “Мой первый виджет”.
Итоги
В принципе, прочитав все предыдущие статьи про написание плагинов для wordpress:
а так же эту статью, можно написать плагин и виджет для wordpress любой сложности.
Остался только один вопрос, который я рассмотрю в следующей статье – интернационализация. Как можно перевести ваш wordpress плагин на много языков средствами wordpress.
А пока удачи.
Читайте также:
Свободный поисковик DuckDuckGo был…
Обзор книги: Запускаем…
Креативный фидбэк для бизнеса- Как перед покупкой хостинга…
Финансовый ежедневник: как…
В сети появился первый поисковик
Стартовал запуск поисковиков с…
Пентагон занялся разработкой…
Несколько рекомендаций по…
Супер!!!
А куда их складывать то, виждеты?
Все разобрался, нужно кидать либо в wp-content\plugins отдельным пхп файлом и потом в админке активоровать плагин, либо добавить код виджета в wp-content\themes\название_темы\functions.php
Первое предпочтительней, так как не зависит от конкретной темы.
Автору статьи большой респект, разобрался с виджетами.
P.S. Кстати сохранять нада в кодировке UTF-8 without BOM а то будет ругаться при сохранении настроек виджетов в админке.
Не успел я ответить
Будет инет(анлим) разберусь основательней с этой статьёй)) Идеи есть уже для сайтов)
Только-только начинаю разбираться с WP. У многих блогеров в сайд баре висях 4 грфических баннера. Интересно они их ручками вставляют ? Или какой то плагин используют ?
И спасибо за блог. Думаю будет интересно почитать в дальнейшем.
Баннеры можно добавлять через текстовые виджеты (виджет с именем Текст). Кроме того, иногда это делают, через добавление html кода прям в шаблон (ручками т.е.). Плагины для этого не нужны.
Да, я понимаю ,что можно ручками. Думал что может есть плагин для админки.. ну что б быстрее.
Ребята, подскажите кто знает с помощью какого виджета можно сделать меню чтобы при наведении мышкой на строку меню выплывала подстрока с возможным выбором нескольких подопций. Типа Услуги- консалтинг
- факторинг
- банкинг
-…
Ну незнаю нащет стандартных, виджетов, но можно написать самому, принцып тотже что и описан здесь, а сама менюшка делается с помощью ява скрипт. Принцып такой, создаеш div с подпунктами, факторинг, банкинг, и через style=”display:’none';” прячем его от глаз юзера, а на блок с главным пунктом меню назначаем onmouseover=”my_function();”
Функцыя елементарная:
function my_function {
ID_дива_с_подпунктами.style.display=””
}
при наведении наш скрытый див становится видимым, по томуже принцыпу прячем его при уберании мышки через onmouseout.
Сразу можно подсвечивать выбраный пункт меню изменяя допустим цвет фона или текста.
Надеюсь общий принцып понятен.
Проблема в следующем: при добавлении виджета Текст и вставляя в него ссылки на RSS, кнопки и т.д., теряется форматирование, т.е. кнопки в один ряд идут прижатые к левой части. Хотелось бы их выровнять по центру сайдбара.
Делаю таблицу, но всё равно не получается.
Это уже вопрос верстки. Я бы посоветовал открыть сайт в Firefox+Firebug и глянуть какие стили там действуют внутри сайдбара. Возможно, это получится разрешить.
Моя тема основана на: Rock-Kitty.net. Спасибо за совет Firefox+Firebug, так и поступлю, как тока времени будет побольше.
Так и не понял, как мне поправить код виджета “Рубрики”. Я хочу добавить параметр “depth=1″ для функции wp_list_category, но я не знаю как отредактировать этот виджет
Класная статья! То что нужно, как раз хотел вджет найти и подумывал сам написать … простенький нужен. И наткнулся на эту статью. Спасибо, в общем!
Большое спасибо за статью. На русском языке не так много информации по WordPress для разработчиков. Плагины-то я делать умею, а вот виджетов не делал еще.
Решил попрограммировать для WordPress. А можно ли как-то поместить виджет внутрь страницы?
2Михаил: Если хочешь поместить какой-то контент внутрь страницы, то лучше использовать для этого плагин. В тексте, например, делаешь пометку [MY_WIDGET_CONTENT] в нужном месте, а плагином ее потом меняешь на нужный контент.
[…] Сделан виджет на основе наработок Spryt в частности скрипта SAPE stat и статьи ‘Как написать wordpress виджет‘. […]
Подскажите пожалуйста, какой использовать плагин, чтобы у каждого поста был свой виджет с уникальным html кодом? Очень надо!!!! Спасибо!!!!!!!!!!!
Отличная статья!
Просто и доступно. Искал как раз написание плагина, но нашлось много мусора, а тут именно то что нужно.
Спасибо.
Отлично написано. Спасибо.
В нете мало нормальной инфы по этому поводу.
Понимаю что статья старовата, но все же надеюсь на ответ знающего автора!
Сделал по примеру свой, более функциональный и сложный виджет. Но он у меня используется в теме только один раз
То есть, мне хотелось бы его использовать в разный местах сайдбара (в разных сайдбарах) с различными настройками!
а он, зараза, после перетаскивания в сайдбар пропадает из админ панели. Типо его можно использовать только раз
помогите плз!!!
как решить этот вопрос?
Автору Респект. Отличная стаття
Кстати, в кодексе WP данные функции - register_sidebar_widget и т. д. помечены как Deprecated, т.е. в будущих версиях они не будут поддерживаться. Что любопытно, в том же кодексе новые аналоги приведены не для всех функций, и это в англоязычной ветке.
Очень классная статья, все достаточно просто и доступно.
Просмотрел много различных статей по созданию виджетов под вордпресс, однако здесь на мой взгляд показан самый простой вариант.
Только одну вещь я так и не понял как мне сделать чтоб я мог использовать созданный виджет несколько раз. То есть как только я перетаскиваю его в одну из позиций он сразу же исчезает из Available Widgets.
Спасибо то что нужно и не чего лишнего
Отличная статья. Спасибо. Нашел много чего интересного
Как создать свой виджет???
Спасибо за статью. А вот куда класть созданный файл и как подключить я что-то не очень понял. Можете подсказать?
А как в файле CSS обратиться к классу: widget widget_categories??? Я вот так делаю:
.widget widget_categories {color:#ccc;}
Но цвет не меняется!!! Ваш блог в закладки!! Подскажите как правильно обратиться к такому класу, потому что я хочу чтобы у меня для каждого виджета разным цветом был заголовок, например.
Блин, все нашел, я затупил….
.widget_categories {color:#ccc;}
Всё отлично, но у Вас ошибка в коде. Вот именно так как написано работать не будет. Если немного подправить в строке 35, т.е. вместо <? написать <?php - работает.
Статья, супер, но я чё-то не могу разобраться с этими переменными
[…] 2. Building a Child Theme 3. Как написать wordpress виджет. […]
Плагин получился, но вставить его можно только один - как сделать их бесконечное множество?
Зачем выкладывать код если ты не можешь его нормально скопировать. Просьба в следующий раз выкладывать картинку!.
Spasibo, ochen pomoaglo, a s kak sdelat chtobi widget poyavilas na nujnom mne stranice … ???
Админ ты гандон. На хуя такая подляна? Вместо того чтобы копировать, я должен код руками переписывать. Пиздец. Вы заебали уже все с этой хуйнёй. Ну не хотите, чтобы люди копировали, дак просто запретите на хуй использование правой кнопки мыши у себя на сайте и не хуй тут мозг трахать. Уебаны, бля!!! И статья твоя говно кстати. Такое впечатление что малыш тупорылый писал. Бля, задрали эти ёбаные школьники, которые возомнили себя хуй знает кем. И несут поеботу всякую с умными рожами. Да пошли вы в жопу в общем.
Кстати, задумайся, сколько постоянных посетителей ты теряешь, из-за этого своего заёба? Много, очень много. Так-что включи мозг и не еби его.
Странно. У меня все копируется. Может руки не оттуда?
У самого руки из жопы. Сперва попробуй код скопировать, а потом пальцами шевели.
Админ, или модератор. Я смотрю вы честные ребята. Обычно такие коменты, как мой, модерацию не проходят. Правда такой комент я оставил первый раз в жизни. Но просто реально достала эта бодяга с копированием. Так что буду заходить к вам почаще. Ругаться больше не буду, обещаю
Ты либо читать не умеешь, либо читаешь мимо строк. Я писал, что у меня все копируется отлично. Рассказываю, запоминай, и не хами. Выделяю мышкой текст (любой) или код. Нажимаю ПКМ, выбираю копировать. Вставляю в текстовый редактор и все копируется и вставляется как надо. Тренеруйся. Я работаю через гугл хром браузер. Удачи.
Пло сути вопроса - код копируется НО! В конце добавляется “Подробнее” Я так понимаю стоит какая-то защита от плагиата.
П.С. Пишите ещё
Действительно, код не копируется.