Как встроить флипбук в WordPress

Зачем встраивать флипбук на сайт WordPress?

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

Со встроенным флипбуком ваши посетители получают богатый опыт перелистывания страниц, не покидая сайт. Это означает более долгие сессии, меньший показатель отказов и значительно более профессиональное впечатление. Будь то каталог товаров, корпоративная брошюра, журнал или учебное пособие, встроенный флипбук удерживает читателей именно там, где вам нужно.

FlipLink делает это простым. После того как вы создадите флипбук из PDF, вы получите готовый код встраивания, который работает с любой темой WordPress, конструктором страниц или редактором. Плагины не нужны.

Если вы только начинаете работу с флипбуками, сначала ознакомьтесь с нашим руководством как конвертировать PDF в флипбук онлайн, а затем вернитесь сюда для встраивания.

Получение кода встраивания из FlipLink

Прежде чем переходить к WordPress, получите код встраивания. Вот как это сделать:

1. Войдите в панель управления FlipLink на go.fliplink.me
2. Откройте флипбук, который хотите встроить
3. Нажмите кнопку Поделиться
4. Выберите вкладку Встроить
5. Скопируйте предоставленный iframe-код

Ваш код встраивания будет выглядеть примерно так:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

Это всё, что нужно. FlipLink берёт на себя распространение и общий доступ — вам остаётся только вставить этот код в WordPress.

Способ 1: Блочный редактор WordPress (Gutenberg)

Блочный редактор является редактором WordPress по умолчанию и самым простым способом встроить флипбук.

Пошаговая инструкция

1. Откройте страницу или запись, куда хотите добавить флипбук
2. Нажмите кнопку +, чтобы добавить новый блок
3. Найдите Пользовательский HTML и выберите его
4. Вставьте iframe-код FlipLink в блок
5. Нажмите Предпросмотр, чтобы убедиться, что всё выглядит правильно
6. Нажмите Опубликовать или Обновить

Готово. Флипбук отобразится прямо на странице с полной интерактивностью — перелистывание страниц, масштабирование, полноэкранный режим и всё остальное.

Совет профессионала

Если вы хотите, чтобы флипбук был по центру и имел дополнительные отступы, оберните его в div:

<div style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Способ 2: Elementor

Elementor — один из самых популярных конструкторов страниц WordPress, и встраивание флипбука здесь занимает всего несколько кликов.

Пошаговая инструкция

1. Откройте страницу в визуальном редакторе Elementor
2. Найдите в панели виджетов блок HTML
3. Перетащите виджет HTML в нужный раздел
4. Вставьте iframe-код FlipLink в поле HTML
5. Настройте отступы виджета на вкладке Дополнительно
6. Нажмите Обновить для сохранения

Elementor рендерит iframe в режиме реального времени в редакторе, поэтому вы можете видеть, как именно будет выглядеть флипбук, ещё до публикации. При необходимости используйте адаптивные настройки Elementor для регулировки высоты на планшетах и мобильных устройствах.

Способ 3: Классический редактор

Всё ещё используете классический редактор? Это не проблема. Процесс столь же прост.

Пошаговая инструкция

1. Откройте страницу или запись в классическом редакторе
2. Переключитесь на вкладку Текст (не Визуальный) на панели редактора
3. Поставьте курсор в то место, где должен появиться флипбук
4. Вставьте iframe-код встраивания
5. Переключитесь обратно на вкладку Визуальный, чтобы убедиться, что он отображается
6. Нажмите Опубликовать или Обновить

Важно: всегда вставляйте коды встраивания на вкладке Текст. Визуальная вкладка может удалить или изменить HTML, что нарушит встраивание.

Советы по адаптивным размерам

Флипбук должен хорошо выглядеть на любом устройстве. Вот несколько практических советов по адаптивному встраиванию.

Используйте процентную ширину

Всегда устанавливайте width="100%" для iframe, чтобы он заполнял контейнер. Это гарантирует автоматическую адаптацию флипбука к любому размеру экрана.

Задайте оптимальную высоту

Фиксированная высота от 500 до 700 пикселей хорошо работает для большинства флипбуков на десктопе. Для более адаптивного подхода используйте метод соотношения сторон:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Это сохраняет соотношение сторон 4:3 независимо от ширины экрана. Измените padding-bottom, чтобы изменить соотношение — используйте 56.25% для 16:9 или 100% для квадрата.

Проверьте на мобильном устройстве

Просмотрщик FlipLink полностью адаптивен, но всегда просматривайте страницу WordPress на телефоне, чтобы убедиться, что окружающий макет не создаёт неудобных отступов. Большинство проблем связаны с CSS страницы, а не с самим флипбуком.

Использование встраивания с кликабельным изображением как альтернативы

Не каждой странице нужно полноценное интерактивное встраивание. Иногда лучше подойдёт более лёгкий вариант — красивая миниатюра, при клике на которую открывается полный флипбук. Именно для этого служит функция встраивания с кликабельным изображением в FlipLink.

Вместо iframe вы получаете изображение со ссылкой. Это идеально подходит для:

• Боковых панелей блога, где полный флипбук был бы слишком большим
• Лендингов, где вы хотите, чтобы посетители нажимали целенаправленно
• Email-рассылок, ссылающихся обратно на страницу WordPress
• Библиотек ресурсов, где несколько публикаций показаны в виде миниатюр

Код встраивания с кликабельным изображением можно получить в том же диалоге «Поделиться» в панели управления FlipLink. Он загружается быстрее iframe и даёт полный контроль над внешним видом миниатюры через опции брендинга и дизайна FlipLink.

Решение распространённых проблем

Флипбук не отображается

• Убедитесь, что вы вставили код в режиме Текст/HTML, а не в визуальном редакторе
• Проверьте, что ваша тема WordPress не удаляет iframe (некоторые плагины безопасности блокируют их)
• Убедитесь, что флипбук опубликован и не находится в режиме черновика в FlipLink

Флипбук слишком маленький или слишком большой

• Скорректируйте значение height в коде iframe
• Используйте адаптивный div-обёртку, показанный выше, для стабильного размера
• Проверьте, не ограничивает ли область контента вашей темы максимальная ширина встраивание

Флипбук работает на десктопе, но не на мобильном устройстве

• Убедитесь, что установлено width="100%" (не фиксированная ширина в пикселях)
• Проверьте, нет ли CSS overflow: hidden в родительских контейнерах, обрезающих iframe
• Просмотрщик FlipLink обрабатывает жесты на мобильных устройствах нативно, поэтому проблема почти всегда в макете страницы

WordPress удаляет код встраивания

Некоторые плагины безопасности (например, Wordfence или iThemes Security) или настройки темы могут фильтровать теги iframe. Если код встраивания исчезает после сохранения:

• Проверьте настройки плагина безопасности на наличие правил фильтрации iframe
• Добавьте go.fliplink.me в разрешённые источники iframe
• Попробуйте использовать специальный HTML-блок вместо вставки inline

Особенности SEO

Встроенные флипбуки улучшают поведенческие метрики, что косвенно позитивно влияет на SEO. Для максимальной видимости убедитесь, что вы настроили SEO и предпросмотр в социальных сетях для флипбука в FlipLink, чтобы поисковые системы и социальные платформы отображали расширенные метаданные при публикации ссылок на вашу страницу.

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

Начните встраивать флипбуки в WordPress сегодня

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

Готовы начать? Создайте бесплатный аккаунт FlipLink и конвертируйте первый PDF в встраиваемый флипбук. С нашей пожизненной лицензией от 129 $ за 100 активных публикаций вы получаете неограниченное встраивание на всех страницах WordPress и не только.

Ознакомьтесь с нашей страницей тарифов, чтобы подобрать подходящий план.