Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Шорткод (shortcode, короткий код) — це крихітний фрагмент коду всередині квадратних дужок, який можна вставити на сторінку WordPress або сторінку публікації.

Крихітний фрагмент коду
Завдяки шорткодам ви можете вставити у будь-яке місце сайту форму, галерею, таблицю та багато іншого.
Ось як це виглядають:

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Форма створюється не прямо на сторінці сайту, а всередині плагіна. Після остаточного створення форми ви отримуєте лише коротенький код, який можна вставити в контент.

Форма створюється не прямо на сторінці
На реальній сторінці форма виглядає так:

Форма виглядає так
З цієї статті ви дізнаєтеся:

  • Чим корисні shortcode.
  • Як їх використовувати у класичному редакторі WordPress.
  • Як вставити блок із коротким кодом у редакторі WordPress за замовчуванням.
  • Що робить плагін WordPress Shortcoder для створення шорткодів.

Чим корисні шорткоди

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

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

У цьому пості ми говоримо тільки про користувальницькі шорткоди. Є кілька доступних shortcode WordPress за замовчуванням, але ви, швидше за все, не використовуватимете їх.

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

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

Давайте розберемося, як використовувати короткі коди в старому доброму класичному редакторі і в новому редакторі за замовчуванням.

У класичному редакторі

Відкривши сторінку або пост у класичному редакторі, ви побачите інтерфейс, який виглядає так:Шорткоди WordPress у класичному редакторі
Якщо у вас є shortcode, наприклад для вставки в статтю таблиці або галереї, просто вставте його в потрібне місце. Для цього використовуйте гарячі клавіші для копіювання та вставлення тексту або опції правої клавіші миші копіювати/вставити.

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

Як використовувати шорткод WordPress
Ось ще один приклад. Плагін wpDataTables використовується для створення таблиць WordPress.
Ось як виглядає таблиця усередині плагіна.

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

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

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

Дивіться також:
Як вставляти shortcode у віджетах сайдбару на WordPress.

Як використовувати шорткод WordPress в редакторі за замовчуванням

Редактор за замовчуванням (редактор Гутенберг) працює із блоками. Будь-який елемент є блоком, від тексту, зображень або каруселів до шорткодів.

Давайте подивимося, як можна додати блок шорткоду (БШ).

  1. Зайдіть всередину сторінки або посту.
  2. Перейдіть на полотно в місце, де ви хочете вставити шорткод. Наведіть вказівник миші між існуючими блоками, доки не побачите знак «+». Натисніть знак.

Зайдіть усередину сторінки

  1. Тепер відкриється засіб вставки. Введіть "shortcode", щоб знайти відповідний елемент, та виберіть його.

Зайдіть всередину посту

  1. Вставлений блок має такий вигляд:

Вставлений блок

  1. Вставте код всередину виділеного елемента.
  2. Коли натиснете на БШ, побачите панель інструментів.

Панель інструментів
Панель інструментів дозволяє:

  1. Розташувати БШ. Якщо виберете в меню іконку з 6 точками, зможете перетягнути блок туди, куди захочете. А вибравши стрілки, зможете переміщати його вгору та вниз.
  2. Дублювати БШ.
  3. Вставити перед поточним елементом.
  4. Вставити після поточного елемента.
  5. Вибравши опцію "Перемістити в", зможете використовувати клавіші зі стрілками на клавіатурі, щоб перемістити блок у потрібну позицію. Просто натисніть клавішу Enter, коли дістанетеся до вибраного місця для переміщеного блоку.
  6. Згрупувати БШ разом із іншими блоками.
  7. Видалити БШ.
  8. Додати БШ до Багаторазових блоків. Допустимо він містить шорткоду форми. БШ можна зберегти як "Основна контактна форма".

Основна контактна форма
Далі ви зможете побачити збережений та повторно використовуваний блок усередині засобу вставки:
Вставки блоків

Плагін Shortcoder для створення шорткодів

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

Що, якби плагін, який дозволяв би вам кодувати все, що ви хочете… а потім призначити йому shortcode? Цей плагін називається "Shortcoder". З його допомогою можна легко створювати власні короткі коди та вставляти їх у будь-якому місці, де вони підтримуються (також відомий як HTML, Javascript, CSS як вміст шорткоду).

Давайте встановимо його.

  1. На панелі інструментів WordPress перейдіть в «Плагіни» -> «Додати новий» та знайдіть «Shortcoder».
  2. Натисніть «Встановити», а потім натисніть «Активувати».

Активувати

  1. Ви можете отримати доступ до плагіна з панелі управління WordPress -> Shortcoder.

Доступ до плагіна з панелі керування WordPress

  1. Натисніть кнопку «Створити шорткод».
  2. Наступний крок – вибрати тип редактора: текстовий, візуальний чи редактор коду.

Візуальний або редактор коду

  1. Після розміщення контенту в редакторі необхідно пройти деякі налаштування.

деякі настройки

  1. Після збереження коду скопіюйте призначений шорткод та розмістіть його у потрібному місці сайту.

Всі шорткоди всередині WordPress можна побачити у Dashboard -> Shortcoder -> All Shortcodes.

Інформаційна панель

Якщо ви наведете курсор на shortcode, з'явиться можливість відредагувати їх, відправити в кошик або продублювати.

Також доступні деякі масові дії, такі як редагування та переміщення до кошика.

Плагін Shortcoder WordPress має спеціальний блок, який можна використовувати у редакторі Gutenberg.

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

Джерело: kubiobuilder.com

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук