为WordPress Qux主题增加Open Graph协议：提高网站点击率

Open Graph 是一种互联网协议，最初由 Facebook 创建，是结构化展示网页数据的标准之一。 该协议可以让网站很好地在Facebook、Twitter、Telegram这样国外社交平台上得到展示，和Google搜索结果中的Rich Snippets类似，有利于提高网站宣传时的点击率。

那么如何为网站开启Open Graph协议呢？博主根据Open Graph官网 https://ogp.me/ 的说明，给网站引入了几个基本的meta标签。

一、步骤简记

步骤简记如下：

1. 新增函数

进入 /www/wwwroot/www.goojie.eu/wp-content/themes/qux/func 编辑 functions-theme.php
新增 _the_og_type 和 _the_og_description 函数

function _the_og_type() {
     if (is_singular()) {
        $the_og_type = "article";
     } elseif (is_home()) {
        $the_og_type = "website";
     }
     echo $the_og_type;
     return;
}

function _the_og_description() {
        global $new_description;
        if( $new_description ){
                echo "<meta property=\"og:description\" content=\"$new_description\">\n";
                return;
        }

        global $s, $post;
        $description = '';
        $blog_name = get_bloginfo('name');
        if (is_singular()) {
                if ($post->post_excerpt) {
                        $text = $post->post_excerpt;
                } else {
                        $text = $post->post_content;
                }
                $description = trim(str_replace(array("\r\n", "\r", "\n", "　", " "), " ", str_replace("\"", "'", strip_tags($text))));
                if (!($description)) {
                        $description = $blog_name . "-" . trim(wp_title('', false));
                }

                $the = trim(get_post_meta($post->ID, 'description', true));
                if ($the) {
                        $description = $the;
                }
        } elseif (is_home()) {
                $description = _hui('description');
        } elseif (is_tag()) {
                $description = $blog_name . "'" . single_tag_title('', false) . "'";
        } elseif (is_category() || is_tax()) {
                global $wp_query;
                $term = get_queried_object();
                $description = _get_tax_meta($term->term_id, 'description');
                if( !$description ){
                        $description = trim(strip_tags(category_description()));
                }
        } elseif (is_archive()) {
                $description = $blog_name . "'" . trim(wp_title('', false)) . "'";
        } elseif (is_search()) {
                $description = $blog_name . ": '" . esc_html($s, 1) . "' 的搜索結果";
        } else {
                $description = $blog_name . "'" . trim(wp_title('', false)) . "'";
        }
        $description = mb_substr($description, 0, 180, 'utf-8');
        echo "<meta property=\"og:description\" content=\"$description\">\n";
}

2. 新增头部meta标签

进入 /www/wwwroot/www.goojie.eu/wp-content/themes/qux 编辑 header.php
在<title><?php echo _title(); ?></title>下面新增

<meta property="og:title" content="<?php echo _title(); ?>">
<meta property="og:type" content="<?php echo _the_og_type(); ?>">
<?php echo _the_og_description(); ?>
<meta property="og:url" content="<?php the_permalink() ?>">
<meta property="og:site_name" content="<?php echo get_bloginfo('name') ?>-<?php echo get_bloginfo('description') ?>">
<meta property="og:image" content="<?php echo post_thumbnail_src(); ?>">
<meta property="og:image:alt" content="<?php echo _title(); ?>">

二、检查状态

检查状态： 用Facebook的工具 https://developers.facebook.com/tools/debug 或者直接对某篇文章查看网页源码看是否新增了相应meta标签。
查看效果： 可以将链接发送到Telegram或者Facebook，看显示效果。

三、后记

虽然很多Open Graph插件提供了相关标签引入，但是这里由于：
1. 学习的目的
2. 不引入额外插件的宗旨
并没有直接安装Wordpress插件。不过，可能Open Graph插件能够提供更灵活的标签内容，欢迎小伙伴尝试，有问题可留言！