在WordPress中实现文章分享到微信和QQ,并自定义标题、摘要和标题图片,可以通过以下步骤来完成:
1. 添加微信分享按钮
首先,你需要注册微信开放平台账号,并创建一个应用以获取AppID和AppSecret。然后,你可以使用微信JS-SDK来实现自定义分享内容。
在你的WordPress主题的functions.php
文件中添加以下代码:
function add_wechat_share() {
?>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'your_app_id', // 必填,公众号的唯一标识
timestamp: 'your_timestamp', // 必填,生成签名的时间戳
nonceStr: 'your_nonceStr', // 必填,生成签名的随机串
signature: 'your_signature',// 必填,签名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
wx.updateAppMessageShareData({
title: '<?php echo get_the_title(); ?>', // 分享标题
desc: '<?php echo get_the_excerpt(); ?>', // 分享描述
link: '<?php echo get_permalink(); ?>', // 分享链接
imgUrl: '<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>', // 分享图标
success: function () {
// 设置成功
}
});
wx.updateTimelineShareData({
title: '<?php echo get_the_title(); ?>', // 分享标题
link: '<?---php echo get_permalink(); ?>', // 分享链接
imgUrl: '<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>', // 分享图标
success: function () {
// 设置成功
}
});
});
</script>
<?php
}
add_action('wp_footer', 'add_webase_share');
请将your_app_id
、your_timestamp
、your_nonceStr
和your_signature
替换为你从微信开放平台获取的实际值。
2. 添加QQ分享按钮
你可以使用QQ互联提供的分享接口来实现QQ分享。在你的WordPress主题的functions.php
文件中添加以下代码:
function add_qq_share() {
?>
<script src="https://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script>
(function(){
var p = {
url: '<?php echo get_permalink(); ?>',
title: '<?php echo get_the_title(); ?>',
summary: '<?php echo get_the_excerpt(); ?>',
pics: '<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>'
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i] || ''));
}
var targetUrl = "http://connect.qq.com/widget/shareqq/index.html?" + s.join('&');
document.write('<iframe src="' + targetUrl + '" id="qqShare" scrolling="no" frameborder="0" style="display:none;"></iframe>');
})();
</script>
<?php
}
add_action('wp_footer', 'add_qq_share');
3. 在文章页面显示分享按钮
在你的WordPress主题的single.php
文件中,找到合适的位置添加以下代码来显示分享按钮:
<div class="share-buttons">
<!-- 微信分享按钮 -->
<button onclick="wx.showOptionMenu()">分享到微信</button>
<!-- QQ分享按钮 -->
<button onclick="window.open(document.getElementById('qqShare').contentWindow.location.href, '_blank')">分享到QQ</button>
</div>
这样,当用户访问文章页面时,他们将看到分享到微信和QQ的按钮,并且分享的内容将包括自定义的标题、摘要和标题图片。