Do shortcode

Всем привет! Сегодня на 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

Добавление атрибута 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: #2.    
; 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 появилась возможность вставлять видео в пост с помощью обычной ссылки. Например:

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

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

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

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

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

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

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

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

seo-mayak.com

Простой пример создания шорткода


Создать свой шорткод не труднее, чем написать собственную функцию PHP. Например я решил создать шорткод [misha], который при вставке в пост будет выводить URL главной страницы сайта.

Код можете вставить в файл functions.php (я имею ввиду тот, который находится в директории вашей текущей темы).

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

Шорткод с параметрами

Окей, я уже писал, что у шорткодов могут быть свои параметры, давайте теперь посмотрим как это делается.

В качестве примера я написал шорткод, который просто вставляет ссылку в пост, которая открывается в новой вкладке браузера target="_blank". Не думаю, что на деле он может быть полезен, но для нас сейчас главное — понять сам принцип работы шорткодов.

Параметров будет два: anchor и url — анкор (текст ссылки) и URL соответственно. Как будет выглядеть сам шорткод: [trueurl anchor="Мой блог" url="https://misha.agency/blog"]
. Если параметр не будет указан в самом шорткоде, то будет использоваться его значение по умолчанию, заданное в функции.

Названия атрибутов шорткодов также рекомендуется использовать в нижнем регистре. Значения же атрибутов могут содержать любые символы.

Закрывающиеся шорткоды и шорткод внутри шорткода

Давайте возьмём шорткод из предыдущего примера и немного переколдуем его. Напомню, что шорткод выглядел так:
[trueurl anchor="текст ссылки" url="URL ссылки"].

Что, если мы переделаем его следующим образом: [trueurl anchor="текст ссылки"]URL ссылки[/trueurl].

Кроме того, вовнутрь закрывающихся шорткодов можно вставлять и другие шорткоды (благодаря функции do_shortcode()).

В соответствии с этим давайте переделаем наш код из предыдущего примера:

Теперь шорткод следующего вида [trueurl anchor="главная"][misha][/trueurl] выведет ссылку на главную страницу вашего сайта (про шорткод [misha] я писал выше).

Добавляем кнопку вставки шорткода в визуальный редактор поста TinyMCE

Понятное дело, что гораздо удобнее вставлять шорткод будет через встроенный редактор TinyMCE, а если при этом будет ещё реализован интерфейс, позволяющий задавать параметры шорткода, то вообще круто.

1. PHP

Вне зависимости от того, будет ли ваша кнопка текстовая, либо с иконкой, будет ли она содержать дополнительные поля ввода (параметры шорткода) или нет — во всех случаях PHP-код регистрации кнопки будет одинаков.

В этом примере для получения URL папки с текущей темой я использовал функцию get_stylesheet_directory_uri(). true_button.js
— собственно сама кнопка, создайте этот файл в директории с темой (или там, где вам удобно, но не забудьте в этом случае поменять путь к нему).

2.1. JavaScript. Пример простой кнопки

Займёмся содержимым файла true_button.js. Итак, создадим для начала простую кнопку, которая будет вставлять шорткод [misha].

В результате:

2.2. Кнопка с иконкой, выпадающим списком и с возможностью задавать параметры шорткода

Начну с того, что вставлю (а точнее заменю) код в файл true_button.js:

После вставки кода моя кнопка уже появилась и работает. Единственное только — у неё нет никакой иконки (ну кроме стрелочки вниз).

Сейчас нам понадобится немного CSS-кода. Прежде всего хочу сказать, что вы можете использовать:

  • Встроенные иконки TinyMCE.
  • Другие иконочные шрифты, в том числе и dashicons.
  • Любую картинку через background-image.
  • Изображение, закодированное в base64.

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

Если использовали этот же способ и иконка не появилась — попробуйте прописать к ней абсолютный URL.

Для подключения CSS используйте функцию wp_enqueue_style() либо хук admin_head.

Результат:

Если вы хотите использовать dashicons, то ваш CSS для иконки перца будет выглядеть примерно следующим образом:

Применение шорткодов к переменным в PHP

Тут всё сводится к использованию одной функции — do_shortcode().

do_shortcode()

$content
(строка) (обязательный) Функция выполняет все шорткоды, которые содержатся в этом аргументе.

Функция в качестве параметра может содержать лишь один шорткод:

Или шорткод и какой-то контент:

Популярный пример, позволяет получить или вывести содержимое поста с применением шорткодов при помощи функции get_the_content():

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

misha.blog

Всем привет, друзья, давненько у меня на блоге не было практических постов, да и вообще каких-либо постов =) Я никуда не пропал, просто работаю, и именно по работе мне пришлось столкнуться с такой задачей — как вывести шорткод не в сам блок с контентом, а непосредственно в тело шаблона.

Ведь если вы по аналогии просто скопируете [shortcode] как это делаете в записях, и вставите его в код, например в header.php, то ничего не выйдет, шоткод не заработает.

Для тех кто вообще не понимает о чем речь и что такое шорткод (shortcode от англ. короткий код) — это вызов фрагмента кода, записи или функции небольшим тегом, помещенным в квадратные скобки [имя_шорткода].  Делается это для удобства — что бы не вставлять каждый раз огромные куски кода, можно просто воткнуть маленький шоткодик) Или если вы используете очень часто один и тот же код, как например я вставляю блоки с рекламой в статьи — все это делается через шорткоды в 2 клика.

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

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

<?php echo do_shortcode('[ваш_шорткод][/ваш_шорткод]'); ?>

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

Знаете ли вы, что в движок WordPress заложены несколько базовых шорткодов, которыми вы можете пользоваться, например вывод галереи шорткодом 

. Подробнее можно почитать на оф. сайте вордпресса http://codex.wordpress.org/Shortcode.

ruskweb.ru

Тимур 16.03.2015 в 13:45 #

Здравствуйте, Богдан!
Спасибо за материал — уже не раз выручил!
Но вот столкнулся с такой задачей — всем нравится эта тема: http://jellythemes.com/themes/sonoramawp/
Но для полного счастья принципиально хочу над статичной картинкой в слайдере поставить плеер радио.
Беру шорткод плеера, формирую строчку кода: и вставляю в файл homepage.php, где и реализован слайдер темы:

 <?php /* Template Name: Home Page 1 */ ?> <?php get_header(); ?>  <?php while ( have_posts() ) : the_post(); ?>  <div id="<?php echo $post->post_name; ?>" class="slides-1">  <div class="overlay"></div>  <div class="slides-container">  <?php $images = rwmb_meta('_jellythemes_slider_images', 'type=image', $post->ID ); ?>  <?php foreach ($images as $image) : ?>  <img src="<?php echo $image['full_url'] ?>" alt="">  <?php endforeach; ?>  </div>  <nav class="slides-navigation">  <a href="#" class="next"></a>  <a href="#" class="prev"></a>  </nav>  </div>  <div class="main-title">  <div class="title-container">  <div class="welcome logo">  <div class="top-spacer one"></div>  <div class="top-spacer two"></div>  <?php $images = rwmb_meta('_jellythemes_slider_heading_img', 'type=image', $post->ID ); ?>  <?php foreach ($images as $image) : ?>  <img src="<?php echo $image['full_url'] ?>" alt="">  [сюда вставляю строчку с шорткодом]   <?php endforeach; ?>  <div class="spacer-box"></div> 			<?php $texts = get_post_meta( $post->ID, '_jellythemes_slider_text', true ); ?>  <ul>  <?php foreach ($texts as $i => $text) : ?>  <li <?php echo $i==0 ? 'class="t-current"' : '' ?>><?php echo $text ?></li>  <?php endforeach; ?>  </ul>  </div>  </div>  </div>  <div class="full-wrapper">  <div class="player-container"> <!-- Audio Player -->  <div class="audio-player">  <audio preload="none" src="audio/mp3/Daft_Punk_Giorgio_by_Moroder_Stellar_Dreams_Remix.mp3"></audio>  <ol class="home-playlist">  <?php $tracks = rwmb_meta('_jellythemes_slider_mp3', 'type=file', $post->ID ); ?>  <?php foreach ($tracks as $i => $track) : ?>  <li <?php echo $i==0 ? 'class="playing"' : '' ?> ><a href="#" data-track="<?php echo $track['title'] ?>" data-src="<?php echo $track['url'] ?>"><?php echo $track['title'] ?></a></li>  <?php endforeach; ?>  </ol>  </div>  </div> <!-- end Audio Player -->  </div>  <?php endwhile; ?> 

