Блог

Неозвучена проблема шорткодів

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

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

Конкретно цей називається шорткодом embed і вбудований у WordPress за замовчуванням. Він вбудовує відео за URL-адресою у ваш контент. Просто скопіюйте та вставте наведений вище шорткод на свій сайт, якщо хочете його випробувати.

За лаштунками відбувається те, що коли WordPress зустрічає шорткод у вашому контенті, він обробляється та перетворюється на щось інше. У нашому випадку вище, щоразу, коли виявляється

шорткод, WordPress бере URL-адресу з шорткоду та перевіряє її за списком провайдерів контенту, які в нього є. Коли він знаходить потрібного, він отримує відповідний код вбудовування iframe і відображає його замість шорткоду.

Тож у чому тут проблема? Звучить досить просто: ви просто вводите короткий текст у дужках і готово.

І тут з’являється Shortcode API…

Безліч шорткодів

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

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

За замовчуванням у WordPress є лише кілька шорткодів. Їх легко ввести з пам’яті, оскільки їх зовсім небагато. Але якщо встановити кілька плагінів, кількість шорткодів швидко зростає до десятка чи більше, а в деяких випадках — і понад сотню. Кожен шорткод має власний набір атрибутів та інструкції щодо використання. Кожен плагін, найімовірніше, має певну документацію про те, як працюють усі його шорткоди, та список усіх доступних параметрів для кожного з них. Але треба збожеволіти, щоб спробувати запам’ятати всі шорткоди та їхні атрибути.

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

Дехто намагається вирішити цю проблему

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

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

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

Іншими словами, кожен плагін робить усе по-своєму та впроваджує власне рішення для своїх шорткодів. Деякі плагіни додають нову кнопку поруч із кнопкою «Додати медіафайл», або нову кнопку всередині TinyMCE.

І тепер ви можете подумати: «Чому б просто не зібрати шорткоди інших плагінів і також не включити їх у свій спадний список / засіб вибору шорткодів?» Що ж, саме так я і подумав. Але простіше сказати, ніж зробити. Я поясню чому трохи пізніше, але спочатку давайте подивимося, як виглядало б ідеальне рішення.

Ідеальне рішення

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

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

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

Підводний камінь

На жаль, зараз зробити щось подібне доволі складно. Не існує надійного способу дізнатися всі деталі шорткоду. Можна отримати список усіх шорткодів, але лише їхні фактичні теги/назви; неможливо отримати додаткову інформацію про них, як-от список атрибутів, їхнє призначення та типи (наприклад, рядок, колір чи число). Також неможливо отримати бодай подобу опису для кожного атрибута.

Звернення до розробників: так, для функції shortcode_atts нещодавно з’явився третій аргумент, але він не є обов’язковим. Тож доки кожен розробник плагінів у світі не почне його використовувати, у нас усе одно не буде надійного способу визначити всі атрибути шорткоду.

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

Висновок

Наразі завдання організації шорткодів залишається за кожним окремим розробником. Доки у WordPress не буде розроблено централізований метод, очікуйте й надалі бачити численні кнопки «Додати шорткод» у вашій панелі керування. Чи слід додавати щось подібне до ядра WordPress, чи ні — це взагалі окрема велика дискусія.

Альтернатива

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

Ми в Page Builder Sandwich створюємо те, що, сподіваємось, зможе вирішити цю головоломку з шорткодами. Підпишіться на нашу розсилку нижче, щоб отримувати сповіщення про наш прогрес.

2 Жовтня, 2026
Додавання стильних карт на вашу сторінку — це інтерактивний досвід
Тепер ви можете розміщувати карти в дизайнах своїх сторінок за допомогою Page Builder Sandwich!

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

Ось попередній перегляд:

Старий нудний спосіб додавання карти

Ось як ви додаєте карту за допомогою звичайного конструктора сторінок:
1. Ви перетягуєте новий елемент карти,
2. Вводите широту та довготу в поля,
3. Вводите інші значення в поля, такі як висота карти, ширина карти, позначаєте прапорець стилю доріг тощо,
4. Натискаєте попередній перегляд, перевіряєте, як це виглядає, і вирішуєте, що потрібно щось змінити, щоб зробити це привабливішим,
5. Повертаєтеся до конструктора сторінок і змінюєте значення, а потім повторюєте крок 4 вище.
Спосіб додавання карти у Page Builder Sandwich

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

Ось як ви додаєте карту за допомогою Page Builder Sandwich:
1. Ви додаєте елемент карти,
2. Вводите широту та довготу або адресу, на якій потрібно відцентрувати карту,
3. Переміщуєтеся картою та наближаєте або віддаляєте її, щоб отримати бажаний вигляд,
4. Додаєте цікаві кольори до карт відповідно до вашого стилю,
5. Натискаєте зберегти.
Наш спосіб набагато цікавіший та інтуїтивніший. По суті, ви взаємодієте з картою так само, як зі звичайною Google Map.

Кольорові карти або їх стилізація за допомогою SnazzyMaps

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

Ось приклад, який ми затонували в рожевий колір:

Page Builder Sandwich також підтримує складніші колірні схеми через SnazzyMaps. Вони мають величезний список колірних схем, створених користувачами, а також дозволяють створювати власні, якщо ви хочете отримати більше контролю над кольорами.

Просто знайдіть потрібну колірну схему, скопіюйте код і вставте його в Page Builder Sandwich. Колірна схема відразу ж застосується до вашої карти.

Ось чудова колірна схема під назвою papuportal dark від SnazzyMaps:

Розміщуйте карти де завгодно

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

Якщо у вас ще немає Page Builder Sandwich, ви можете спробувати преміум-версію, натиснувши на посилання «Live Demo» вище.
2 Жовтня, 2026

WordPress.com проти WordPress.org

Якщо ви новачок у створенні вебсайтів, цілком імовірно, що ви ще не знайомі з великою дискусією «WordPress.com проти WordPress.org». Можливо, ви навіть не знали про існування другого варіанта та про різні плюси й мінуси кожного з них. То в чому ж, скажіть на ласку, полягає ця велика суперечка між використанням WordPress.com та WordPress.org? Чи є один із них просто дешевою підробкою, яка чекає на судовий позов?

Ну, ні.

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

«Але як мені зрозуміти, який саме мені потрібен?»

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

WordPress.com: чому і коли варто обрати його?

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

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

Те, як підтримувати сайт — зовсім інша історія. Це значною мірою залежить від того, чи 1.) ви не є розробником WordPress, 2.) у вас немає наміру вчити код, або 3.) у вас мало або взагалі немає на це часу.

WordPress.org: коли варто звернути увагу на нього?

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

«Але зачекайте, навіщо мені це? Хіба сенс WordPress не в тому, щоб спростити створення сайтів?»

…Не зовсім. Погляньте на це так: у виданні The Daily Post проводять чудову аналогію між WordPress.org та WordPress.com, зрозумілу навіть найбільшим новачкам (як-от мені).

За їхніми словами, ви маєте сприймати WordPress.com як щось, чим ви не володієте повністю. Уявіть, наприклад, себе у 15 років, коли ви ще живете з батьками. Якби ви захотіли перефарбувати свою кімнату, вам спершу довелося б спитати дозволу батьків (яким, звичайно ж, повністю належить будинок, включно з вашою кімнатою). Формально кімната ваша, але зрештою… насправді ні.

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

З іншого боку, WordPress.org — це те, що ви можете вільно налаштовувати та змінювати на власний розсуд. Це можна порівняти з моментом, коли ви нарешті виїжджаєте у 18 років і отримуєте власну квартиру. Оскільки житло повністю у вашій власності, вам не потрібно ні з ким іти на компроміси, щоб пофарбувати стіни в той колір, якого ваша мама завжди жахалася; ви маєте свободу самостійно ухвалити рішення та/або найняти когось, хто зробить це відповідно до ваших стандартів. Крім того, ви можете самостійно вибрати, який саме кондиціонер встановити у вітальні. От тільки якщо він зламається, вам доведеться наймати майстра для ремонту або самостійно розбиратися, що не так і як це полагодити (що не так вже й погано, адже це досвід, а вчитися завжди корисно).

Сподіваємося, тепер у вас є чіткіше уявлення про суттєві відмінності між WordPress.com та WordPress.org. Але якщо коротко:

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

Контроль над контентом обмежений;

WordPress.com	WordPress.org
Повністю розміщено на хостингу WordPress; усе необхідне включено.	Власний хостинг; обирайте власні компоненти або вибирайте кращі.
Функції обмежені тим, що пропонує WordPress.com	Тисячі функцій у вигляді плагінів;

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

Успіхів у створенні сайтів!

2 Жовтня, 2026

Що взагалі таке шорткоди?

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

Сторінка підтримки WordPress.com визначає їх так:

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

У порівнянні зі звичайним кодом, який зазвичай виглядає так:

(Е-ем. Що?)

Шорткоди загалом виглядають приблизно так:

(Простіше простого.)

…і якщо ви розробник (або навіть просто людина, яка сиділа за комп’ютером хоча б двічі), ви, мабуть, погодитеся, що сам лише процес набору тексту та клацання мишею для виконання одного дріб’язкового завдання може забрати купу вашого часу. З тієї ж причини, чому у нас є клавіатурні скорочення, існують і шорткоди — щоб полегшити життя всім нам і заощадити час для створення кращих речей; вони дуже схожі на гарячі клавіші, оскільки мають точно таку ж мету.

Тепер повернімося саме до цього шорткоду, такого ж, як зазначено вище:

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

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

А поки що не соромтеся експериментувати з шорткодами та подивіться, що саме вони можуть зробити для вас.

Успішного створення сайтів!

2 Жовтня, 2026
5 причин, чому білий простір має значення

За своїм базовим визначенням «білий простір» (whitespace) — це, власне, простір навколо та між усіма елементами композиції, який залишається незаповненим. Це не просто марнування площі екрана, як вважає більшість власників сайтів. За умови грамотного використання пробіли насправді приносять користь для кращого просування продукту. Це важливий ключ до створення гарного дизайну, і він робить сайт кращим у всіх відношеннях.

Хоча назва «whitespace» натякає на те, що цей простір білий, він не обов’язково має бути буквально білим. Білий простір насправді може бути будь-якого кольору — він навіть може мати ледь помітний візерунок чи текстуру. Це зона, на якій ви не хочете фокусувати погляд. Інша його назва — негативний простір.

То чому ж білий простір має значення?

Джерело зображення: News Feed

Причина №1: Покращує читабельність

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

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

Джерело зображення: HP Magic Words

Причина №2: Прискорює взаємодію

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

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

Джерело зображення: Google

Причина №3: Привертає увагу до потрібних елементів

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

Пам’ятайте: якщо все виділяється, не виділяється нічого.

Джерело зображення: Pocket Penguins

Причина №4: Перше враження має значення

Зовнішній вигляд і сприйняття сайту є головним ключем до гарного першого враження. Гарне перше враження часто веде до тривалішого перебування на сайті. Замала кількість білого простору може зробити ваш сайт дешевим на вигляд і ненадійним. Відвідувачі не вважатимуть сайт чи бренд авторитетним, доки він не матиме привабливий вигляд. Достатня кількість білого простору допомагає створити правильний тон для вашого сайту. Білий простір може слугувати засобом передачі винахідливості, свіжості, а іноді й елегантності.

Порада: ось ідея, як зробити ваш вебдизайн простим і звичним.

Джерело зображення: Flock Knitwear

Причина №5: Допомагає створити простір для подиху та баланс

Збалансований дизайн не означає симетричний. Великий елемент дизайну можна врівноважити кількома меншими. Додавання білого простору — чудовий спосіб збалансувати елементи дизайну різного розміру на вашій сторінці. Створіть плавний потік, щоб очі користувачів не розбігалися навсібіч. Хороший дизайн має бути здатним провести користувача від однієї точки до іншої, не збиваючи відвідувача з пантелику.

Висновок

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

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

Кінцева мета будь-якого вебсайту — це комунікація. Візуальна привабливість нерозривно пов’язана з успіхом вашого сайту.

2 Жовтня, 2026
Чому WordPress?

Створюючи свій перший веб-сайт, важливо враховувати одну річ — чи ви компанія, фрилансер, або взагалі будь-хто — далеко не кожен вправно володіє мовою коду та розробкою програмного забезпечення. Ви можете бути, наприклад, шеф-кухарем, який хоче публікувати свої рецепти в Інтернеті. Ви також можете бути студентом художнього факультету, якому потрібне професійне портфоліо, або стартапом, якому потрібен власний сайт. Що б це не було, факт залишається фактом: хоча деякі з нас можуть бути знайомі з основами коду, ми не всі є штатними розробниками, і не кожен, кому потрібен чи хто хоче сайт, знає, як створити його з нуля. Ось де може стати в пригоді WordPress. І постає питання: «Чому саме WordPress?»

ПРИЧИНА №1

WordPress — це система керування вмістом, що робить її надзвичайно зручною для користувачів.

Перше, що вам потрібно знати: WordPress — це система керування вмістом (або CMS). Простішими словами, це означає, що WordPress дозволяє своїм користувачам створювати веб-сайти без необхідності писати код із нуля. Вона має систематизований, організований інтерфейс, який дозволяє вам постійно тримати все під контролем без потреби щоразу копирсатися в коді.

У порівнянні зі створенням веб-сайту з нуля, що зазвичай починається ось так:

Із системою керування вмістом ви починаєте з чогось подібного:

Інтерфейс панелі керування WordPress. Керувати веб-сайтами та створювати їх стає простіше з CMS.

Проте ви можете запитати себе: «WordPress здається чудовим, але що, якщо в ньому немає функцій, які потрібні моєму сайту?», або «що, якщо я хочу карту, музичний плеєр, систему кешування або більш надійну систему безпеки?»

…З технічної точки зору, у WordPress, ймовірно, вже є ця потрібна вам функція, і представлена вона буде у формі плагіна WordPress.

ПРИЧИНА №2

Плагіни: вишенька на торті WordPress

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

Плагіни — це «розширення можливостей», які існують для збільшення функціональності вашого сайту на WordPress. Якщо ви підприємець, якому потрібна контактна форма для сайту, зверніть увагу, що сам по собі WordPress не має такої функції, але є безліч плагінів, які її надають. А оскільки WordPress має відкритий вихідний код — тобто практично кожен може зробити свій внесок у його розробку — нові плагіни створюються регулярно. Ви можете отримати бажану контактну форму та багато іншого. Ви маєте свободу додавати інші плагіни: від кнопок поширення в соціальних мережах до карт і навіть додаткових заходів безпеки для вашого сайту, серед безлічі інших функцій та розширень. Хіба ж це не чудово?

Наразі у WordPress є тисячі таких плагінів, і деякі з них навіть доступні безкоштовно та/або мають безкоштовні версії, включаючи PBS.

ПРИЧИНА №3

Відкритий вихідний код: спільнота WordPress

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

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

ПРИЧИНА №4

WordPress — це серйозно та авторитетно.

CNN, офіційний блог Star Wars, журнал Time і навіть (ОГО!) Бейонсе — усі вони мають сайти на базі WordPress, поряд із багатьма іншими. Ці гучні імена — не єдине підтвердження авторитетності WordPress: згідно з Treehouse.com, близько 25% усіх сайтів в Інтернеті працюють на WordPress. Зважаючи на те, скільки мільйонів і тисяч сайтів існує… що ж, 25% — це дійсно велика цифра.

ПРИЧИНА №5

Безліч можливостей для персоналізації!

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

ПРИЧИНА №6:

Це безкоштовно.

Так, ви все правильно прочитали. Завдяки локальній розробці (Local Development) WordPress є абсолютно безкоштовним, і ви можете встановити його на свій комп’ютер одним натисканням кнопки. Так само, замість наймати розробника, ви можете використати будь-які наявні знання про код, щоб дізнатися більше про те, як працює WordPress (зрештою, вчитися завжди корисно).

…не кажучи вже про те, що якщо у вас немає часу надто заглиблюватися у WordPress та створення сайтів, ви завжди можете знайти чудовий плагін конструктора сторінок і спробувати наш

Пам’ятайте, що можливості WordPress безмежні, і зовсім не обов’язково бути генієм, щоб розібратися, як усе працює!

Використання WordPress може заощадити вам купу часу, грошей та зусиль. І в часи, коли цих ресурсів обмаль, майте на увазі, що сайти на WordPress, їхні плагіни (як-от PBS!), теми та особливо спільнота безперечно допоможуть вам і зроблять усе значно простішим.

Успішного створення сайтів!

2 Жовтня, 2026
3 речі, які слід врахувати, перш ніж занурюватися в конструктори сторінок

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

Вивчення WordPress: важлива передумова для роботи з конструкторами сторінок

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

Якщо ж вас трохи лякає велика кількість технічних термінів у цій статті, не хвилюйтеся. Є кілька корисних сайтів, які ви можете відвідати, щоб розпочати. Серед них — WordPress Codex та Treehouse. Там зібрані поради щодо WordPress і створення сайтів залежно від ваших потреб і рівня знань.

Можливо, ви захочете спершу протестувати можливості, просто щоб бути впевненими

Завжди гарна ідея — спробувати безкоштовні та/або пробні версії, перш ніж робити великі покупки, про які ви можете згодом пошкодувати у майбутньому. На щастя, більшість конструкторів сторінок мають безкоштовні або демоверсії. Звісно, ми також можемо ознайомитися з безліччю надійних оглядів конструкторів сторінок, тоді як інші сайти порівнюють і зіставляють конструктори сторінок. Обов’язково ретельно зважте всі варіанти!

Окрім вивчення статей та оглядів, одна з речей, яка нам подобається у WordPress, — це величезна спільнота, що стоїть за ним. Тут є ентузіасти, команди та навіть компанії, готові прийти на допомогу іншим користувачам WordPress, особливо новачкам, як ви! Спільнота переважно функціонує за принципом взаємодопомоги та безкорисливої підтримки.

Дизайн має величезне значення

Ентузіастка WordPress Донна Фонтено Кавальєр висловлює дуже слушну думку щодо drag-and-drop конструкторів сторінок і важливості базового дизайну. Хоча drag-and-drop конструктори, як-от PBS, можуть заощадити вам купу часу, базові знання та хоча б мінімальне відчуття естетики є ще одним важливим чинником під час створення сайтів. Уявіть ситуацію: скажімо, ви отримали чудовий конструктор сторінок на свій вибір: це чудово! Але припустімо, що у вас немає особливого хисту до мистецтва, дизайну та функціональності: ой-ой.

Проте не хвилюйтеся. Page Builder Sandwich — це не просто конструктор сторінок; наша команда також прагне підтримувати інших користувачів WordPress. Тож якщо у вас виникають труднощі з дизайном, не переживайте — у нас у блозі PBS є безліч статей із купою корисних порад, які допоможуть вам розпочати. Таким чином ви зможете встигати більше, дізнаватися більше та менше турбуватися.

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

Успішного створення сайтів!

2 Жовтня, 2026
Мапування шорткодів: як PBS підтримуватиме 800+ плагінів і 2000+ шорткодів
When I started getting further into software development and WordPress, I noticed that not a lot of page builders I come across with have that “page builder standard” I was looking for: fast, easy, convenient.

Page Builder Sandwich, then, was created with the goal of having a builder meet these same standards.

I wanted- and still want it– to be the best page builder out there, and the best way I could accomplish that, I figured, was to add in features in a way in which page building becomes helpful and accessible to everyone –developers and noobs alike.

I’d like to note though, that I didn’t simply create PBS with the intent of merely bombarding it with features just for the sake of it.

I want to add in features that people would want to work with; features that hopefully, would make the experience of page building feel a little bit more like magic.

Протягом останніх кількох тижнів команда PBS додала елемент карти, а також елемент вкладок.

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

But I think it’d be better if we take it to the next level; to take a bigger leap, do something more drastic, something drizzled with a little more awesomesauce.

And so we came up with an idea: “How about we start supporting 800+ plugins along with their 2000+ shortcodes?!?!”

I know what you’re thinking: “How the heck can you support that much shortcodes? Is that even possible?”

Well, the simple answer is yes. Yes it is.

And we’ve managed to achieve this feat through shortcode mapping.

What is Shortcode Mapping?

Shortcode mapping makes building shortcodes more friendly.

Put more simply, shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Переваги такої системи досить вагомі:

1.) Since PBS already knows what your shortcodes are, you get to spend less time going through the documentation of each plugin you use, and check how to use their shortcodes.

2. ) In other words: Say goodbye to the grueling task of manually typing in your shortcodes!

3.) With shortcode mapping, you can also say goodbye to manually checking post type ID’s. How? PBS can give you a list of all your contact forms through a drop-down list, so instead of looking for ID’s while on admin mode, you can pick from the list we made instead.

4.) You’ll get to use dropdowns, colorpickers, image uploaders, and even number sliders when adjusting shortcode attributes.

5.) Overall faster page building time!

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

Як працює мапінг шорткодів в інших конструкторах сторінок

Each person/site does their own shortcode mapping.

Other page builders have a dedicated admin page for shortcode mapping. You go inside your admin page, and then their admin page. You put in your shortcode, edit a number of text fields, then hit save. Finally, when you go to your page builder editor, the shortcode is now there in element list.

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

What’s more, all your mappings only reside on your site. So when the times comes that you need to work on another site, you’ll have to copy your mappings all over again. Additionally, if and when you install a new plugin that has shortcodes, then you’re going to have to map those too.

Як працює мапінг шорткодів у Page Builder Sandwich

Shortcode mappings are shared across all users.

Unlike the norm, shortcode mapping in Page Builder Sandwich is done on a global scale. The most used and popular plugins are gathered first, and all their shortcode mappings are created and updated in a central area. These will then spread out to all users depending on what they have installed. In other words, PBS studies and reviews all the shortcodes you have, including your activated plugins. Afterwards, it gives you the mapping of basically everything you need.

Це дає нам чимало чудових переваг:
1. Maximum coverage. Since we’ll be mapping out the shortcodes of the popular plugins, PBS will be able to support a majority of the shortcodes available on your site.
2. Constant and frequent additions, updates and corrections. And since it’s in a central area, changes can be made quickly, and can be disseminated to all users.
3. It basically works like magic. Let’s say you just installed a new plugin. Then you activate it, all mappings for its shortcodes will automatically get sent to you right away.
4. Gone are the days when you have to personally map shortcodes yourself. PBS will do that for you.
5. Your site remains lean and fast, and will only contain shortcode mappings that are relevant to you.
6. Plugin zip size remains small. Even though PBS supports thousands of shortcodes, the plugin file size is still small. Your site and your backups remain small too!
In case you’re interested in reading into how we made all of this possible, we actually have a second part to this article in which things might start sounding a little more technical (if that’s your drift).

Підпишіться на нашу розсилку!

You can also opt to sign up to our mailing list, which will automatically notify you when we officially release this feature, (you can get future updates from us too, if you want). The shortcode mapping functionality will be out for our customers tentatively on August 12 August 15 2016. Not all shortcodes will be mapped by this time (our estimate is maybe 100 plugins), but mapping will be continuously done and customers will get them as soon as new ones roll out.

So sign up to our newsletter to get news on shortcode mapping, when we’ll release it, and when we open shortcode mapping to the public! Until then, we hope you enjoy this new feature of ours, and that you have fun exploring it!
2 Жовтня, 2026
5 простих порад, щоб ваш сайт мав гарний вигляд

In general, one thing that most people tend to overlook is today’s demand for functional design and aesthetics. While not all of us may be aware of the extent of just how much it matters, the fact remains that design is a very crucial factor towards success—any kind of success– including your website’s. Yes, your content is an important key towards reeling your audience in, but how your site looks will definitely be a determining factor as well.

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

Add high-quality images

oars.com

whitetablecatering.com

You want to add the best quality images on your website that reflect your brand style, but if you don’t have a high-resolution camera or the money to pay a photographer, you can get free stock photos from sources like Pexels and Pixabay. Images should pertain directly to the content of your site. Including images is always better than no images at all.

Оберіть правильні кольори

Lawrence Boone Selections uses black to add a sense of luxury and value to their website

Juicebox used this zesty combination for people to get that organic and fresh that the brand represents

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

Оберіть для свого дизайну щонайбільше два-три базові кольори. Якщо ви відчуваєте потребу додати більше кольору, можна використати світлі та темні відтінки ваших базових кольорів. У теорії кольору світлий відтінок (tint) — це суміш кольору з білим, що збільшує яскравість, тоді як темний відтінок (shade) — це суміш кольору з білим, яка зменшує яскравість.

Additional Tip: There are great tools such as Adobe Colour CC and Coolors to make picking colors easier.

Використовуйте контрастні гарнітури шрифтів

There are more fonts other than Arial, Georgia and Times New Roman. Google Web Fonts offer a variety of typefaces you can use for free on your site. Just like with choosing colors you can easily over do fonts, so I suggest you do not use more than two typefaces on your website. Most well-designed websites use two typefaces only, one for the headlines and one for the body text.

Поєднання двох шрифтових гарнітур може бути складним завданням навіть для дизайнерів. Ви можете все спростити, поекспериментувавши з двома різними накресленнями однієї гарнітури. Якщо друга гарнітура необхідна, оберіть ту, що добре контрастує з першою. Зазвичай добре поєднуються шрифти із зарубками (serif) та без зарубок (sans-serif). Ще одна важлива порада — обирати гарнітури, які відповідають стилю вашої компанії. У вас може бути найкрасивіший шрифт у світі, але при використанні в невідповідному контексті він усе одно може виглядати жахливо.

Зберігайте охайність завдяки «повітрю» (whitespace)

Whitespace is one of the easiest and most effective ways to create a visually effective website. Your website should look well organized and clutter free, directing users exactly where they need to go. Make sure elements stand out and are grouped together by using whitespace properly.

Зробіть його адаптивним для мобільних пристроїв

People are probably going to visit your site at different times using different devices and screen sizes. While content is important, consistency across devices provides a better user-experience for anyone who visits your site. It makes it easier for users to share and link contents on your website to social media platforms on mobile. On top of that, Google prioritizes responsive websites on search results.

Додаткова порада: Використання Page Builder Sandwich на вашому сайті автоматично увімкне мобільний перегляд і підлаштує його під розмір екрана мобільного пристрою.

Висновок

Пам’ятайте: недооцінка сили дизайну — одна з найгірших помилок, яких ви можете припуститися під час створення сайту. Звісно, не потрібно докладати надмірних зусиль під час розробки дизайну вебсайту, але водночас просте дотримання цих порад допоможе гарантувати, що ваш сайт не викличе у аудиторії відчуття несхвалення.

2 Жовтня, 2026
Як створити базові Hero-заголовки за 3 прості кроки

When your dream website finally becomes a reality, the first thing you want your audience to know is what your site’s all about. The trick to reel them in is to give them a good but quick summary of your site’s content – and the easiest way to do that is by creating a Hero Header for your page.

Що таке Hero-шапки (Hero Headers)?

The purpose of the Hero Header is to visually communicate with your target audience in the fastest and most efficient way possible. You need to grab their attention quickly, in a way that it says: “Hey, this is my website, and here are the reasons it may be worth your time.”

Typically, hero headers take up most of the space on the page, usually with large text and an equally large background image in order to give your readers a quick but firm-enough grasp as to what your website can offer them.

Щоб розпочати роботу над своєю найпершою hero-шапкою в PBS, виконайте наведені нижче прості кроки:

Крок 1: Вставте колонку та налаштуйте ширину рядка

Click 1 Column below the Insert Content tab on the inspector (that thing on the left/sidebar). Make sure your caret (the blinking cursor on the text box) is inside the text box.

Under the Row Properties tab, you may change the background color in order to use it as a guide for the next steps. Change Row Width from Normal to Full-Width: Retained Content Width using the toggle button shown above.

What’s the difference between Normal, Full-Width and Full-Width: Retained Content Width?

Normal – Background, text and other elements are contained within the bounds of your current theme’s row width

Full-Width – Background, text and other elements fill the entire width of your browser window

Full Width: Retained Content Width – Only the background fills the entire width of your browser window. Text and other elements are contained within the bounds of your current theme’s row width

In this layout, Full Width: Retained Content Width is used because the text that will be applied is centered; not full-width.

Крок 2: Налаштуйте відступи для створення вільного простору

Increase the top and bottom margin by hovering the cursor on the arrow pointing to the margin you want to adjust. When the cursor turns into a double-headed arrow, click and drag down to your desired margin height. Its important to put Whitespace (also called Negative Space) between elements in a composition to create flow and help draw focus to the content on the page.

Крок 3: Додайте фон із накладенням тексту та елементів

To add a background image with text and element overlays, simply click the Background Image icon under the Row Properties tab, upload your desired background image, and select to apply.

Tip #1: For Premium users, using the Background Image Tint option, helps to provide more contrast for text, buttons or other elements. You can select a tint color and adjust its value by clicking on the Background Color icon. Both icons can be found under Background on the Row Properties tab.

Type in the message for your header. See Text Formatting tab to adjust the style. Choose typefaces that are easy to read and goes well with the background image. Remember to show contrast from the background image.

Порада №2: Для елементів брендингу розгляньте можливість використання білого або чорного логотипа, щоб він не конфліктував із барвистим фоновим зображенням.

You can also add buttons by clicking on Button below the Insert Content tab.

Не забудьте зберегти свою роботу, і все готово!

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

Успішного створення вебсайту!

2 Жовтня, 2026