Як додати DearFlip для створення фліпбука у WordPress

DearFlip — це плагін WordPress, який перетворює PDF-файли або послідовності зображень на інтерактивні flipbook-и з ефектом перегортання сторінок, що відображаються безпосередньо в браузері за допомогою WebGL та CSS3 3D-трансформацій. Замість того щоб змушувати відвідувачів завантажувати статичний PDF, DearFlip вбудовує реалістичний ефект перегортання книги — з тінями від загнутих сторінок, звуковими ефектами та елементами керування масштабом — без Flash та будь-яких зовнішніх залежностей.

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

Чому flipbook-и важливі для контент-стратегії WordPress

Flipbook — це не просто візуальний трюк. Для видавців, операторів електронної комерції та агентств він вирішує конкретну проблему: PDF-файли, вбудовані через <iframe> або переглядач Google Docs, не мають брендування, повільно завантажуються на мобільних пристроях і не підтримують аналітичні хуки. DearFlip утримує користувачів на вашому домені, підтримує глибоке посилання на конкретні сторінки та інтегрується зі стандартними хуками WordPress, що дозволяє відстежувати залученість.

Поширені варіанти використання:

• Цифрові журнали та каталоги, де навігація сторінка за сторінкою відтворює досвід читання друкованого видання
• Lookbook-и продуктів, вбудовані на сторінки категорій WooCommerce
• Річні звіти та офіційні документи, які мають відповідати корпоративному стилю
• Інтерактивні портфоліо, створені з послідовності зображень у високій роздільній здатності
• Навчальні посібники з внутрішніми закладками та навігацією за змістом

DearFlip Free vs. Pro: що ви насправді отримуєте

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

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

Крок 1: Встановлення плагіна DearFlip

1.1 Встановлення з репозиторію плагінів WordPress

Увійдіть до адміністративної панелі WordPress і перейдіть до Плагіни > Додати новий плагін. У полі пошуку введіть DearFlip. Знайдіть плагін під назвою DearFlip – 3D Flipbook, PDF Viewer від DearHive і натисніть Встановити зараз, а потім Активувати.

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

wp plugin install dearflip --activate

1.2 Встановлення Pro-версії вручну

Якщо ви придбали ліцензію Pro, завантажте архів .zip з панелі керування вашого облікового запису DearHive. Потім перейдіть до Плагіни > Додати новий плагін > Завантажити плагін, виберіть файл .zip і натисніть Встановити зараз > Активувати.

Важлива примітка: Не встановлюйте одночасно безкоштовну та Pro-версії. Деактивуйте та видаліть безкоштовну версію перед завантаженням Pro-архіву, щоб уникнути конфліктів класів, які спричинять фатальну помилку PHP.

1.3 Перевірка вимог до PHP та сервера

DearFlip вимагає:

• PHP 7.4 або вище (рекомендується PHP 8.1+)
• WordPress 5.0+
• Бібліотека GD або Imagick, увімкнена на сервері (використовується для генерації мініатюр з обкладинок PDF)
• allow_url_fopen або cURL увімкнено (для віддалених джерел PDF у Pro)

Якщо у вашому середовищі спільного хостингу відсутній Imagick, мініатюри обкладинок flipbook не генеруватимуться автоматично. Перехід на план VPS Хостинг надає повний контроль над розширеннями PHP та директивами php.ini, що повністю усуває цей клас проблем конфігурації.

Крок 2: Налаштування глобальних параметрів DearFlip

Після активації у лівій бічній панелі з’являється пункт меню DearFlip. Перейдіть до DearFlip > Налаштування. Ці глобальні налаштування визначають поведінку за замовчуванням для кожного створеного вами flipbook-а — окремі flipbook-и можуть їх перевизначати, але правильне налаштування значень за замовчуванням економить час.

2.1 Загальні налаштування

• Режим перегортання сторінок: Виберіть Одна сторінка для макетів з пріоритетом мобільних пристроїв або Подвійна сторінка для презентації в стилі журналу на десктопі. Режим подвійної сторінки правильно розділяє кожен розворот PDF лише якщо ваш PDF було експортовано як розвороти, а не окремі сторінки.
• Висота flipbook-а: Встановіть відсоткове або фіксоване значення в пікселях. Використання 100% з контейнерним div є найбільш адаптивним підходом.
• Колір фону: Підберіть колір відповідно до фону вашого сайту, щоб уникнути різкого колірного контрасту навколо полотна flipbook-а.

2.2 Налаштування елементів керування

Увімкніть або вимкніть такі елементи керування інтерфейсу залежно від вашої аудиторії:

• Масштабування — Необхідне для каталогів з дрібним шрифтом; вимкніть для суто візуальних lookbook-ів
• Повноекранний режим — Настійно рекомендується; користувачі очікують його наявності
• Елементи навігації по сторінках — Кнопки зі стрілками та поле введення номера сторінки
• Звукові ефекти — Звук перегортання сторінки додає реалістичності, але може бути нав’язливим; залиште його як опцію за вибором користувача, а не вмикайте автоматично
• Кнопка завантаження — Вимкніть, якщо ваш PDF є власницьким або захищеним контентом

2.3 Налаштування продуктивності

Саме тут більшість інструкцій замовкають, і саме тут реальні розгортання дають збій.

Рушій рендерингу PDF: DearFlip рендерить PDF на стороні клієнта за допомогою PDF.js (бібліотека Mozilla з відкритим кодом). Це означає, що весь PDF передається до браузера перед початком рендерингу. Для 50-сторінкового каталогу з 150 КБ на сторінку початкове навантаження становить 7,5 МБ. Зменшіть це шляхом:

1. Стиснення PDF за допомогою Ghostscript перед завантаженням:

gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook 
   -dNOPAUSE -dQUIET -dBATCH 
   -sOutputFile=compressed_output.pdf input.pdf

1. Увімкнення Відкладеного завантаження в налаштуваннях DearFlip, щоб під час початкового завантаження рендерилися лише перші кілька сторінок.
2. Роздачі PDF з CDN-сховища, а не безпосередньо з директорії uploads WordPress.

Ліміт пам’яті WordPress: Обробка PDF.js може спричинити стрибок використання пам’яті PHP під час генерації мініатюр. Якщо після завантаження великого PDF ви бачите білий екран або помилку 500, збільшіть ліміт пам’яті у wp-config.php:

define( 'WP_MEMORY_LIMIT', '256M' );

Крок 3: Створення нового flipbook-а

Перейдіть до DearFlip > Додати новий. Відкриється інтерфейс створення flipbook-а, який функціонує як редактор користувацького типу запису.

3.1 Встановлення заголовка та типу джерела

Введіть описовий внутрішній заголовок (він не відображається відвідувачам за замовчуванням, але з’являється у списку шорткодів та адміністративній панелі, тому будьте конкретними: 2025 Spring Catalog замість Flipbook 1).

У випадаючому списку Джерело виберіть:

• PDF — для одного PDF-файлу (найпоширеніший варіант)
• Зображення — для послідовності файлів JPEG або PNG
• Зовнішній URL (лише Pro) — для посилання на PDF, розміщений на зовнішньому сервері або CDN

3.2 Завантаження PDF

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

Щоб збільшити ліміт завантаження, додайте наступне до файлу .htaccess (Apache) або nginx.conf (Nginx):

Apache .htaccess:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Серверний блок Nginx:

client_max_body_size 64M;

Після завантаження DearFlip автоматично генерує мініатюру обкладинки з першої сторінки за допомогою Imagick або GD. Якщо мініатюра порожня або відсутня, переконайтеся, що на вашому сервері встановлено Imagick:

php -r "phpinfo();" | grep -i imagick

3.3 Завантаження послідовності зображень

Для flipbook-ів на основі зображень натисніть Завантажити зображення і виберіть кілька файлів. Порядок завантаження визначає порядок сторінок. Надійний підхід — назвати файли послідовно перед завантаженням (page-001.jpg, page-002.jpg тощо), щоб порядок сортування у файловій системі відповідав потрібній послідовності.

Підтримувані формати: JPEG, PNG, WebP (підтримка WebP залежить від версії GD або Imagick на вашому сервері).

Рекомендовані характеристики зображень:

• Роздільна здатність: 1200 x 1600 пікселів (портретна) або 1600 x 1200 пікселів (альбомна)
• Колірний профіль: sRGB (зображення CMYK відображатимуться з неправильними кольорами в браузерах)
• Розмір файлу на зображення: Менше 200 КБ після стиснення; використовуйте такі інструменти, як cwebp або jpegoptim

3.4 Параметри налаштування окремого flipbook-а

Кожен flipbook має власні налаштування, які перевизначають глобальні значення за замовчуванням:

• Ширина / висота сторінки: Встановіть точні розміри, якщо flipbook має вписуватися в конкретну колонку макету
• Автоперегортання: Вмикає автоматичне перегортання сторінок із заданим інтервалом (у секундах). Використовуйте обережно — автоперегортання дезорієнтує для сторінок з великим обсягом контенту
• Початкова сторінка: Вкажіть, яка сторінка відкривається першою — корисно для кампаній з глибоким посиланням
• Скін: Виберіть візуальну тему (світла, темна або власна у Pro)
• Мініатюра flipbook-а: Завантажте власне зображення обкладинки, яке відображається до того, як користувач натисне для відкриття flipbook-а

3.5 Публікація flipbook-а

Натисніть Опублікувати. WordPress зберігає flipbook як запис користувацького типу. Шорткод одразу відображається у правій частині редактора у форматі:

[dflip id="123"]

Де 123 — це ідентифікатор запису WordPress, призначений цьому flipbook-у. Запам’ятайте цей ID — він знадобиться для вбудовування.

Крок 4: Вбудовування flipbook-а на сторінку або в публікацію

4.1 Використання блочного редактора Gutenberg

Перейдіть до Сторінки > Додати нову або відкрийте існуючу сторінку. У блочному редакторі натисніть значок +, щоб додати новий блок. Знайдіть Шорткод і виберіть його. Вставте шорткод:

[dflip id="123"]

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

4.2 Використання класичного редактора

Відкрийте сторінку або публікацію в класичному редакторі. Перейдіть на вкладку Текст (не Візуальний), щоб вставити шорткод безпосередньо в HTML. Вставка у вкладці Візуальний може призвести до того, що фільтр WordPress wpautop обгорне шорткод у теги <p>, що іноді порушує розміри контейнера flipbook-а.

4.3 Вбудовування за допомогою блоку Custom HTML

Для точного контролю макету обгорніть шорткод у блок Custom HTML з явними розмірами:

<div>
  [dflip id="123"]
</div>

Це запобігає розтягуванню flipbook-а на повну ширину вікна перегляду на надширокоформатних моніторах.

4.4 Параметри шорткоду для розширеного вбудовування

Шорткод DearFlip приймає вбудовані параметри, які перевизначають як глобальні, так і індивідуальні налаштування flipbook-а:

[dflip id="123" width="900" height="600" mode="2d" autoplay="1" duration="5"]

Ключові параметри:

4.5 Вбудовування у віджет або бічну панель

Шорткоди DearFlip працюють у будь-якій області віджетів, що підтримує рендеринг шорткодів. Перейдіть до Зовнішній вигляд > Віджети, додайте віджет Текст або Custom HTML і вставте шорткод. Зверніть увагу, що flipbook-и в бічній панелі мають використовувати обмежені розміри (width="300"), щоб уникнути переповнення макету.

Крок 5: Продуктивність, SEO та доступність

5.1 Вплив PDF flipbook-ів на SEO

Google може індексувати вміст PDF безпосередньо, якщо файл загальнодоступний, але не може індексувати вміст, відрендерений JavaScript (PDF.js), таким самим чином. Якщо SEO-індексованість вмісту flipbook-а важлива, розгляньте:

1. Публікацію того самого вмісту у вигляді HTML-сторінки поряд із flipbook-ом
2. Додавання текстового змісту нижче вбудованого flipbook-а
3. Використання мета-тегу og:image для встановлення обкладинки flipbook-а як зображення для соціальних мереж

5.2 Вплив на Core Web Vitals

Вбудований flipbook вносить значне навантаження JavaScript (PDF.js становить приблизно 300 КБ у мінімізованому вигляді). Щоб захистити показники Largest Contentful Paint (LCP) та Total Blocking Time (TBT):

• Завантажуйте flipbook лише на сторінках, де він є основним контентом, а не на головній сторінці
• Використовуйте Режим лайтбоксу DearFlip, який завантажує flipbook лише після натискання користувачем на мініатюру, відкладаючи завантаження повного пакету JavaScript до взаємодії
• Увімкніть кешування WordPress та роздавайте статичні ресурси через CDN

Добре налаштований VPS з cPanel дозволяє тонко налаштовувати пули воркерів PHP-FPM, вмикати OPcache та налаштовувати Nginx як зворотний проксі — все це в сукупності дає вимірно швидший час завантаження flipbook-а порівняно зі спільними середовищами.

5.3 Доступність

Стандартна реалізація DearFlip має обмежену підтримку навігації з клавіатури. Для відповідності WCAG 2.1:

• Увімкніть функцію Зміст (Pro), щоб програми читання з екрана могли навігувати за розділами
• Надайте альтернативне посилання для завантаження оригінального PDF нижче flipbook-а
• Встановіть описовий текст alt для зображення мініатюри flipbook-а

5.4 Рендеринг на мобільних пристроях

На мобільних пристроях 3D-ефекти перегортання сторінок є ресурсомісткими для GPU. DearFlip автоматично перемикається на 2D-режим свайпу на пристроях з обмеженою підтримкою WebGL. Тестуйте flipbook на реальному мобільному обладнанні, а не лише в DevTools браузера, оскільки поведінка WebGL суттєво відрізняється між Android Chrome та iOS Safari.

Крок 6: Керування кількома flipbook-ами

У міру зростання вашої бібліотеки список DearFlip > Всі flipbook-и стає вашим центром керування. Кожен запис показує заголовок flipbook-а, шорткод та статус публікації.

Практичні поради з керування:

• Використовуйте послідовну угоду про іменування, що включає тип контенту та дату: Catalog-Spring-2025, Report-Annual-2024
• Призначайте категорії або теги WordPress flipbook-ам, якщо їх більше десяти — DearFlip підтримує фільтрацію за таксономією у Pro-версії
• При оновленні flipbook-а (нова версія PDF) замінюйте вихідний файл, а не створюйте новий запис flipbook-а; ID шорткоду залишається незмінним, тому всі існуючі вбудовування оновлюються автоматично
• Регулярно перевіряйте неопубліковані або чернеткові flipbook-и та видаляйте невикористовувані PDF-файли з медіатеки, щоб уникнути переповнення квоти сховища

Якщо ви керуєте контентно-насиченим сайтом з десятками flipbook-ів та великими PDF-активами, розгляньте план Виділені сервери, щоб забезпечити стабільну продуктивність I/O та уникнути ефекту «галасливого сусіда», характерного для спільної інфраструктури.

Усунення поширених проблем DearFlip

Flipbook показує порожнє біле полотно

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

Вирішення: Відкрийте консоль браузера (F12 > Console). Якщо ви бачите помилку CORS, переконайтеся, що PDF роздається з того самого домену, що й WordPress. Якщо ви бачите 404, перевірте URL вкладення в медіатеці. Якщо ви бачите фатальну помилку PHP, збільшіть WP_MEMORY_LIMIT.

Анімація перегортання сторінок уривчаста або гальмує

Причина: Сторінки PDF занадто великі (зображення у високій роздільній здатності, вбудовані в PDF), або GPU пристрою не справляється з WebGL-композитингом.

Вирішення: Стисніть PDF перед завантаженням (дивіться команду Ghostscript у кроці 2.3). Перемкніть flipbook у режим mode="2d" для користувачів на маломіцних пристроях.

Шорткод відображається як звичайний текст

Причина: Тема або конструктор сторінок видаляє обробку шорткодів, або шорткод було вставлено в блок коду замість блоку шорткоду.

Вирішення: Переконайтеся, що шорткод знаходиться в блоці Шорткод у Gutenberg, а не в блоці Код або Абзац. У класичному редакторі переконайтеся, що ви перебуваєте в режимі Текст, а не Візуальний, під час вставки.

Мініатюра не генерується

Причина: Imagick або GD не встановлено, або PDF використовує нестандартне кодування, яке жодна з бібліотек не може розпізнати.

Вирішення: Встановіть Imagick через менеджер пакетів вашого сервера:

sudo apt-get install php-imagick
sudo systemctl restart php8.1-fpm

Альтернативно, завантажте власне зображення мініатюри вручну в налаштуваннях flipbook-а.

Flipbook не відображається на HTTPS-сайтах

Причина: PDF роздається через HTTP, тоді як сторінка використовує HTTPS, що спричиняє блокування браузером змішаного контенту.

Вирішення: Переконайтеся, що URL сайту та URL WordPress обидва встановлені на https:// у Налаштування > Загальні. Виконайте пошук і заміну в базі даних для оновлення всіх URL вкладень:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guid

Поєднання цього з належним чином виданим SSL-сертифікатом гарантує, що всі ресурси — включно з PDF-файлами, збереженими в wp-content/uploads — роздаються через захищене з’єднання без попереджень про змішаний контент.

Розширена конфігурація: розміщення PDF на зовнішньому сховищі

Для виробничих розгортань з великими бібліотеками PDF зберігання PDF безпосередньо в wp-content/uploads є неефективним. Краща архітектура:

1. Завантажте PDF до S3-сумісного сховища об’єктів (Cloudflare R2, Backblaze B2 або AWS S3)
2. Налаштуйте CDN-дистрибуцію перед сховищем
3. У DearFlip Pro використовуйте тип джерела Зовнішній URL і вкажіть CDN URL кожного PDF
4. Встановіть заголовки Cache-Control: public, max-age=31536000 на CDN для PDF-ресурсів

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

Якщо ваш варіант використання передбачає динамічну генерацію PDF (з даних, поданих користувачами, або шаблонних звітів), поєднайте це налаштування з планом VPS Хостинг, де ви можете встановити Puppeteer, wkhtmltopdf або WeasyPrint як серверні інструменти генерації PDF, а потім надсилати результат безпосередньо до об’єктного сховища.

Матриця рішень: коли використовувати DearFlip, а коли альтернативи

Технічний контрольний список ключових висновків

Перед запуском flipbook-а DearFlip перевірте кожен пункт:

• Версія PHP — 7.4 або вище; розширення Imagick завантажено
• Ліміти розміру завантаження у .htaccess або nginx.conf відповідають розміру вашого найбільшого PDF-файлу
• PDF стиснено до менш ніж 10 МБ для типових каталогів; використовуйте Ghostscript для пакетного стиснення
• WP_MEMORY_LIMIT встановлено щонайменше на 256M у wp-config.php
• HTTPS застосовується на всьому сайті, і всі URL PDF використовують https://; помилки змішаного контенту непомітно зламають flipbook
• Режим лайтбоксу увімкнено для flipbook-ів, які не є основним контентом сторінки, щоб відкласти завантаження JavaScript
• Текстова або HTML-альтернатива існує для вмісту flipbook-а, якщо важлива SEO-індексованість
• Рендеринг на мобільних пристроях протестовано на реальних пристроях iOS та Android, а не лише в DevTools браузера
• Власна мініатюра завантажена для кожного flipbook-а, щоб покращити показник кліків на архівних або цільових сторінках
• Невикористовувані flipbook-и та осиротілі PDF-файли видалено з медіатеки для підтримання чистоти сховища

Часті запитання

Чи працює DearFlip з PDF-файлами, захищеними паролем?

Ні. PDF.js, який DearFlip використовує для рендерингу, не може розшифровувати PDF-файли, захищені паролем. Видаліть захист паролем на рівні PDF перед завантаженням. Якщо вам потрібен контроль доступу, натомість використовуйте вбудовану функцію пароля flipbook-а в DearFlip Pro, яка захищає саме вбудовування, а не базовий файл.

Чи можна використовувати DearFlip з конструктором сторінок, як-от Elementor або Divi?

Так. І Elementor, і Divi включають віджет Шорткод. Вставте шорткод [dflip id="123"] у цей віджет. DearFlip Pro також постачається з нативним віджетом Elementor, що забезпечує візуальне налаштування без шорткодів.

Чи сповільнить DearFlip весь мій сайт WordPress?

Лише на сторінках, де вбудовано flipbook. DearFlip за замовчуванням підключає свій JavaScript та CSS глобально. Щоб обмежити завантаження ресурсів лише сторінками з flipbook-ом, додайте наступне до файлу functions.php вашої теми:

add_filter( 'dflip_load_scripts', function( $load ) {
    return is_singular() && has_shortcode( get_post()->post_content, 'dflip' );
});

Скільки flipbook-ів можна створити у безкоштовній версії?

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

Що станеться з моїми flipbook-ами, якщо я деактивую плагін DearFlip?

Записи користувацького типу flipbook залишаться в базі даних WordPress, але шорткоди відображатимуться як порожні рядки на фронтенді. Завантажені PDF-файли залишаться в медіатеці. Повторна активація плагіна негайно відновлює всі flipbook-и без втрати даних.