плеер появляется, но слайдер «ломается»: кадры слайдера встраиваются в ряд, исчезают кнопки назад-вперед, исчезает родной аудиоплеер внизу…

Что я делаю не так? Куда лучше вставить строчку с шорткодом плеера, чтобы все работало?

Спасибо заранее!

twog.me

Что такое шорткод (shortcode), и для чего он нужен?

Shortcode – это от англ. «короткий код». Используется он, в основном, при создании плагинов или модулей, предназначенных для работы с системами управления контентом (CMS), например, WordPress, Joomla и др. Проще говоря, этот короткий код является неким ярлыком, который, при добавлении на сайт, подтягивает за собой весь большой код из плагина.

Выглядит шорткод обычно так: вставить шорткод в php или так как вставить шорткод в шаблон wordpress или даже просто в одно слово что такое шорткод

В любом случае, это не так важно, так как главное знать принцип добавления шорткода на сайт.

 

Как это работает?

Все очень просто. Допустим, вы имеете сайт на движке WordPress, у вас стоит какой-нибудь простой шаблон (дизайн) сайта, но чтобы его украсить, вы решили поставить на него слайдер, в котором ваши фотографии будут перелистываться сами. Сделать это очень просто. Для этого нужно скачать плагин слайдера из общей библиотеки плагинов WordPress, залить туда нужные фото, и плагин выдаст вам не огромный код слайдера по типу:

Как вставить shortcode в PHP-файл

а всего лишь вот такой короткий код (Shortcode) в одну строку:

Как правильно вставить shortcode

 

Вставив подобный этому

как вставить шорткод в страницу wordpress

шорткод на страницу сайта на wordpress или в виджет, ваш плагин начнет работать и будет генерировать верхний большой код слайдера, в результате чего, вы получите ваш слайдер на страницах сайта.

 

А как вставить шорткод слайдера прямо в шаблон wordpress в php-код?

Если нужно добавить слайдер в тему wordpress непосредственно в код, для этого разработчики данного плагина написали рядом (рис. выше) функцию шорткода на языке php: вывести шорткод в php wordpress

Такую «функцию» шорткода можно вставить в php-файл в нужное вам место на сайте. Например, в header.php, где-нибудь после body или, может быть, в sidebar.php, а лучше всего в файл шаблона страницы (он может называться как-нибудь так content-page.php), в результате, вы получите тот же слайдер, но уже встроенный в дизайн самого сайта.

Однако нужно быть очень внимательными при выводе шорткода в шаблоне wordpress в php-файлах. Для этого нужны хотя бы элементарные знания php. Поскольку, если его «не туда» вставить в php-файле, то на сайте будет выведена ошибка.

Обычно любой php-код начинается на <?php и заканчивается на ?>. Вот после окончания одного php-кода и перед началом другого можете вставлять свою php-функцию. К сожалению, разработчики плагинов не всегда делают готовую (как в данном примере) php-функцию для вывода шорткода. В таком случае, можно самим ее создать легко и просто, об этом ниже.

 

Как вывести шорткод в php в wordpress, если нет готовой php-функции в плагине?

Бывают плагины, в которых их разработчики решили не указывать готовую php-функцию для вставки шорткода в файлы шаблона сайта (как было в прошлом примере), а указывают лишь шорткод. Вот как, например, в этом плагине слайдера:

добавить слайдер в тему wordpress

 

Что делать в этом случае, ведь нам нужно вставить шорткод в шаблон wordpress и непосредственно в php-файл на сайте? В таком случае необходимо просто самим обернуть шорткод php-функцией вывода, которая была показана в самом начале статьи. В результате, с учетом нашего шорткода, у нас получиться вот такой вид php-функции:

Его уже можно будет смело встраивать в любой шаблон сайта. Однако еще пока не спешите и прочитайте ниже про распространенные ошибки, которые допускают даже опытные вебмастера при добавление шорткодов.

 

dumajkak.ru

Почему нельзя просто вставить шорткод прямо в файлы тем?

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

Как вывести шорткод в шаблоне темы wordpress?

Для этого нужно обернуть наш шорткод в специальную php-функцию.

Для вывода шорткода слайдера в файлах темы данный код будет выглядеть следующим образом:

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

Если здесь сделать везде одинарные или везде двойные кавычки, то произойдёт путаница и в итоге функция сработает некорректно или не сработает вовсе.

Что делать если не работает шорткод в шаблоне WordPress?

  1. Попробуйте вывести этот шорткод в запись и убедитесь что он рабочий. Возможно проблема не в выводе шорткода, а в самом плагине.
  2. Убедитесь что у вас правильно записана функция и вставлен правильных шорткод.
  3. Если в коде есть ковычки, то проверьте чтобы они не совпадали с ковычками в функции (если в функции стоят двойные ковычки, то в шорткоде вместо двойных должны стоять одинарные и наоборот).
  4. Проверьте чтобы функция не стояла внутри фрагмента PHP кода.

Например:

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

Либо закрыть php-код внутри которого вы хотите разместить шорткод а потом уже писать данную функцию.

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

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

С уважением Юлия Гусарь

impuls-web.ru

Что такое шорткод

Шорткод (Shortcode) – это короткий код, который позволяет выполнить работу какой-либо функции WordPress в месте его вставки.

Как создать шорткод в WordPress

Создать шорткод в WordPress можно 2 способами:

  1. Создать функцию в Вордпресс и зарегистрировать для нее шорткод в файле functions.php;
  2. Воспользоваться плагином для создания шорткодов.

Рассмотрим только первый вариант. От плагинов, по возможности стоит отказываться.

Сделать шорткод в WP, используя functions.php

Прежде всего, нужно открыть файл functions.php вашей темы, который расположен в папке wp-content/themes/ваша_тема/.

Зарегистрировать шорткод в файле functions.php очень просто. Все что нужно сделать — это к существующей функции привязать шорткод следующей конструкцией:

add_shortcode('short_code', 'function_name');

Где:

Add_shortcode – функция регистрации шорткода в WP.

Параметр short_code – это имя вызова шорткода. Именно конструкцией [short_code] в теле записи вы и будете вызывать основную функцию.

Function_name – это имя функции, которую вы регистрируете.

Давайте на примере рассмотрим, как создать шорткод в Вордпресс:

Поставим задачу: вставить рекламный блок Adsense в любое место записи с помощью шорткода.

Как это реализовать:

// Регистрируем функцию  function add_adsense() {  //Возвращаем функцию  return '  <!-- Добавляем код вывода рекламного блока -->  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle"  style="display:block"  data-ad-client="ca-pub-9572020962030512"  data-ad-slot="1604412683"  data-ad-format="auto"></ins>  <script>  (adsbygoogle = window.adsbygoogle || []).push({});  </script>  <!-- закончили вывод рекламного блока -->  ';  }  //Регистрируем шорткод  add_shortcode( 'adsense', 'add_adsense' );

Все, теперь при вставке в запись или на страницу WordPress шорткода [adsense] будет выводиться реклама Adsense.

Это лишь один из примеров. Рекомендую почитать о некоторых других вариантах использования шорткодов и функций на своем сайте или блоге:

http://www.internet-technologies.ru/articles/article_1824.html

Shortcodes Ultimate – плагин для вставки шорткодов в WP

В сети нашел очень интересный плагин для вставки готовых шорткодов в WordPress записи и на страницы — Shortcodes Ultimate.

С помощью него можно:

  1. Вставлять спойлеры, аккордеоны, якори;
  2. Создавать вкладки (табы);
  3. Использовать колонки;
  4. Работать с медиа (Youtube, Vimeo и т.д.);
  5. Вставлять красивые кнопки;
  6. Добавлять классную анимацию;
  7. Оформлять цитаты, блоки рамки и др.;
  8. Создавать лайтбоксы;
  9. Вставлять RSS ленту;
  10. Добавлять таблицы;
  11. Организовать слайдер;
  12. Делать QR-код;
  13. Создавать карусель;
  14. И многое другое.

Всего этот плагин включает более 50-м различных шорткодов, которые повысят продуктивность работы с WordPress и помогут решить очень много различных задач.

плагин вставки шорткодов WP

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

Использование Shortcodes Ultimate позволит отказаться от применения других мелких плагинов.

Скачать Shortcodes Ultimate можно из раздела установки плагинов административной панели WordPress или по ссылке: https://wordpress.org/plugins/shortcodes-ultimate/.

Вставка шорткода в файлы темы

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

Для этого нужно использовать функцию do_shortcode:

<?php echo do_shortcode('[short_code]'); ?>

Где short_code – нужный шорткод.

Этой же конструкцией можно выводить работу шорткода в WordPress виджетах.

Шорткоды – замена Exec-PHP

Записи и страницы WordPress позволяют встраивать в них HTML, CSS, JavaScript. Однако принимать PHP они отказываются. Поэтому многие пользователи используют плагин Exec-PHP для интеграции кода.

Используя функции и шорткоды можно легко добавлять PHP в WordPress записи и избавить себя от необходимости пользоваться данным плагином.

Встроенные шорткоды Вордпресс

По умолчанию в ВП уже есть некоторый набор шорткодов:

  1. Вставка аудио;
  2. Видео;
  3. Добавление галереи;
  4. Caption.

Проблема. Шорткод выводится вверху статьи

К сожалению, я не очень хороший кодер и с PHP я на вы. Поэтому при первом знакомстве с шорткодами я допустил одну непростительную ошибку: вместо return использовал echo, что привело к неправильной работе функции. А именно – она выводилась не в месте вставки шорткода, а вверху записи, над всем текстом. Поэтому, для устранения неисправности просто замените функцию вывода echo на функцию возврата return. И проблема решится.

needsite.net

Do shortcode

Что такое шорткоды

Начиная с версии 2.5, разработчики WordPress ввели понятие «Shortcodes API». Этот функционал позволяет создавать и использовать макрокоды в страницах сайта или в записях блога. Например, простая и короткая запись добавит на странице целую фотогалерею.

Более подробно прочитать о шорткодах и узнать, как создавать простые шорткоды, вы можете из документации WordPress.

В статье хочу показать, как правильно создавать более сложные шорткоды и решить наиболее распространенные проблемы при их создании:

  1. Подключение сторонних скриптов и запуск только при наличии шорткода на странице.
  2. Многоуровневый шорткод.
    • Составной шорткод.
    • Вложенность шорткодов.

Подготовка почвы

Прежде чем начать создавать что-либо, предлагаю свой вариант размещения файлов:

/
/Includes/
shortcodes.php

functions.php

Практически в каждом руководстве предлагают создавать шорткоды прямо в файле functions.php. Скажу сразу: я — противник такого подхода. Вместо этого настоятельно рекомендую вынести все шорткоды в отдельный файл (includes/shortcodes.php) и подключить его в functions.php одной строкой. Это значительно разгрузит functions.php и сделает код более читабельным.

Заметка: WordPress, конечно, поддерживает подключение файлов через require, но очень не рекомендует делать этого. Вместо этого предлагается использовать get_template_part().

Подключение скриптов

Многие начинающие разработчики очень часто совершают эту ошибку — подключают скрипты, необходимые для работы того или иного шорткода, сразу при объявлении шорткода. Т. е. скрипты загружаются всегда, даже если этого шорткода нет на странице.

Пример такой реализации:

function foobar_func( $atts ) {  return "foo and bar"; } add_shortcode( 'foobar', 'foobar_func' );   function foo_script () {  wp_register_script( 'foo-js', get_template_directory_uri() . '/includes/js/foo.js');  wp_enqueue_script( 'foo-js' ); } add_action( 'wp_enqueue_scripts', 'foo_script'); 

Это полностью рабочий вариант, но скрипт будет загружаться на каждой странице, даже если он там не нужен (т. е. нет шорткода).

Во избежание таких ситуаций, предлагаю пользоваться следующим подходом:

  1. Определить шорткод как отдельный класс.
  2. Добавить флаг, который определит есть ли данный шорткод на странице.
  3. Загружать скрипт только по флагу присутствия шорткода.

Вот и все…

Пример такой реализации:

class foobar_shortcode {  static $add_script;  static function init () {  add_shortcode('foobar', array(__CLASS__, 'foobar_func'));  add_action('init', array(__CLASS__, 'register_script'));  add_action('wp_footer', array(__CLASS__, 'print_script'));  }  static function foobar_func( $atts ) {  self::$add_script = true;   return "foo and bar";  }  static function register_script() {  wp_register_script( 'foo-js', get_template_directory_uri() . '/includes/js/foo.js');  }    static function print_script () {  if ( !self::$add_script ) return;  wp_print_scripts('foo-js');  } } foobar_shortcode::init(); 

В отличие от предыдущего варианта реализации, этот шорткод инициализируется, но все скрипты подгружаются только при наличии шорткода на странице.

Вложенные шорткоды

Есть еще пара проблем, с которыми могут столкнуться начинающие разработчики:

  • Создание многоуровневого шорткода (состоящий из нескольких).
  • Использование шорткода внутри такого же шорткода.

Теперь — более детально.

Создание многоуровневого шорткода
Проблема заключается в том, что такой шорткод состоит из нескольких более мелких шорткодов и необходимо предотвратить возможность использования их как отдельных шорткодов (кроме случаев, когда это необходимо).

Возьмем к примеру, шорткод, который создает прайсинг таблицу. Для этого необходимо подготовить три отдельных шоркода:

[price]
— [plan title=’Plan 1’ price=’99’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]
— [plan title=’Plan 2’ price=’499’]
— [option] Option 1 [/option]
— [option] Option 2 [/option]
— [option] … [/option]
— [/plan]

[/price]

В данном примере используется три шорткода: [price] [plan] [option].

add_shortcode( ‘price’, ‘price_code’ );
add_shortcode( ‘plan’, ‘plan_code’ );
add_shortcode( ‘option’, ‘option_code’ );

Для предотвращения использования внутренних шорткодов в качестве отдельных предлагается следующая схема:

Price -> вывод кода на страницу
Plan -> получение данных
Option -> получение данных

Т. е. вывод кода на страницу происходит только во внешнем шорткоде, внутренние же просто возвращают полученные данные. Пример такой реализации приведен ниже.
Описание функции внешнего шорткода:

 function price_code ($atts, $content) {  // инициализация глобальных переменных для прайс планов  $GLOBALS['plan-count'] = 0;  $GLOBALS['plans'] = array();  // чтение контента и выполнение внутренних шорткодов  do_shortcode($content);  // подготовка HTML кода  $output = '<div class="price">';  if(is_array($GLOBALS['plans'])) {  foreach ($GLOBALS['plans'] as $plan) {  $planContent = '<div class="plan">';  $planContent .= $plan;  $planContent .= '</div>';  $output .= $planContent;  }  }  $output .= '</div>';  // вывод HTML кода  return $output;  } 

Описание функций внутренних шорткодов:

function plan_code ($atts, $content) {  // получаем параметры шорткода  extract(shortcode_atts(array(  'title' => '', // Plan title name  'price' => '0', // Plan price  ), $atts));  // Подоготавливаем HTML: заголовок плана  $plan_title = '<div class="plan-title">';   $plan_title .= ' <p>'.$title.'</p>';  $plan_title .= '</div>';  // Подоготавливаем HTML: стоимость  $f_price = round(floatval($price), 2);  $f_price = ($f_Price > 0) ? $f_Price : 0;  $s_price = '$'.$f_Price;  $price_plan = '<div class="plan">';  $price_plan .= ' <p class="price-sum">'.$s_price.'</p>';  $price_plan .= ' <small class="price-text">'.$text.'</small>';   $price_plan .= '</div>';   // инициализация глобальных переменных для опций  $GLOBALS['plan-options-count'] = 0;  $GLOBALS['plan-options'] = array();  // читаем контент и выполняем внутренние шорткоды  do_shortcode($content);  // Подоготавливаем HTML: опции  $plan_options = '<div class="plan-options">';  if (is_array($GLOBALS['plan-options'])) {  foreach ($GLOBALS['plan-options'] as $option) {  $plan_options .= $option;  }  }  $s_OptionsDiv.= '</div>';  // Подоготавливаем HTML: компонуем контент  $plan_div = $plan_title;  $plan_div .= $price_plan;  $plan_div .= $plan_options;  // сохраняем полученные данные  $i = $GLOBALS['plan-count'] + 1;  $GLOBALS['plans'][$i] = $plan_div;  $GLOBALS['plan-count'] = $i;  // ничего не выводим  return true;  }  function option_code ($atts, $content) {  // Подоготавливаем HTML   $plan_option = '<div class="price-option">';  $plan_option .= ' <p class="price-option-text">'.do_shortcode($content).'</p>';  $plan_option .= '</div>';  // сохраняем полученные данные  $i = $GLOBALS['plan-options-count'] + 1;  $GLOBALS['plan-options'][$i] = $plan_option;  $GLOBALS['plan-options-count'] = $i;  // ничего не выводим  return true;  } 

При этом подходе шорткод будет работать только в сборе, т. е. при правильном использовании, в других случаях ничего не будет выведено на экран (соответственно, ничего не сломается).

Конечно же, вы можете еще оптимизировать и усовершенствовать этот шорткод, но все же, думаю, основную идею продемонстрировать мне удалось.

Повторяющиеся шорткоды

Проблема заключается в следующем: нужно внутри шорткода использовать такой же шорткод. Наиболее частым примером в моей практике был шорткод для создания колонки. Т.е., к примеру, нужно реализовать разделение страницы на 2 части с помощью колонок и в первую колонку разделить еще на 2 колонки.

[column_half]
[column_half] Content [/column_half]
[column_half] Content [/column_half]
[/column_half]
[column_half] Content [/column_half]

К сожалению, для WordPress уже такая вложенность “не по зубам”. Верстка разлетится уже на втором контенте. Происходит это потому что при открытии шорткода WordPress сразу же ищет вторую (закрывающую) часть этого шорткода, т.е. в данном примере первая колонка будет закрыта на первом же вложенном шорткоде.

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

add_shortcode( 'column_half', 'column_half_code' ); add_shortcode( 'column_half_inner', 'column_half_code' ); function column_half_code ( $atts, $content ) {  return "<div class=’col-lg-6’>".do_shortcode($content)."</div>"; } В этом случае исходный синтаксис станет: [column_half]  [column_half_inner] Content [/column_half_inner]  [column_half_inner] Content [/column_half_inner] [/column_half] [column_half] Content [/column_half] 
Заключение

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

Автор: Дмитрий Кабаков, Senior Front-end Developer.

habr.com


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector