Шорткоды WordPress

Сайтостроение WordSmall

Введение шорткодов в WordPress началось с версии 2.5. Их появление стало одной из самых полезных особенностей данной CMS . Шорткоды намного упрощают работу и не требуют особых знаний программирования. Когда шорткод вставлен в статью или страницу он вызывает содержимое, которое ранее было создано как функция PHP с определенным значением.

Шорткоды указываются в квадратных скобках [] с уникальным название для избегания различных конфликтов. Давайте рассмотрим все на практике в подробностях и с примерами и создадим свой первый шорткод самостоятельно.

Первый Шорткод.

Как же создать свой шорткод для WordPress?

Процесс создания шорткода можно разделить на две части:

  • Создание функции, которая будет вызываться коротким кодом [шорткод].
  • Регистрация шорткода с уникальным именем.

Шорткоды прописываются в файле functions.php перед знаком ?> он находится внутри вашей темы. Давайте создадим простейший быстрый код, который будет выводить какую-нибудь надпись.

function new1() {
return '<p>Автор: Пупкин В.</p>';
}
add_shortcode (‘author’,’new1’);

вызов: [author]

Вот это простейший шорткод.

Объяснения.

Пишем function придумываем уникальное имя (в моем примере new1) двойные круглые скобки () они предназначены для параметров. Открываются фигурные {…} внутри которых создаем функцию. Для создания шорткода используется следующая конструкция:

add_shortcode(‘короткий код для вызова’, какую именно функцию вызывать’);

И теперь чтобы вызвать эту функцию достаточно вставить короткий код [author] в любом месте вашего сайта, где нужно, чтобы она выводилась.

Более сложный.

Создавать функции можно любой сложностью все зависит от знаний. К примеру, создадим вывод последней добавленной статьи из базы данных.

function recent_posts_function() {
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
      endwhile;
   endif;
   wp_reset_query();
   return $return_string;
}

Первым у нас идет функция и ее «уникальное» название recent_posts_function. Дальше происходит обращение к базе для обратного вызова. В нашем случае — это последний добавленный пост(статья) на сайте. И добавляем шорткод:

add_shortcode('recent-posts', 'recent_posts_function');

вызов: [recent-posts]

Результат:

Шорткоды WordPress

Параметры Шорткода

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

Мы будем использовать две функции. Первая встроенная в WordPress shortcode_atts()эта функция, которая объединяет атрибуты шорткода с атрибутами носителя и устанавливает значение по умолчанию там, где это необходимо. Вторая функция является extract() она создает переменные из массивов.

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

function recent_posts_function($atts){
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));

   $return_string = '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';
   wp_reset_query();
   return $return_string;
}
add_shortcode('recent-posts', 'recent_posts_function');

вызов: [recent-posts posts="5"]

Результат:

Шорткоды WordPress

Виджет.

Изначально WordPress не поддерживает шорткоды в виджетах (сайдбар). Это можно с легкостью исправить одним коротким кодом, который следует прописать в файле functions.php.

add_filter('widget_text', 'do_shortcode');

Также можно сделать поддержку шорткодов в комментариях.

add_filter( 'comment_text', 'do_shortcode' );

И поддержку в анонсах:

add_filter( 'the_excerpt', 'do_shortcode');

Полезные шорткоды.

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

Карта Google.

function googlemap_function($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&output=embed" ></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

вызов:

[googlemap width="600" height="300" src="http://maps.google.com/maps?q=Heraklion,+Greece&hl=en&ll=35.327451,25.140495&spn=0.233326,0.445976& sll=37.0625,-95.677068&sspn=57.161276,114.169922& oq=Heraklion&hnear=Heraklion,+Greece&t=h&z=12"]

Шорткоды WordPress

Диаграмма Google.

function chart_function( $atts ) {
   extract(shortcode_atts(array(
       'data' => '',
       'chart_type' => 'pie',
       'title' => 'Chart',
       'labels' => '',
       'size' => '640x480',
       'background_color' => 'FFFFFF',
       'colors' => '',
   ), $atts));

   switch ($chart_type) {
      case 'line' :
         $chart_type = 'lc';
         break;
      case 'pie' :
         $chart_type = 'p3';
         break;
      default :
         break;
   }

   $attributes = '';
   $attributes .= '&chd=t:'.$data.'';
   $attributes .= '&chtt='.$title.'';
   $attributes .= '&chl='.$labels.'';
   $attributes .= '&chs='.$size.'';
   $attributes .= '&chf='.$background_color.'';
   $attributes .= '&chco='.$colors.'';
   return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$chart_type.''.$attributes.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_function');

Вызов:

[chart type="pie" title="Example Pie Chart" data="41.12,32.35,21.52,5.01" labels="First+Label|Second+Label|Third+Label|Fourth+Label" background_color="FFFFFF" colors="D73030,329E4A,415FB4,DFD32F" size="450x180"]

Шорткоды WordPress

Контент только для зарегистрированных.

function cwc_member_check_shortcode( $atts, $content = null ) {
         if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
                return $content;
        return '';
}
add_shortcode( 'member', 'cwc_member_check_shortcode' );

вызов: [member]Этот текст увидит только зарегистрированный пользователь.[/member]

Встраивание PDF.

function pdf_function($attr, $url) {
   extract(shortcode_atts(array(
       'width' => '640',
       'height' => '480'
   ), $attr));
   return '<iframe src="http://docs.google.com/viewer?url=' . $url . '&embedded=true" style="width:' .$width. '; height:' .$height. ';">Your browser does not support iframes</iframe>';
}
add_shortcode('pdf', 'pdf_function');

вызов:

[pdf width="520px" height="700px"]http://static.fsf.org/common/what-is-fs-new.pdf[/pdf]

Шорткоды WordPress

Плагины для Шорткодов.

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

Shortcodes Ultimate

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

Шорткоды WordPress

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

Шорткоды WordPress


J Shortcodes

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

Шорткоды WordPress

Shortcodes Pro

У плагина нет начальных заготовок, но он легко позволяет создавать шорткоды прямо в панели администратора.

Шорткоды WordPress

Ну вот, можете пробовать создавать свои шорткоды с плагина и без.

Источник: smashingmagazine.com

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 5
  • Koxae

    Здравствуйте!

    Подскажите, пожалуйста, как ввернуть в тело шоткода проверку на пустой аттрибут?

    Например, есть аттрибуты: name1, name2, name3

    Вывод:

    Раз: ' . $name2 . ', Два: ' . $name1 . ', Три: ' . $name3 . '

    Как сделать проверку, что, если name1 пустой, то "Раз: ' . $name2 . ', " не выводить?

    Заранее спасибо!

    • Андрей

      День добрый. Это делается с помощью условия if у вас есть какие-нибудь навыки в php?

  • Koxae

    Блин, я перечитала свой коммент и ужаснулась: всё перепутала. :)

    Поправочки:

    *

    Раз: ' . $name1 . ', Два: ' . $name2 . ', Три: ' . $name3 . '

    *

    если name1 пустой, то "Раз: ' . $name1 . ', " не выводить

    Вот. :)

  • Ксения

    А не в курсе если тема старая и не поддерживает шорткоды, что делать? В functions.php что-то нужно прописать?

    • WordSmall

      Ксения, смотря где вставляете шорткод, к примеру, в сайдбаре, то да. А так нет.

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