Посібник із шорткодів WordPress з прикладами для створення власних

Шорткод WordPress - це потужна функція, яка дозволяє з невеликим зусиллям робити круті речі. З шорткодамі можна робити майже все: вбудовувати інтерактивні елементи або створювати складні макети сторінки так само просто, як вставити одну строчку коду.

Наприклад, щоб додати галерею, достатньо просто ввести наступний код:

Цей код виведе галерею із зазначеними ідентифікаторами зображень. Вона матиме 4 стовпці, а їх максимальний розмір буде середнім (як визначено WordPress).

Як бачите, немає потреби в будь-якому додатковому HTML-коді.

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

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

У цьому посібнику ви дізнаєтеся про все, що потрібно знати про шорткоді. А саме, як працювати з Shortcode API, створивши власні шорткоді. Наприкінці ми обговоримо майбутнє шорткодів і ті, де вони вписуються у редактори блоків WordPress.

Що таке шорткод?

Коротше кажучи, Шорткод = Ярлик + Код.

Шорти використовують теги у квадратних дужках [], щоб визначити, як вони використовуються. Кожен шорткод виконує певну функцію на сайті. Це може бути як просто форматування вмісту, так і складне визначення всієї структури веб-сайту.

Наприклад, ви можете використовувати шорткод для вбудовування повзунків, форм або таблиць цін. Ви навіть можете використовувати їх для створення багаторазових шаблонів оформлення сторінок.

Коротка історія шорткодів

Шорткоді вперше зазнали популярності завдяки програмному забезпеченню онлайн-форуму під назвою Ultimate Bulletin Board (UBB). У 1998 році вони представили BBCode (Код дошки оголошень), набір простих у використанні тегів, які дозволяють користувачам легко форматувати свої повідомлення

Як легка мова розмітки, BBCode працює за тими ж принципами, що і HTML, за винятком того, що він набагато простіший.

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

Невдовзі після цього інші програми для онлайн-форумів, такі як phpB, XMB Forum та vBulletin, додали функції BBCode у свої дошки оголошень.

Шорткоді дозволили адміністраторам мати більший контроль за тим, що можуть і що не можна робити їх користувачі. Крім того, вони дозволили користувачам форматувати свій вміст за допомогою простих тегів.

З тих самих міркувань безпеки WordPress запобігає запуску PHP-коду всередині вмісту сайту. Щоб подолати це обмеження, WordPress 2.5 представивши функцію шорткодів у 2008 році з випуском Shortcode API. Це виявилося однією з найчастіше використовуваних функцій багатьма розробниками плагінів і тем WordPress.

Що таке шорткоді WordPress?

Шорткоді WordPress - це рядки у квадратних дужках ( [] ), які чарівним чином перетворюються на щось захоплююче в інтерфейсі. Вони дають користувачам простий спосіб створювати та змінювати складний вміст, не турбуючись про складний HTML або коди для вбудовування.

Два типи шорткодів

У WordPress є переважно два типи шорткодів:

• Шорткоді, що самозакриваються: для них не потрібний закриваючий тег.

Приклад: для шорткоду галереї  (дивись приклад віще) не потрібний закриваючий тег. Ми додаємо все необхідне з різними атрибутами.

• Шорткодіз закриттям: для них потрібний закриваючий тег. Вони зазвичай маніпулюють вмістом між відкриваючим та закриваючим тегами.

приклад: короткий код підпису використовується для обгортання підпису навколо будь-якого вмісту. В основному він використовується для додавання підписів до зображень, але він працює з будь-яким елементом HTML.

Деякі шорткоді працюють з атрибутами або без них. Це залежить від їхнього особистого визначення.

Шорткоді WordPress за замовчуванням

WordPress поставляється з 6 шорткодами за замовчуванням:

аудіо: вставляє аудіофайлі на веб-сайт Включає прості елементи керування, такі як відтворення та пауза.

підпис: здебільшого використовується для додавання підписів до зображень, але ви можете використовувати його для будь-якого елементу HTML.

Вставляти: розгортає функцію oEmbed за замовчуванням. Цей шорткод дає змогу встановлювати різні атрибути для вставок, наприклад, встановлювати їх максимальні розміри.

галерея: вставляє просту галерею зображень Можна використовувати атрибути, щоб визначити, які зображення використовуються, та налаштувати вигляд галереї.

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

