Как динамически изменять ширину и высоту oEmbed в WordPress

Хотите ли вы динамически изменять ширину и высоту oEmbed в WordPress? По умолчанию WordPress отлично справляется с встраиванием видео и других oEmbeds в...

Хотите ли вы динамически изменять ширину и высоту oEmbed в WordPress?

По умолчанию WordPress отлично справляется с встраиванием видео и других oEmbeds в ваши посты и страницы. Однако иногда вам может понадобиться динамически изменять ширину и высоту embed.

В этой статье мы покажем вам, как динамически изменять ширину и высоту oEmbed в WordPress.

Зачем устанавливать динамическую ширину и высоту OEmbed в WordPress

WordPress позволяет легко встраивать сторонний контент в ваши посты и страницы, используя технологию под названием oEmbed.

Это позволит вам легко встраивать видео YouTube, твиты, TikToks и многое другое. Самое приятное, что этот контент не размещается на вашем сайте WordPress, что экономит ресурсы вашего сервера и улучшает производительность WordPress.

Фиксированная ширина oEmbed в WordPress

По умолчанию WordPress делает отличную работу по автоматической настройке высоты и ширины встроенного контента в соответствии с вашими постами и страницами.

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

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

Итак, давайте рассмотрим, как легко установить динамическую ширину и высоту для содержимого oEmbed в WordPress.

Метод 1. Установка динамической ширины и высоты блока вставки в WordPress

Этот метод требует добавления пользовательского кода на ваш сайт WordPress. Если вы еще не делали этого, то посмотрите наше руководство о том, как легко добавить пользовательские фрагменты кода в WordPress.

Для этого метода мы будем использовать условные теги WordPress, чтобы определить, какая страница WordPress просматривается, а затем изменить ширину и высоту oEmbed по умолчанию соответственно.

Просто добавьте следующий код в функции вашей темы.php-файл или плагин для конкретного сайта.

//Настроить размер оЕmbed function wpb_oembed_defaults($embed_size) < if(is_front_page()) < $embed_size['width'] = 940; $embed_size['height'] = 600; >else < $embed_size['width'] = 600; $embed_size['height'] = 338; >return $embed_size; > add_filter('embed_defaults', 'wpb_oembed_defaults');

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

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

function wpb_oembed_defaults($embed_size) < if( is_page( 42 ) ) < $embed_size['width'] = 940; $embed_size['height'] = 600; >else < $embed_size['width'] = 600; $embed_size['height'] = 338; >return $embed_size; > add_filter('embed_defaults', 'wpb_oembed_defaults');

Как вы можете видеть, этот код просто устанавливает другую ширину и высоту по умолчанию для определенного ID страницы.

Метод 2. Использование CSS для установки динамической ширины и высоты oEmbed

WordPress автоматически добавляет классы CSS по умолчанию в различные области вашего сайта.

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

Например, в теме WordPress вы можете найти такие CSS-классы, как page-id, post-id, category, tag и многие другие. Вы можете узнать эти CSS-классы с помощью инструмента Inspect.

CSS класс для поста и страницы

Аналогично, WordPress также добавляет CSS-классы для встраивания блоков в ваши посты и страницы. Опять же, вы будете использовать инструмент Inspect, чтобы найти классы, используемые блоком встраивания.

CSS-классы для блоков встраивания

Получив эти CSS-классы, вы можете использовать их для установки динамической высоты и ширины для oEmbeds. Например, в следующем примере кода мы устанавливаем динамическую ширину и высоту для блока встраивания Pinterest на определенном ID поста.

article#post-79 .wp-block-embed-pinterest

Вы можете опробовать свой CSS-код, добавив пользовательский CSS в настройщике темы. Как только вы будете удовлетворены, не забудьте сохранить и опубликовать изменения.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий