Шорткод (shortcode, короткий код) — це крихітний фрагмент коду всередині квадратних дужок, який можна вставити на сторінку WordPress або сторінку публікації.
Завдяки шорткодам ви можете вставити у будь-яке місце сайту форму, галерею, таблицю та багато іншого.
Ось як це виглядають:
Форма створюється не прямо на сторінці сайту, а всередині плагіна. Після остаточного створення форми ви отримуєте лише коротенький код, який можна вставити в контент.
На реальній сторінці форма виглядає так:
З цієї статті ви дізнаєтеся:
- Чим корисні shortcode.
- Як їх використовувати у класичному редакторі WordPress.
- Як вставити блок із коротким кодом у редакторі WordPress за замовчуванням.
- Що робить плагін WordPress Shortcoder для створення шорткодів.
Чим корисні шорткоди
Допустимо, у вас є контактна форма, розміщена за допомогою короткого коду на 4 сторінках сайту, і в ній потрібно змінити поле. Вам просто потрібно перейти до плагіна, внести зміни, і всі форми з цим конкретним shortcode зміняться в режимі реального часу. Це означає, що немає необхідності вносити зміни до чотирьох форм на 4-х сторінках.
Shortcode допомагають з масштабованим дизайном, тому що можна використовувати їх для додавання функцій, що повторно використовуються, на сторінки і записи.
У цьому пості ми говоримо тільки про користувальницькі шорткоди. Є кілька доступних shortcode WordPress за замовчуванням, але ви, швидше за все, не використовуватимете їх.
Вам слід звернути увагу на шорткод, які постачаються в комплекті з вашою темою або як частина плагіна.
Важливо: у той момент, коли ви відключите або видалите тему або плагін, ці шорткоди перестануть працювати.
Як використовувати шорткод WordPress
Давайте розберемося, як використовувати короткі коди в старому доброму класичному редакторі і в новому редакторі за замовчуванням.
У класичному редакторі
Відкривши сторінку або пост у класичному редакторі, ви побачите інтерфейс, який виглядає так:
Якщо у вас є shortcode, наприклад для вставки в статтю таблиці або галереї, просто вставте його в потрібне місце. Для цього використовуйте гарячі клавіші для копіювання та вставлення тексту або опції правої клавіші миші копіювати/вставити.
Наприклад, наприкінці цього посту є форма, яка використовується для збирання адрес електронної пошти для передплати розсилки новин.
На сайті короткий код перетворюється на це:
Ось ще один приклад. Плагін wpDataTables використовується для створення таблиць WordPress.
Ось як виглядає таблиця усередині плагіна.
Поруч із назвою таблиці плагін відображає короткий код цієї таблиці - це унікальний код.
Відвідувачі сайту побачать таблицю ось у такому вигляді:
За лаштунками всередині запису вставляється лише цей shortcode:
Тепер, якщо потрібно внести зміни до таблиці, достатньо зайти всередину плагіна, внести зміни, а потім зберегти їх. Це дуже зручно, оскільки код, що вставляється, залишиться колишнім. Коли зміни будуть збережені, зміниться і таблиця всередині посту. І якщо таблиця використовується на декількох сторінках або записах, всі вони будуть змінюватися в режимі реального часу.
Дивіться також:
Як вставляти shortcode у віджетах сайдбару на WordPress.
Як використовувати шорткод WordPress в редакторі за замовчуванням
Редактор за замовчуванням (редактор Гутенберг) працює із блоками. Будь-який елемент є блоком, від тексту, зображень або каруселів до шорткодів.
Давайте подивимося, як можна додати блок шорткоду (БШ).
- Зайдіть всередину сторінки або посту.
- Перейдіть на полотно в місце, де ви хочете вставити шорткод. Наведіть вказівник миші між існуючими блоками, доки не побачите знак «+». Натисніть знак.
- Тепер відкриється засіб вставки. Введіть "shortcode", щоб знайти відповідний елемент, та виберіть його.
- Вставлений блок має такий вигляд:
- Вставте код всередину виділеного елемента.
- Коли натиснете на БШ, побачите панель інструментів.
Панель інструментів дозволяє:
- Розташувати БШ. Якщо виберете в меню іконку з 6 точками, зможете перетягнути блок туди, куди захочете. А вибравши стрілки, зможете переміщати його вгору та вниз.
- Дублювати БШ.
- Вставити перед поточним елементом.
- Вставити після поточного елемента.
- Вибравши опцію "Перемістити в", зможете використовувати клавіші зі стрілками на клавіатурі, щоб перемістити блок у потрібну позицію. Просто натисніть клавішу Enter, коли дістанетеся до вибраного місця для переміщеного блоку.
- Згрупувати БШ разом із іншими блоками.
- Видалити БШ.
- Додати БШ до Багаторазових блоків. Допустимо він містить шорткоду форми. БШ можна зберегти як "Основна контактна форма".
Далі ви зможете побачити збережений та повторно використовуваний блок усередині засобу вставки:
Плагін Shortcoder для створення шорткодів
Існують різні плагіни, що дозволяють створювати галереї, слайдери, таблиці та багато іншого, що можна використовувати на сторінці або в публікації за допомогою короткого коду.
Що, якби плагін, який дозволяв би вам кодувати все, що ви хочете… а потім призначити йому shortcode? Цей плагін називається "Shortcoder". З його допомогою можна легко створювати власні короткі коди та вставляти їх у будь-якому місці, де вони підтримуються (також відомий як HTML, Javascript, CSS як вміст шорткоду).
Давайте встановимо його.
- На панелі інструментів WordPress перейдіть в «Плагіни» -> «Додати новий» та знайдіть «Shortcoder».
- Натисніть «Встановити», а потім натисніть «Активувати».
- Ви можете отримати доступ до плагіна з панелі управління WordPress -> Shortcoder.
- Натисніть кнопку «Створити шорткод».
- Наступний крок – вибрати тип редактора: текстовий, візуальний чи редактор коду.
- Після розміщення контенту в редакторі необхідно пройти деякі налаштування.
- Після збереження коду скопіюйте призначений шорткод та розмістіть його у потрібному місці сайту.
Всі шорткоди всередині WordPress можна побачити у Dashboard -> Shortcoder -> All Shortcodes.
Якщо ви наведете курсор на shortcode, з'явиться можливість відредагувати їх, відправити в кошик або продублювати.
Також доступні деякі масові дії, такі як редагування та переміщення до кошика.
Плагін Shortcoder WordPress має спеціальний блок, який можна використовувати у редакторі Gutenberg.
Початківцям може здатися використання коротких кодів чимось складним, але це не так. Це більше нагадує скорочення, якими ми користуємося у повсякденному листуванні: вперше – не дуже зрозуміло, вдруге – вже цікаво, а далі – як же я без цього раніше жив! Тим більше, що короткі коди можна використовувати для вставки красивих елементів дизайну, які не передбачені, наприклад, вашою темою.
Джерело: kubiobuilder.com
Коментарі до запису: 0