让WordPress文章在微信和QQ分享时正确显示图片

让WordPress文章在微信和QQ分享时正确显示图片

方案一：试用过好用

完整可直接粘贴 functions.php 代码

/** 让WordPress文章在微信和QQ分享时正确显示图片  **/
 function add_og_meta_tags() {
     if (is_single()) {
         global $post;
         if (has_post_thumbnail($post->ID)) {
             $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
             echo '<meta property="og:image" content="' . esc_attr($thumbnail_src[0]) . '"/>';
         }
         echo '<meta property="og:title" content="' . esc_attr(get_the_title()) . '"/>';
         echo '<meta property="og:url" content="' . esc_attr(get_permalink()) . '"/>';
         echo '<meta property="og:description" content="' . esc_attr(wp_strip_all_tags(get_the_excerpt())) . '"/>';
         echo '<meta property="og:type" content="article"/>';
     }
 }
 add_action('wp_head', 'add_og_meta_tags');

方案二：在方案一的基础下修改优化

/** 全站OG社交分享标签：微信/QQ/朋友圈预览图兜底 **/
function add_og_meta_tags() {
    global $post;
    // 配置默认分享图，填完整https地址
    $default_share_img = 'shturl.cc/40kB5RKfbafcM0K79mjRRcw';

    // 通用默认值（首页、归档页）
    $og_title = get_bloginfo('name');
    $og_desc  = get_bloginfo('description');
    $og_url   = home_url('/');
    $og_img   = $default_share_img;
    $og_type  = 'website';

    // 1. 文章/独立页面
    if ( is_singular() ) {
        $og_title = get_the_title($post);
        $og_url   = get_permalink($post);
        $og_type  = 'article';

        // 摘要处理：有摘要用摘要，无摘要截取正文纯文本
        if ( has_excerpt($post) ) {
            $og_desc = wp_strip_all_tags(get_the_excerpt());
        } else {
            $og_desc = wp_trim_words(wp_strip_all_tags($post->post_content), 30, '...');
        }

        // 有特色图则替换封面
        if ( has_post_thumbnail($post->ID) ) {
            $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large');
            if ( !empty($thumb[0]) ) {
                $og_img = $thumb[0];
            }
        }
    }
    // 2. 分类/标签归档页
    elseif ( is_archive() ) {
        $og_title = single_term_title('', false);
        $og_desc  = get_bloginfo('description');
        $og_url   = get_term_link(get_queried_object());
    }
    // 3. 搜索页
    elseif ( is_search() ) {
        $og_title = '搜索结果：' . get_search_query();
    }

    // 输出OG标签
    echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . PHP_EOL;
    echo '<meta property="og:title" content="' . esc_attr($og_title) . '">' . PHP_EOL;
    echo '<meta property="og:description" content="' . esc_attr($og_desc) . '">' . PHP_EOL;
    echo '<meta property="og:url" content="' . esc_attr($og_url) . '">' . PHP_EOL;
    echo '<meta property="og:type" content="' . esc_attr($og_type) . '">' . PHP_EOL;
    echo '<meta property="og:image" content="' . esc_attr($og_img) . '">' . PHP_EOL;
    echo '<meta property="og:image:secure_url" content="' . esc_attr($og_img) . '">' . PHP_EOL;
    echo '<meta property="og:image:width" content="1200">' . PHP_EOL;
    echo '<meta property="og:image:height" content="630">' . PHP_EOL;

    // Twitter/QQ 兜底预览标签
    echo '<meta name="twitter:card" content="summary_large_image">' . PHP_EOL;
    echo '<meta name="twitter:title" content="' . esc_attr($og_title) . '">' . PHP_EOL;
    echo '<meta name="twitter:description" content="' . esc_attr($og_desc) . '">' . PHP_EOL;
    echo '<meta name="twitter:image" content="' . esc_attr($og_img) . '">' . PHP_EOL;
}
add_action('wp_head', 'add_og_meta_tags');