Начало работы с шорткодами WordPress и примерами сниппетов
Опубликовано: 2021-02-18Шорткоды WordPress были представлены в версии 2.5 и помогают создавать макрокоды для использования в вашем контенте. Если подумать, это отличный способ создать что-то вроде динамического рекламного места или кнопки призыва к действию в ваших сообщениях.
Если мы используем пример с призывом к действию, вы можете добавить что-то подобное в свой пост в блоге, чтобы показать кнопку, а затем отредактировать вывод в файле functions.php вашего шаблона, к которому мы вернемся через минуту.
[button]Чтобы настроить кнопку, мы могли бы просто добавить что-то вроде:
[button type="twitter"]Или, чтобы сделать его еще лучше, мы могли бы использовать прилагаемый шорткод:
[button type="twitter"]Follow me on Twitter![/button]Проявив немного воображения, вы вскоре осознаете потенциал шорткодов и то, что с ними можно сделать. В этой статье я покажу вам, как создавать и использовать эти три разных типа шорткодов, а затем покажу несколько готовых шорткодов для использования на вашем собственном сайте WordPress.
Создание самозакрывающегося шорткода
Самый простой шорткод — самозакрывающийся. Мы создадим простую ссылку на нашу учетную запись Twitter, а затем добавим ее в сообщение в блоге.
Весь код находится в functions.php , который находится в /wp-content/themes/your-theme/ . Если у вас его нет, просто создайте его и поместите в него код.
<?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>Применение:
[button] Просто используя add_shortcode() , мы можем связать любую функцию PHP с нашим шорткодом. В этом простом примере все, что мы делаем, — это возвращаем ссылку на нашу учетную запись Twitter, но давайте сделаем еще один шаг и добавим некоторые параметры.
Создание самозакрывающегося шорткода с параметрами
Шорткод поддерживает параметры, что позволяет нам настраивать вывод. В этом примере у нас есть две разные кнопки, поэтому мы должны определить, какую кнопку мы хотим показать.
<?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?> Теперь вы можете выбрать, какую кнопку отображать, определив type в своем шорткоде.
[button type="twitter"] [button type="rss"] Это здорово. Но что, если мы хотим изменить текст? Мы могли бы продолжать добавлять типы шорткодов, такие как [button type="twitter-2"] и так далее, но это не очень динамично, не так ли? Давайте посмотрим, как это сделать правильно.
Создание закрывающего шорткода
Вложенный шорткод позволяет вам вставлять контент в ваш шорткод, как BBCode, если вы когда-либо его использовали.
<?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>Чтобы использовать этот шорткод, вы вставляете текст, который хотите использовать, следующим образом:
[button]Follow me on Twitter![/button]Чтобы сделать эту кнопку еще лучше, мы могли бы добавить параметры, как в предыдущем примере. На этот раз добавим два параметра: один для имени пользователя Twitter и один для стиля кнопки. Затем у нас могут быть разные типы кнопок, и мы можем выбирать, к какой учетной записи Twitter мы хотим связать кнопку.
<?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>Применение:
[button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>Теперь у нас есть настраиваемая кнопка, которую мы можем связать с любой учетной записью Twitter. Я уверен, вы понимаете, что вы можете создавать гораздо более продвинутые шорткоды, но это хорошее начало.
Шорткоды в виджетах и файлах шаблонов
Теперь, когда вы увидели мощь шорткодов, вы, вероятно, задаетесь вопросом, почему вы не можете использовать их в своих виджетах и файлах шаблонов. Что ж, оказывается, можно.
Чтобы активировать шорткоды в ваших виджетах, просто поместите следующий код в functions.php:
add_filter('widget_text', 'do_shortcode')А чтобы использовать шорткод в файлах шаблонов, вы можете получить к ним доступ, используя:
do_shortcode("[button]");Готовые к использованию шортоды
Вот несколько крутых шорткодов, которые вы можете реализовать прямо сейчас.
Код в постах
Если вы ведете блог, посвященный программированию, вы, вероятно, захотите отображать код в своих сообщениях.
function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');Применение:
[code]<?php echo 'Hello World!'; ?>Встраивайте AdSense в свои посты
С помощью этого шорткода вы можете добавить рекламу Google в любом месте своих сообщений, просто используя [adsense] .
function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; 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> '; } add_shortcode('adsense', 'showads');Встроить видео с YouTube
Этот шорткод позволит вам вставлять видео с YouTube в сообщения блога.
function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");Применение:
// Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]Короткий код пожертвования PayPal
Этот шорткод поможет вам создать ссылки для пожертвований на вашу учетную запись Paypal.
function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');Применение:
[donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]Личное примечание для авторов
Последний хитрый. С помощью этого шорткода вы можете создавать заметки в своих сообщениях, которые могут видеть только авторы.
function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );Заключение
После прочтения этой статьи я надеюсь, что вы полюбите шорткоды WordPress так же сильно, как и я, и я надеюсь, что вы начнете внедрять их в свой собственный блог.