відео: вставляє відеофайл і відтворює його за допомогою простого відеопрогравача Цей шорткод підтримує вбудовування відео у таких форматах: mp4, webm, m4v, webm, ogv, wmv, flv.

Щоб отримати докладнішу інформацію про те, як використовувати шорткод за замовчуванням і які атрибути вони підтримують, можете звернутися до пов'язаних документів Codex.

Як використовувати шорткоді WordPress

Використання шорткодів у WordPress є простим процесом. Але це залежить від того, куди саме потрібно додати їх на сайті. Обов'язково прочитайте документацію за шорткодом, щоб зрозуміти, як це працює. Дізнайтеся про атрибути, що він підтримує, щоб отримати релевантний результат.

Використання шорткодів WordPress на сторінках і публікаціях

Спершу перейдіть до редактора сторінки/публікації, куди ви хочете вставити шорткод. Якщо ви використовуєте редактор Gutenberg, можете додати тег шорткоду в окремий блок Shortcodes. Він знаходиться в розділі Віджети.

Все ще використовуєте класичний редактор (або плагін)? Ви можете ввести свої теги шорткоду класичним способом. Деякі з них можуть мати кнопку на екрані редактора, щоб легко їх вставити.

Використання шорткодів WordPress у віджетах бічної панелі

Шорткоді також можна вставляти у віджети бічної панелі. Щоб додати їх, перейдіть до Зовнішній вигляд » Віджети та додайте текстовий віджет до розділу, куди потрібно додати ярлик.

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

Перший: версії WordPress 4.8 і нижче не підтримують шорткоді у віджетах бічної панелі.

Використання шорткодів WordPress у верхньому та нижньому колонтитулі

Шорти WordPress, як правило, призначені для сторінок, публікацій і віджетів. Але є простий спосіб вставити шорткоді будь-де на сайті.

Скажімо, ви хочете додати кнопку із закликом до дії у нижній колонтитул або у всі свої публікації перед розділом коментарів. Тут стане в нагоді функція зворотного виклику do_shortcode().

Вам потрібно додати наступний код до header.php, footer.php або будь-якого з файлів шаблонів вашої теми:

<?php</span> <span class="token keyword">echo</span> <span class="token function">do_shortcode</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"[name_of_your_shortcode]"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?>

Це виведе короткий код на тому місці, куди вставлено код.

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

Аналогічно, можете використовувати функцію зворотного виклику do_shortcode(), щоб увімкнути короткі коди у будь-якому місці WordPress, наприклад, у розділі коментарів.

Дивіться також:

Плагіні коротких кодів для WordPress

Що робить Shortcode API

WordPress Shortcode API визначає, як використовувати шорткод для налаштування та розширення функціональності сайту. Це дозволяє розробникам створювати унікальний контент (наприклад, форми, каруселі, повзунки тощо), які користувачі можуть додавати на свої сайти, вставляючи відповідний короткий код.

За допомогою шорткодів можна додати майже будь-яку функцію на веб-сайт.

API підтримує як самозакриваючі шорткоді, так і ті, що треба закривати. Він обробляє всі складні парсинги та включає допоміжні функції для встановлення та отримання атрибутів за замовчуванням.

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

Розуміння основ Shortcode API

Щоразу, коли ви відкриваєте сторінку або публікацію в WordPress, він під час обробки вмісту сайту шукає зареєстровані шорткоди.

Якщо знайдено зареєстрований шорткод, API Shortcode бере його на себе і повертає вихідні дані шорткоду(ів). Повернений вихідний рядок замінює тег шорткоду на місці його додавання.

Ви реєструєте шорткод у WordPress за допомогою функції add_shortcode(). Ось як це робиться:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• shortcode_name: тег, який WordPress буде шукати під час аналізу вмісту публікації. Shortcode API рекомендує використовувати лише малі літери, цифри та підкреслення для визначення його значення (уникайте тире).
• shortcode_handler_function: функція зворотного виклику, яка буде виконана після того, як WordPress підтвердить наявність зареєстрованого шорткоду.

Функція обробника короткого коду визначається так:

function shortcode_handler_function( $atts, $content, $tag ){ }

• $atts: асоціативний масив атрибутів (тобто масив пар ключ-значення). Якщо не визначається жодний атрибут, за замовчуванням буде порожня строчка.
• $content: контент, якщо визначаєте вкладень шорткод. Функція обробника несе відповідальність за те, щоб забезпечити повернення значення $content у вихідні дані.
• $tag: значення тегу короткого коду (shortcode_name у наведеному вище прикладі). Якщо два або більше шорткод мають однакову функцію зворотного виклику (яка дійсна), значення $tag допоможе визначити, який короткий код ініціював функцію обробника.

API аналізує тег короткого коду, атрибутів та вложень контент (якщо є), минаючи значення функції обробника, яка обробляє їх і повертає вихідну строчку.

Ця вихідна строчка замінює макрос короткого коду на інтерфейсі сайту. Те, що ви в кінцевому підсумку бачите в браузері, - це результат.

Куди додати власні сценарії шорткоду?

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

Якщо додаєте його до файлу теми, запустіть функцію add_shortcode() як є.

Але якщо додаєте його до плагіна, рекомендуємо ініціалізувати його лише після повного завантаження WordPress. Ви можете переконатися в цьому, обернувши функцію add_shortcode() в іншу функцію. Це називається функцією обертання:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

Функція add_action() підключає функцію shortcodes_init для запуску лише після завершення завантаження WordPress (це називається крючком 'init').

Як створити власний шорткод у WordPress (рівень для початківців)

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

Щоб виконати наведені нижче дії, потрібно знати, як працювати з PHP-кодом та редагувати файли теми WordPress.

Ми почнемо з найпростішого шорткоду, а потім перейдемо до більш складних.

Приклад 1. Шорткод із використанням [current_year]

Давайте створимо короткий код під назвою [current_year], який виводить поточний рік.

Цей шорткод є корисним, якщо ви додаєте на сайт контент, який потрібно оновлювати щороку. Наприклад, додавання повідомлення про авторські права до нижнього колонтитулу сайту.

Щоб додати свої функції шорткоду, будемо використовувати плагін barebones. Можете додати його до файлу functions.php своєї теми та отримати ті самі результати, але не рекомендуємо цього робити.

Почнемо зі створення плагіна. Створіть нову папку в каталозі / Wp-content/plugins /.

Зверніть увагу на розташування каталогу плагінів

Назвемо плагін "salcodes", але можна називати його як завгодно.

У каталозі плагінів salcodes створіть файл PHP з таким же назвою (salcodes.php). Після завершення додайте такий заголовок до файлу плагіна:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Цей простий заголовок плагіна досить добрий для наших цілей. Можете дізнатися більше про вимоги до заголовка плагіна у Кодексі WordPress. Збережіть цей файл, а потім перейдіть на інформаційну панель WordPress, щоб активувати плагін.

Тепер давайте зареєструємо шорткод та його функцію обробника. Для цього додайте наступний код у файл плагіна:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• • • тег @return у коментарі PHP визначає тип поверненого результату. Далі йде короткий опис того самого.
    • поточний_рік - це тег або ім'я шорткоду. Визначає самозакриваючий тег, який потрібно додати до свого вмісту, який у цьому випадку буде [current_year].
    • salcodes_year — це ім'я функції обробника короткого коду, яка повертає вихідну строчку. Ми означимо цю функцію зворотного виклику у наступних рядках. Оскільки ми створюємо простий самозакривається, не потрібно передавати йому значення змінних, наприклад $attributes, $content або $tag.
    • salcodes_init — це функція обгортки, яка підключається до 'init', щоб переконатися, що шорткод зареєстровано та запущено лише після завершення завантаження WordPress. Робити це можливо вбудована функція WordPress add_action ().
    • getdate () — це функція PHP, яка повертає масив інформації про дату поточної позначки часу. Ключ року містить значення потокового року (у вигляді 4-значної строчки). Отже, getdate()['year'] повертає поточний рік. І це саме те, що ми хочемо.

Збережіть файл плагіна. Настав час перевірити, чи працює шорткод належним чином.

Додайте шорткод будь-де на сайті (сторінка, публікація, віджет бічної панелі тощо). Для тестування додамо його до текстового віджету бічної панелі свого сайту.

І, як і очікувалося, працює ідеально.

Вітаємо з досягненням першого етапу!

Шорткод, який ви щойно створили, не має пов'язаних з ним $attributes або $ зміст змінних. Ви дізнаєтесь, як їх використовувати у наступних прикладах.

Приклад 2: Шорткод для кнопки CTA

Давайте створимо налаштувань шорткод кнопки CTA. Він також самозакривається (вибачте, що не використовуємо $ зміст, подождіть до наступного прикладу).

Я хочу, щоб користувачі могли налаштовувати розмір та колір кнопки CTA за допомогою атрибутів шорткоду.

Оскільки кінцевий результат є елементом кнопки, його атрибути HTML, такі як href , id , клас , мета і етикеткаможна використовувати для його легкого налаштування.

Ви можете використовувати атрибути id і клас для стилізації кнопки, оскільки вони є звичайними селекторами CSS.

Не наводимо тут функції обробника, щоб просто все пояснити.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Вау, тут є що розпакувати. Я поясню це рядок за рядком, щоб ви могли зрозуміти, як це працює.

• • • У попередньому розділі ми розглянули функцію add_shortcode() і як вона працює.
    • shortcode_atts() — це функція WordPress, яка об'єднує атрибути короткого коду користувача з відомими атрибутами. За потреби він заповнює значення за замовчуванням (які можна встановити самостійно). Результатом буде масив, що містить кожен ключ із відомих атрибутів, об'єднаний зі значеннями з визначених користувачем атрибутів короткого коду.
    • Усередині функції обробника короткого коду визначаємо змінну ($a) і назначаємо її масиву, який повертає shortcode_atts() . Ми назначаємо атрибутам значення за замовчуванням із синтаксисом: 'attribute' => 'default-value'. Наприклад, у наведеному вище коді встановлюємо значення за замовчуванням для атрибуту label на Button із синтаксисом 'label' => 'Button'.
    • Можемо витягти значення для шкірного ключа атрибута за допомогою синтаксису PHP для масивів: $a['attribute'].
    • Змінна $ вихід зберігає HTML-код елемента button (тег із класом 'button'). Це рядок, який нарешті повертає функція.

Якщо ви хочете встановити посилання за замовчуванням як URL-адресу домашньої сторінки сайту, можете скористатися функцією home_url() WordPress.

Давайте спробуємо використовувати шорткод як є, без визначених атрибутів, і подивимося, що буде виведено.

Якщо вам цікаво, для чого призначені підвійні квадратні дужки ( [[ cta_button ]] ), їх називають екрануючим шорткодом. Вони допоможуть вивести будь-який зареєстрований шорткод як звичайний текст, як на малюнку нижче.

Вивід HTML кнопки CTA без атрибутів.

Користувачі можуть налаштувати розмір та колір кнопки за допомогою шорткоду. Ми вже встановили їх значення за замовчуванням у функції обробника, але потрібно зареєструвати та поставити таблицю стилів у чергу до переліку доступних ресурсів. Ця таблиця стилів повинна мати всі класи, визначені у шорткоді.

Ви також можете встановити ці класи у глобальній таблиці стилів вашої теми, але рекомендується завантажувати їх окремо. Це гарантує, що навіть якщо ви зміните або обновите свою тему WordPress, ці класи все одно завантажуватимуться разом із шорткодом.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

Функція salcodes_enqueue_scripts() визначає глобальну змінну $ пост, а потім підтверджує дві умови за допомогою:

• • • is_a(): перевіряє, чи є $ пост примірником об'єкта WP_Post. Це стосується всіх типів публікацій у WordPress.
    • has_shortcode(): перевіряє, чи вміст публікації містить короткий код [cta_button].

Якщо обидві умови відповідають дійсності, функція реєструє та ставить у чергу таблицю стилів style.css, що міститься в папці css. Функція  plugin_dir_url($file) дозволяє легко отримати URL-адресу каталогу плагіна.

Код CSS тут не покажемо, але його можна знайти у вихідному коді, який міститься в кінці цього розділу.

Нарешті, давайте перевіримо короткий код [cta_button], додавши його до змісту публікації:

Зверніть увагу на атрибути спеціальної посилання, кольору, розміру та етикетки.

На зображенні нижче показано, як кнопка CTA виглядає на інтерфейсі:

Кнопка CTA тепер має нову URL-адресу, колір, розмір та мітку.

Тепер, коли ви навчилися визначати власні атрибути та включати стилі, можете додати різні інші функції до свого короткого коду кнопки CTA. Наприклад, можете надати своїм користувачам можливість додавати анімацію, ефекти наведення та різні інші стилі кнопок.

Приклад 3: Шорткод із використанням $content

Для останнього прикладу давайте побудуємо охоплюючий короткий код під назвою [boxed], який виводить будь-який вміст між його тегами в полі з яскравими заголовками.

Давайте почнемо з реєстрації шорткоду та визначення його функції обробника.

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• • • $content = null: реєструє короткий код як тип, що охоплює. Можна використовувати змінну $ зміст у вашій функції обробника, щоб змінити вихід.
    • $tag = ”: визначає змінну $tag короткого коду. У цьому прикладі це не обов'язково, але хороша практика, щоб увімкнути його.

У цьому прикладі ми змінюємо вміст за допомогою вбудованих стилів CSS.

Стилі для будь-яких класів, які використовуються всередині шорткоду, реєструються та поміщаються в чергу, як ми зробили в попередньому прикладі шорткоду.

Але використання двох шорткодів однієї таблиці стилів означає, що вам доведеться завантажити її, якщо використовується будь-який з них. Отже, давайте оновлюємо функцію salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• • • $has_shortcode: визначена користувачем змінна, яка перевіряє, чи існує будь-який із шорткодів на сторінці/публікації. || _ (оператор або) робить це можливим.

Тепер давайте розглянемо наш [у коробці] шорткод.

На скріншоті нижче показано результат:

Тепер, коли ви навчилися створювати власні шорткоді, можете мислити нестандартно і давати їм значення.
Завантажити вихідний код плагіна Shortcode можна звідси .

Шорткоді WordPress: плюси та мінуси

Плюси шорткодів

• • • Спрощують додавання складних функцій на сайтах WordPress. Ви можете додати майже все, що завгодно одним рядком коду.
    • Автоматизують робочий процес розробки. Вони усувають необхідність писати складні сценарії щоразу, коли треба вставити певну функцію.
    • Є більш зручними, ніж додавання HTML-коду або PHP-скриптів.
    • Можуть бути об'єднані всередині плагінів. Навіть якщо ви оновлюєте WordPress або змінюєте/оновлюєте свою тему, шорткоді залишатимуться дійсними та продовжуватимуть працювати, як і раніше.
    • Об'єднання шорткодів у плагінах робить їх простими у використанні на кількох веб-сайтах WordPress. Якщо ви розробник, який керує багатьма сайтами, підготувати всі ваші шорткоди для користувачів стане спасінням.
    • Оскільки шорткоди також приймають атрибути, користувачі можуть змінювати його поведінку просто змінюючи параметри атрибутів.

Мінуси шорткодів

• • • Не є інтуїтивно зрозумілими для кінцевого користувача, особливо якщо на сторінці використовується багато з них. У таких випадках вони найбільше підходять для розробників.
    • Трудно сказати, що робить шорткод, просто подивившись на нього. Основна команда WordPress точно назвала їх «таємничими кодами для вбудовування м'ясасаме з цієї причини.
    • Шорткоді, які постачаються разом із темами, перестануть працювати, якщо ви зміните тему.
    • Неоднозначні щодо їх синтаксису. Наприклад, деякі з них підтримують необов'язкове закриття, тому можете використовувати їх як самозакриваючі, так і як ті, що закриваються або навіть обидва варіанти, якщо вони вкладені. Це може стати дуже заплутаним та суперечливим.
    • Можуть порушити HTML через конфліктні теги чи проблеми взаємодії. Дуже не приємно їх бачити на інтерфейсі будь-якого сайту.
    • Додають додаткове навантаження на сервер. Зі збільшенням кількості шорткодів на сторінці/публікаціях це навантаження збільшується. Надто багато шорткодів може призвести до сканування веб-сайту.

Шорткоді та блоки Гутенберга

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

Якщо ви хочете додати шорткод, у Gutenberg навіть є спеціальний блок для додавання шорткодів. Блоки – це нові шорткоді.

Це пояснює, чому всі популярні шорткоди перетворюються на блоки. Багато розробників WordPress перебудовувалися, щоб їх продукти та послуги працювали виключно із редактором блоків (Гутенберг).

Але це не означає, що для шорткодів настав кінець світу. Основна команда WordPress пообіцяла багато покращень для редактора блоків, які ви можете побачити у Twenty Twenty, але доти шорткоді залишатимуться тут.

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

У WordPress напевно є багато шорткодів, які можна використовувати, наші улюблені остаточні шорткоди і Короткі.

І якщо ви не можете знайти того, що шукаєте, ви можете створити його самостійно.

Ви навіть можете створити свій власний шорткод за допомогою плагіна Shortcoder. Він підбає про все потрібне для вас. І пам'ятайте: життя коротке, використовуйте шорткоді!

Джерело: kinsta.com