wordpress图文教程

可以让WordPress分享到微信和QQ的文章显示图插件解决方案

2025年6月28日
酒醒

以下是一个完整的WordPress插件解决方案，可以让分享到微信和QQ的文章显示图片。这个插件会添加微信和QQ分享功能，并确保分享时能正确显示文章图片和摘要。


<?php
/*
Plugin Name: WeChat & QQ Share
Description: 添加微信和QQ分享功能，支持显示文章图片和摘要
Version: 1.0
Author: Your Name
*/

// 添加分享按钮到文章内容
function add_share_buttons($content) {
    if(is_single()) {
        $title = get_the_title();
        $excerpt = get_the_excerpt();
        $image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
        $image_url = $image ? $image[0] : '';
        $url = get_permalink();
        
        $buttons = '<div class="share-buttons" style="margin:20px 0;text-align:center;">';
        $buttons .= '<a href="javascript:;" class="wechat-share" data-title="'.esc_attr($title).'" data-desc="'.esc_attr($excerpt).'" data-img="'.esc_url($image_url).'" data-url="'.esc_url($url).'" style="margin-right:15px;"><img src="'.plugins_url('images/wechat.png', __FILE__).'" alt="分享到微信" width="32"></a>';
        $buttons .= '<a href="https://connect.qq.com/widget/shareqq/index.html?url='.urlencode($url).'&title='.urlencode($title).'&pics='.urlencode($image_url).'&summary='.urlencode($excerpt).'" target="_blank" style="margin-right:15px;"><img src="'.plugins_url('images/qq.png', __FILE__).'" alt="分享到QQ" width="32"></a>';
        $buttons .= '</div>';
        
        return $content.$buttons;
    }
    return $content;
}
add_filter('the_content', 'add_share_buttons');

// 添加微信JS-SDK支持
function add_wechat_js_sdk() {
    if(is_single()) {
        echo '<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>';
        echo '<script>
        jQuery(document).ready(function($) {
            $(".wechat-share").click(function() {
                var title = $(this).data("title");
                var desc = $(this).data("desc");
                var img = $(this).data("img");
                var url = $(this).data("url");
                
                wx.config({
                    debug: false,
                    appId: "",
                    timestamp: "",
                    nonceStr: "",
                    signature: "",
                    jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
                });
                
                wx.ready(function() {
                    wx.updateAppMessageShareData({
                        title: title,
                        desc: desc,
                        link: url,
                        imgUrl: img,
                        success: function() {}
                    });
                    
                    wx.updateTimelineShareData({
                        title: title,
                        link: url,
                        imgUrl: img,
                        success: function() {}
                    });
                });
            });
        });
        </script>';
    }
}
add_action('wp_footer', 'add_wechat_js_sdk');

// 添加必要的CSS样式
function add_share_styles() {
    echo '<style>
    .share-buttons a {
        display: inline-block;
        transition: all 0.3s ease;
    }
    .share-buttons a:hover {
        transform: scale(1.1);
    }
    </style>';
}
add_action('wp_head', 'add_share_styles');

使用说明：

  1. 将上述代码保存为wechat-qq-share.php文件
  2. 创建一个wechat-qq-share文件夹，放入插件文件
  3. 在文件夹内创建images子文件夹，放入wechat.png和qq.png图标
  4. 将整个文件夹上传到wp-content/plugins目录
  5. 在WordPress后台激活插件

注意：微信分享需要配置微信JS-SDK，你需要注册微信开放平台获取appId等信息。QQ分享可以直接使用无需额外配置。插件会自动获取文章标题、摘要和特色图片用于分享。

提示：仅供参考