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

相关推荐
李纲明1 天前
WordPress 结账页一直转圈不跳支付:AJAX、缓存排除、支付回调和 REST 怎么逐层核
运维·ajax·缓存·wordpress·woocommerce·devdiy·结账
李纲明2 天前
WordPress 安装或更新插件提示「无法创建目录」:权限、磁盘空间与 FS_METHOD 排查
wordpress·插件安装·devdiy·无法创建目录·fs_method
李纲明2 天前
WordPress 后台登录马上被踢回登录页:Cookie 域、HTTPS、盐值和页面缓存怎么查
运维·缓存·https·php·wordpress·cookie
用户60968624266083 天前
页面构建器做的页面翻译:短代码、区块、动态内容各自会踩什么坑
php·wordpress
李纲明3 天前
WordPress 挂上 Cloudflare 后询盘和后台异常:缓存规则、SSL 模式和真实 IP 怎么核
运维·缓存·https·cdn·wordpress·cloudflare
DEVDIY4 天前
WordPress TTFB 高怎么排查:7 步定位服务端瓶颈
wordpress
李纲明4 天前
WordPress 媒体库上传图片报「HTTP 错误」:php.ini、临时目录、安全插件和 CDN 怎么逐层查
运维·php·上传·cdn·wordpress·媒体库
李纲明7 天前
WordPress 古腾堡点「更新」报「不是有效的 JSON 响应」:我按 REST 接口一路查下来的顺序
运维·nginx·php·wordpress·rest api
李纲明7 天前
WordPress 首页正常、内页全 404:固定链接与伪静态规则排查步骤(Apache / Nginx)
nginx·apache·wordpress
李纲明9 天前
WordPress 白屏排查手册:关插件、换主题、开调试、查 PHP(附停手信号)
开发语言·php·wordpress·故障排查·白屏·插件冲突