Как написать 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 так:
Здесь как раз видно все эти переменные:
- $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: http://i-novice.net/files/my_first_widget.zip
Author: Novice
Author URI: http://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.
А пока удачи.
Читайте также:
Пишем wordpress плагин hello_world. Продолжение.
Пишем wordpress плагин. Работа с БД.
Во второй статье про плагин ...
Пишем wordpress плагин hello_world
Давно я уже хотел подойти ...
Как перевести wordpress плагин
Если вы написали какой-то более-менее ...
Форма комментирования на AJAX
За все время мы обратились ...
Работа с графикой в php.
Начинаю постепенно добираться до темы ...
Осмысленные линки и mod_rewrite.
Ссылки… В Seo это слово, ...
Подсветка кода. Плагин codecolorer.
На моем блоге очень много ...
Поиск в XML с помощью XQuery
Тема парсинга XML настолько обширна, ...
Сентябрь 22nd, 2008
Супер!!!
Октябрь 30th, 2008
А куда их складывать то, виждеты?
Октябрь 31st, 2008
Все разобрался, нужно кидать либо в wp-content\plugins отдельным пхп файлом и потом в админке активоровать плагин, либо добавить код виджета в wp-content\themes\название_темы\functions.php
Первое предпочтительней, так как не зависит от конкретной темы.
Автору статьи большой респект, разобрался с виджетами.
P.S. Кстати сохранять нада в кодировке UTF-8 without BOM а то будет ругаться при сохранении настроек виджетов в админке.
Октябрь 31st, 2008
Не успел я ответить
Ноябрь 23rd, 2008
Будет инет(анлим) разберусь основательней с этой статьёй)) Идеи есть уже для сайтов)
Декабрь 3rd, 2008
Только-только начинаю разбираться с WP. У многих блогеров в сайд баре висях 4 грфических баннера. Интересно они их ручками вставляют ? Или какой то плагин используют ?
И спасибо за блог. Думаю будет интересно почитать в дальнейшем.
Декабрь 4th, 2008
Баннеры можно добавлять через текстовые виджеты (виджет с именем Текст). Кроме того, иногда это делают, через добавление html кода прям в шаблон (ручками т.е.). Плагины для этого не нужны.
Декабрь 8th, 2008
Да, я понимаю ,что можно ручками. Думал что может есть плагин для админки.. ну что б быстрее.
Декабрь 18th, 2008
Ребята, подскажите кто знает с помощью какого виджета можно сделать меню чтобы при наведении мышкой на строку меню выплывала подстрока с возможным выбором нескольких подопций. Типа Услуги- консалтинг
– факторинг
– банкинг
-…
Декабрь 21st, 2008
Ну незнаю нащет стандартных, виджетов, но можно написать самому, принцып тотже что и описан здесь, а сама менюшка делается с помощью ява скрипт. Принцып такой, создаеш div с подпунктами, факторинг, банкинг, и через style=”display:’none’;” прячем его от глаз юзера, а на блок с главным пунктом меню назначаем onmouseover=”my_function();”
Функцыя елементарная:
function my_function {
ID_дива_с_подпунктами.style.display=”"
}
при наведении наш скрытый див становится видимым, по томуже принцыпу прячем его при уберании мышки через onmouseout.
Сразу можно подсвечивать выбраный пункт меню изменяя допустим цвет фона или текста.
Надеюсь общий принцып понятен.
Декабрь 29th, 2008
Проблема в следующем: при добавлении виджета Текст и вставляя в него ссылки на RSS, кнопки и т.д., теряется форматирование, т.е. кнопки в один ряд идут прижатые к левой части. Хотелось бы их выровнять по центру сайдбара.
Делаю таблицу, но всё равно не получается.
Декабрь 30th, 2008
Это уже вопрос верстки. Я бы посоветовал открыть сайт в Firefox+Firebug и глянуть какие стили там действуют внутри сайдбара. Возможно, это получится разрешить.
Январь 18th, 2009
Моя тема основана на: Rock-Kitty.net. Спасибо за совет Firefox+Firebug, так и поступлю, как тока времени будет побольше.
Февраль 24th, 2009
Так и не понял, как мне поправить код виджета “Рубрики”. Я хочу добавить параметр “depth=1″ для функции wp_list_category, но я не знаю как отредактировать этот виджет
Март 19th, 2009
Класная статья! То что нужно, как раз хотел вджет найти и подумывал сам написать … простенький нужен. И наткнулся на эту статью. Спасибо, в общем!
Апрель 23rd, 2009
Большое спасибо за статью. На русском языке не так много информации по WordPress для разработчиков. Плагины-то я делать умею, а вот виджетов не делал еще.
Август 18th, 2009
Решил попрограммировать для WordPress. А можно ли как-то поместить виджет внутрь страницы?
Август 21st, 2009
2Михаил: Если хочешь поместить какой-то контент внутрь страницы, то лучше использовать для этого плагин. В тексте, например, делаешь пометку [MY_WIDGET_CONTENT] в нужном месте, а плагином ее потом меняешь на нужный контент.
Август 22nd, 2009
[...] Сделан виджет на основе наработок Spryt в частности скрипта SAPE stat и статьи ‘Как написать wordpress виджет‘. [...]
Апрель 15th, 2010
Подскажите пожалуйста, какой использовать плагин, чтобы у каждого поста был свой виджет с уникальным html кодом? Очень надо!!!! Спасибо!!!!!!!!!!!
Август 4th, 2010
Отличная статья!
Просто и доступно. Искал как раз написание плагина, но нашлось много мусора, а тут именно то что нужно.
Спасибо.
Сентябрь 1st, 2010
Отлично написано. Спасибо.
В нете мало нормальной инфы по этому поводу.
Понимаю что статья старовата, но все же надеюсь на ответ знающего автора!
Сделал по примеру свой, более функциональный и сложный виджет. Но он у меня используется в теме только один раз
То есть, мне хотелось бы его использовать в разный местах сайдбара (в разных сайдбарах) с различными настройками!
а он, зараза, после перетаскивания в сайдбар пропадает из админ панели. Типо его можно использовать только раз
помогите плз!!!
как решить этот вопрос?
Декабрь 16th, 2010
Автору Респект. Отличная стаття
Январь 8th, 2011
Кстати, в кодексе WP данные функции – register_sidebar_widget и т. д. помечены как Deprecated, т.е. в будущих версиях они не будут поддерживаться. Что любопытно, в том же кодексе новые аналоги приведены не для всех функций, и это в англоязычной ветке.
Февраль 14th, 2011
Очень классная статья, все достаточно просто и доступно.
Просмотрел много различных статей по созданию виджетов под вордпресс, однако здесь на мой взгляд показан самый простой вариант.
Только одну вещь я так и не понял как мне сделать чтоб я мог использовать созданный виджет несколько раз. То есть как только я перетаскиваю его в одну из позиций он сразу же исчезает из Available Widgets.
Декабрь 14th, 2011
Спасибо то что нужно и не чего лишнего
Декабрь 24th, 2011
Отличная статья. Спасибо. Нашел много чего интересного
Февраль 20th, 2012
Как создать свой виджет???