КАК ЛЕГКО ВСТАВИТЬ ШОРТКОД В WORD PRESS В ШАБЛОН?

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

По умолчанию, WordPress выводит виджеты исключительно в областях, предварительно заданных в темах оформления. Чтобы иметь возможность показать тот же календарь в статье, следует задействовать сторонние инструменты. Наиболее простым из них в использовании является бесплатный плагин Widgetize Pages Light.

Плагин Widgetize Pages Light

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

После установки и активации плагина необходимо в админ-панели перейти в раздел Widgetize pages -> Sidebars.

Для создания нового сайдбара следует нажать кнопку Add New. В открывшемся окне необходимо будет задать название (поле Sidebar title) и описание ( Description), после чего нажать кнопку Save Sidebar.

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

Теперь можно добавлять необходимые виджеты. Для этого следует в админ-панели перейти Внешний вид -> Виджеты.

На странице виджетов видим, что был создан новый сайдбар. Теперь в него добавим плагин Календарь.

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

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

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

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

Шорткоды

Шорткоды – могут содержать в себе какой-то PHP-код и функции, которые можно задействовать прямо в контенте записей и страниц. Появились в версии WordPress 2.5.

Например можем взглянуть на шорткод галереи, который выглядит так:

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

Даже с приходом Gutenberg, вряд ли шорткоды в скором времени будут вытеснены блоками.

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

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

  gallery size= ids=

В параметре ids перечислены ID изображений, входящих в галерею, параметр size— размер вставляемых изображений.

Стандартные шорткоды WordPress

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

• 

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

Экранирование шорткодов

А точнее, как сделать так, чтобы шорткод присутствовал в контенте вашего поста, но не выполнялся? Или другими словами, как я вывел шорткоды в предыдущей главе поста, не выполняя их?

Всё, что нужно сделать, это обернуть его ещё в одни квадратные скобки, вот так:

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

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

  шорткод .  /шорткод

Ну и про HTML-сущности тоже помним, да? [шорткод]

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

1. Простой пример

  true_misha_func 
	 ; 
 
 , ;

• Код можете вставить в файл  functions.php  (я имею ввиду тот, который находится в директории вашей текущей темы). Больше информации о вставке кода.
• Имя шорткода должно быть обязательно в нижнем регистре и содержать только буквы латинского алфавита, цифры и символ подчеркивания.
• Мы использовали функцию site_url() для вывода текущего адреса сайта.

2. Шорткод с параметрами (атрибутами)

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

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

  true_url_external 
 
	 = 
		    // в массиве укажите значения параметров по умолчанию    

			 => ,    // параметр 1    

			 => ,    // параметр 2    

		, 
		 
	;
 
	 .   .   .   .  ;

 
 , ;

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

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

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

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

  true_url_external , = 
 
	 = 
		
			 => 
		, 
		 
	;
 
	 .   .   .   .  ;

 
 , ;

4. Используем буферизацию для вывода прямо в шорткоде

Иногда бывает, что никак не получается внутри шорткода возвратить результат, например мы используем функцию get_template_part() внутри. Что делать в таких ситуациях?

Решается это довольно легко – при помощи буферизации.

  truemisha_shortcode_callback 
	;
	
	    // или get_template_part( 'entry' );    

	    // или закрывать тег ?> и выводить сразу HTML    

 
	 = ;    // всё, что вывели, окажется внутри $output    

	;
 
	 ;

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

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

PHP-код

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

  true_add_mce_button 
	    // проверяем права пользователя - может ли он редактировать посты и страницы    

	 ! && ! 
		;    // если не может, то и кнопка ему не понадобится, в этом случае выходим из функции    

	
	    // проверяем, включен ли визуальный редактор у пользователя в настройках (если нет, то и кнопку подключать незачем)    

	 == get_user_option 
		 , ;
		 , ;
	

, ;
 
    // В этом функции указываем ссылку на JavaScript-файл кнопки    

 true_add_tinymce_script 
	 = .;    // true_mce_button - идентификатор кнопки    

	 ;

 
    // Регистрируем кнопку в редакторе    

 true_register_mce_button 
	 , ;    // true_mce_button - идентификатор кнопки    

	 ;

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

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

  
	tinymce. PluginManager.add, editor, url    // true_mce_button - ID кнопки    

		editor.addButton,    // true_mce_button - ID кнопки, везде должен быть одинаковым    

			text: ,    // текст кнопки, если вы хотите, чтобы ваша кнопка содержала только иконку, удалите эту строку    

			title: ,    // всплывающая подсказка    

			icon: ,    // тут можно указать любую из существующих векторных иконок в TinyMCE либо собственный CSS-класс    

			onclick: 
				editor.insertContent; 
			
		;
	;
;

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

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

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

  
	tinymce. PluginManager.add, editor, url    // id кнопки true_mce_button должен быть везде один и тот же    

		editor.addButton ,    // id кнопки true_mce_button    

			icon: ,    // мой собственный CSS класс, благодаря которому я задам иконку кнопки    

			type: ,
			title: ,    // всплывающая подсказка при наведении    

			menu:    // тут начинается первый выпадающий список    

				
					text: ,
					menu:    // тут начинается второй выпадающий список внутри первого    

						
							text: ,
							onclick: 
								editor.windowManager.open 
									title:    'Задайте параметры поля'    
,
									body: 
										
											type: ,    // тип textbox = текстовое поле    

											name: ,    // ID, будет использоваться ниже    

											label:    'ID и name текстового поля'    
, 
											value:    // значение по умолчанию    

										,
										
											type: ,    // тип textbox = текстовое поле    

											name: ,
											label:    'Значение текстового поля по умолчанию'    
,
											value: ,
											multiline: ,    // большое текстовое поле - textarea    

											minWidth: ,    // минимальная ширина в пикселях    

											minHeight:    // минимальная высота в пикселях    

										,
										
											type: ,    // тип listbox = выпадающий список select    

											name: ,
											label: ,
											:    // значения выпадающего списка    

												text: , value: ,    // лейбл, значение    

												text: , value: 
											
										
									,
									onsubmit: e    // это будет происходить после заполнения полей и нажатии кнопки отправки    

										editor.insertContent + e.data.textboxName + + e.data.multilineName + + e.data.listboxName + ;
									
								;
							
						,
						 
							text: ,
							onclick: 
								editor.insertContent;
							
						
					
				,
				 
					text: ,
					onclick: 
						editor.insertContent;
					
				
			
		;
	;
;

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

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

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

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

  i 
	 

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

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

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

  i 
	    /* выбираем иконку и узнаем ее код тут https://developer.wordpress.org/resource/dashicons/ */    

	
	20px    /* можно подкорректировать размер шрифта, если не устраивает*/    

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

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

do_shortcode()

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

  ;

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

  .   .   ;

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

  = ;

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

Шорткод – что это?

Его можно охарактеризовать следующим образом – короткий код для внедрения какой-либо функции в выбранном месте сайта. Состоит из легко запоминающегося текста. Он скрывает отображение длинного кода, записанного в PHP-файле, что упрощает работу для новичков и малоопытных вебмастеров. Для профессионалов shortcode позволяют экономить время на заранее разработанных функциях.

С их помощью можно выводить текст, оформлять контент, добавлять видео, слайды, изображения, графики и другие элементы. Такие плагины, как Nextgen Gallery, Visual Composer, Contact Form 7 используют шорткоды для размещения блоков и контента.

Регистрируется несколькими способами:

• создание функции в WordPress и определение шорткода для нее в functons.php;
• применение специального плагина;
• регистрация shortcode без использования расширений.

Известно, что большое количество дополнительных модулей и приложений подтормаживает работу ресурса, поэтому рассмотрим наиболее оптимизированный вариант. Следует зайти в functions.php, находящийся в корневой папке текущей темы и открыть его через текстовый редактор Notepad++. После чего можно вставить шорткод в тему WordPress. Регистрация осуществляется следующим образом:

• add_shortcode – регистрация шорткода в WordPress;
• shortcode – название (используется для выведения последующей функции на сайте);
• function_name – название регистрируемой функции.

Плагины для работы с shortcode

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

• работа с галереями;
• вывод статистики блога;
• скрытие части текста;
• вставка аудио/видео;
• интеграция контента с YouTube;
• вывод похожих записей;
• настройки автоформатирования.

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

Shortcodes Ultimate

Лучшее решение для работы с шорткодами в мире

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

• 50 предустановленных шаблонов шорткодов;
• редактор пользовательских CSS;
• доступен предпросмотр;
• поддерживается всеми темами, имеет адаптивный дизайн;
• переведен на 9 языков;
• подробная инструкция по использованию.

Обладателям премиальной версии предлагаются дополнительные элементы – 15 штук, 60 скинов и возможность создавать пользовательские шорткоды. Все это можно приобрести по отдельности либо вместе. Скачано более 700 000 копий, средняя оценка вебмастеров – 5 звезд. Версия со всеми аддонами обойдется в 59 долларов для одного сайта.

---

Column Shortcodes

Отличный вариант для создания столбцов, достаточно вставить шорткод в страницу WordPress с необходимыми параметрами. В панели управления можно выбрать 10 колонок, каждая из которых отличается по ширине. Доступно редактирование отступов и подключение собственных стилей. Скачано более 100 000 копий, оценка пользователей – 4,5 из 5. На странице расширения размещена подробная инструкция и ответы на часто задаваемые вопросы.

---

WP Shortcode by MyThemeShop

Интересное решение, в особенности для тех вебмастеров, которые часто меняют темы
или их настройки. Все функции сохраняются даже при смене шаблона. Доступно около 24 шорткодов для создания кнопок, блоков, ценовых таблиц, переключателей. После установки, в редакторе записей/страниц появляется кнопка добавления shortcode. Во всплывающем окне имеется строка выбора и некоторые параметры. Настройка легкая и не требует особых навыков.

• вкладки;
• визуальное оформление;
• кнопки;

• ценовые таблицы;
• карты;
• переключатели.

Распространяется на бесплатной основе, скачано более 70 000 раз. Оценка пользователей – 4,5 балла.

Bootstrap Shortcodes

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

• таблицы, сетки, коды, изображения;
• метки, значки, медиа-объекты, дополнительные панели;
• прогресс-бары, вкладки, подсказки, слайдеры и карусели.

Бесплатное расширение скачано более 50 000 раз, оценка вебмастеров – 5 из 5. Русский язык недоступен.

Shortcake

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

Основные возможности:

• добавление медиа-контента;
• социальные кнопки
• Распространяется на бесплатной основе. Скачан порядка 20 000 раз и оценен пользователями в 4 балла.

Заключение

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

Вставить шорткод в запись или страницу

Вывести шорткод в записях и страницах WordPress просто. Открываем редактирование записи и делаем пару действий.

В классическом редакторе WordPress

Если вы любите пользоваться классическим редактором, то входим в статью и во вкладке визуально в необходимое место нужно вставить. Разберу на примере форм от плагина Contact Form 7.

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

В Gutenberg

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

• Нажимаем плюс
• Находим раздел Виджеты
• Выбираем одноименный инструмент

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

Нажимаем на предварительный просмотр и видим ту же картину. Простые методы прошли переходим к более сложным.

В плагине Elementor

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

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

Вставить напрямую в шаблон

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

С помощью функций темы

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

1. Нашел где можно прописать шорткод
2. Вижу, что на предварительно просмотре форма работает
3. Если все устраивает, то нажимаю опубликовать

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

В PHP документе

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

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

То есть в нашем случае получится такая картина:

<?php echo do_shortcode('[contact-form-7 id="245" title="Контактная форма 1"]'); ?>

Хочу разместить форму обратной связи

под постами. Какой файл у вас отвечает за вывод того или иного элемента предсказать не могу. В моем случае content-single.

1. Заходим в редактор тем
2. Находим файл в который необходимо вставить информацию
3. Определил, что блок вывода контента это div с классом entry-content, и перед закрывающим тегом прописал функцию
4. Обновляем страницу и смотрим, элемент отобразился где нужно, под контентом.

В виджетах

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

Разумное решение, безопасность превыше всего, но если набрались смелости залить в vidgets WordPress, то читаем дальше.

Виджет текст

С помощью модуля Текст можно вставить шорткод, но это касается WordPress версий 5.0 и выше. Смотрим на скриншот, перетаскиваем его в активную зону и сохраняем изменения.

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

add_filter( 'widget_text', 'do_shortcode' );

С помощью плагина

Существует отличный плагин скачиваем или устанавливаем из админки WordPress, так он выглядит в поиске.

Заходим Внешний вид > Виджеты, там появиться новый раздел Shortcode Widget. Перетаскиваем в активную зону, прописываем и сохраняем

Это 100% способ, если он не помог, то причина скорее всего в ядре WordPress. На этом закончу в статье разобрались как вставить шорткоды в WordPress различными методами и способами, напишите пожалуйста, статья вам помогла?

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

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

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

Шорткоды — это ярлык кода, который позволяет добавлять динамический контент к различным типам записей, боковым панелям и шаблонам.

Синтаксис шорткода представляет собой текст (ключевое число) внутри квадратных скобок.

Простой шорткод без параметров выглядит так:

[shortcode]

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

[shortcode params="foo"]

Шорткод с текстом в качестве параметра обычно выглядит, так:

[shortcode]Здесь может быть любой текст[/shortcode]

Косая черта может применяться, как в одиночных, так и в контентных шорткодах:

[shortcode /]
[shortcode]Еще один пример[/shortcode]

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

Shortcode API

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

Это означает, что вы можете писать HTML-разметку в своих постах, но не можете выполнить PHP-код и сценарии JavaScript.

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

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

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

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

Если вы используете редактор Gutenberg, добавьте новый блок с типом Шорткод в процессе редактирования записи:

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

Для добавления шорткода на боковую панель, перейдите на экран Внешний вид -> Виджеты и добавьте новый виджет типа Блок:

Для вставки шорткода в шаблон WordPress используйте функцию do_shortcode():

<?php echo do_shortcode("[shortcode]"); ?>

Создание шорткодов в WordPress

В качестве примера напишем простой кастомный шорткод с помощью функции add_shortcode(), который вернет некоторый результат.

Добавим код в:

<?php 
add_shortcode( 'car', 'car_shortcode' );
    function car_shortcode( $atts ) {
        $atts = shortcode_atts( [
            'brand' => 'Марка автомобиля',
            'hp'  => 0,
	], $atts );
    return "Мощность автомобиля {$atts['brand']} — {$atts['hp']} лошадиных сил";
}
?>

Мощность автомобиля Porsche — 220 лошадиных сил.

Шорткод с поддержкой параметров

Пример шорткода с поддержкой параметров:

functions.php

<?php 
add_shortcode( 'shortcode', 'example_shortcode' );
    function example_shortcode( $atts ) {
        return 'Привет, мир!';
}
?>

Контентный шорткод Привет, мир!

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

<?php 
add_shortcode( 'blockquote', 'blockquote_shortcode' );
    function blockquote_shortcode( $atts, $text ) {
        return '<blockquote>' . $text . '</blockquote>';
}
?>

Чтобы использовать этот шорткод, добавьте его в текст записи:

[blockquote]Еще одна цитата[/blockquote]

Контентный шорткод с поддержкой атрибутов

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

<?php 
add_shortcode( 'blockquote', 'blockquote_shortcode' );
    function blockquote_shortcode( $atts, $text ) {
	$atts = shortcode_atts( [
		'class' => 'example',
	], $atts );
    return '<blockquote class="' . esc_attr( $atts['class'] ) . '">' . $text . '</blockquote>';
}
?>

[blockquote class="danger"]Внимание! Продукция для лиц старше 16 лет.[/blockquote]

Шорткод с буферизацией вывода

Чтобы вставить в текст записи фрагменты HTML, PHP-код или JS-сценарий, воспользуемся буферизацией вывода в PHP.

Например, добавим рекламный блок Рекламной сети Яндекса в контент на странице с помощью шорткода. Вывод рекламного блока без буферизации:

<?php 
add_shortcode('sponsored', 'yandex_rtb'); 
    function yandex_rtb() { 
        $string .= '<div id="yandex_rtb_R-A" class="yandex_rtb_container"></div>
            <script>window.yaContextCb.push(()=>{
                Ya.Context.AdvManager.render({
                    renderTo: "yandex_rtb_R-A",
                    blockId: "R-A-0000-00"
                })
            })</script>';
    return $string;
}
?>

Пример кода c буферизацией вывода:

<?php 
add_shortcode('sponsored', 'yandex_rtb');
    function yandex_rtb() {
        ob_start(); 
?>
	<div id="yandex_rtb_R-A" class="yandex_rtb_container"></div>
	<script>window.yaContextCb.push(()=>{
		Ya.Context.AdvManager.render({
			renderTo: 'yandex_rtb_R-A',
			blockId: 'R-A-0000-00'
		})
	})</script>
<?php 
	return ob_get_clean(); 
} ?>

Удаление шорткодов в WordPress

Чтобы удалить шорткод воспользуйтесь функцией remove_shortcode(). Функция принимает лишь один параметр: имя шорткода, который требуется снять с регистрации.

<?php add_action( 'init', 'delete_shortcode', 20 );
function delete_shortcode(){
    remove_shortcode( 'sponsored' );
}
?>

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

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

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

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

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

Выглядит шорткод обычно так: 

или так

или даже просто в одно слово

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

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

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

<?php echo do_shortcode("[shortcode]"); ?> Если нужно add_shortcode() добавить слайдер в тему wordpress
непосредственно в код, для этого разработчики данного плагина написали рядом (рис. выше) функцию шорткода на языке php:

do_shortcode()

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

Однако нужно быть очень внимательными при

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С помощью этого приема, вы сможете использовать WordPress виджеты для отображения блока последних записей внутри поста или страницы, или показать виджет «календарь» прямо в записи. Как бы то ни было, взглянув на список виджетов, которые создаются множеством плагинов, вы поймете, как можно использовать прием «виджет внутри поста или страницы» самым подходящим именно для вас способом.

Как использовать прием «виджет внутри поста»?

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

Как добавлять виджеты в записи и страницы?

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

Amr shortcode any widget

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

Единственный его недостаток заключается в том, что вам придется держать в памяти шорткоды для всех виджетов, которые вы хотите использовать (или постоянно возвращаться на страницу виджета, чтоб вспомнить нужный код). На странице плагина указано, что он совместим с версией 3.4.2, но у меня не возникало каких-либо проблем при установке на версию 3.5.2.

Widgetize Pages Light

Эта облегченная версия премиум плагина доступна на WordPress.org. Чтоб использовать этот плагин, вам нужно будет создать дополнительный сайдбар, а затем добавить туда виджеты, которые вы хотите показывать – ничего сложного делать не нужно, и можно сразу использовать плагин.

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

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

Sidebar & Widget Manager for WordPress

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

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

Widgets on Pages

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

Теперь, воспользовавшись шорткодами, названными в соответствии с определенными областям виджетов, вы можете вставлять ваши виджеты в посты и страницы. Вы так же можете вызывать уже существующие сайдбары, указывая в шорткодах
названия этих сайдбараов, которые, как правило, ‘sidebar-1’ и т.д.

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

Другие способы усовершенствования WORDPRESS виджетов

Widget Logic– это бесплатный плагин который я уже описывал ранее, позволяющий вам выбирать, какие виджеты показывать в определенных постах/страницах. Этот плагин добавляет новое поле к каждому виджету. С помощью этого поля вы можете контролировать страницы, посты и категории, где появляется тот или иной виджет.

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

Плагин Display Widgets выполняет практически ту же работу, что и Widget Logic, но он более прост в использовании, благодаря наличию чекбоксов для страниц, на которых вы хотите показать тот или иной виджет.

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

Widgets Reloaded — плагин, который уже некоторое время не обновлялся, но на момент написания этой статьи все еще работал с WP 3.5.2, что очень хорошо, так как этот бесплатный плагин добавляет очень много функциональности виджетам WordPress. Установив этот виджет, который позволит вам преобразить ваши виджеты, с помощью дополнительных полей, дающих вам тотальный контроль над их использованием. Теперь виджеты можно применять множество раз, что ранее было невозможно.

Widgets Reloaded. Вот как выглядит виджет «категории» после установки Widgets Reloaded. Как видите, вы можете контролировать работу виджета.

Плагин Colorful Text Widget позволяет вам раскрасить текстовые виджеты – изменить цвет текста, заголовков и фонов ваших виджетов.

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

В заключение

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

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

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

Что такое виджет и зачем он нужен

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

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

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

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

Разновидности виджетов для сайта

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

Чат-бот

Чат-бот — незаменимый помощник при ведении бизнеса. Если менеджер долго не отвечает на вопрос в онлайн-чате, клиент не захочет ждать и уйдет к конкурентам. Чат-бот на связи 24/7.

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

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

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

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

Чат-бот сохраняет данные, которые вводят пользователи в специально отведенные поля, и выдает сообщение об ошибке, если данные указаны некорректно.

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

Блок «Действие» позволяет:

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

C помощью блока «Запрос API» можно быстро отправлять и получать информацию из внешних систем: например, найти данные о товаре в каталоге или зарегистрировать пользователя на мастер-класс. Подробнее об этом функционале — в базе знаний.

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

В SendPulse виджеты подписки многоканальные — легко подключить их для нескольких соцсетей и мессенджеров или сразу для всех.

В SendPulse можно управлять чатами с подписчиками ботов во всех мессенджерах через единый чат. Это экономит время и помогает держать все под контролем.

Обратный звонок

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

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

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

Pop-up

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

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

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

Онлайн-чат

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

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

Для таких виджетов обычно доступны интеграции с системами аналитики
и CRM.

Виджеты соцсетей и мессенджеров

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

Виджет соцсетей можно разместить на главной странице, в разделе «О нас», на странице с контактами, в футере.

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

Виджет email подписки

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

Форму подписки можно создать в сервисе SendPulse. Она может быть плавающая, встроенная, фиксированная или в формате поп-апа. Для удобства добавлено несколько готовых шаблонов.

Калькулятор

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

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

Google карты

Если у вас есть офлайн-точки, используйте виджет Google карт с возможностью построить маршрут. Чем больше на сайте контактной информации, тем больше посещений в офлайне. Наличие реального офиса, в который можно прийти, укрепляет представление о надежности бизнеса.

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

Отзывы

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

Советуем ознакомиться: « Как отвечать на негативные отзывы клиентов».

Таймер

Обратный отсчет создает эффект срочности, придает ценности продукту в представлении посетителей и подталкивает их к совершению покупки.

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

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

Как добавить виджеты на сайт

Виджеты формируются с помощью JavaScript‑кода, который вставляется в нужном месте в HTML-код сайта.

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

В конструкторах сайтов, например, например, Wix, можно размещать блоки с виджетами: онлайн-запись, чат, соцсети, виджет товара и так далее.

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