Зробіть вбудовані твіти в WordPress адаптивними

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— це посилання на твіт, який ми вставляємо. Ми перевіряємо, чи це з Twitter, інакше ми не хочемо запускати це. Ми використовуємо str_replace для пошуку рядка, width="500"замінюючи його порожнім рядком.

Зробіть твіт-картку адаптивною

Нам ще потрібно додати трохи CSS, щоб зробити його адаптивним, тому вставте наступне в таблицю стилів вашої теми (або плагіна)

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

і тільки завдяки цьому ваші вбудовані твіти будуть чуйними.