Шорткоди в WordPress: що це, навіщо потрібні і як з ними працювати?
Шорткод в WordPress (shortcode) - це конструкція в тексті, яка створює на сайті потрібний функціональний елемент, наприклад, кнопку, контактну форму та ін. CMS обробляє шорткод за допомогою функції PHP. Шорткоди вперше з'явилися у WordPress 2.5.
Наприклад, найпростіший шорткод для створення галереї виглядає так:
[gallery]
Цей досить простий, доступний за умовчанням інструмент розширює можливості розробників дуже суттєво. Часто за допомогою шорткодів додають у пости кнопки, пости, слайдери та ін. Це може бути гарною альтернативою, якщо ви не хочете встановлювати Elementor та інші великовагові конструктори сторінок.
Шорткод не витіснив навіть вбудований блоковий редактор Gutenberg.
Іноді, для складніших завдань у шорткоди додають параметри. Наприклад, так виглядає той самий шорткод галереї з параметрами:
[gallery size="large" ids="14243,14242,14241"]
Параметр ids містить номери зображень у галереї, параметр size відповідає розміру створеного елемента.
Список стандартних шорткодів, які працюють у WordPress
У CMS вбудований набір шорткодів, які працюють без додаткових дій. Система розпізнає такі елементи:
[audio]
[caption]
[gallery]
[playlist]
[Video]
Як зробити, щоб шорткоди відображалися без виконання?
Іноді на сайтах WordPress потрібно просто показати шорткод без виконання. Для цього їх екранують. Як це робиться? Просто додайте ще одні квадратні дужки.
[[gallery]]
У складних шорткодів може бути тег, що відкриває і закриває. У такому разі екранований елемент виглядатиме так:
[[шорткод] … [/шорткод]].
Якщо код вже використовувався на сайті, ви побачите його без подвійних дужок.
Як створити свої шорткоди у WordPress?
Ви можете створювати власні шорткоди у WP, щоб розширити можливості сайту. Розберемо два способи. Спочатку подивимося, як створювати шорткод без навичок роботи з кодом, за допомогою плагінів.
Інструментів такого типу багато. Докладно розповімо про найпопулярніший плагін для шорткодів.
Shortcodes Ultimate: найзручніший інструмент роботи з шорткодами
Функціональний та дуже зручний плагін для шорткодів. Серед заявлених можливостей та переваг:
- понад 50 видів активних шорткодів;
- функції швидкого додавання;
- адаптивність всіх створюваних елементів;
- повна сумісність з будь-якими темами та плагінами для WP;
- легке доопрацювання коду;
- власний віджет;
- сумісність з Gutenberg.
Також є кілька преміум доповнень до плагіна.
Основні налаштування плагіна
Що робити, щоб плагін працював правильно? Після стандартного завантаження та активації в меню з'явиться розділ Шорткоди. У меню важливо звернути увагу на два розділи:
- Користувацький CSS код. Не потрібно вставляти стилі в шаблон, якщо хочете змінити зовнішній вигляд стандартних елементів.
- Префікс потрібен, щоб використані шорткоди не конфліктували з кодом у плагінах. Можна змінювати значення на власне.
Доступні shortcodes
Наступний розділ містить доступні варіанти шорткодів. Колекція елементів дуже велика. Вибравши одну з опцій, ви знайдете повну довідку щодо використання та налаштування шорткодів.
У вкладці вказано все:
- зовнішній вигляд елемента, який відповідає шорткод;
- приклад коду;
- всі параметри та оператори в блоці.
Додавання до запису або на сторінки
Щоб додати шорткод до запису або на сторінку після встановлення плагіна, знайдіть кнопку Додати шорткод на панелі текстового редактора на сторінці.
Так можна просто вибрати потрібний шорткод для потрібної частини сторінки.
Додавання у віджети
Плагін також дозволяє додати шорткоди у віджети. У панелі налаштування зовнішнього вигляду спускаємося вниз, знаходимо віджет для шорткодів та перетягуємо до активних.
Плагін дуже зручний у використанні. Ціна преміум версії 30 USD за довічну ліцензію. Ці витрати виправдають себе на 100%.
Інші плагіни для створення та вставки шорткодів
Є ще кілька плагінів, за допомогою яких можна створювати та вставляти шорткоди. Ці компоненти поступаються за функціональністю, але також можуть бути корисними. Найпопулярніші та зручні:
- Shortcoder;
- CSSIgniterShortcodes;
- Column Shortcodes.
Як створити шорткод без плагінів?
Для створення шорткоду без плагінів використовують функцію add_shortcode(). У неї два параметри: назва шорткоду та назва самої PHP функції. Ось приклад простого PHP коду, що реєструє новий шорткод для сайту:
add_shortcode( 'foobar', 'foobar_shortcode' )
function foobar_shortcode( $atts ){
return 'Привіт! Я новый шорткод.';
}
За допомогою цього коду реалізується заміна [foobar] написом Привіт! Я новий шорткод.
Створення шорткодів з атрибутами
До шорткоду можна додати атрибути, які точніше налаштовують параметри створюваного елемента на сайті. У таких випадках краще використовувати функцію shortcode_atts():
add_shortcode( 'foobar', 'foobar_shortcode' );
function foobar_shortcode( $atts ) {
$atts = shortcode_atts( [
'name' => 'Noname',
'age' => 18,
], $atts );
return "Меня зовут {$atts['name']} мне {$atts['age']} лет";
}
Шорткоди із закриттям та вкладені у шорткод шорткоди
Шорткод із минулого прикладу, прописується ось так:
[trueurl anchor="текст ссылки" url="URL ссылки"]
Ми трохи перебудуємо і запишемо ось у такому вигляді:
[trueurl anchor="текст посилання"]URL посилання[/trueurl].
У шорткоди, що закриваються, можна вставити інші шорткоди. Для цього необхідно використовувати do_shortcode().
function true_url_external( $atts, $shortcode_content = null ) {
$params = shortcode_atts(
array(
'anchor' => 'Host4Biz'
),
$atts
);
return '' . $params[ 'anchor' ] . '';
}
add_shortcode( 'trueurl', 'true_url_external' );
Такий шорткод відображатиме посилання на головну сторінку сайту там, де ви його вставите.
Буферизація для виведення у шорткоді
Іноді не вдається повернути результат усередині заданого шорткоду. У разі рішенням буде буферизация.
function truehostfobiz_shortcode_callback() {
ob_start();
// тут можно сразу выводить при помощи echo()
// или get_template_part( 'entry' );
// или закрывать тег ?> и выводить сразу HTML
$output = ob_get_contents(); // всё, что вывели, окажется внутри $output
ob_end_clean();
return $output;
}
Використання шорткодів з PHP
Тут завдання полягає в тому, щоб правильно використовувати функцію do_shortcode().
Параметром функції може бути один шорткод:
echo do_shortcode( '[hostfobiz]' );
Або шорткод із контентом:
echo do_shortcode( '[trueurl anchor="Главная"]' . site_url() . '[/trueurl]' )
Також можна вивести зміст постів із шорткодом.
$content_shortcoded = do_shortcode( get_the_content() );
Підсумки
Ми показали лише частину прикладів того, як можна застосовувати шорткод. Але розуміння базових принципів допоможе вам розвинути навички роботи з кодом, реалізовувати складніші проекти на WordPress.
Ми продовжимо знайомити вас із можливостями CMS та інструментами роботи з нею. І, звичайно, на Host4Biz ви завжди можете замовити надійний хостинг WordPress для ваших проектів.
