Хотите ли вы ограничить ширину oEmbeds в WordPress?
WordPress автоматически встраивает сторонний контент, например, видео с YouTube, твиты или посты на Facebook (признана экстремистской организацией на территории РФ). Однако, иногда вставки могут быть слишком широкими и испортить макеты страниц.
В этой статье мы покажем вам, как установить oEmbed максимальной ширины в WordPress, чтобы вы могли иметь больше контроля над макетом вашего сайта.
- Зачем исправлять максимальную ширину OEmbed в WordPress?
- Способ 1. Используйте шорткод Embed в WordPress
- Метод 2. Использование блоков для встраивания в WordPress
- Метод 3. Использование CSS для установки максимальной ширины встраиваемых блоков в WordPress
- Метод 4. Установка максимальной ширины oEmbed с помощью фильтра WordPress
- Бонусный совет
Зачем исправлять максимальную ширину OEmbed в WordPress?
WordPress позволяет автоматически встраивать контент с выбранных сторонних сайтов в ваши посты и страницы с помощью технологии под названием oEmbed.
Это позволяет вам легко встраивать видео с YouTube, посты Facebook (признана экстремистской организацией на территории РФ), твиты и многие другие типы контента на ваш сайт. Этот контент не размещен на вашем сайте WordPress. Вместо этого он отображается непосредственно на этих сторонних сайтах.
WordPress умеет автоматически подгонять ширину встроенного контента под контент вашего сайта или боковую панель.
Поле OEmbed — расширенные настраиваемые поля WordPress для начинающих (7)
Однако иногда эти встроенные материалы могут быть слишком широкими и перекрывать области содержимого вашего сайта, как в приведенном ниже примере.
Чтобы исправить это, вам нужно явно указать WordPress использовать ограничение максимальной ширины для сторонних вложений. К сожалению, в настройках WordPress нет опции для этого.
Учитывая это, давайте рассмотрим, как легко установить максимальную ширину oEmbed в WordPress, ничего не нарушая.
Мы рассмотрим 4 различных метода, и вы сможете выбрать тот, который лучше всего подходит для ваших нужд:
- Установка ширины oEmbed с помощью шорткода WordPress
- Установка ширины oEmbed с помощью WordPress Embed Block
- Установите максимальную ширину oEmbed с помощью CSS
- Установка максимальной ширины oEmbed с помощью фильтра WordPress (метод кода)
Способ 1. Используйте шорткод Embed в WordPress
Этот метод проще и действительно хорошо работает для установки максимальной ширины для видео вложений в WordPress.
Вместо того чтобы вставлять URL или использовать блок YouTube, вы будете использовать блок шорткода. Внутри него вам нужно использовать шорткод embed и включить параметры ширины и высоты.
Не стесняйтесь изменять значения ширины и высоты в соответствии с вашими требованиями и замените URL встраивания на свой собственный.
Теперь вы можете предварительно просмотреть свой пост или страницу и увидеть вставку в действии.
Шорткод embed и его параметры ширины и высоты не работают для всех провайдеров oEmbed. Например, вы не можете использовать его для установки высоты и ширины вставки Giphy в WordPress.
В этом случае вы можете попробовать один из альтернативных методов, упомянутых ниже.
Метод 2. Использование блоков для встраивания в WordPress
Редактор WordPress по умолчанию поставляется с несколькими блоками для встраивания для различных поставщиков услуг oEmbed. Вы можете использовать их для встраивания контента в различные области ваших постов и страниц.
Некоторые из этих блоков также позволяют изменить выравнивание вставки и установить ширину контента в широкую или полную ширину.
Вы можете попробовать использовать эти опции, чтобы посмотреть, исправит ли это проблему максимальной ширины для вставки.
Метод 3. Использование CSS для установки максимальной ширины встраиваемых блоков в WordPress
По умолчанию WordPress автоматически добавляет классы CSS в различные области ваших постов и страниц.
Он также добавляет несколько CSS классов для встраивания блоков. Эти классы CSS можно использовать для установки максимальной ширины для встраиваемых элементов на вашем сайте WordPress.
Чтобы узнать, какие классы CSS вам нужны, просто вставьте контент в пост или страницу, а затем просмотрите его в браузере. Щелкните правой кнопкой мыши, подведя курсор к встроенному содержимому, а затем выберите инструмент Inspect (Инспектировать).
Вы сможете увидеть все классы CSS, добавленные к встроенному элементу. Вы можете использовать эти классы, чтобы установить максимальную ширину для данного типа встраиваемого элемента.
Например, если вы хотите установить максимальную ширину для всех вложений, то вы можете использовать следующий пользовательский CSS.
.wp-block-embed
Вы также можете нацелиться на определенных провайдеров oEmbed с помощью функции .wp-block-embed-providername class. Например, если вы хотите установить максимальную ширину только для вложений Pinterest, вы можете использовать следующий пользовательский CSS.
.wp-block-embed-pinterest
Метод 4. Установка максимальной ширины oEmbed с помощью фильтра WordPress
Последний метод требует добавления пользовательского кода на ваш сайт WordPress. Если вы не делали этого раньше, то посмотрите наше руководство о том, как легко добавить пользовательские фрагменты кода в WordPress.
Для этого метода мы добавим наш собственный код в WordPress, чтобы установить ширину по умолчанию для oEmbeds. Просто добавьте следующий код в функции вашей темы.php файл или плагин Code Snippets.
add_filter( 'embed_defaults', 'wpbeginner_embed_defaults' ); function wpbeginner_embed_defaults() < return array( 'width' =>400, 'height' => 280 ); >
Не забудьте настроить атрибуты height и width в соответствии с вашими требованиями.
Проблема этого метода заключается в том, что он применяет атрибут width только в том случае, если у встраиваемого контента не определено ‘width’. Если код встраивания уже включает ширину, то этот метод может не сработать.
Бонусный совет
Если вы регулярно вставляете контент с платформ социальных сетей на свой сайт WordPress, то вам следует начать использовать Smash Balloon.
Это лучший плагин социальных сетей для WordPress, который позволяет легко встраивать пользовательские ленты социальных сетей в WordPress.
Поддерживаются популярные вставки социальных сетей, таких как YouTube, Twitter и др. Он также позволяет встраивать контент Facebook (признана экстремистской организацией на территории РФ) и Instagram (признана экстремистской организацией на территории РФ), что не поддерживается WordPress.
Что еще более важно, все ленты социальных сетей являются мобильно отзывчивыми и работают с любой темой WordPress.
Надеемся, эта статья помогла вам узнать, как установить максимальную ширину oEmbed в WordPress. Вы также можете посмотреть нашу полную шпаргалку по социальным сетям или экспертное сравнение лучшего программного обеспечения чата для малого бизнеса.
Источник: www.wpbeginner.com