Что такое шорткоды?
Здравствуйте дорогие читатели моего сайта 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 для исполнения шорткодов. Таким образом шорткоды теперь включены в виджетах боковой колонки.
Ну, вот и всё друзья. Теперь вы знаете, что такое шорткоды и более того, вы знаете о некоторых реальных способах применения шорткодов!
Спасибо, что были со мной до конца. Жду ваших комментариев! Буду очень рад. Удачи вам и успешных заработков в сети!