Як додати простий шорткод у WordPress?

Ймовірно, ви вже чули щось про шорткоди, але не знаєте, як вони працюють? Можливо, вас зацікавило те, що за допомогою шорткода можна вставляти на сторінку посту якісь «заготовки» тексту, але не знаєте, як це зробити?

Тоді для вас гарна новина – в сьогоднішньому уроці ми розповімо вам про процес створення і використання простого шорткоду в блозі на двигуні WordPress.

 

 

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

Він схожий на HTML-тег, але обрамлений квадратними дужками замість кутових дужок. Коротко кажучи, шорткод – це спеціальний тег, який містить «коротке посилання», яке замінюється іншим контентом при перегляді сторінки в браузері. Яскравий приклад – використання шорткода фотогалереї: ви вставляєте при редагуванні посту невеликий код [gallery], а при перегляді сторінки в браузері, цей невеликий шорткод перетвориться на великий за обсягом контент з фотогалереєю. В цьому і полягає користь від шорткода: ви один раз готуєте великий контент, «запаковуєте» його в шорткод, а потім при написанні публікації в блозі не пишете весь цей контент, а викликаєте його за допомогою невеликого шорткода! WordPress дозволяє створювати будь-яку кількість своїх власних шорткодів, за допомогою яких ви можете відображати практично будь-який контент!

 

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

Отже, створимо шорткод [reklama], за допомогою якого ми будемо додавати рекламу в свої пости.

 

 

Як створити шорткод?

Перше, що потрібно зробити, це визначити функцію, яка буде повертати фактичний код реклами, наприклад, від Google AdSense. Тобто, кожен раз при виклику цієї функції, вона повинна буде просто повертати потрібний нам текст.

Додайте для цього наступний код в файл functions.php у вашій діючій темі:

 

function sebweo_google_adsense($atts) {
    return '<ins class="adsbygoogle" style="display:block;height:250px;" data-ad-format="autorelaxed" data-ad-client="ca-pub-3447668000426887" data-ad-slot="7953845054"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
}
add_shortcode('reklama', 'sebweo_google_adsense');

 

Це дуже проста функція – вона всього лише повертає код реклами Google Adsense у вигляді рядка. Потім, після визначення функції, ми реєструємо її в якості шорткода інструкцією:

 

add_shortcode('тут назва шорткода', 'а тут функція шорткода, що викликається');

 

УВАГА: замініть код реклами на свій код. Ви також можете використовувати будь-яку іншу допустиму назву функції, а також шорткода.

 

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

 

 

Як використовувати створений шорткод?

Так, ми створили шорткод, але він не з’явився на сторінках сайту магічним чином. Щоб він з’явився на сторінках, його потрібно туди додати. Найпростіший спосіб: при редагуванні поста додати в потрібне місце створений раніше шорткод. Просто напишіть [reklama] в потрібному місці (в режимі Візуального редактора або ж у режимі Текст) і збережіть пост. Оновіть сторінку публікації у фронт-енді сайту і ви побачите, як щойно створили свій перший шорткод! З чим вас і вітаємо!

 

Recent Posts

Google Search Console – Проблема з LCP та як її вирішити

Нещодавно ми писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

18/01/2021

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021

Google Search Console – Проблема з CLS та як її вирішити

Ми раніше писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

11/01/2021

Найкращі водоспади світу (частина 3/3)

Водоспад – є одним з найбільш хвилюючих і найкрасивіших творінь матінки-природи у нашому світі. По… Read More

08/01/2021