Как сделать красивую карточку товара в вордпресс

Добавил пользователь Валентин П.
Обновлено: 24.08.2024

Foloosi Payments plugin to accept credit card and debit payments.

Simple Blog Card

Get OGP and display blog card.

Wikilookup

Add the power of Wikipedia to your Blog.

WooPOS Gift Cards for WooCommerce

WooPOS Gift Cards for WooCommerce allows your customers to purchase and redeem gift cards in…

Wikipedia Preview

Плагин просмотра Википедии позволяет увидеть всплывающую карточку с кратким содержанием статьи Википедии при наведении или…

Gift Card For Woocommerce

Throughout the year, there are multiple occasions on which you have to choose a gift…

Flashcard Plugin for WordPress

Flashcard is a WordPress plugin that enables your website to display animated flashcards to help…

Profile Card Block

display profile in card formate in your wordpress-site with custom block.

Easy Flashcards

Easy Flashcard Plugin allows you to easily create,design and manage flashcards for your wordpress site.

Bookmark Card

Turn any URL into a beautiful preview card.

DD — Business Card Widget

A semantic business information widget for wordpress. Sections for business name, address, contact, opening hours…

Interactive Promo

Engage your potential audience with an exciting promo.

CPG Payments Plugin for WooCommerce

A Wordpress plugin for WooCommerce which implements credit & debit card payments via CPG Payments

Twitter Card Generator

Generate Twitter meta tags for your standard WordPress posts automatically.

MTG Utilities

Basic utilities for Magic: the Gathering related websites. Use BBC code to display mana symbols,…

Plugin Cards

Advanced Card Widget for Elementor

Most advanced, highly customizable, flexible and easy-to-use card widget for Elementor with lots of options…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Георгий раньше был разработчиком в Sorta Brilliant – под брендом этой компании вышло несколько полезных плагинов. Один из них мне очень нравился – Emoji Conbini. Однако эти плагины были удалены из каталога WordPress по просьбе их владельца, Ника Хамзе (Nick Hamze).

Георгий решил продолжать разработку отдельно. На днях он выпустил блок Toggles для создания FAQ, скрытых спойлеров и простых аккордеонов.

Плагин Bookmark Card лежал у меня в архивах долгое время, и вот только сегодня я решил его рассмотреть.

Раньше закладки (bookmarks) были обычным явлением в Интернете. Существовали целые сайты для управления закладками. Некоторые пользователи создавали свои собственные страницы закладок на WordPress-сайтах. Все это представало в виде блогроллов или галерей с изображениями. Даже формат архивов link в WordPress является системой закладок.

С помощью плагина Bookmark Card можно создавать следующие страницы ссылок.

В настоящий момент Bookmark Card поставляется с двумя стилями. Горизонтальный стиль позволяет вывести карточку с изображением, стоящим справа от контента. Стандартный стиль, показанный ниже, позволяет вывести изображения сверху. Пользователи также могут пробовать комбинации с другими блоками для создания уникального дизайна – к примеру, вкладывать карточки в блок Columns.

Плагин может быть полезен во многих контекстах. Пользователи могут встраивать URL-адреса, которые не поддерживаются обычными Embed-блоками.

Будущее плагина

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

Было бы неплохо иметь опции для изменения цвета текста и фона, настройки размера шрифта и т.д. Также я прошу всех разработчиков добавлять выравнивания wide и full-width.

В данный момент плагин поставляется в версии 1.0. Возможно, в будущем мы увидим дополнительные опции.

Плагин Bookmark Card лежал у меня в архивах долгое время, и вот только сегодня я решил его рассмотреть.

С помощью плагина Bookmark Card можно создавать следующие страницы ссылок.

Будущее плагина

В данный момент плагин поставляется в версии 1.0. Возможно, в будущем мы увидим дополнительные опции.

Читайте также: