把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 白屏或提示「出现了严重错误」:先开 WP_DEBUG 抓致命错误,再二分插件与主题
运维·php·debug·wordpress·白屏·插件冲突·devdiy
李纲明2 天前
WordPress 定时发布不准点或备份/邮件从不跑:先分清 WP-Cron 触发与 DISABLE_WP_CRON,再查回环与系统 Cron
运维·性能优化·wordpress·定时任务·devdiy·wp-cron
李纲明2 天前
WordPress 登录后跳回登录页或一直转圈:先核 Cookie、站点 URL 与 HTTPS,再查 CDN 与安全插件
登录·cdn·wordpress·cookie·devdiy·安全插件
李纲明2 天前
WooCommerce 支付成功但订单仍「待付款」或不扣库存:先核 webhook 与支付回调,再查库存预留与缓存
支付·webhook·wordpress·woocommerce·库存·devdiy·订单状态
李纲明2 天前
WordPress Elementor 编辑器空白或加载转圈:先核 PHP 内存与 REST,再查插件冲突与 Cloudflare
wordpress·elementor·插件冲突·devdiy
李纲明2 天前
WordPress 媒体库上传失败或一直转圈:先核 PHP 上传限制与目录权限,再查安全插件与对象存储
运维·开发语言·安全·php·wordpress·媒体库·devdiy
李纲明2 天前
WordPress 定时发布不跑、备份邮件延误:先核 WP-Cron 触发与回环,再改系统 Cron
运维·wordpress·定时任务·devdiy·wp-cron
李纲明2 天前
WordPress 媒体库上传图片失败:先核 PHP 体积与目录权限,再查安全插件与对象存储
php·上传·wordpress·媒体库·devdiy
李纲明4 天前
WordPress 报 Allowed memory size exhausted:先抓堆栈找吃内存的插件,再改 memory_limit
性能优化·php·内存·插件·wordpress·devdiy
李纲明5 天前
WordPress 前台改完还是旧页:浏览器、CDN、页面缓存、对象缓存怎么分层清
缓存·cdn·wordpress·devdiy