Встраивание PDF в WordPress — 2 простых способа

Встраивание PDF на сайт WordPress помогает показывать большие документы без загрузки их прямо в контент страницы. Посетители могут просматривать документ в окне или скачать файл по ссылке. Ниже — подробные шаги и альтернативы.

Как встроить PDF через Google Drive (быстрый способ)

Этот метод не требует плагинов. Вы загружаете PDF в Google Drive, экспортируете iframe и вставляете его в пост.

1. Загрузите PDF в Google Drive: через меню New > File upload выберите файл и дождитесь загрузки.
2. Откройте загруженный файл, кликните правой кнопкой или по трём точкам и выберите “Share” (Поделиться).

3. В появившемся окне нажмите значок настроек (в правом верхнем углу) и включите необходимые опции просмотра.

4. Нажмите “Change” и выберите “Anyone with the link” (Любой, у кого есть ссылка), чтобы открыть доступ для просмотра по ссылке.

5. Откройте файл в новом окне: в меню выберите Open in new window.

6. В меню окна выберите Embed item, чтобы получить HTML-код iframe.

7. Скопируйте iframe-код и вставьте его в ваш пост:

• В классическом редакторе вставьте код в режим “Текст” (HTML).
• В Gutenberg используйте блок “Shortcode” или блок “Custom HTML”.

Важно: проверьте, что у файла открытые права просмотра. Иначе пользователи увидят сообщение о необходимости входа в Google.

Вариант B: Использование плагина для встраивания PDF (рекомендуется для гибкости)

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

Популярные плагины:

• PDF Embedder — простой, использует JS и встроенный просмотрщик.
• EmbedPress — поддерживает множество источников (Google Drive, Dropbox, YouTube).
• PDF.js Viewer Shortcode — основан на Mozilla PDF.js, даёт точный рендер.

Плюсы плагина:

• Управление шириной/высотой и адаптивностью.
• Опции безопасности и контроля загрузки.

Минусы:

• Дополнительная нагрузка на сайт.
• Нужно следить за обновлениями плагина.

Доступность, безопасность и SEO

• Доступность: добавьте описательный текст и ссылку на скачивание. Для пользователей с экранными читалками PDF иногда недоступен — лучше предоставить текстовую версию ключевых разделов.
• Безопасность: не делайте файл общедоступным для редактирования. Для приватных документов используйте управление доступом или файловые хранилища с авторизацией.
• SEO: PDF может индексироваться, но поисковые роботы лучше читают HTML. Для поисковой оптимизации дублируйте важный текст в виде HTML на странице.

Чек-лист перед публикацией

• Проверили права доступа (Anyone with the link или публично).
• Тест на мобильных устройствах: масштабирование и прокрутка.
• Добавили ссылку на скачивание PDF.
• Добавили альтернативный текст или краткое содержание документа на странице.
• Плагин обновлён и протестирован.

Критерии приёмки

• PDF открывается встраиваемым окном на всех основных браузерах.
• На мобильных экранах документ читаем без горизонтальной прокрутки.
• Есть рабочая ссылка для скачивания.
• Права доступа корректны (посетитель с внешней сети видит документ).

Ментальные модели и когда этот метод не подходит

Ментальная модель: PDF встраивается как “окно” внешнего ресурса (iframe) или как объект, который рендерится локально плагином. Если документ большой и должен индексироваться или часто обновляться, лучше публиковать контент в HTML и предлагать PDF как загрузку.

Не подходит, когда:

• Документ содержит чувствительные данные.
• Нужно полное SEO-раскрытие текста (лучше HTML).
• На сайте строгие политики безопасности (Content Security Policy может запретить iframe).

Рекомендации по производительности и совместимости

• Используйте ленивую загрузку iframe (loading=”lazy”) для снижения первого экрана загрузки.
• Если используете CDN для сайта, убедитесь, что внешние iframe-источники поддерживаются.
• Тестируйте на старых версиях браузеров и на мобильных устройствах.

Пример iframe с ленивой загрузкой:

Быстрая сводка

• Google Drive — быстрый способ получить iframe без плагинов.
• Плагины дают лучшие пользовательские настройки и управление доступом.
• Проверяйте доступность, мобильность и права доступа перед публикацией.

Важно: помните о том, что помимо PDF вы можете встроить и публичные посты/видео из социальных сетей (Twitter, Facebook, YouTube) по тому же принципу — получить код и вставить его в контент.

Краткое руководство: загрузить → открыть в новом окне → получить embed → вставить в пост/блок HTML. Удачной публикации!