WordPress позволяет вставлять твиты, вставляя URL-адрес твита в свои сообщения. Вы получаете красивую карточку с твитом и всеми соответствующими деталями. К сожалению, эта карта не будет работать на адаптивных сайтах из-за фиксированной ширины, применяемой Twitter. В этом посте мы увидим, как удалить его, а также сделать наш встроенный твит корректным.
Обзор
Прежде чем твит будет обработан для отображения карточки с автором, аватаром Twitter, кнопкой подписки и другими метаданными, он отображается в виде простого HTML-элемента цитаты с установленным атрибутом фиксированной ширины, который по умолчанию составляет 500 пикселей. Конечно, эта фиксированная ширина нарушит наш адаптивный макет, поэтому в основном нам нужно удалить этот атрибут, чтобы обработанная карточка твита отображалась без фиксированной ширины.
После его удаления мы применим простой стиль CSS, чтобы он корректно работал с остальными размерами сайта.
WordPress oEmbed и фильтры
Наш твит размещен с использованием oEmbed, технологии, используемой WordPress, которая позволяет нам вставлять контент с других сайтов, просто размещая ссылку в нашем редакторе сообщений. WordPress автоматически запросит сайт провайдера (это может быть не только Twitter, но и YouTube, Vimeo и другие) и получит HTML-код для вставки на наш сайт.
HTML-код, возвращаемый сайтом провайдера, можно обработать с помощью одного из фильтров, предоставляемых WordPress, и изменить разметку. Мы собираемся использовать фильтр oembed_result, который запускается после получения HTML-кода от поставщика oEmbed и перед его сохранением в кэше. Преимущество этого заключается в том, что фильтр не нужно будет запускать каждый раз при посещении сайта, что приводит к более быстрому отклику и, конечно же, более быстрому времени загрузки.
Фильтрация твита
Этот код должен быть размещен в файле functions.php вашей темы.
Параметр $url— это ссылка на твит, который мы встраиваем. Мы проверяем, не из Твиттера ли это, иначе мы не хотим это запускать. Мы используем str_replace для поиска строки width="500", заменяющей ее пустой строкой.
Сделать твит-карту отзывчивой
Нам все еще нужно добавить немного CSS, чтобы сделать его адаптивным, поэтому вставьте следующее в таблицу стилей вашей темы (или плагина):
#main .twitter-tweet-rendered, #main .twt-border {
max-width: 100% !important;
}и только благодаря этому ваши встроенные твиты будут отзывчивыми.