Как создать свой короткий код (shortcode)

Как создать свой короткий кодПоследнее время становится всё модным писать свои короткие коды (shortcode) особенно, если вы хотите сделать шаблон для продажи. Если к примеру вы уже работали с вставкой галереи в wordpress пост, то вам уже известен короткий код [my-gallery] и вы приблизительно представляете себе о чём сейчас пойдёт речь. Также я думаю вам будут известны и такие 2 распространённых кода.

[button]Content[/button]

[link to="www.webkladez.ru"] Сайт полезных уроков[link] 

Создание короткого кода можно разделить на 2 основных этапа.

1. Создать сам код

2. Привязать его к wordpress

1. Создание элементарного короткого кода.

Давайте к примеру создадим самый простой короткий код. Предположим, каждую вашу статью вы заканчиваете одними и теми же словами.

«Если вам понравился наш сайт подпишитесь на нашу рассылку или купите нам бутылочку пива»

Сначала мы напишем простую функцию, которая будет возвращать нашу строку.

function signOffText() { return 'Если вам понравился наш сайт подпишитесь на нашу рассылку или купите нам бутылочку пива. ';}

Дальше мы должны зарегистрировать наш короткий код следующим образом

add_shortcode('signoff', 'signOffText'); 

И теперь в любом месте где мы захотим вставить свою фразу, нам необходимо будет только внести короткий код — [signoff]

2. Вывод красивого текста.

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

function quote( $atts, $content = null ) {return '<div style="font:16px; color:blue; ">"'.$content.'"</div>';} 

Зарегистрируем короткий код

add_shortcode("quote", "quote"); 

И теперь сможем спокойно вывести его при помощи следующего кода

[quote]Мой текст синего цвета[/quote]  

3. Сделаем короткий код с атрибутами.

Напишим простую функцию, которая получает 2 параметра

function link($atts, $content = null)

{

extract(shortcode_atts(array( "to" => 'http://webkladez.ru'), $atts));

return '<a href="'.$to.'">'.$content.'</a>';

} 

Регистрируем

add_shortcode("link", "link"); 

И вызываем с параметром

[link to="www.news.webkladez.ru"]Новости нашего сайта[link] 

4. Теперь создадим общую панель для наших коротких кодов и вставим в наш редактор в wordpress.

1. Напишим функцию инициализации наших кнопок.


function add_button()

{

if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )

{

add_filter('mce_external_plugins', 'add_plugin');

add_filter('mce_buttons', 'register_button');

}

}

2. Добавляем код инициализации в файл functions.php

add_action('init', 'add_button'); 

3. Функция для регистрации нашей кнопки


function register_button($buttons)

{

array_push($buttons, "quote");

return $buttons;

} 

4. Следующая функция покажет wordpress и редактору TinyMCE как себя вести с нашей кнопкой


function add_plugin($plugin_array)

{

$plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';

return $plugin_array;
}

5. Напишим специальный плагин для редактора, который поместим в специальный файл customcodes.js, который расположен в директории JS вашей темы

(function()
{  tinymce.create('tinymce.plugins.quote', {  init : function(ed, url)
     {  ed.addButton('quote',
         {  title : 'Add a Quote',  image : url+'/image.png',  onclick : function() {  ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');   }  });
     },  createControl : function(n, cm) {  return null;  },  });
 tinymce.PluginManager.add('quote', tinymce.plugins.quote); })();
<pre>

6. http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/



2 комментария на «“Как создать свой короткий код (shortcode)”»

  1. «Сначала мы напишем простую функцию, которая будет возвращать нашу строку.»
    Куда писать то? В файл function.php? Можно поподробнее разжевать для чайников?

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *