Введённые начиная с версии WordPress 2.5, шорткоды – это мощная, но до сих пор малоизвестная функция WordPress. Представь, что ты можешь просто напечатать «adsense» что бы показывать рекламу AdSense или «post_count», что бы моментально узнать количество постов в твоём блоге.

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

Этот пост является переводом статьи Mastering WordPress Shortcodes[smashingmagazine.com]

Что такое шорткоды(shortcode)?

Шорткоды Вордпресс(WordPress Shortcodes)

Использовать шорткоды очень просто. Что бы это сделать, создай новый пост(или открой для редактирования уже имеющийся), переключи редактор на HTML режим и введи шорткод в квадратных скобках, типа этого:

[showcase]

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

[showcase id="5"]

Шорткоды также позволяют встраивать контент:

[url href="http://www.smashingmagazine.com"]Smashing Magazine[/url]

Шорткоды управляются набором функций, введённых в WordPress 2.5 и называемых Shortcode API. Когда пост сохранён, его содержание парсится и Shortcode API автоматически трансформирует шорткоды для исполнения возложенной на них функции.

Создание простого шорткода

Шорткоды очень просто создать. Если ты знаешь, как написать простую Php-функцию, то ты уже знаешь, как создать WordPress шорткод. Для начала давай создадим известное сообщение «Привет, мир»

  1. Открой файл functions.php твоей темы. Если его нет, то создай.
  2. Первое, мы должны создать функцию для вывода строки «Привет, мир». Вставь следующий код в твой файл functions.php:
    function hello() {
        return 'Привет, мир!';
    }
  3. Теперь у нас есть функция, мы должны превратить её в шорткод. Это очень просто сделать, благодаря функции add_shortcode(). Вставь эту строку после нашей функции hello(), потом сохрани и закрой файл functions.php:
    add_shortcode('hw', 'hello');

    Первый параметр это имя шорткода, а второй это имя функции.

  4. Теперь, когда шорткод создан, мы можем использовать его в постах и на страницах. Для этого просто переключись в HTML режим и введи следующее:
    [hw]
  5. Вот и всё! Конечно, это очень простой шорткод, но это хороший пример того, насколько просто их создавать.

Создание продвинутых шорткодов

Как упоминалось, шорткоды могут быть использованы с атрибутами, которые очень полезны. В этом примере мы покажем тебе, как создать шорткод для вывода URL, точно так же, как ты это делал с BBCode на форумах вроде VBulletin и PHPBB.

  1. Открой твой файл functions.php. Вставь в него следующую функцию:
    function myUrl($atts, $content = null) {
    	extract(shortcode_atts(array(
    		"href" => 'http://'
    	), $atts));
    	return '<a href="'.$href.'">'.$content.'</a>';
    }
  2. Теперь преобразуем функцию в шорткод:
    add_shortcode("url", "myUrl");
  3. Шорткод создан. Ты можешь использовать его в постах и на страницах примерно так:
    [url href="http://www.vverx.com"]Вверх_ком, настройка WordPress[/url]

    Когда ты сохранишь пост, шорткод выведет ссылку озаглавленную «Вверх_ком, настройка WordPress» и ведущую на http://www.vverx.com.

Classic.dachi.ru – строительство загородных дач.

Объяснение кода. Для правильной работы, функции нашего шорткода необходимо обращаться с двумя параметрами: $atts и $content. $atts(attribute(s)) это шорткод-атрибут. В этом примере атрибут называется href и содержит ссылку на URL. $content это содержание шорткода, встроенное между доменом и поддиректорией(т.е. между “www.example.com” и “/subdirectory”). Как ты можешь убедиться в коде мы дали $content и $atts значения по-умолчанию.

Теперь мы знаем, как создать и использовать шорткоды, давай заценим несколько готовых к использованию шорткодов!

Примеры кода на PHP и JavaScript

1. Шорткод Отправить в твиттер

Шорткод Отправить в твиттер

Цель. Выводить ссылку для отправки поста в твиттер.

Этот шорткод просто создать. Вставь следующий код в файл functions.php твоей темы:

function twitt() {
  return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Кликни и отправь этот пост в твиттер!" target="_blank">Отправить в твиттер</a></div>';
}
 
add_shortcode('twitter', 'twitt');

Чтобы его использовать, просто переключись в HTML-режим и введи:

[twitter]

И ссылка Отправить в твиттер появится там где ты оставил шорткод.

Глянь также плагин Twitter tools[alexking.org]

2. Создать шорткод «Подпишись на RSS»

Подпишись на RSS

Ты уже знаешь, что очень хорший способ увеличить количество RSS подписчиков это показывать, хорошо оформленное сообщение, которое говорит, что-то вроде «Подпишись на RSS фид». Но снова, нам не особо нужно конкретно менять код нашей темы и терять контроль над тем, где появляется это сообщение. В этом приёме мы создадим шорткод «Подпишись на RSS». Показывать в одних местах, в других не показывать, в постах и на страницах, наверху и внизу основного контента, решать тебе.

Как и раньше мы создаём функцию, а потом переводим её в шорткод. Этот код должен быть в твоём файле functions.php. Не забудь изменить URL фида в примере на твой собственный!

function subscribeRss() {
    return '<div class="rss-box"><a href="http://feeds.feedburner.com/vverxcom">Понравился пост? Подпишись на мой RSS фид!</a></div>';
}
 
add_shortcode('subscribe', 'subscribeRss');

Стилизация. Ты возможно заметил класс rss-box, который добавлен в div, содержащий ссылку. Он позволит тебе стилизовать сообщение по вкусу. Вот пример некоторого CSS стиля, который ты можешь применить на своём сообщении. Просто вставь его в файл style.css своей темы:

.rss-box{
  background:#F2F8F2;
  border:2px #D5E9D5 solid;
  font-weight:bold;
  padding:10px;
}

3. Вставляй Google AdSense везде где хочешь

Вставляй Google AdSense везде где хочешь

Многие блоггеры пользуются Google AdSense. Очень просто вставить код AdSense в файл темы, такой как sidebar.php. Но успешные онлайн маркетологи знают, что люди кликают чаще на рекламу, которая встроена в контент.

Что бы встроить AdSense в любом месте твоего поста или страницы, создай шорткод:

  1. Открой файл functions.php твоей темы и вставь следующий код. Не забудь заменить код JavaScript своим собственным кодом AdSense!
    function showads() {
        return '<div id="adsense"><script type="text/javascript"><!--
    google_ad_client = "pub-8683604175367491";
    /* 468x60, создано 05.02.09 */
    google_ad_slot = "5183274352";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>';
    }
     
    add_shortcode('adsense', 'showads');
  2. Сохранив изменения в functions.php, ты можешь использовать следующий шорткод для отображения AdSense в любом месте твоих постов и страниц:
    [adsense]

    Заметь, что наш код AdSense обёрнут в div с id=»adsense», мы можем добавить ему стиля в файле style.css.

Объяснение кода. Верхний код использован просто для вывода объявлений AdSense. Когда шорткод вставлен в пост, он возвращает AdSense объявление. Это довольно просто, но согласись реально экономит время!

4. Встроить RSS поток

Встроить RSS Reader

Давай встроим RSS поток прямо в наши посты и страницы. (Этот трюк глючит с русской кодировкой, если кто знает причину, пожалуйста отпишитесь в каментах)

Как обычно, что бы этот трюк удался, просто скопируй следующий код в файл function.php твоей темы.

//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');
 
function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));
 
    return wp_rss($feed, $num);
}
 
add_shortcode('rss', 'readRss');

Что бы использовать шорткод, введи:

[rss feed="http://feeds.feedburner.com/wprecipes" num="5"]

Аттрибут feed это URL, встраиваемого фида, а num, это количество постов для вывода.

Бери посты из базы данных WordPress с помощью шорткодов

Когда-нибудь хотел вызывать список связаных постов прямо в редактор WordPress? Конечно, плагин «Simple Tags» или «Related posts» может показать связанные записи, но с шорткодом ты можешь легко получить список любого числа постов из отдельной категории.

Вставь этот код в твой файл functions.php.

function sc_liste($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode("list", "sc_liste");

Для использования вставь следующее в редактор WordPress, в HTML режиме:

[liste num="3" cat="1"]

Это выведет список трёх постов из категории с ID 1.

Объяснение кода. После извлечения аргументов и создания глобальной переменной $posts, функция sc_liste() использует функцию get_posts() с параметрами numberposts, order, orderby и category, что бы получить Х наиболее похожих постов из Y категории. После этого, посты встраиваются в виде HTML списка и выводятся на экран.

6. Вызывай картинку последнего поста

В Вордпрессе довольно просто манипулировать изображениями. Но почему бы не упростить это ещё больше? Давай рассмотрим более сложный шорткод, который автоматически вызывает последнюю, прикреплённую к посту картинку.

Открой файл functions.php и вставь следующий код:

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Что бы использовать этот шорткод, просто введи следующую строку в редакторе в режиме HTML

[postimage size="" float="left"]

Объяснение кода. Функция sc_postimage() сначала выполняет аттрибуты шорткода. Потом она берёт картинку при помощи следующих функций WordPress get_children(), wp_get_attachment_image() и wp_get_attachment_image_src(). После этого картинка возвращается, встроенной в содержание поста.

Добавление шорткодов в виджеты боковой колонки

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

Ещё немного кода для вставки в файл functions.php:

add_filter('widget_text', 'do_shortcode');

Это всё, что тебе нужно.

Объяснение кода. То, что мы сделали, довольно просто: мы добавили фильтр к функции widget_text(), что бы выполнить функцию do_shortcode(), которая использует API для исполнения шорткодов. Таким образом шорткоды теперь включены в виджетах боковой колонки.

Луший софт для рассылки и рекламы, с искуственным интеллектом!

Связанные записи

Комментарии: 105 на “Шорткоды Вордпресс(WordPress Shortcodes)”

  1. Left Написал(а):

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

    Вопрос: а можно вставлять не в пост, а в код темы ?

  2. Сейшельский Манимейкер Написал(а):

    wow, интересная и полезнейшая статья, я о таком даже и не знал. спасибо. расширил скилл работы с WP, а статья в закладки ушла :)

  3. Даниил Написал(а):

    WordPress 2.5-получается что он облегчает работу во-много раз ! Эта версия стоит внимания !

  4. Ad1ce Написал(а):

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

  5. RuFisher Написал(а):

    Наконец-то дождался перевода. Большое спасибо за статью

  6. Прораб Написал(а):

    Хм, ниче себе..надо срочно обновляться

  7. Danil Написал(а):

    Прикольные коды. Обязательно попробую. Спасибо )))

  8. Милан Написал(а):

    Радуeт, что блог постоянно развиваeтся. Такой пост только прибавляeт популярности.

  9. Эвдиалит Написал(а):

    Интерсная тема, спасибо, нужно будет поробывать шорткоды в действии

  10. Глеб Написал(а):

    Оппа, не знал, что есть такая фича. Спасибо.

  11. AlexPTS Написал(а):

    Я так понимаю многие плагины, например [gallery] это и есть короткие коды?

  12. Skech Написал(а):

    Left, в коде темы шорткоды кажется не работают. Но вы проверьте, предварительно забэкапившись, конечно.

    AlexPTS, походу да.

  13. Байкер без шлема Написал(а):

    Штука конечно хорошая, но понастраивать надо будет конечно не один час (((

  14. miraz Написал(а):

    Спасибо за статью, обязательно воспользуюсь!!!

  15. caligula Написал(а):

    инфа полезная, стоит применять

  16. kilnart Написал(а):

    вещь хорошая, я уже опробывал

  17. аптекарь Написал(а):

    Не знаю даже..я в эти коды лезть боюсь )))

  18. Прораб Написал(а):

    а на джумле есть такая фича ? Просто нереально переносить на ВП весь сайт

  19. Эдуард Написал(а):

    Большое Спасибо!

  20. Илья Написал(а):

    Спасибо, только увлекся Твиттером, а тут уже код. Обязательно поставлю.

  21. Марианна Написал(а):

    WordPress лучший!!

  22. Марианна Написал(а):

    Спасибо за информацию

  23. Dupl Написал(а):

    Вот это спасибо. Реальную помощь. Я вот собрался завести твиттер(в асе друзья все уши прожужжали), а тут вон ещё такая фича. Очень радует!

  24. ussuriysk Написал(а):

    спасибо, очень позновательно! Твиттер в прошлом

  25. Оксана Написал(а):

    Спасибо мне это помогло.

  26. Vlad Написал(а):

    Скеч, когда ты, наконец, порадуешь нас новыми постами? А то этот если мне не изменяет зрение датируется 6 февраля

  27. Skech Написал(а):

    Vlad, мой процессор загружен на 100% с того времени на переводе нового мега-поста. Скоро будет.

  28. WuWu Написал(а):

    я конечно мало чего понял, но все же спасибо, постараюсь разобратся.

  29. Ars Написал(а):

    Хм, и ведб действительно малоизвестная функции WP, у меня один из блогов на WP – веду его уже второй год, но никогда не знал, что можно упростить кодинг шаблона на столько.

  30. Анастасия Написал(а):

    ЛУчше поставте на скачту
    function sc_postimage!!!

  31. Оскар Написал(а):

    Так намного легче! спс!!!

  32. Александр Написал(а):

    Хоть гдето нашол решение!!!!

  33. Андрей Написал(а):

    Решение оказалось совсем несложным. Спасибо!

  34. V0id Написал(а):

    Раньше казалось, что всё гораздо сложнее, безумно благодарен!

  35. Супп! Написал(а):

    Впервые слышу о шорткодах. И вправду очень удобная вещь. В ближайшем будущем опробую некоторые «шорты» на своем блоге. Спасибо:)

  36. _ДоКтОр_ Написал(а):

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

  37. Заработок в интернете Написал(а):

    Актуальный материал.

  38. voo Написал(а):

    Полезная статья, узнал кое-что нового. Пригодится! :)

  39. Антон Написал(а):

    Ну а что ? Хорошая статья!

  40. Андрей Написал(а):

    «Что бы встроить AdSense в любом месте твоего поста или страницы, создай шорткод:» – Насколько я знаю, аддсенс запрещает модифицирование своего кода. Я бы не рискнул копировать ваш и вставлять свой номер.

  41. Java Написал(а):

    Андрей, а я сделал как рекомендует автор, поменял на свой номер и всё работает, адсенс ничего не сказал!

  42. Денис Написал(а):

    Интересно, а этим шорткодом можно вывести целую страницу? Ну как цитату, то есть страница внутри другой страницы.

  43. 3d models Написал(а):

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

  44. Nekit Написал(а):

    Интересная статейка, надо бы попробовать эти шорткоды, но вот времени на них у меня уйдёт немерено. Когда читал статью понял, что мне их не осилить, но я попробую)))

  45. Xager Написал(а):

    Не обьял всё с первого раза, оставил в закладках. Спасибо за обзор. Буду вкуриваться ).

  46. muving Написал(а):

    А шорткодами можно выводить баннер от popunder?

  47. Вероника Написал(а):

    Хоть здесь нашол ответ!!! Спасибо за обьяснение!!!

  48. r2d2 Написал(а):

    Спасибо !!!!!!! Подробно и хорошо описано, то что надо ! :) . А то я уже замучался искать в нете нормальное объяснение

  49. AnAmile Написал(а):

    Достойная статья, пошла в закладки

  50. MaryLee Написал(а):

    Вот ты каков, северный олень шорткод :-)

  51. Джина Написал(а):

    Очень полезное обьяснение, спасибо

  52. Mitragrad Написал(а):

    Весьма познавательно, добавил в закладки. Спасибо!

  53. XataB Написал(а):

    Статья интересная, жаль, что вы не обновляете больше блог(

  54. digo Написал(а):

    А я и не знал что такое есть :) Спасибо автору

  55. Plutus Написал(а):

    Да, теперь мы все будем знать что такое есть=)

  56. Дмитрий Написал(а):

    Да не робот я, не робот… Простой спамер… :-)

  57. детские товары Написал(а):

    Купить недорого детские товары

  58. Александр Написал(а):

    Жесть а не термин..шоткорды какие то….Но название темы заставляет открыть пост :) Не спамер=)

  59. Plutus Написал(а):

    А у меня почему то не получается с встройкой PSS потока… может я что то не так делаю? объясните еще раз подробней пожалуйста.

  60. Aleksyusha Написал(а):

    спасибо за дополнительную информацию о word press

  61. Katyusha Написал(а):

    Отличная вещь, но вот как с настройкой пойдет

  62. seokiller Написал(а):

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

  63. Evfrosin Написал(а):

    Спасибо умным головам за то что,облегчают жизнь создателям блогов,тема интересная надо попробовать у себя на блоге…

  64. cyrax1000 Написал(а):

    Отличная тема. Спасибо. Я и не догадывался что такое можно делать. Теперь буду юзать :)

  65. Смит Написал(а):

    Хм.. прикольная вещь, спасибо за статью)

  66. Дмитрий Написал(а):

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

  67. Игорь Написал(а):

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

  68. Анатолий Написал(а):

    Очень интересная статья. Завтра обязательно попробую все проделать.

  69. Efrosin Написал(а):

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

  70. webernie Написал(а):

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

  71. xBB Написал(а):

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

  72. Nunya Написал(а):

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

  73. Максим Написал(а):

    Знал что есть такая функция, но ни как не получалось разобраться. Очень грамотно написал всё. Огромное спасибо. Страницу сохранил на финт даже :)
    Нет так страшен шорткод как его малюют :)

  74. richkeeper Написал(а):

    Действительно классная функция. Нужно будет попробовать в действии, но только один вопрос: а сломать через самописный шорткод не смогут?

  75. Димок Написал(а):

    Тоже про взлом подумал, кто знающий-просветите, может вообще стоит как то заблокировать данную функию?

  76. server Написал(а):

    Спасибо огромное, новремени на это уйдёт уйма…

  77. server Написал(а):

    Кстати, реально могут сломать… так что нужно искать меры предосторижения…

  78. Томск Написал(а):

    Какая замечательная статья! Даже захотелось изучить PHP ради этих шорткодов. Огромное спасибо, страницу в закладки.

  79. Jade Написал(а):

    а с Сапой можно такую тему проворачивать?

  80. xlusiv Написал(а):

    Думаю и с сапом это прокатит

  81. roma Написал(а):

    Пойду учить пхп и ставить их…

  82. tatum Написал(а):

    спасибо!!!!

  83. Ninelka Написал(а):

    Прокатит с сапом, проверил на собственной шкуре :)

  84. Андрей Написал(а):

    Информация очень полезна, шоркоды это достаточно сложно

  85. YAropolk Написал(а):

    Да интересная информация, Шоркоды – сложны, но полезны

  86. Vera Написал(а):

    Некотрые плагины используют функцию шорткодов тот же адсенс мастер…

  87. Liza Написал(а):

    Информация полезна, шоркоды это достаточно сложно, помог бы кто-нибуть мне разобраться

  88. видео онлайн Написал(а):

    Спасибо! Вы мне очень помогли

  89. Igulya Написал(а):

    БЛин пробовала с сапой не катит….(

  90. DuoDesign Написал(а):

    Сложновато – минут 50 разбирался.

    Правда что с сапой не работает?

  91. Павел Написал(а):

    Ну так с русской кодировкой проблема не решилась? Автор ответьте, пожалуйста, на почту!

  92. AnnaVira Написал(а):

    я мало что понял. Может кто нибудь мне разжевать суть?

  93. Albina Написал(а):

    to Liza, начните с самых азов. Для начала в поиске наберите шорткоды для чайников… если конечно, вы не спамер…

  94. Volya Написал(а):

    ОГО!!! Да ту не один день разбираться и вникать)))
    Спасибо Вам большое!!!

  95. скорый Написал(а):

    нафига они ваше нужны если есть плагины

  96. Dioniisiya Написал(а):

    Солидная инфа. За один вечер не перечитать!!!))))

  97. Volya Написал(а):

    Прикольно. За вечер не перечитаю…

  98. Styura Написал(а):

    Полезные плагины.

  99. dubrowsky Написал(а):

    Дорогой автор, а ответь мне пожалуйста, каким хуем мой e-mail попал в список рассылки?

  100. ErarerowAccof Написал(а):

    Суперский пост! Блог уже в ридере )

  101. enakin.93 Написал(а):

    можно неплохо подзаработать
    у меня получается
    http://partners.nicedrugs.ru/?wmid=215

  102. Корнелий Написал(а):

    Имхо шорткоды применимы только в очень редких случаях. Например, для того чтобы в постоянной странице выводить емаил и телефон, который может меняться. Больше применений я не вижу.

  103. stok Написал(а):

    очень удобно, кста
    спасибо

  104. Dmitriy Написал(а):

    Спасибо, попробую

  105. Павел Написал(а):

    Да я тоже запомнил блог в закладки, очень полезные вещи даёт автор, респект

Оставьте комментарий

Щёлкни в квадратик, докажи, что не робот.
сделано dimoning.ru



Ссылки в комментариях будут свободны от nofollow.