Как создать свои собственные базовые виджеты WordPress

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

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

Это также продолжение продолжающейся серии, в которой я покажу вам, как легко настроить шаблон WordPress.

,

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

Ключевые понятия: запросы WordPress и цикл

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

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

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

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

Основной код виджета

Начните с создания нового файла .php в каталоге wp-content / plugins. Вы также можете следить за учебным пособием в автономном режиме, а затем загружать его с помощью интерфейса WordPress, но я считаю, что его легче писать по мере продвижения в случае необходимости отладки. Называйте ваш файл как хотите, но я использую random-post-widget.php

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

[NOEDIT]

'RandomPostWidget', 'description' => 'Displays a random post with thumbnail' );
$this->WP_Widget('RandomPostWidget', 'Random Post and Thumbnail', $widget_ops);
}
function form($instance)
{
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
?>
Title: 

[/NOEDIT]

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

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

Новый запрос Петля

Чтобы сделать новый запрос к базе данных вашего блога, вам нужно использовать функцию query_posts () вместе с несколькими параметрами, а затем выполнить вывод, используя цикл while. Давайте попробуем это — очень простой запрос и цикл для демонстрации. Замените строку кода, которая говорит:

[NOEDIT]

This is my new widget!

[/NOEDIT]

со следующим:

[NOEDIT]

// WIDGET CODE GOES HERE
query_posts('');
if (have_posts()) :
while (have_posts()) : the_post();
the_title();
endwhile;
endif;
wp_reset_query();

[/NOEDIT]

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

Мы можем сделать это немного лучше, просто добавив некоторое форматирование HTML к выводу с помощью ECHO команда и создание ссылки на сообщение с помощью функции get_the_permalink ():

[NOEDIT]

query_posts('');
if (have_posts()) :
echo "
";
while (have_posts()) : the_post();
echo "
".get_the_title()."
";
endwhile;
echo "
";
endif;
wp_reset_query();

[/NOEDIT]

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

[NOEDIT]

query_posts('posts_per_page=1&orderby=rand');

[/NOEDIT]

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

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

[NOEDIT]

query_posts('posts_per_page=1&orderby=rand');
if (have_posts()) :
echo "
";
while (have_posts()) : the_post();
echo "
".get_the_title();
echo the_post_thumbnail(array(220,200));
echo "
";
endwhile;
echo "
";
endif;
wp_reset_query();

[/NOEDIT]

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

Заключение:

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

Проблемы? Нужна помощь по WordPress? Я всегда под рукой, чтобы помочь в MakeUseOf Ответы, так что читайте дальше и отправляйте новый вопрос там.