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

相关推荐
豆豆13 天前
什么是CMS系统_网站内容管理系统功能、分类与搭建方法详解
cms·wordpress·内容管理系统·网站管理系统·saas 建站·网站后台管理·网站建站
豆豆14 天前
2026年如何选择适合自己的网站管理系统?
数据库·cms·wordpress·建站系统·网站管理系统·建站软件·织梦
Web极客码14 天前
使用FeedBurner优化WordPress订阅体验
服务器·wordpress·feedburner
cll_86924189115 天前
WordPress Porto 主题后台一直提示 Porto Functionality 插件需要更新,如何隐藏?
wordpress
Web极客码17 天前
使用人工智能翻译WordPress网站
服务器·人工智能·wordpress
豆豆19 天前
2026年企业如何选择CMS网站管理系统和建站系统
cms·wordpress·建站系统·内容管理系统·网站管理系统·建站软件·建站工具
小牛itbull20 天前
告别传统主题开发!ReactPress Theme Starter —— 用 Next.js 15 构建现代化无头博客
javascript·cms·react·wordpress·nextjs·reactpress·blog-theme
TG_yunshuguoji25 天前
阿里云代理商:阿里云部署 WordPress的3 种方案
人工智能·阿里云·云计算·wordpress·ai智能体
Web极客码1 个月前
加快WooCommerce性能
服务器·wordpress·网站
豆豆1 个月前
WordPress至PageAdmin CMS跨平台迁移技术指南:应对环境约束的系统化过渡方案
cms·wordpress·建站系统·内容管理系统·网站管理系统·pageadmin