如何在WordPress中将链接添加为内容卡

Do you like how social media sites such as Facebook and Twitter show link previews when you paste a link in your status? Wouldn’t it be nice if you could add similar content cards functionality on your site? In this article, we will show you how to add links as content cards in WordPress.

您是否喜欢在状态中粘贴链接后，Facebook和Twitter等社交媒体网站如何显示链接预览？ 如果可以在您的网站上添加类似的内容卡功能，那不是很好吗？ 在本文中，我们将向您展示如何在WordPress中将链接添加为内容卡。

什么是内容卡？ (What is a Content Card?)

Very similar to Twitter Cards or Facebook Link Preview, content cards allow you to display a summary of the link you share on your site.

内容卡与Twitter Cards或Facebook Link Preview非常相似，内容卡使您可以显示在站点上共享的链接的摘要。

Think of it as embedding a tweet or embedding a video in your content, except now you’re sort of embedding other articles.

可以将其视为在内容中嵌入推文或视频 ，除非您现在正在嵌入其他文章。

Just like the image in the preview above. Let’s take a look at how content cards work.

就像上面预览中的图像一样。 让我们看一下内容卡的工作方式。

内容卡如何工作？ (How Does Content Cards Work?)

Content cards uses open graph meta data to pull the link information. If you don’t know about open graph meta data, then you need to check our guide on how to add Facebook open graph meta data in WordPress.

内容卡使用开放图元数据提取链接信息。 如果您不了解开放图元数据，则需要查看有关如何在WordPress中添加Facebook开放图元数据的指南 。

Facebook started the open graph protocol and now it is used by millions of websites around the world. It allows site owners to provide structured information about an article.

Facebook开始了开放图协议，现在全世界有数百万个网站都在使用它。 它允许网站所有者提供有关文章的结构化信息。

This data is used by Facebook, twitter, etc to show information when someone shares the link on their platform.

当有人在其平台上共享链接时，Facebook，Twitter等使用此数据显示信息。

Due to popularity and reach of Facebook’s social network most websites have open graph meta data in their articles.

由于Facebook社交网络的普及和影响，大多数网站的文章中都有开放图元数据。

Content Cards also come with a beautiful fallback for websites that do not have open graph meta data. If you add such a link, then it will use the default placeholder image for featured image and will show the linked page’s title.

对于没有开放图元数据的网站，内容卡还具有出色的后备功能。 如果添加此类链接，则它将使用默认占位符图像作为特色图像，并显示链接页面的标题。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

如何在WordPress中添加内容卡？ (How to Add Content Cards in WordPress?)

First thing you need to do is install and activate the Content Cards plugin. Upon activation, you can head over to create a new post or edit an existing one.

您需要做的第一件事是安装并激活Content Cards插件。 激活后，您可以直接创建新帖子或编辑现有帖子。

On the post editor screen, you will notice a new button in visual editor labeled CC.

在帖子编辑器屏幕上，您会注意到可视编辑器中带有CC的新按钮。

Clicking on it will show you add content card popup.

单击它会显示您添加内容卡弹出窗口。

Simply provide the link to the page you want to embed as content card, check the target box if you want to open the link in a new window, and click on OK button to insert the link in your post.

只需提供指向您要作为内容卡嵌入的页面的链接，如果要在新窗口中打开该链接，请选中目标框，然后单击“确定”按钮以在您的帖子中插入该链接。

You will notice that the link will immediately transform into a content box. It will show an image for the article, title, description and the name of the website.

您会注意到该链接将立即转换为内容框。 它将显示文章，标题，描述和网站名称的图像。

Article image is displayed directly from the link you shared, and it is not stored on your WordPress site.

文章图像直接从您共享的链接显示，并且不存储在您的WordPress网站上。

You can also add the content card using a shortcode like this:

您还可以使用以下简短代码添加内容卡：

[contentcards url="http://wpbeginner.com"]

[contentcards url="http://wpbeginner.com"]

After adding content cards to your post, you can save and preview it. Notice that the content cards are fully responsive and will look great on all devices.

将内容卡添加到帖子后，您可以保存和预览。 请注意，内容卡具有完全响应能力，在所有设备上看起来都很好。

自动将链接转换为特定站点的内容卡 (Automatically Convert Links into Content Cards for Specific Sites)

If you just want to create content cards for specific sites, then you can do that in plugin settings. Go to Settings » Content Cards and add the domain names that you want to whitelist.

如果您只想为特定站点创建内容卡，则可以在插件设置中进行操作。 转到“设置”»“内容卡”，然后添加要白名单的域名。

Sites you add here will act like YouTube Embeds in WordPress. All you will need to do is add a link and the plugin will automatically convert it into a content card.

您在此处添加的网站的作用类似于WordPress中的YouTube嵌入 。 您需要做的就是添加一个链接，插件将自动将其转换为内容卡。

更改内容卡的外观 (Changing The Look of Content Cards)

The plugin comes with two default skins for content cards that can be changed from the plugin’s settings page.

该插件带有两个用于内容卡的默认外观，可以从插件的设置页面进行更改。

You can also change the appearance of content cards by copying the default skin files to your theme or child theme directory.

您还可以通过将默认外观文件复制到主题或子主题目录来更改内容卡的外观。

The skin files are located in /wp-content/plugins/content-cards/skins/default/ folder. You will need an FTP client to download the files to your computer and then upload them back to your theme or child theme directory.

皮肤文件位于/wp-content/plugins/content-cards/skins/default/文件夹中。 您将需要FTP客户端将文件下载到计算机，然后将其上传回主题或子主题目录。

After that you can edit these files using any plain text editor. If you find it difficult to edit and change CSS, then you may want to try CSS Hero. It is an easy to use plugin that allows you to modify CSS using a simple GUI.

之后，您可以使用任何纯文本编辑器来编辑这些文件。 如果发现很难编辑和更改CSS，则可以尝试使用CSS Hero 。 这是一个易于使用的插件，可让您使用简单的GUI修改CSS。

We hope this article helped you add beautiful content cards for external links in WordPress. You may also want to see our guide on how to easily create responsive image galleries in WordPress with Envira.

我们希望本文能帮助您为WordPress中的外部链接添加漂亮的内容卡。 您可能还想看一下我们的指南，该指南介绍了如何使用Envira 在WordPress中轻松创建响应式图像库 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-links-as-content-cards-in-wordpress/