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




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


Если вы не знаете еще что такое шорткод, то коротко объясню. Представим, что вам нужно в статью вставить какой-то код, пусть это будет ссылка:

10 полезных коротких кодов для WordPress

Представим, что вы хотите ее вставить в 10 статей в произвольных местах. В принципе не сложно, поставили. А теперь представьте, что ссылка оказалась битой и вам нужно ее заменить в 10 местах? А если это 100 страниц? Вручную это сделать будет сложно, разве только , но для многих это сложная задача.

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

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

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

В wordpress существует немало плагинов для создания шорткодов, но не один из них мне не пришелся по душе: то все на английском, то слишком навороченный, то слишком мало функциональный… Но вот как раз на днях я прочитал, что известный seo блоггер Виталий Бургомистров анонсировал бесплатный плагин для этих целей — sCode by mojWP .


Вот небольшое видео по работе этого плагина:

Даже нет смысла что-то еще объяснять по его работе, из видео и так все предельно ясно. Единственный момент, который хотелось бы пояснить, это то, как вставить шорткод в шаблон wordpress?

Если вы вставите в html код шаблона шорткод, то и увидите то, что вставили — шорткод. Чтобы все заработало, нужно ваш шорткод заключить в функцию:

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

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

От чего зависит заработок на adsense?

1. Цена клика.
2. Количество кликов.

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

А вот в статье совсем другое дело. Человек начинает читать статью и натыкается на рекламу — кликнет или нет? Вот тут все зависит от одного фактора: тема рекламы ПОЛНОСТЬЮ совпадает с вопросом, который разбирается НА ДАННОМ этапе статьи. Пример:

Вот читает человек о том, какой хостинг ему выбрать. Читает, читает, и подходит к вопросу, который вы написали в статье и выделили его жирным шрифтом — какой же хостинг выбрать лучше всего ?

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

Да, нужно ВРУЧНУЮ вставить шорткод с рекламой В НУЖНОЕ МЕСТО! Если этого места нет, то его нужно СОЗДАТЬ! Можно сделать так: открываем google.com и в поиск вводим название нашей статьи. Ищем в выдаче нашу статью и заходим на нее. Смотрим, какую рекламу показывает adsense. Ищем место в статье, где ей будет самое место, дописываем статью используя слова из этой рекламы и вставляем туда шорткод.

Теперь реклама в статье будет МАКСИМАЛЬНО подходит ее содержанию, как минимум тому куску текста, где она будет стоять. Да, это долго и муторно, но ведь мы не ищем легких путей, правда? Легкий путь — это религия неудачников…


Не нашли ответ? Воспользуйтесь поиском по сайту

Шорткоды — это функции PHP, которые можно задействовать внутри содержимого поста, используя условные обозначения.

Например стандартный вордпрессовский шорткод позволяет вывести галерею внутри поста.

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

Так же, как у функции могут быть аргументы, так и шорткод может иметь собственные параметры. Ещё один пример с шорткодом :

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

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

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

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

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

Параметров будет два: anchor и url — анкор (текст ссылки) и URL соответственно.. Если параметр не будет указан в самом шорткоде, то будет использоваться его значение по умолчанию, заданное в функции.

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

Давайте возьмём шорткод из предыдущего примера и немного переколдуем его. Напомню, что шорткод выглядел так:
.

Что, если мы переделаем его следующим образом: URL ссылки .

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

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

function true_url_external( $atts , $shortcode_content = null ) { $params = shortcode_atts( array ( "anchor" => "Миша Рудрастых" ) , $atts ) ; return """ target="_blank">{$params["anchor"]} " ; } add_shortcode( "trueurl" , "true_url_external" ) ;

Теперь шорткод следующего вида выведет ссылку на главную страницу вашего сайта (про шорткод я писал выше).

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

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

1. PHP

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

// Хуки function true_add_mce_button() { // проверяем права пользователя - может ли он редактировать посты и страницы if ( !current_user_can( "edit_posts" ) && !current_user_can( "edit_pages" ) ) { return ; // если не может, то и кнопка ему не понадобится, в этом случае выходим из функции } // проверяем, включен ли визуальный редактор у пользователя в настройках (если нет, то и кнопку подключать незачем) if ( "true" == get_user_option( "rich_editing" ) ) { add_filter ( "mce_external_plugins" , "true_add_tinymce_script" ) ; add_filter ( "mce_buttons" , "true_register_mce_button" ) ; } } add_action ("admin_head" , "true_add_mce_button" ) ; // В этом функции указываем ссылку на JavaScript-файл кнопки function true_add_tinymce_script( $plugin_array ) { $plugin_array [ "true_mce_button" ] = get_stylesheet_directory_uri() ."/true_button.js" ; return $plugin_array ; } // Регистрируем кнопку в редакторе function true_register_mce_button( $buttons ) { array_push ( $buttons , "true_mce_button" ) ; // true_mce_button - идентификатор кнопки return $buttons ; }

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

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

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

(function () { tinymce.PluginManager .add ("true_mce_button" , function ( editor, url ) { // true_mce_button - ID кнопки editor.addButton ("true_mce_button" , { // true_mce_button - ID кнопки, везде должен быть одинаковым text: "" , // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку title: "Вставить шорткод " , // всплывающая подсказка icon: false , // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс onclick: function () { editor.insertContent ("" ) ; // вставляем шорткод в редактор, также можно задать любое действие jQuery } } ) ; } ) ; } ) () ;

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

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

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

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

(function () { tinymce.PluginManager.add("true_mce_button" , function ( editor, url ) { // id кнопки true_mce_button должен быть везде один и тот же editor.addButton( "true_mce_button" , { // id кнопки true_mce_button icon: "perec" , // мой собственный CSS класс, благодаря которому я задам иконку кнопки type: "menubutton" , title: "Вставить элемент" , // всплывающая подсказка при наведении menu: [ // тут начинается первый выпадающий список { text: "Элементы форм" , menu: [ // тут начинается второй выпадающий список внутри первого { text: "Текстовое поле" , onclick: function () { editor.windowManager.open( { title: "Задайте параметры поля" , body: [ { type: "textbox" , name: "textboxName" , // ID, будет использоваться ниже label: "ID и name текстового поля" , // лейбл value: "comment" // значение по умолчанию } , { type: "textbox" , // тип textbox = текстовое поле name: "multilineName" , label: "Значение текстового поля по умолчанию" , value: "Привет" , multiline: true , // большое текстовое поле - textarea minWidth: 300 , // минимальная ширина в пикселях minHeight: 100 // минимальная высота в пикселях } , { type: "listbox" , // тип listbox = выпадающий список select name: "listboxName" , label: "Заполнение" , "values" : [ // значения выпадающего списка { text: "Обязательное" , value: "1" } , // лейбл, значение { text: "Необязательное" , value: "2" } ] } ] , onsubmit: function ( e ) { // это будет происходить после заполнения полей и нажатии кнопки отправки editor.insertContent( "" ) ; } } ) ; } } , { // второй элемент вложенного выпадающего списка, прост вставляет шорткод text: "Кнопка отправки" , onclick: function () { editor.insertContent("" ) ; } } ] } , { // второй элемент первого выпадающего списка, просто вставляет text: "Шорткод " , onclick: function () { editor.insertContent("" ) ; } } ] } ) ; } ) ; } ) () ;

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

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, который решает нужные вам задачи.

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

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

На практике шорткод – это специальная конструкция, которая заключается в квадратные скобки. Система, встречая где-либо ее, подставляет заданное значение. Шорткоды довольно популярны в темах и плагинах.

Рассмотрим действия шорткода на примере плагина галереи изображений. Итак, после его установки и активации, в админ-части вашего сайта WordPress появляется специальный раздел, в котором есть необходимые инструменты для создания галереи. После того, как изображения были добавлены и применены необходимые настройки, ваша галерея будет сохранена. Теперь остается ее вывести на сайте. Для этого плагин сообщает вам уникальный шорткод, на месте вставки которого будет отображена созданная вами галерея.

Шорткод выглядит следующим образом:

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

Инструменты “движка” позволяют не только пользоваться уже существующими шорткодами, но и создавать свои. Для этого необходимо иметь навыки программирования. Размещать всю нашу работу будем в основном конфигурационном файле активной WordPress-темы – functions.php .

Если Вы не знаете, как редактировать functions.php , то в этом случае Вам поможет плагин ProFunctions .

Для примера создадим шорткод, который будет выводить простой текст “Привет, WPSchool!”

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

Function wpschool_text_shortcode() { return "Привет, WPSchool!"; } add_shortcode("textshortcode", "wpschool_text_shortcode");

Наш код состоит из 2-х основных конструкций. Блок function wpschool_text_shortcode() является функцией, в которой собственно и происходит вывод необходимого значения шорткода. В нашем случае – это вывод текстовой строки “Привет, WPSchool!”

Директива add_shortcode() является служебной командой, которая создает сам шорткод. Она имеет два параметра. ‘textshortcode’ – это название шорткода, которое будет в итоге заключено в квадратные скобки. Во втором параметре мы указываем имя нашей функции с выводом текста.

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

Добавим его в контентную часть записи или страницы.

В итоге на сайте это будет выглядеть так:

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

Function wpschool_picture_shortcode($atts) { extract(shortcode_atts(array("width" => 100, "height" => 100,), $atts)); return ""; } add_shortcode("picture", "wpschool_picture_shortcode");

Наш шорткод теперь содержит параметры функции, а также присутствует аргумент $atts . Для того, чтобы использовать параметры шорткода, нам понадобятся две функции: shortcode_atts() и extract() . Первая является встроенной в ядро WordPress функцией, которая сопоставляет атрибуты шорткода с переданными и присваивает значения по-умолчанию (если это необходимо). extract() – это функция языка PHP , которая создает переменные из значений массива. Наша функция возвращает значение, которое нам необходимо (HTML -разметка нашего изображения с заданными значениями высоты и ширины).

Теперь, когда будет использован шорткод , будет сгенерировано выбранное изображение с размерами 100 на 100 . Если необходимо изменить его размеры, то шорткод будет иметь вид:

Обнаружила недавно, что многие не знают, как вставлять шорткоды в вордпресс или вывести скрипт на сайте с иным движком. А те кто знают, и как в коде шаблона темы сайта сделать 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.