Сделайте встроенные твиты в WordPress адаптивными

Последнее обновление Авг 9, 2022

Содержание

WordPress позволяет вставлять твиты, вставляя URL-адрес твита в свои сообщения. Вы получаете красивую карточку с твитом и всеми соответствующими деталями. К сожалению, эта карта не будет работать на адаптивных сайтах из-за фиксированной ширины, применяемой Twitter. В этом посте мы увидим, как удалить его, а также сделать наш встроенный твит корректным.

Обзор

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

После его удаления мы применим простой стиль CSS, чтобы он корректно работал с остальными размерами сайта.

WordPress oEmbed и фильтры

Наш твит размещен с использованием oEmbed, технологии, используемой WordPress, которая позволяет нам вставлять контент с других сайтов, просто размещая ссылку в нашем редакторе сообщений. WordPress автоматически запросит сайт провайдера (это может быть не только Twitter, но и YouTube, Vimeo и другие) и получит HTML-код для вставки на наш сайт.

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

Фильтрация твита

Этот код должен быть размещен в файле functions.php вашей темы.

<?php
/** Remove fixed width from embedded tweets. First step to make them responsive. 
 * @param string $html HTML that should be used to embed 
 * @param string $url The URL to the content that should be attempted to be embedded. 
 * @param array $args Optional arguments. 
 * @author Elio Rivero 
 * @link https://startfunction.com 
 */ 
function startfunction_oembed_result($html, $url, $args)
{
    // Check if it's a tweet looking for 'twitter' in the url pasted in the post
    if (stripos($url, 'twitter')) {
        // Before the tweet is processed, it's displayed as a blockquote // with its width attribute set, so let's remove it. 
        return preg_replace('#width="(.*)"#', '', $html);
    }
    // Otherwise return the HTML as is. 
    return $html;
} 
// Filter the result of the oEmbed extraction. 
add_filter('oembed_result', 'startfunction_oembed_result', 10, 3);

Параметр $url— это ссылка на твит, который мы встраиваем. Мы проверяем, не из Твиттера ли это, иначе мы не хотим это запускать. Мы используем str_replace для поиска строки width="500", заменяющей ее пустой строкой.

Сделать твит-карту отзывчивой

Нам все еще нужно добавить немного CSS, чтобы сделать его адаптивным, поэтому вставьте следующее в таблицу стилей вашей темы (или плагина):

#main .twitter-tweet-rendered, #main .twt-border {
    max-width: 100% !important; 
}

и только благодаря этому ваши встроенные твиты будут отзывчивыми.

Источник записи: startfunction.com