Как добавить ссылки в виде карточек контента в WordPress

Вам нравится как социальные сети вроде Facebook и Twitter отображают предпросмотр ссылки, когда вы вставляете ее в свой статус? Было бы замечательно, если можно было добавить подобного рода карточки контента на свой сайт? В сегодняшней статье мы покажем вам как добавлять ссылки в виде карточек контента в WordPress.

Что такое карточка контента?

Очень похожие на Twitter Cards или Facebook Link Preview, карточки контента позволяют вам отобразить сводку ссылки, размещаемой на вашем сайте.

Рассматривайте её как встроенный твит или встроенное видео в вашем контенте, только как будто вы теперь встраиваете другие статьи.

Точно также как на скриншоте выше. Давайте посмотрим как работают эти карточки контента.

Как работает карточка контента?

Карточки контента используют метаданные Open Graph для сбора информации о ссылке. Если вы не знакомы с Open Graph, тогда ознакомьтесь с нашей статьей о том, как добавить метаданные Open Graph для Facebook в тему WordPress.

Facebook запустил протокол open graph и теперь он используется миллионами сайтов по всему миру. Он позволяет владельцам сайтов предоставлять структурированную информацию о статье.

Эти данные используются Facebook, twitter и т.п. для отображения информации, когда кто-нибудь делится ссылкой на их платформах.

Благодаря популярности и социальной сети Facebook большинство сайтов содержат метаданные open graph в своих статьях.

Карточки контента также смогут отобразить «заглушку» для сайтов, у которых нет graph meta data. Если вы добавите такую ссылку, то будет использоваться заглушка по-умолчанию для миниатюры статьи и отобразится заголовок страницы.

Как добавить карточки контента в WordPress?

Первым делом вам необходимо установить и активировать плагин Content Cards. После активации нужно перейти в редактирование существующей записи или создать новую.

На экране редактора записей вы заметите новую кнопку в визуальном редакторе под названием CC. Нажав на нее, вы увидите всплывающее окно с формой добавления карточки контента.

Просто укажите ссылку на страницу, которую вы хотите встроить в виде карточки контента, отметьте в галочку рядом с target, если вы хотите, чтобы ссылка открывалась в новом окне, а затем нажмите на кнопку ОК для того, чтобы добавить эту ссылку в свою запись.

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

Картинка к записи будет загружаться непосредственно со стороннего сайта, и не будет сохраняться в вашей библиотеке медиафайлов.

Также вы сможете добавлять карточки контента с помощью шорткода, вот так:

[contentcards url="https://wpincode.com"]

После добавления карточки в свою запись, можно сохранить и осуществить предпросмотр. Обратите внимание, что карточки контента полностью адаптивны и замечательно смотрятся на всех устройствах.

Автоматически превращаем ссылки в карточки контента для определенных сайтов

Если вы хотите создать карточки контента для определенных сайтов, то вам нужно перейти в настройки плагина. Идем в Настройки » Content Cards и добавляем доменные имена, которые нужно занести в белый список.

Сайты, которые вы добавите, будут работать так же как встраивание видео в записи блога. Все,что вам нужно будет сделать, это вставить ссылку, а плагин уже сам автоматически превратит ее в карточку контента.

Изменяем внешний вид карточки контента

В плагине есть два предустановленных скина для карточек, которые можно сменить со страницы настроек плагина.

Вы также можете изменить внешний вид карточек контента путем копирования дефолтных файлов скина в свою тему.

Скины расположены в папке /wp-content/plugins/content-cards/skins/default/. Вам понадобится FTP клиент для того, чтобы скачать файлы на свой компьютер, а затем загрузить их обратно в папку своей темы.

Мы надеемся, что эта статья помогла вам создать красивые карточки контента для внешних ссылок в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.