Shortcode (шорткоды) WordPress.

Главная » Создание блога » Настройка Wordpress » Shortcode (шорткоды) WordPress. Примеры использования

Shortcode (шорткоды) WordPress. Примеры использования

2013-09-13 автор: Виталий Кириллов

Всем привет! Сегодня на seo-mayak.com я еще раз коснусь темы использования функций shortcode WordPress.

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

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

Не так давно, в своей статье — заработок на контекстной рекламе, я показал пример использования шорткодов для вставки рекламных объявлений Яндекс Директ и Google AdSense, но это далеко не все их возможности.

shortcode

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

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

Самый простой пример использования shortcode

Наверное проще такой функции shortcode и придумать нельзя и вставляется она в файл functions.php в самый конец перед знаком «?>»:

function mayak_easy() {
return'Здравствуйте дорогие читатели блога seo-mayak.com';
}
add_shortcode('hi', 'mayak_easy');

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

Для этого в визуальном режиме редактора WordPress достаточно прописать:

[hi]

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

Теперь немного усложним задачу и сделаем домен ссылкой:


function mayak_easy() {
return 'Здравствуйте дорогие читатели блога <a href="">seo-mayak.com</a>';
}
add_shortcode('hi', 'mayak_easy');

Проще простого. Идем дальше.

Как с помощью shortcode предложить подписаться на rss

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

function mayak_rss() {
return '<a href="http://feeds.feedburner.com/fb/a/mailverify?uri=seo-mayakcom&loc=ru_RU" rel="nofollow">Подпишись на обновления блога!</a>';
}
add_shortcode('rs', 'mayak_rss');

В редакторе WordPress в нужное место вставляем:

[rs]

Конечно в функции надо заменить URL подписки на свой.

Добавление атрибута nofollow к ссылкам в тексте

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

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

В файл functions.php вставляем следующее:

function mayak_nofollow($attr, $content= null){
 $link = explode("href", $content);
 return $link[0].' rel="nofollow" href'.$link[1];
}
add_shortcode('nw', 'mayak_nofollow');

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

[nw]Внешняя ссылка[/nw]

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

Я специально не стал придумывать тегам длинные названия, их так будет проще прописывать. Но на самом деле это тоже не важно, так как для добавления shortcode я использую кнопки в редакторе WordPress.

Откуда я их взял? Сам сделал! Я и Вас научу! Так что подписывайтесь на обновления блога, чтобы не пропустить интересный материал.

Шорткоды с использованием стилей

Например нам надо подсветить цветным фоном определенный участок текста. В файл functions.php вставляем следующую функцию:

function mayak_background($attr,$content= null){
return'
<style type="text/css">
.yellow_background{
    border: 1px solid #d2d2d2;
    background-color: #FFFF80;
    padding:10px;
    margin: 5px 10px;
}
</style>
<div class="yellow_background">'.$content.'</div>
';
}
add_shortcode('yw', 'mayak_background');

Заключаем участок текста в теги:

[yw]Участок текста[/yw]

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

background-color:#xxxxxx;

По желанию можно убрать стили из функции и прописать их в файле style.css.

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

Ретвит с помощью shortcode

Очень интересная и опять же полезная функция, которая выводит кнопку «Твитнуть»:

function mayak_twitt() {
return '
<style type="text/css">
button{
background: #2E8CE3;
padding: 7px 30px;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border: solid 1px #73C8F0;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #fff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
to(#2E8CE3));
box-shadow: inset 0 1px 0 0 #FFFFFF;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
button:hover {
background: #2E69E3;
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF),
to(#2E69E3));
}
button:active {
background: #2E69E3;
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF),
to(#2E69E3));
box-shadow: inset 1px 1px 0 0 #004A7F;
-moz-box-shadow: inset 1px 1px 0 0 #004A7F;
-webkit-box-shadow: inset 1px 1px 0 0 #004A7F;
padding: 8px 29px 6px 31px;
}
</style>

<button><a title="Кликни и отправь этот пост в Твиттер!" href="http://twitter.com/home?status=В данный момент я читаю '.get_permalink($post->ID).'">Твитнуть</a></button>';
}

add_shortcode('tt', 'mayak_twitt')

В нужном месте статьи вставляем:

[tt]

И пользователям явиться вот такая симпатичная кнопочка:

Можете попробовать твитнуть и посмотреть как она работает 🙂

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

Вывод категорий с помощью shortcode

Для выводы списка категорий, в WordPress отвечает специальный тег

<?php wp_list_categories();?>

Но можно вызвать категории простеньким шорткодом. Для этого в файле functions.php пишем такую функцию:

function mayak_category($atts, $content = null) {
   extract(shortcode_atts(array( 'name' => null, ),$atts));
   return wp_nav_menu(array('menu' => $name,'echo' => false));
}
add_shortcode('cat', 'mayak_category');

В редакторе пишем:

[cat]

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

Как вставлять shortcode в виджеты WordPress

По умолчанию WordPress не разрешает использовать шорткоды в виджетах, но этот запрет можно обойти с помощью фильтра, который надо добавить в тот же файл functions.php:

add_filter('widget_text', 'do_shortcode');

Таким образом мы заставили CMS WordPress исполнять короткий код в виджетах.

Выполнение шорткода в комментариях

Здесь мы просто применим другой фильтр:

add_filter( 'comment_text', 'do_shortcode' );

Все просто!

Но что делать если есть необходимость применить короткий код в файле шаблона, например для вставки контекстной рекламы?

Как вставить шорткод в файл шаблона

Для вставки шорткода в файл php придется квадратные скобки и их содержимое поместить в специальный php-контейнер:

<?php echo do_shortcode('[Короткий код]');?>

Как видите shortcode WordPress обладают широкими возможностями и на полную веб-мастера их еще не используют, а зря.

Как правильно вставлять видео с YouTube

В заключение я хочу рассказать вот о чем. Еще пару месяцев назад я использовал шорткод для вставки видео с YouTube и даже планировал им с Вами поделиться, но в ходе изучения материала я понял, что необходимость в этом уже отпала. Почему?

Просто с выходом версии 2.9 в WordPress появилась возможность вставлять видео в пост с помощью обычной ссылки. Например:

http://www.youtube.com/watch?v=scD8z_PVRTEYUTE

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

С выходом WordPress 3.5 разработчики движка исправили данный недочет. Каким образом? С помощью уже знакомого нам shortcode.

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

[ embed width="640" height="360"]Ссылка на видео с YouTube[ /embed]

Я специально поставил пробелы, так как код целиком не отображался и их после копировании надо убрать, так что имейте это в виду!

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

На сегодня у меня все. Как Вам статья?

С уважением, Виталий Кириллов