Cоздаем простой плагин для WordPress
25 Мар 2023г. в 11:52В данном уроке мы создадим плагин WordPress, который можно использовать в качестве шаблона в других проектах. Также будет рассмотрен очень популярный вопрос - создание "коротких кодов". "Короткие коды" существенно облегчают процесс публикации различных материалов на сайте под управлением WordPress.
Учебный плагин будет называться “Shortcodes Toolbox”.
1. Презентация плагина и структура файлов
Начиная с версии 2.5 в WordPress введена API коротких кодов - простой набор функций для создания макросов, используемых при публикации записей и страниц. Плагин ”Shortcodes Toolbox” будет позволять добавлять короткие коды в материалы WordPress. так можно будет добавлять кнопки, ссылки, связывать записи между собой и многое другое без знания HTML или CSS.
Сначала нам нужно построить файловую структуру. Создаем папку shortcodes-toolbox, в которой создаем файл shortcodes-toolbox.php.
2. Основная информация о плагине
Для того, чтобы создать плагин WordPress, нужно соблюдать несколько простых правил. Самый важный шаг - добавить информацию о плагине. Добавляем в наш файл shortcodes-toolbox.php следующие строки:
<?php
/*
Plugin Name: Наименование плагина
Plugin URI: http://URI_страницы_с_описанием_плагина
Description: Краткое описание плагина
Version: Номер версии плагина, например, 1.0
Author: Имя автора плагина
Author URI: http://URI_страницы_автора_плагина
License: тип лицензии плагина, например, GPL2
*/
?>
Если вы планируете размещать плагин в официальном репозитории WordPress.org, то нужно следовать описанию. Для персонального использования достаточно внесения информации о плагине.
3. Определение путей к файлам
Теперь настало время для кодирования PHP. Сначала нам нужно определить пути для файлов CSS или JS, которые будут использовать в плагине. Для нашего примера мы создадим файл style.css и поместим его в папку css, которая будет располагаться в папке нашего плагина. То есть нам нужно сформировать путь shortcodes-toolbox/css/style.css
Продолжаем вносить изменения в файл shortcodes-toolbox.php и добавим пути WP:
if(!defined('WP_CONTENT_URL'))
define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
if(!defined('WP_CONTENT_DIR'))
define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
if(!defined('WP_PLUGIN_URL'))
define('WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins');
if(!defined('WP_PLUGIN_DIR'))
define('WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins');
class STbox {
function cssStyles() {
$stPath = WP_PLUGIN_URL.'/'.plugin_basename(dirname(__FILE__)).'/styles/'.'/';
echo '<link rel="stylesheet" type="text/css" media="screen" href="' . $stPath . 'style.css" />'."\n";
}
}
4. Функционал плагина
Теперь можно заняться основной частью плагина. Для нашего примера добавим функционал для размещения в материалах ссылок, пользовательской кнопки загрузки (которая стилизуется с помощью CSS) и ссылок на связанные записи. Здесь используется только базовый набор функций, который вы можете расширить так, как нужно.
Добавим код PHP в файл shortcodes-toolbox.php:
/* Функция простой ссылки */
function URL($atts, $content = null) {
extract(shortcode_atts(array(
"url" => 'http://'
), $atts));
return '<a href="'.$url.'">'.$content.'</a>';
}
/* Функция для кнопки загрузки с использованием стилизации в CSS */
function DownloadButton($atts, $content = null) {
extract(shortcode_atts(array(
"url" => 'http://',
"color" => ''
), $atts));
return '<a class="'.$color.'" href="'.$url.'">'.$content.'</a>';
}
/* Функция для ссылки на связанные записи */
function RelatedPosts( $atts ) {
extract(shortcode_atts(array(
'limit' => '5',
), $atts));
global $wpdb, $post, $table_prefix;
if ($post->ID) {
$retval = '<ul>';
// Получаем метку
$tags = wp_get_post_tags($post->ID);
$tagsarray = array();
foreach ($tags as $tag) {
$tagsarray[] = $tag->term_id;
}
$tagslist = implode(',', $tagsarray);
// Выполняем запрос
$q = "SELECT p.*, count(tr.object_id) as count
FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
AND p.post_status = 'publish'
AND p.post_date_gmt < NOW()
GROUP BY tr.object_id
ORDER BY count DESC, p.post_date_gmt DESC
LIMIT $limit;";
$related = $wpdb->get_results($q);
if ( $related ) {
foreach($related as $r) {
$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
}
} else {
$retval .= '
<li>Нет связанных материалов.</li>';
}
$retval .= '</ul>';
return $retval;
}
return;
}
Итак, мы добавили 3 функции несколькими строчками кода.
5. Действия и короткие коды
Прежде, чем приступить к тестированию плагина нужно добавить действия и определить короткие коды, которые мы будем использовать. Добавим следующие строки в файл shortcodes-toolbox.php:
if (class_exists("STbox")) {
$dl_plugin = new STbox();
}
//Дейстивя
if (isset($dl_plugin)) {
//Добавляем действие в нижний колонтитул
add_action('wp_footer', array(&$dl_plugin, 'cssStyles')); //Добавляем определение CSS и JS в раздел нижнего колонтитула
}
add_shortcode('link', 'URL');
add_shortcode('DownloadButton', 'DownloadButton');
add_shortcode('RelatedPosts', 'RelatedPosts');
?>
Основная часть нашего плагина готова. Сохраняем изменения и открываем файл style.css.
6. Стили CSS
Для формирования симпатичных кнопок загрузки нужно добавить стили CSS. Открываем файл style.css и добавляем следующие строки:
.green a:link, .green a:visited{
color:#ffffff;
text-decoration:none !important;
}
.black a:link, .black a:visited{
color:#ffffff;
text-decoration:none !important;
}
.green a:hover, .black:hover{
color:#ffffff;
text-decoration:none !important;
}
.green {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}
.green:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
color:#ffffff !important;
text-decoration:none !important;
}
.black {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#000000), to(#414141));
background : -moz-linear-gradient(center top, #414141, #000000);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}
.black:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#414141), to(#000000));
background : -moz-linear-gradient(center top, #000000, #414141);
color:#ffffff !important;
text-decoration:none !important;
}
7. Установка и тестирование
Теперь попробуем новый плагин в деле. Создаем архив zip, в который помещаем папку shortcodes-toolbox. Затем загружаем его в WordPress с помощью панели администратора (Плагины->Загрузить). После установки плагина создаем новую запись или страницу и добавляем следующие строки для проверки:
[DownloadButton url="http://www.google.com" color="black"]Download Google Chrome[/DownloadButton]
[link href="http://www.yahoo.com"]Yahoo[/link]
