Cоздаем простой плагин для WordPress

В данном уроке мы создадим плагин 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]

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesigncrate.com/tutorial/wordpress-plugin-template-shortcodes-toolbox
Перевел: Сергей Фастунов
Урок создан: 12 Декабря 2011
Просмотров: 34560
Правила перепечатки


5 последних уроков рубрики "Wordpress"

^ Наверх ^