Что такое шорткоды?
Здравствуйте дорогие читатели моего сайта gainemaster.ru! В этой статье пойдёт речь об одной полезной функции для вебмастера — о шорткодах. Кто сегодня не знает о шорткодах?.. О них знают все успешные вебмастера, но если вы ещё не знаете о них, то я постараюсь в этой статье объяснить, что же такое шорткоды.
Итак, что же такое шорткоды? Шорткоды — это набор простейших функций, создающих микро-коды, которые можно использовать в стандартном редакторе WordPress, в виджетах, а также в файлах шаблона для различных целей.
То есть вы пишете код, который вставляете потом на сайт, и у вас появляется, например, кнопка или видео в любом месте вашего сайта.
Шорткоды были введены начиная с версии WordPress 2.5 и стали мощной, хоть и малоизвестной функцией WordPress. Вы только представьте, что с помощью шорткодов вы можете просто написать код, и у вас в этом месте станет показываться контекстная реклама или по одной только фразе вы сможете моментально узнать количество постов в своём блоге.
Шорктоды в WordPress могут сделать это и многое другое возможным. Они определённо сделают жизнь блогера лучше и проще. Дальше я покажу несколько примеров применения шорткодов.
1. Шорткод «Отправить в твиттер»
Цель: выводить ссылку для отправки поста в твиттер.
Этот шорткод просто создать. Нужно всего лишь вставить следующий код в файл functions.php твоей темы сайта:
function twitt() {return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Кликни и отправь этот пост в твиттер!" >Отправить в твиттер</a></div>';}add_shortcode('twitter', 'twitt'); |
Чтобы его использовать, необходимо переключиться в HTML-режим и ввести данный код:
[twitter] |
И ссылка «Отправить в твиттер» появится там, где был оставлен шорткод.
2. Создать шорткод «Подпишись на 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. Очень просто вставить код AdSense в файл темы, такой как sidebar.php. Но успешные онлайн маркетологи знают, что люди кликают чаще на рекламу, которая встроена в контент.
Что бы встроить AdSense в любом месте твоего поста или страницы можно создать шорткод:
1. Для этого нужно открыть файл functions.php твоей темы и вставить следующий код. Не забудьте заменить код JavaScript своим собственным кодом AdSense!
function showads() {return '<div id="adsense"><script type="text/javascript"><!--google_ad_client = "pub-XXXXXXXXXXXXXX";google_ad_slot = "4668915978";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 поток прямо в наши посты и страницы (этот трюк глючит с русской кодировкой, если кто знает причину, пожалуйста, отпишитесь в коментах).
Как обычно, чтобы этот трюк удался, нужно просто скопировать следующий код в файл 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 — это количество постов для вывода.
5. Бери посты из базы данных 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(). После этого картинка возвращается, встроенной в содержание поста.
7. Добавление шорткодов в виджеты боковой колонки
Даже если вам понравилась эта статья, то возможно вы останетесь немного не довольны, потому что по умолчанию WordPress не позволяет вставлять шорткоды в виджеты боковой колонки. К счастью есть маленький трюк, повышающий функциональность WordPress и позволяющий использовать шорткоды в виджетах боковой колонки.
Ещё немного кода для вставки в файл functions.php:
add_filter('widget_text', 'do_shortcode'); |
Это всё, что нужно.
Объяснение кода. То, что мы сделали, довольно просто: мы добавили фильтр к функции widget_text(), чтобы выполнить функцию do_shortcode(), которая использует API для исполнения шорткодов. Таким образом шорткоды теперь включены в виджетах боковой колонки.
Ну, вот и всё друзья. Теперь вы знаете, что такое шорткоды и более того, вы знаете о некоторых реальных способах применения шорткодов!
Спасибо, что были со мной до конца. Жду ваших комментариев! Буду очень рад. Удачи вам и успешных заработков в сети!
Добавить комментарий