赤峰网站制作设计：如何将开放图形元标签添加到WordPress中
OpenGraphProtocol是一系列元标记，您可以将其添加到网页中，以使其成为一个丰富的对象，供社交媒体平台使用。实际上，这意味着您可以使用基本的HTML标记来添加关于您的帖子的关键信息，Facebook、Twitter、LinkedIn和Google+等社交网络可以使用这些信息来增强站点链接的显示方式。例如，如果你曾经浏览过Facebook，并且在你的新闻提要中看到了一个定制的缩略图、标题和描述，那么你已经看到了开放的图形标签。将OpenGraph添加到您自己的站点实际上是相当简单的。您可以通过向主题添加一个函数，或者使用一个插件来为您完成繁重的任务。在本文中，我们将介绍这两种方法。
开放图是如何工作的
赤峰网站制作设计为了使开放图形正常工作，您需要将几个元标记添加到头节的HTML文档。这是存储关于您的网页的信息的地方，用户不可见。每个元标记遵循相同的格式；您为“Property”分配一个“Content”值。在您这样做之后，各种第三方服务，特别是社交媒体平台，可以使用这些信息以更有意义的方式显示您的内容。其中一些平台具有收集这些信息的专有方法，如推特卡，但大多数使用开放图形作为信息的基线。因此，只要添加一些关于用户所在页面的数据，您就可以确保当您的URL被复制并粘贴到一个社交提要中时，它会附带一个自定义的图像、描述等等。
开放图的作用
实际上，赤峰网站制作设计有相当多的开放图形标记，您可以添加到您的页面顶部。完整的列表可以在开放图形协议主页并包括相当深奥的用途，如视频、音乐、书籍等。但是，对于您的标准博客文章，您可能只想包含一些基本信息，如标题、描述、图像和URL。在纯HTML中，这是开放的图形标记，可以这样构造：
<meta property="og:title" content="Article Title"/> <meta property="og:description" content="Article Description (One or Two sentences)"/> <meta property="og:type" content="article"/> <meta property="og:url" content="http://example.com/link/to/article"/> <meta property="og:site_name" content="Site Name"/> <meta property="og:image" content="http://example.com/image/src.jpg"/>
添加这几个标签将为第三方服务提供关于您的页面的大量数据，并将确保您的文章的URL看起来很棒，并附有所有读者需要的信息。
幸运的是，所有这些数据都可以在WordPress中访问，因此可以将这些标记添加到头每个职位的区段自动。您可以手动完成此操作，也可以使用插件进行更高级的用例。
手动添加开放图形标记
首先，我们赤峰网站制作设计将介绍如何使用几个函数向WordPress站点添加打开的图形标记。我们将要检查的所有代码都应该添加到Functions.php文件的主题，虽然它也可以放在一个自定义插件。我建议创建一个子主题如果您还没有，并将此代码添加到子主题的函数文件中。
我们必须做的第一件事是确保在我们的主题中有一个后备图像，以防我们的文章没有提供一个帖子缩略图。稍后我们将引用这一点，但现在，在主题或子主题的父目录中创建一个名为“img”的文件夹，并将此图像保存为“opengram_Image.jpg”。请记住，这个图像将使用时，当一个帖子没有一个特色的形象，所以它应该是一些一般性的东西，如你的网站标志。例如，我将使用以下图像：
现在我们已经设置好了，我们实际上可以开始添加代码了。打开你的Functions.php文件，然后向下滚动到底部。我们必须添加的第一个函数是告诉第三方服务，文档中除了纯HTML标记之外还有其他标记。这让开放图形解析器正确地读取您的元标记。我们可以使用语言属性过滤器将此权限添加到我们的html标记中。
function doctype_opengraph($output) {
return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');这将确保将正确的doctype添加到我们的HTML中。如果没有这段代码，大多数平台都会跳过我们的网页，我们将要添加的标记永远不会被解析。下一个函数是，我们将在其中实际添加适当的元数据，以便开放图形工作。整个函数如下所示：
function fb_opengraph() {
global $post;
if(is_single()) {
if(has_post_thumbnail($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
} else {
$img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
}
if($excerpt = $post->post_excerpt) {
$excerpt = strip_tags($post->post_excerpt);
$excerpt = str_replace("", "'", $excerpt);
} else {
$excerpt = get_bloginfo('description');
}
?>
<meta property="og:title" content="<?php echo the_title(); ?>"/>
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
<meta property="og:image" content="<?php echo $img_src; ?>"/>
<?php
} else {
return;
}
}
add_action('wp_head', 'fb_opengraph', 5);让我们走过去。在定义了一个全局$POST对象之后，为了能够访问POST信息，我们首先执行一个条件检查，以确保我们在POST页面上。这样，打开的图形标记将只添加到单个POST页面中，在该页面中可以访问适当的数据。
if(has_post_thumbnail($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
} else {
$img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
}在代码的这一节中，我们检查帖子是否有可从POST中提取的缩略图(特征图像)。如果没有，我们将$img_src变量设置为上面保存的默认映像。
if($excerpt = $post->post_excerpt) {
$excerpt = strip_tags($post->post_excerpt);
$excerpt = str_replace("", "'", $excerpt);
} else {
$excerpt = get_bloginfo('description');就像我们赤峰网站制作设计检查上面有特色的图片一样，我们检查帖子是否包括节选。如果是这样的话，我们将确保它以纯文本的形式返回。如果找不到摘录，“否则”语句将$Excerpt变量设置为我们站点的一般描述。这样，无论如何都可以包括一个描述。
最后，我们实际上添加了一个接一个的开放图形标签。
<meta property="og:title" content="<?php echo the_title(); ?>"/> <meta property="og:description" content="<?php echo $excerpt; ?>"/> <meta property="og:type" content="article"/> <meta property="og:url" content="<?php echo the_permalink(); ?>"/> <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/> <meta property="og:image" content="<?php echo $img_src; ?>"/>
每个标记都为社交平台提供了更多关于正在访问的页面的信息，大多数信息可以使用WordPressAPI来填充。我们可以使用文章的标题作为标题属性，摘录作为我们的描述，Permalink作为我们的URL。我们将类型定义为文章，并使用get_bloginfo作为site_name属性。对于图像属性，我们使用上面找到的图像源，如果有，则使用POST缩略图，如果没有，则使用默认图像。
add_action('wp_head', 'fb_opengraph', 5);最后一步是使用可湿性粉剂头操作将所有这些标记实际添加到头我们的贴子页的HTML部分。
一旦您添加了这些函数，打开图的基本版本将开始在您的单个POST页面上工作，尽管这段代码可以被修改以在不同的POST类型中添加更具体的标记。但至少，你可以确保当一个读者将你的博客文章复制并粘贴到他们的状态或新闻提要中时，你的链接将与文章和网站的详细图片、标题和描述一起列出。
一个开放的图表文章发布
当然，开放图形标签有更复杂的用途，设置起来有点困难。如果您想要访问这些功能，最好使用一个插件，它可以为您做到这一点。
Yoast的WordPress SEO
WordPress SEO由Yoast是一个全面和完整的插件，做了很多，不只是简单地添加适当的元标签到您的网页。它可以作为一个完整的SEO解决方案，并帮助您的网站提高其搜索排名，允许您自定义关于您的网站的所有元数据，并密切关注重要的信息，应该包括在帖子。
建立开放图
赤峰网站制作设计在这里提到它，只是因为你可能已经在使用它，或者在你的网站上需要它。如果是这样的话，那么您根本不需要担心OpenGrapht，因为插件可以自动为您添加这个插件。如果安装了插件，可以转到SEO->社会并确保在Facebook选项卡上选中“AddOpenGraphmetadata”复选框。该插件还包括Twitter和Google+的元数据，所有这些数据都是自动添加的，并针对其使用的POST类型进行了定制。
WordPress SEO还允许你将你的Facebook帐户连接到你的WordPress站点，这样你就可以使用FacebookInsight管理员来跟踪你的帖子的社交分析。另外，WordPress SEO还允许你上传一个默认的图片，在你的网站主页上，或者在不包含有特色图片的帖子上。
Facebook插件
Facebook团队实际上有一个正式的插件，可以在所有页面上添加打开的图形标签。简单地通过安装和激活插件，这些元标签将自动添加到您的整个网站，包括帖子，页面，自定义帖子类型和您的主页。此外，这个插件可以用来添加诸如“喜欢”和“跟随”按钮之类的东西，也可以用来将WordPress网站连接到Facebook开发应用程序。
这个插件的开放图形标记的实现是相当简单的，并且没有像默认图像和丰富的媒体帖子这样的特性。然而，对于你的普通博客来说，它增加了你所需要的一切。
WP Facebook开放图形协议
WP Facebook开放图形协议可能是最强大的插件列出。没有太多的选项，也没有太多的配置，大部分工作都是在幕后完成的。如果您正在运行页面，它允许您使用Facebook用户名或应用程序ID将WordPress站点连接到Facebook。然后，您可以选择默认的回退图像。就设置而言就是这样。
只有几个选择
但是在后端，这个插件只致力于完善开放的图形标记，从而考虑了许多不同的场景。例如，如果一个帖子没有特征图像，它将搜索文章中的身体图像。只有在找不到它时，它才会使用您提供的回退图像。插件也是兼容几乎每个SEO插件，以及主题框架，如论文和创世纪。所以不管你在使用什么，WP Facebook开放图形协议都应该工作得很好。如果您正在寻找一个完整的解决方案只处理开放图元数据，而这是要检查的元数据。
