Собственные шорткоды в WordPress: создание, подключение, использование

01.05.2019

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

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

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

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

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

Как самому создавать шорткоды и выводить их в записях

Меня неоднократно спрашивали, как я вставляю блоки с рекламой на сайте, каким плагином. Так вот, отвечу тут — плагин так и называется , в использовании прост как 5 копеек. Устанавливаете, открываете настройки, переключаетесь с визуального редактора на текст и вставляете свой код, сохраняете.

Теперь в редакторе текста wordpress у вас появится доп. кнопочка, кликнув по которой выводится список созданных вами шоткодов. Еще один клик по кнопке Insert Shortcode и данный шоткод будет размещен в записи

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

Могу посоветовать еще один полезный плагин для работы с шорткодами, который уже содержит в себе готовые к работе шорткоды — Shortcodes Ultimate

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

Наиболее интересные для меня — вставка колонок, аккордеонов, спойлеров, кнопок, всевозможные выделения текста и т.д.

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

Таким образом можно обыкновенный бесплатный шаблон быстро превратить в премиум, по крайней мере в плане дизайна =)

Надеюсь данная статья была вам полезна, удачи.

Здравствуйте, уважаемые читатели! Рад приветствовать вас на моем сайте. В этой небольшой статье расскажу вам о том, как вставить шорткод в абсолютно любое место вашей темы. Написать об этом я решил потому, что буквально пару дней назад столкнулся с подобной задачей. Не буду долго и муторно рассказывать все тонкости проблемы, скажу лишь, что мне нужно было вставить шорткод контактной формы в модальное окно в файле темы, которое (модальное окно) при клике открывалось. Вот и нужно было выводить shotcode непосредственно в файле шаблона wordpress.

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

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

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

На самом деле все очень просто, все делается с использованием специальной функции вордресс под названием do_shortcode() , которая принимает одни единственный параметр - шорткод, вот так это выглядит:

Данная функция возвращает результат выполнения shortcode.

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

Обратите внимания, что я использовал php вывод echo, это нужно, потому что, как я уже сказал выше, функция do_shortcode() возвращает выполнение шорткода, то есть она его не выводит на экран, это нам нужно делать самому, для чего мы собственно и пользуемся php оператором echo.

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

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

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

Вот тут на помощь приходят шорткоды, с помощью которых можно внести в Вордпресс собственную «изюминку».

Шорткод — это короткий код (shortcode), который вставляется непосредственно в текст страницы, заголовка, виджета — то есть в контент и расширяет возможности Вордпресса.

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

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

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

Типы шорткодов по структуре

Они бывают без параметров, с параметрами и с контентом.

Шорткоды без параметров

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

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

Этот вызов выводит текущий год. Удобно, чтобы не редактировать тексты каждый год.

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

Порой нужно передать параметры, чтобы получать разные результаты.

Например, вот так вставляется красивая кнопка, стиль которой должен быть прописан в таблице стилей.

Он содержит два параметра: title — это надпись на кнопке, например, Заказать, Подписаться и т.д.

url — это адрес перехода по клику.

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

Здесь параметр s — это цена в долларах.

Шорткоды с контентом

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

Вот так можно выделить фрагмент текста или часть поста, «подложив» под него цветную подложку:

Тут какой-то текст, который будет отображаться на цветном фоне.

Параметр color задаёт цвет подложки в привычном 16-ричном коде.

А вот так можно выводить текст в две колонки одинаковой ширины:

Шорткод в коде php состоит из функции, которая его обрабатывает, и из команды, которая назначает коду соответствующую функцию.

Вот типичный шорткод для кнопки:

function ha_but ($atts,$content=NULL) {
extract(shortcode_atts(array(
‘title’ => ‘Перейти’,
‘url’ => false
), $atts));

$output="’.$title."’;

return $output;
}
add_shortcode(‘but’,’ha_but’);

В данном примере функция имеет имя ha_but . Ей передаются два параметра — title и url . Причём для title назначено значение по умолчанию Перейти . Если при вызове кода параметр title пропустить, то на кнопке по умолчанию будет надпись Перейти.

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

Затем функция возвращает результат свой работы с помощью return .

Функция add_shortcode назначает для шорткода по имени but функцию-обработчик по имени ha_but .

А вот стили для кнопки жёлтого цвета во всю ширину страницы:

Btn {
display: inline-block;
color: #000000;
font: 300 16px «Roboto», sans-serif;
text-transform: uppercase;
background: #fde42b;
background: -webkit-gradient(linear, left top, left bottom, from(#fcea38), to(#ffcf00));
background: -webkit-linear-gradient(top, #fcea38 0%, #ffcf00 100%);
background: linear-gradient(to bottom, #fcea38 0%, #ffcf00 100%);
border-bottom: 3px solid #b27d00;
padding: 14px 15px 11px;
width: 90%;
border-radius: 2px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 #ffec89;

}
.btn:hover {
opacity: 1;
background: -webkit-gradient(linear, left bottom, left top, from(#ffdd02), to(#fffe6d));
background: -webkit-linear-gradient(bottom, #ffdd02 0%, #fffe6d 100%);
background: linear-gradient(to top, #ffdd02 0%, #fffe6d 100%);
border-color: #bd8500;

Как вставить шорткод в шаблон WordPress

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

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

Однако, если вы обновите или смените шаблон — шорткоды обрабатываться перестанут. Если планируется в будущем менять дизайн блога, то код всех шорткодов лучше разместить в одном файле, например, shortcodes.php, а его разместить в папке my в корне сайта.

В этом случае нужно организовать вызов, вставив в файл functions.php команду require_once(‘my/shortcodes.php’);

После смены или обновления темы Вордпресса не забудьте заново прописать эту команду.

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

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

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

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

Обнаружила недавно, что многие не знают, как вставлять шорткоды в вордпресс или вывести скрипт на сайте с иным движком. А те кто знают, и как в коде шаблона темы сайта сделать PHP вывод шорткода , нередко допускают серьезные ошибки. И в итоге потом они пеняют на то, что либо плагин у них или шорткод не работает , либо вообще что-то с шаблоном сайта не так. Но, на самом деле, все очень просто и ошибки случаются в основном из-за невнимательности или незнания синтаксиса и пунктуации.

Как файл? Быстрый ответ

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

php echo do shortcode wordpress

Однако не забывайте про пунктуацию! Кавычки в вашем шорткоде и в php коде должны быть разными.

Т.е., если в вашем шаблоне сайта на wordpress, вы используете такой же шорткод, но с двумя кавычками внутри ([«…»]), и в вашем php-коде вы также используете двойные кавычки («[…]»), то нужно одни из них поменять на одинарные. Именно из-за таких мелких причин часто не работают шорткоды в wordpress . Подробнее об этом ниже.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

shortcode wordpress как вставить

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

Основные ошибки! Или почему не работает шорткод wordpress?

В начале статьи я уже описывала, как правильно добавить шорткод в wordpress, и как вставить шорткод в PHP . Давайте теперь все подытожим.

На самом деле, способов добавления существует два, а именно:

wordpress shortcode в шаблон

Как вы можете заметить, отличаются они между собой только кавычками — одинарными и двойными. Синтаксис языка php очень внимательно относиться к таким кавычкам. И если внутрь второй функции, которая с двумя кавычками, вы вставляете шорткод также с двумя кавычками, например, такой как у нас был:то вам будет выдана ошибка на сайте.

Для того, чтобы ошибок не было и ваш shortcode работал нормально, нужно чтобы были разные кавычки. Например, так:

Добавить любой из первых двух шорткодов в шаблон WordPress можно прямо в редакторе. Для этого найдите в редакторе сайта подходящий php-файл, который управляет «местом» на сайте, где вы хотите вывести ваш слайдер. Найти это место вы можете в инструментах разработчика прямо в вашем браузере, нажав сочетание клавиш Ctrl+Shift+I.

Похожие статьи