Делаем встраиваемое видео и галереи адаптивными

·
Делаем встраиваемое видео и галереи адаптивными

Все знают, что вставлять видео в wordpress невероятно просто и удобно? Просто вставьте в текст ссылку на видео с youtube, vimeo или другой популярной площадки, и все готово.  Но мало кто знает, что таким же образом можно делать и другие интересные штуки — например, вставить ссылку на твит:

https://twitter.com/tkenny/status/568214178927759360

или добавить фотогалерею.

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

Вот этот код вставьте в файл functions.php вашей темы:

/*  Добавляем адаптивный контейнер вокруг нашего embed
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
    return '<div class="video-container">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' );

назначение понятно из комментария.

И добавляем вот этот код в файл стилей:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

 Украдено Подсмотрено здесь: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

Чтобы сделать адаптивной вашу галерею, добавьте следующий код в файл стилей:

/* Адаптивная галерея
/* ------------------------------------------ */
@media only screen and (max-width: 767px) {
.gallery .gallery-item {width: 49% !important;}
.gallery br {clear: none !important;}
}
@media only screen and (max-width: 480px) {
.gallery .gallery-item {width: 100% !important;}
}

Что делает код: на экранах меньше 767 пикселей картинки будут выстраиваться в две колонки, независимо от настроек галереи. А на еще более маленьких экранах — в одну колонку.

 Анонс: по просьбам некоторых своих клиентов я готовлю новый видеокурс: «WordPress для контент-менеджера». Думаю, по названию понятно, о чем это. Серия небольших видео на все или, хотя бы, большинство аспектов работы с контентом на wordpress-сайте. Курс будет бесплатным

Поделиться записью:
Агентство Romapad
Агентство Romapad
Работаем с 2009 года. Реализовано более 400 проектов. Слаженная команда профессионалов. Создание и администрирование сайтов. Техническая поддержка. Помощь новичкам.
Подпишитесь на рассылку новостей
Отправляя заявку, вы даете согласие на обработку персональных данных
Комментарии к публикациям
Похожие статьи
Scroll to Top
Оставьте Ваши контакты,
и мы с Вами свяжемся

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

Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed 

Join our newsletter and get 20% discount
Promotion nulla vitae elit libero a pharetra augue