Сегодня мы рассмотрим, как использовать шорткоды в сочетании с различными популярными сервисами, включая такие сайты, как YouTube и Flickr, сначала рассказав, как создать шорткод, а затем как преобразовать сторонний код в нечто, что можно повторить и манипулировать.
Мы уже рассматривали шорткоды здесь, на WPTuts +, обсуждая преимущества их использования и способы их использования. Шорткоды — это, по сути, ярлыки (как определено самим WordPress ), которые позволяют многократно достигать результата с минимально возможной работой. В своей простейшей форме шорткод включает в себя некоторый код, который вы подключили к WordPress в другом файле, иногда продукт стороннего производителя, например видео на YouTube или поток Flickr.
Резюме: создание основного шорткода
Если вы не знакомы с шорткодами, то вам, вероятно, следует прекратить читать эту статью и проверить одну из других статей, которые мы здесь, на Tuts +, о шорткодах в WordPress.
- Начало работы с шорткодами WordPress
- WordPress шорткоды: правильный путь
- Обзор ресурсов! 20 Создание шорткодов для использования в ваших проектах
Шорткод создается путем добавления функции в ваш файл functions.php , а затем связывания его в виде шорткода. В приведенном ниже примере создается ссылка на хаб AppStorm.
|
1
2
3
4
|
function link_to_appstorm($atts, $content=null) {
return ‘<a href=»http://www.appstorm.net»>AppStorm</a>’;
}
add_shortcode(‘appstorm’, ‘link_to_appstorm’);
|
Чтобы использовать его, мы используем простейшую форму шорткода без атрибутов.
|
1
|
[appstorm]
|
Мы можем продвинуть эту идею дальше, введя атрибут, в котором можно указать конкретный сайт AppStorm для ссылки.
|
1
2
3
4
5
|
function link_to_appstorm($atts, $content=null) {
extract(shortcode_atts( array(‘site’ => ‘www’), $atts));
return ‘<a href=»http://’ . $site . ‘.appstorm.net»>AppStorm</a>’;
}
add_shortcode(‘appstorm’, ‘link_to_appstorm’);
|
Время, когда шорткод ссылается на поддомен AppStorm. Мы указываем, какой поддомен, добавляя атрибут site . Если в шорткоде не определен атрибут, шорткод по умолчанию имеет значение www которое просто ссылается на главную домашнюю страницу. Пример использования ниже будет ссылаться на iPad.AppStorm.
|
1
|
[appstorm site=»ipad»]
|
Как видите, шорткоды довольно понятны. Однако мы хотим использовать тот же базовый принцип, что и ссылка, генерируемая шорткодом с атрибутом, который используется совместно со сторонним сервисом, таким как YouTube или Flickr.
От встраивания в шорткод
Преобразование статического стороннего кода в короткий код очень похоже на метод, используемый для создания ссылки. Мы просто создадим функцию, которая возвращает код в виде шорткода, а затем добавим несколько атрибутов для его настройки.
Шаг 1. Создание неизменяемого шорткода
Первый шаг, который мы должны сделать, это взять обычный код встраивания и создать из него простую функцию возврата.
|
1
2
3
4
|
function youtube_video($atts, $content=null) {
return ‘<iframe width=»640″ height=»360″ src=»http://www.youtube.com/embed/caYu-Lf9A4Y?rel=0″ frameborder=»0″ allowfullscreen></iframe>’;
}
add_shortcode(‘youtube’, ‘youtube_video’);
|
использование
|
1
|
[youtube]
|
Таким же образом мы создали первую не переменную ссылку в первом примере, фрагмент кода выше встраивает видео YouTube, которое не изменится вообще. И как это происходит, само собой разумеется.
Шаг 2. Введение некоторых атрибутов
По сути, фрагмент кода на предыдущем шаге даст результат, идентичный тому, что возвращенный код был вставлен в сам редактор. Если вы не собираетесь регулярно вставлять одно и то же видео снова и снова, этот шорткод, вероятно, бесполезен. Поэтому мы хотим ввести некоторые атрибуты для преобразования в параметры для iframe .
Чтобы добиться этого, мы снова используем функцию extract() для извлечения атрибутов из шорткода. В приведенном ниже коде мы делаем это в базовой форме, только создав атрибут для замены идентификатора видео.
|
1
2
3
4
5
|
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array(‘id’ => »), $atts));
return ‘<iframe width=»640″ height=»360″ src=»http://www.youtube.com/embed/’ . $id . ‘?rel=0″ frameborder=»0″ allowfullscreen></iframe>’;
}
add_shortcode(‘youtube’, ‘youtube_video’);
|
использование
|
1
|
[youtube id=»»]
|
И так же, как замена идентификатора видео, мы можем сделать то же самое для ширины и высоты. Это время, когда вы захотите убедиться, что вы предоставляете значения по умолчанию, однако, в случае, если пользователь не предоставляет значения ширины или высоты.
|
1
2
3
4
5
6
7
8
9
|
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array(
‘id’ => »,
‘width’ => ‘640’,
‘height’ => ‘360’
), $atts));
return ‘<iframe width=»‘ . $width . ‘» height=»‘ . $height .'» src=»http://www.youtube.com/embed/’ . $id . ‘?rel=0″ frameborder=»0″ allowfullscreen></iframe>’;
}
add_shortcode(‘youtube’, ‘youtube_video’);
|
использование
|
1
|
[youtube id=»» width=»» height=»»]
|
Шаг 2б. Дополнительные параметры
У YouTube есть дополнительные параметры, которые можно добавить к URL-адресу, например, автозапуск. Очевидно, что они могут быть применены и к возвращаемому коду, при необходимости с их собственным атрибутом. Как правило, это говорит само за себя и показано ниже (дополнительные части выделены жирным шрифтом).
|
01
02
03
04
05
06
07
08
09
10
|
function youtube_video($atts, $content=null) {
extract(shortcode_atts( array(
‘id’ => »,
‘width’ => ‘640’,
‘height’ => ‘360’,
‘autoplay’ => ‘0’
), $atts));
return ‘<iframe width=»‘ . $width . ‘» height=»‘ . $height .'» src=»http://www.youtube.com/embed/’ . $id . ‘?autoplay=’ . $autoplay . ‘&rel=0″ frameborder=»0″ allowfullscreen></iframe>’;
}
add_shortcode(‘youtube’, ‘youtube_video’);
|
использование
|
1
|
[youtube id=»» width=»» height=»» autoplay=»»]
|
Шаг 3. Готово!
Это действительно так просто, и, как вы увидите в следующем обзоре, тот же базовый метод можно использовать для создания коротких кодов для других сторонних сервисов.
Дополнительные примеры
Все эти сторонние встраивания были созданы с использованием тех же шагов, что и выше. Конечно, как и в шаге 2b, дополнительные параметры могут быть добавлены по желанию.
Vimeo
Видео Vimeo встраивается практически так же, как видео YouTube, через iframe с переменными ширины и высоты. Единственным дополнением является переменная цвета для настройки плеера.
|
01
02
03
04
05
06
07
08
09
10
|
function vimeo_video($atts, $content=null) {
extract(shortcode_atts( array(
‘id’ => »,
‘width’ => ‘640’,
‘height’ => ‘360’,
‘color’ => ’59a5d1′
), $atts));
return ‘<iframe src=»http://player.vimeo.com/video/’ . $id . ‘?color=’ . $color . ‘» width=»‘ . $width .'» height=»‘ . $height . ‘» frameborder=»0″ webkitAllowFullScreen allowFullScreen></iframe>’;
}
add_shortcode(‘vimeo’, ‘vimeo_video’);
|
использование
|
1
|
[vimeo id=»» width=»» height=»» color=»»]
|
Twitter (профиль)
Виджет профиля Twitter представляет собой фрагмент JavaScript с множеством различных атрибутов, которые заменены атрибутами короткого кода в приведенном ниже коде. Поскольку их так много, вы можете удалить некоторые из них и заменить их постоянными значениями (такими как стили) в реальном JavaScript или просто изменить атрибуты по умолчанию в массиве и забыть об их использовании в шорткоде.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
function twitter_widget($atts, $content=null) {
extract(shortcode_atts( array(
‘username’ => »,
‘width’ => ‘300’,
‘height’ => ‘200’,
‘tweetnum’ => ‘4’,
‘shellbgcolor’ => ‘cccccc’,
‘listbgcolor’ => ‘eeeeee’,
‘textcolor’ => ‘333333’,
‘linkcolor’ => ‘639ee3’,
‘hashtags’ => ‘true’,
‘scrollbar’ => ‘true’,
‘loop’ => ‘false’,
‘stream’ => ‘false’,
‘avatars’ => ‘false’,
‘timestamp’ => ‘false’
), $atts));
return ‘<script src=»http://widgets.twimg.com/j/2/widget.js»></script>
<script>
new TWTR.Widget({
version: 2,
type: «profile»,
rpp: ‘ .
interval: 30000,
width: ‘ .
height: ‘ .
theme: {
shell: {
background: «#’ . $shellbgcolor .'»,
color: «#’ . $textcolor . ‘»
},
tweets: {
background: «#’ . $listbgcolor .'»,
color: «#’ . $textcolor . ‘»,
links: «#’ . $linkcolor . ‘»
}
},
features: {
scrollbar: ‘ .
loop: ‘ .
live: ‘ .
hashtags: ‘ .
timestamp: ‘ .
avatars: ‘ .
behavior: «all»
}
}).render().setUser(«‘ . $username .'»).start();
</script>
‘;
}
add_shortcode(‘twitter’, ‘twitter_widget’);
|
использование
Все эти атрибуты шорткода имеют значения по умолчанию, кроме имени пользователя, которое требуется. Что касается того, что на самом деле вставить в атрибут, все они говорят сами за себя, вплоть до hashtags в которых все остальное просто true / false.
|
1
|
[twitter username=»» tweetnum=»» width=»» height=»» shellbgcolor=»» listbgcolor=»» textcolor=»» linkcolor=»» hashtags=»» scrollbar=»» loop=»» stream=»» avatars=»» timestamp=»»]
|
Чирикать (кнопка)
Кнопка Tweet — это популярная кнопка для общения в Twitter.
|
1
2
3
4
5
6
7
8
9
|
function tweet_button($atts, $content=null) {
extract(shortcode_atts( array(
‘username’ => »,
‘url’ => »,
‘style’ => ‘none’
), $atts));
return ‘<a href=»https://twitter.com/share» class=»twitter-share-button» data-url=»‘ . $url . ‘» data-count=»‘ . $style .'» data-via=»‘ . $username . ‘»>Tweet</a><script type=»text/javascript» src=»//platform.twitter.com/widgets.js»></script>’;
}
add_shortcode(‘tweetbutton’, ‘tweet_button’);
|
использование
Первые два атрибута кнопки твита не совсем неоднозначны. Последний устанавливает стиль для кнопки твита, horizontal , vertical или none .
|
1
|
[tweetbutton username=»» url=»» style=»»]
|
Кнопки «Нравится» и «Отправить» на Facebook
Как и кнопка Tweet, кнопки «Нравится» и «Отправить» являются кнопками для обмена в социальных сетях Facebook. Обратите внимание, что для этих кнопок также требуется JavaScript SDK, на который есть ссылки на текущей странице.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
function facebook_buttons($atts, $content=null) {
extract(shortcode_atts( array(
‘width’ => ‘450’,
‘showfaces’ => ‘false’,
‘colorscheme’ => ‘light’,
‘font’ => ‘arial’
), $atts));
return ‘<div id=»fb-root»></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s);
js.src = «//connect.facebook.net/en_US/all.js#xfbml=1»;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<fb:like send=»true» width=»‘ . $width .'» show_faces=»‘ . $showfaces .'» colorscheme=»‘ . $colorscheme . ‘» font=»‘ . $font . ‘»></fb:like>’;
}
add_shortcode(‘like’, ‘facebook_buttons’);
|
использование
Различные атрибуты для использования объясняются на связанной странице Facebook , но, по сути, ширина записывается в том же формате, что и раньше, showfaces — это значение true / false, показывающее, следует ли показывать лица «как у», colorscheme либо темная, либо или свет и шрифт, ну, шрифт.
Поскольку XFBML автоматически нацеливается на текущую страницу, нет необходимости использовать какие-либо атрибуты, что означает, что шорткод может быть таким же простым, как приведенный ниже пример.
|
1
|
[like]
|
Значок Flickr
Значок Flickr — это способ отображения ваших последних фотографий с Flickr. К сожалению, виджет Flickr поставляется с собственным CSS (хотя вы можете легко переместить его в таблицу стилей) и использует таблицы для разметки. Как только вы закончите сильно расстраиваться из-за этой практики, вот короткий код.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function flickr_widget($atts, $content=null) {
extract(shortcode_atts( array(
‘userid’ => »,
‘num’ => ‘3’,
‘sort’ => ‘random’,
‘size’ =>
), $atts));
return ‘
<style type=»text/css»>
#flickr_badge_source_txt {padding:0;
#flickr_badge_icon {display:block !important;
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block;
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important;
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important;
</style>
<table id=»flickr_badge_uber_wrapper» cellpadding=»0″ cellspacing=»10″ border=»0″><tr><td><a href=»http://www.flickr.com» id=»flickr_www»>www.<strong style=»color:#3993ff»>flick<span style=»color:#ff1c92″>r
<tr>
<script type=»text/javascript» src=»http://www.flickr.com/badge_code_v2.gne?count=’ . $num . ‘&display=’ . $sort . ‘&size=m&layout=h&source=user&user=’ . $userid . ‘»></script>
</tr>
</table>
</td></tr></table>
‘;
}
add_shortcode(‘flickr’, ‘flickr_widget’);
|
использование
Виджет Flickr имеет четыре основные переменные, userid — это userid пользователя (в формате 12345678 @ N01), num — это количество отображаемых фотографий, sort является самой последней или случайной и относится к определению показанных фотографий и size s (маленький квадрат), t (миниатюра) или m (средний).
|
1
|
[flickr userid=»» num=»» sort=»» size=»»]
|
Заворачивать
Надеюсь, я объяснил, как создать шорткод в контексте стороннего сервиса. Это довольно просто, нам просто нужно разобраться, как работает оригинальный код, и заменить статические переменные на атрибуты. Это экономит время, но, что, возможно, еще важнее, означает, что код можно изменить позднее, сохранив параметры, позволяющие изменить, скажем, ширину позднее при всех видах использования определенного шорткода.