把wordpress文章分享到微信 分享到QQ

在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_idyour_timestampyour_nonceStryour_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的按钮,并且分享的内容将包括自定义的标题、摘要和标题图片。

相关推荐
wodrpress资源分享1 小时前
你对安装在自己网站上的wordpress插件了解吗?
wordpress
Web极客码2 天前
WordPress 中最佳的维护服务:入门级用户指南
wordpress·入门指南·网络维护
boke112百科3 天前
如何修改WordPress经典编辑器的默认高度?
编辑器·wordpress·wordpress教程
wodrpress资源分享4 天前
卖三蹦子的wordpress模板
wordpress
伊玛目的门徒6 天前
WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放
wordpress·b站·网站·嵌入视频
Web极客码12 天前
如何使用 cPanel 部署 WordPress临时网站
wordpress·1024程序员节·cpanel
山川绿水14 天前
春秋云镜——SQL注入漏洞复现——CVE-2022-4230
数据库·web安全·网络安全·wordpress·1024程序员节
wodrpress资源分享15 天前
给WordPress添加个额外的古腾堡编辑器
编辑器·wordpress
wodrpress资源分享16 天前
新网虚拟主机wordpress伪静态规则
wordpress
wodrpress资源分享16 天前
怎么选择独立站SEO效果好的wordpress模板
wordpress