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]


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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/o0YdNz0JQpQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Cоздаем простой плагин для WordPress | | 2012-06-19 12:01:15 | | Статьи Web-мастеру | | В данном уроке мы создадим плагин WordPress, который можно использовать в качестве шаблона в других проектах. Также будет рассмотрен очень популярный вопрос - создание коротких кодов. Короткие коды | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: