Як додати вбудований перегляд PDF у WordPress

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

У цій статті ми покажемо, як додати перегляд PDF до WordPress.

Чому треба про це замислюватись?

За промовчанням WordPress не вбудовує PDF-файли в контент, як це відбувається з аудіо, відео, твітами та іншими форматами медіа. Ви просто бачитимете посилання на скачування PDF.

PDF в WordPress

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

Один із способів упоратися з цим – пропонувати PDF-файли у контенті записів/статей. Для цього потрібно встановити додатковий плагін.

Встановлюємо PDF Embedder

Ми будемо використовувати PDF Embedder, найкращий на даний момент плагін для вбудовування PDF в WordPress.

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

Для початку вам потрібно буде встановити та активувати плагін PDF Embedder.

Після активації ви можете відвідати Settings -> PDF Embedder, щоб встановити параметри плагіна. Стандартні налаштування підходять для більшості веб-сайтів, тому цей крок не є обов’язковим.

PDF в WordPress

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

Існує опція, яка дозволяє вибирати, чи потрібно відображати тулбар внизу або вгорі області перегляду. Також є варіант приховати тулбар доти, доки користувач не наведе покажчик миші на документ.

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

Коли ви завершите змінювати налаштування, не забудьте натиснути Save Changes для їх збереження.

Тепер ми можемо вбудувати PDF у запис або на сторінку. Все залежить від того, який редактор ви використовуєте класичний або блоковий.

Додаємо перегляд PDF через редактор блоків

Додавання PDF-файлів до сторінок або записів – досить простий процес. Почнемо з того, що додамо новий запис або відредагуємо вже наявний.

Спочатку помістіть курсор у місце, де ви хочете вбудувати PDF-документ. Потім потрібно буде додати новий блок, клацнувши по кнопці «Add Block +» у верхньому лівому кутку екрана на сторінці редагування WP.

Потім вам потрібно буде натиснути на кнопку PDF Embedder у секції Text.

PDF в WordPress

Як тільки ви зробите це, ви зможете завантажити новий PDF-файл у свій запис (або вибрати готовий файл з медіатеки). Ви можете зробити це, натиснувши на посилання «Click here to Open Media Library to select PDF».

PDF в WordPress

Ви потрапите до медіатеки WP. Якщо ви ще не завантажували PDF-файл, зробіть це зараз. Просто перетягніть файл до бібліотеки.

PDF в WordPress

PDF-файл буде автоматично завантажено та вибрано. Все, що вам залишиться зробити – натиснути на кнопку «Select».

PDF в WordPress

Ви побачите ваш PDF-документ у контенті. попередній перегляд цього файлу в редакторі не виводиться. Блок просто міститиме URL файлу.

PDF в WordPress

Щоб переглянути PDF, вам потрібно буде зберегти запис, після чого перейти на сайт. Ось як це виглядає на демо-сайті:

PDF в WordPress

Додаємо перегляд PDF через класичний редактор

Вставка PDF у класичний редактор нітрохи не складніша. Просто додаємо новий запис або редагуємо вже існуючий.

Поміщаємо курсор на те місце, куди ми хочемо додати PDF. Далі перетягуємо PDF-файл на сторінку.

PDF в WordPress

PDF автоматично завантажиться у вашу медіатеку та буде обраний. Далі тиснемо на кнопку «Insert into post».

PDF в WordPress

PDF Embedder додасть шорткод до вашого запису або до вашої сторінки. Він матиме наступний вигляд: [ pdf-embedder url=”PDFURL” ].

PDF в WordPress

Щоб переглянути PDF, перейдіть на сайт. Ось як документ виглядатиме на демо-сайті:

PDF в WordPress

Готово! Сподіваємося, що ця стаття допомогла вбудувати перегляд PDF на WordPress-сайт.

Прокоментувати

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *