Хотите ли вы динамически изменять ширину и высоту oEmbed в WordPress?
По умолчанию WordPress отлично справляется с встраиванием видео и других oEmbeds в ваши посты и страницы. Однако иногда вам может понадобиться динамически изменять ширину и высоту embed.
В этой статье мы покажем вам, как динамически изменять ширину и высоту oEmbed в WordPress.
Зачем устанавливать динамическую ширину и высоту OEmbed в WordPress
WordPress позволяет легко встраивать сторонний контент в ваши посты и страницы, используя технологию под названием oEmbed.
Это позволит вам легко встраивать видео YouTube, твиты, TikToks и многое другое. Самое приятное, что этот контент не размещается на вашем сайте WordPress, что экономит ресурсы вашего сервера и улучшает производительность 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.
Аналогично, WordPress также добавляет CSS-классы для встраивания блоков в ваши посты и страницы. Опять же, вы будете использовать инструмент Inspect, чтобы найти классы, используемые блоком встраивания.
Получив эти CSS-классы, вы можете использовать их для установки динамической высоты и ширины для oEmbeds. Например, в следующем примере кода мы устанавливаем динамическую ширину и высоту для блока встраивания Pinterest на определенном ID поста.
article#post-79 .wp-block-embed-pinterest
Вы можете опробовать свой CSS-код, добавив пользовательский CSS в настройщике темы. Как только вы будете удовлетворены, не забудьте сохранить и опубликовать изменения.
Мы надеемся, что эти два метода помогли вам узнать, как легко установить динамическую ширину и высоту oEmbed в WordPress. Вы также можете посмотреть эти полезные советы, рекомендации и хаки WordPress или ознакомиться с нашей подборкой лучших плагинов социальных сетей для WordPress.
Источник: www.wpbeginner.com