B2主题免插件实现微信QQ卡片分享

一、功能介绍

B2主题集成了完整的微信分享功能,支持将网站内容分享到微信好友、微信朋友圈、QQ、微博和QQ空间等平台。分享内容包括标题、描述、链接和缩略图,并且可以根据需要自定义是否显示站点名称。

图片[1]-B2主题免插件实现微信QQ卡片分享-三尾狐

二、准备工作

在使用微信分享功能前,您需要准备一个微信认证的服务号(订阅号没有此功能),并完成以下配置:

1. 获取微信公众号信息

  • 登录微信公众平台
  • 进入左侧菜单最下面的基本配置
  • 获取开发者ID(AppID) 和开发者密码(AppSecret)

2. 配置微信公众号

  1. IP白名单配置
    • 基本配置中,将您网站服务器的IP地址添加到IP白名单
  2. 域名配置
    • 进入公众号设置 → 功能设置
    • 配置业务域名JS接口安全域名网页授权域名三项为您的站点域名
  3. 服务器配置(可选,用于高级功能)
    • 基本配置中,设置服务器配置
    • 稍后会在B2主题设置中获取相关配置信息

三、B2主题微信设置

1. 进入微信设置页面

  • 登录WordPress后台
  • 进入B2设置 → 常规 → 微信设置选项卡

2. 基本配置

微信设置部分,填写以下信息:

配置项说明
微信公众号appid从微信公众平台获取的AppID
微信公众号appsecret从微信公众平台获取的AppSecret

3. 微信分享设置

微信分享设置部分,配置是否在分享时显示站点标题:

  • 显示:分享到微信和QQ时,标题中会包含站点名称(如:”文章标题 – 站点名称”)
  • 隐藏:分享到微信和QQ时,标题中不包含站点名称(如:”文章标题”)

4. 高级配置(可选)

如果需要使用微信自动回复等高级功能,还需要配置:

  • 公众号自动回复
  • Token
  • EncodingAESKey

这些信息需要在微信公众平台的服务器配置中获取。

四、分享功能使用

在文件/b2/Modules/Templates/Footer.php第26行-67行下方代码(代码可能有偏差,照着结构改就行)

public function get_wxshare_data(){

将以下代码段修改为以下以下内容:

public function get_wxshare_data(){
if(!b2_is_weixin()) return;
 
$key = b2_get_option('normal_weixin','weixin_appid');
$secret = b2_get_option('normal_weixin','weixin_appsecret');
if(!$key || !$secret) return;
 
$jssdk = new \JSSDK($key, $secret);
$signPackage = $jssdk->getSignPackage();
 
if($signPackage){
global $post;
$img = '';
// 获取文档标题并确保中文字符正确处理
$title = wp_get_document_title();
// 全面解码HTML实体
$title = htmlspecialchars_decode($title, ENT_QUOTES | ENT_HTML5);
// 替换特定的HTML实体
$title = str_replace('–','-', $title);
// 获取描述并确保中文字符正确处理
$desc = Seo::get_desc();
// 全面解码HTML实体
$desc = htmlspecialchars_decode($desc, ENT_QUOTES | ENT_HTML5);
// 替换特定的HTML实体
$desc = str_replace('–','-', $desc);
// 确保所有文本字段都是UTF-8编码
$title = mb_convert_encoding($title, 'UTF-8', 'auto');
$desc = mb_convert_encoding($desc, 'UTF-8', 'auto');
 
// 获取当前页面URL
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$url = $protocol.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
 
// 根据页面类型获取分享图片
if(isset($post->ID)){
$post_type = get_post_type($post->ID);
 
// 处理不同的文章类型
switch($post_type){
case 'circle':
$imgs = get_post_meta($post->ID,'b2_circle_image',true);
if(isset($imgs[0])){
$img = wp_get_attachment_url($imgs[0]);
}else{
$img = Post::get_post_thumb($post->ID);
}
break;
 
case 'document':
// 文档类型特殊处理,确保获取正确的缩略图
$thumb = get_post_meta($post->ID, 'b2_post_thumb', true);
if($thumb){
$img = $thumb;
}else{
$img = Post::get_post_thumb($post->ID);
}
break;
 
default:
$img = Post::get_post_thumb($post->ID);
break;
}
}elseif(is_archive() || is_category() || is_tag()){
// 分类/标签/归档页面
$term = get_queried_object();
if(isset($term->term_id)){
$img = Seo::get_term_meta($term->term_id, 'b2_tax_img');
}
}
 
// 如果没有获取到图片,使用默认图片
if(empty($img)){
$img = b2_get_default_img();
}
 
// 确保图片URL是完整的
if(strpos($img, 'http') !== 0){
$img = home_url().$img;
}
 
// 处理图片尺寸
$img = b2_get_thumb(array('thumb'=>$img,'width'=>300,'height'=>300));
 
// 如果图片还是不完整,再次处理
if(strpos($img, 'http') !== 0){
$img = home_url().$img;
}
 
// 移除所有字段中可能存在的反引号
$img = str_replace('`', '', $img);
$url = str_replace('`', '', $url);
$desc = str_replace('`', '', $desc);
$title = str_replace('`', '', $title);
 
// 再次确保所有文本字段都是UTF-8编码
$title = mb_convert_encoding($title, 'UTF-8', 'auto');
$desc = mb_convert_encoding($desc, 'UTF-8', 'auto');
 
return array('msg'=>$signPackage,'post_data'=>array(
'imgUrl'=>$img,
'link'=>$url,
'desc'=>$desc,
'title'=>$title
));
 
}
 
return;
 
}

继续在此文件以下代码

wp_cache_set('b2_copyright',$output,'b2_copyright',DAY_IN_SECONDS);
 
        return $output;
    }

添加以下代码:

public function weixin_share(){
$share_data = $this->get_wxshare_data();
 
if(!$share_data) return;
$wx_data = $share_data['msg'];
$post_data = $share_data['post_data'];
 
// 添加新的分享API,确保兼容性
$js_api_list = apply_filters('b2_footer_wx_js_api_list', [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'updateTimelineShareData',
'updateAppMessageShareData',
'onMenuShareQZone'
]);
$js_api_str = "'" . implode("','", $js_api_list) . "'";
 
// 检查是否需要隐藏站点标题
$show_site_title = b2_get_option('normal_weixin', 'weixin_share_show_site_title');
$title = $post_data['title'];
if($show_site_title != 1){
// 移除标题末尾的站点名称和分隔符
$site_name = get_bloginfo('name');
 
// 确保中文字符正确处理
$site_name = mb_convert_encoding($site_name, 'UTF-8', 'auto');
$title = mb_convert_encoding($title, 'UTF-8', 'auto');
 
// 定义可能的分隔符
$separators = array(' - ', ' | ', ' _ ', ':', ': ', '- ', '| ', '_ ', ': ', ':');
 
// 只移除标题末尾的站点名称和分隔符
foreach($separators as $sep){
$site_pattern = $sep . preg_quote($site_name, '/') . '$';
$title = preg_replace('/' . $site_pattern . '/', '', $title);
}
 
// 清除可能产生的多余空格
$title = trim(preg_replace('/\s+/', ' ', $title));
}
 
// 移除所有字段中可能存在的反引号(双重保险)
$post_data['imgUrl'] = str_replace('`', '', $post_data['imgUrl']);
$post_data['link'] = str_replace('`', '', $post_data['link']);
$post_data['desc'] = str_replace('`', '', $post_data['desc']);
$post_data['title'] = str_replace('`', '', $post_data['title']);
$title = str_replace('`', '', $title);
?>
<script>
 
wx.config({
debug: false, // true:调试时候弹窗
appId: '<?php echo $wx_data['appId']; ?>', // 微信appid
timestamp: '<?php echo $wx_data['timestamp']; ?>', // 时间戳
nonceStr: '<?php echo $wx_data['nonceStr']; ?>', // 随机字符串
signature: '<?php echo $wx_data['signature']; ?>', // 签名
jsApiList: [<?php echo $js_api_str; ?>]
});
 
wx.ready(function() {
// 分享配置
var shareConfig = <?php echo wp_json_encode(array(
'imgUrl' => $post_data['imgUrl'],
'link' => $post_data['link'],
'title' => $title,
'desc' => $post_data['desc']
)); ?>;
 
// 确保图片URL是完整的
if (shareConfig.imgUrl.indexOf('http') !== 0) {
shareConfig.imgUrl = '<?php echo home_url(); ?>' + shareConfig.imgUrl;
}
 
// 统一的分享回调
function onShareSuccess() {
// 分享成功不显示提示,避免影响用户体验
}
 
// 微信好友分享
var friendShareData = {
title: shareConfig.title,
desc: shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
type: 'link',
dataUrl: '',
success: onShareSuccess
};
 
// 朋友圈分享
var timelineShareData = {
title: shareConfig.title,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: onShareSuccess
};
 
// QQ分享
var qqShareData = {
title: shareConfig.title,
desc: shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: onShareSuccess
};
 
// 微博分享
var weiboShareData = {
title: shareConfig.title + ' ' + shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: onShareSuccess
};
 
// QQ空间分享
var qzoneShareData = {
title: shareConfig.title,
desc: shareConfig.desc,
link: shareConfig.link,
imgUrl: shareConfig.imgUrl,
success: onShareSuccess
};
 
// 使用旧的API确保兼容性
if (wx.onMenuShareTimeline) {
wx.onMenuShareTimeline(timelineShareData);
}
 
if (wx.onMenuShareAppMessage) {
wx.onMenuShareAppMessage(friendShareData);
}
 
if (wx.onMenuShareQQ) {
wx.onMenuShareQQ(qqShareData);
}
 
if (wx.onMenuShareWeibo) {
wx.onMenuShareWeibo(weiboShareData);
}
 
// 使用新的API
if (wx.updateTimelineShareData) {
wx.updateTimelineShareData(timelineShareData);
}
 
if (wx.updateAppMessageShareData) {
wx.updateAppMessageShareData(friendShareData);
}
 
if (wx.onMenuShareQZone) {
wx.onMenuShareQZone(qzoneShareData);
}
 
<?php do_action('b2_footer_wx_js_api'); ?>
});
 
wx.error(function(res){
console.log('微信分享配置错误:', res);
});
</script>
<?php
}

修改 Modules/Settings/Normal.php 文件(如果需要自定义设置选项)
添加微信分享设置选项(第2870行附近)

确保微信分享设置选项存在:

$weixin->add_field(array(
    'name' => __('分享时显示站点标题', 'b2'),
    'id' => 'weixin_share_show_site_title',
    'type' => 'select',
    'options' => array(
        1 => __('显示', 'b2'),
        0 => __('隐藏', 'b2')
    ),
    'default' => 1,
    'before_row' => '<hr><h2>微信分享设置</h2>',
    'desc' => __('开启后,分享到微信和QQ时会在标题中包含站点名称', 'b2')
));
图片[2]-B2主题免插件实现微信QQ卡片分享-三尾狐

十一、版本兼容性

B2主题的微信分享功能支持:

  • 微信旧版分享API(确保兼容性)
  • 微信新版分享API(支持最新功能)
  • 多种分享渠道(微信好友、朋友圈、QQ、微博、QQ空间)

十二、总结

B2主题的微信分享功能集成完善,配置简单,支持多种分享渠道和自定义选项。通过本教程的指导,您可以轻松配置和使用微信分享功能,提升网站的社交传播能力。

版权声明

站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
© 版权声明
THE END
喜欢就支持一下吧
点赞848 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容