Как встроить iFrames в WordPress

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

К счастью, существует довольно простая практика веб-дизайна, которую вы можете использовать для отображения определенных типов контента на своем веб-сайте WordPress. Использование HTML для создания встроенных фреймов (iFrames) может упростить обмен изображениями, видео и другими медиафайлами в Интернете.

В этой статье мы рассмотрим различные варианты использования iFrames на веб-сайте. Мы также рассмотрим шаги по созданию iFrames как вручную, так и с помощью плагина. Давайте начнем!

iFrame использует

Когда вы используете iFrame, вы, по сути, создаете небольшой портал на своем веб-сайте, который позволяет просматривать контент из другого места. Это может быть полезно в нескольких сценариях.

Использование iFrame означает, что вам не нужно фактически размещать файлы, которые вы хотите отобразить. Содержимое остается в исходном месте, и его можно просмотреть через рамку на вашем сайте. Этот метод может быть полезен, когда вы хотите отобразить большие файлы. iFrame может перенести этот контент на ваш веб-сайт без снижения скорости его загрузки.

Стоит отметить, что iFrames — единственный тип фреймов, разрешенный в HTML5. Существует множество различных типов контента, которые вы можете использовать для отображения, в том числе:

• Изображения: вы можете использовать iFrames для показа высококачественных изображений из внешней галереи и избежать компромиссов из-за размера файла.
• Видео. Размещение ваших видео на таких платформах, как YouTube или Vimeo, и использование iFrame для их размещения на вашем веб-сайте может повысить удобство работы пользователей и освободить место для хранения вашего веб-сайта.
• Другой веб-контент. Выделение контента с других веб-сайтов, например страниц портфолио или рецептов, может легко донести до вашей аудитории богатый контент.

При использовании iFrames вы также можете избежать сложных правил авторского права. Несколько судов постановили, что использование iFrame для отображения материалов, защищенных авторским правом, не во всех случаях является нарушением авторских прав.

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

Использование iFrame с плагином

Один из самых простых способов использовать iFrame на веб-сайте WordPress — использовать плагин iFrame. К счастью, есть несколько вариантов с высоким рейтингом на выбор.

Шаг 1. Загрузите и настройте плагин iFrame

В нашем примере мы будем использовать плагин Advanced iFrame. Это гибкий, простой в использовании и очень хорошо оцененный:

После установки и активации плагина вы найдете новый пункт меню Advanced iFrames на панели управления WordPress. Расширенный iFrame имеет довольно обширный набор опций. Вам нужно начать с вкладки «Параметры» и просмотреть видео «Быстрый старт»:

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

Advanced iFrames также предоставляет бесплатное средство проверки iFrame, которое проверит любой предоставленный вами URL-адрес, чтобы увидеть, содержит ли он сценарии, препятствующие включению контента в iFrame. Это хорошая идея, чтобы запустить любой URL-адрес через этот инструмент, прежде чем использовать его в iFrame на вашем веб-сайте.

Вы также захотите просмотреть вкладку «Основные настройки» . Там вы можете настроить элементы iFrame, такие как высота, ширина и границы фрейма:

После того, как вы настроили параметры плагина в соответствии со своими потребностями, вы можете начать использовать iFrames на своем веб-сайте.

Шаг 2. Используйте расширенный блок iFrame

В редакторе блоков WordPress у вас теперь будет доступный для использования расширенный блок iFrames :

Если у вас возникли проблемы с поиском этого блока в первый раз, когда вы хотите его использовать, он будет в категории «Виджеты» .

Как только вы нажмете на блок Advanced iFrame , он автоматически загрузится с контентом с веб-сайта создателя плагина. Вы можете настроить блокировку, используя параметры блокировки в правой части страницы:

Там вы можете добавить URL-адрес контента, который вы хотите отображать в iFrame. Вы также сможете переопределить некоторые настройки плагина, если это необходимо.

Шаг 3: Предварительный просмотр вашего сайта

Если вы проверили свой URL-адрес с помощью средства проверки iFrame, все должно быть хорошо. Однако всегда лучше предварительно просмотреть изменения перед публикацией контента. Вы должны увидеть предварительный просмотр своего iFrame в режиме реального времени, когда редактируете его и вносите изменения.

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

Использование iFrames без плагина

Если вы не хотите работать с плагином, но все же хотели бы использовать iFrames, вам повезло! Вы можете вручную применить код к своим сообщениям и страницам, чтобы включить содержимое iFramed.

Шаг 1. Вставьте код для встраивания

Если вы хотите разместить на своем веб-сайте такой контент, как видео с YouTube, вам потребуется найти код для встраивания, который предоставляет YouTube. Вы можете найти это под видео, нажав «Поделиться» .

Это вызовет меню параметров обмена. Вы захотите выбрать Embed , чтобы получить код, необходимый для вашего iFrame.

Откроется отдельное окно с предварительным просмотром того, как будет выглядеть встроенный контент. После этого вы сможете скопировать фрагмент кода iFrame.

Вы также можете установить флажок «Начать с» , если хотите, чтобы зрители автоматически начинали просмотр контента в определенный временной код.

Затем вы вернетесь к своему сообщению WordPress и добавите блок Custom HTML . Вы можете найти это в категории «Форматирование» .

После того, как вы добавите этот блок в свой пост, вы можете просто вставить код для встраивания, скопированный со страницы YouTube.

Затем вам нужно убедиться, что вставка работает правильно и выглядит так, как вы хотите. Вы можете нажать «Предварительный просмотр» в блоке «Пользовательский HTML» , чтобы увидеть, работает ли ваш iFrame.

Таким образом, вы успешно разместили iFrame на своем веб-сайте. Тот же процесс будет работать для любой платформы, которая предоставляет вам коды для встраивания.

Шаг 2: Настройте свои iFrames

Если вы все еще недовольны тем, как iFrame отображается в вашем сообщении или на странице, вы можете вручную настроить некоторые значения в коде. Рекомендуется использовать каскадные таблицы стилей (CSS), чтобы полностью настроить отображение iFrames на вашем веб-сайте.

Тег iFrame позволяет использовать ряд настраиваемых свойств. Однако важно отметить, что многие из них больше не поддерживаются HTML5. Скорее всего, вам потребуется изучить CSS вашей темы, как мы упоминали ранее, так как вы не сможете переопределить определенное форматирование непосредственно в пользовательском блоке HTML .

Шаг 3. Регулярно проверяйте содержимое iFrame

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

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

Оптимизируйте свой сайт с помощью движка WP

Использование iFrames на вашем веб-сайте может обеспечить бесперебойную работу, сохраняя при этом мультимедийный и динамический контент. Здесь, в WP Engine, мы знаем, как важно понимать важные концепции веб-дизайна и иметь доступ к лучшим ресурсам для разработчиков.

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