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

相关推荐
Web极客码2 天前
WordPress 站点漏洞利用:数据库恶意注入与多重感染的案例分析
数据库·wordpress·网站安全·数据库注入·wordpress漏洞·wordpress安全插件
wodrpress资源分享13 天前
怎么让二级域名绑定到wordpesss指定的页面
wordpress
wodrpress资源分享17 天前
WordPress用 Options Framework 创建一个自定义相册功能
wordpress
wodrpress资源分享17 天前
经典风格的免费wordpress模板
wordpress
wodrpress资源分享1 个月前
推荐12个wordpress企业网站模板
wordpress
Web极客码1 个月前
在WordPress上添加隐私政策页面
大数据·人工智能·wordpress
wodrpress资源分享1 个月前
wordpress免费主题网站
wordpress
云动雨颤1 个月前
Cloudflare子域名设置指南
网络协议·安全·wordpress
wodrpress资源分享1 个月前
三大中文wordpress原创主题汉主题
wordpress
八戒社1 个月前
如何使用插件和子主题添加WordPress自定义CSS(附:常见错误)
前端·css·tensorflow·wordpress