wordpress图文教程

WordPress 纯代码实现国内社交分享按钮（微博 / QQ / 微信 / 朋友圈 / 豆瓣 / 复制链接）

2026年7月15日
admin-sober

ordPress 纯代码实现国内社交分享按钮（微博 / QQ / 微信 / 朋友圈 / 豆瓣 / 复制链接）带参数的函数，方便调用。

功能说明

  1. 无需插件，纯前端 HTML+CSS+JS，适配 WordPress 文章页、页面
  2. 支持：微博、QQ 空间、QQ 好友、微信、朋友圈、豆瓣、一键复制链接
  3. 微信 / 朋友圈生成二维码弹窗（手机 + 电脑均可扫码）
  4. 自适应移动端，简约样式，可自定义颜色尺寸
  5. 自动读取 WordPress 当前文章标题、链接、缩略图、摘要

方案一：带参数的函数，方便调用。

完整可直接丢进 functions.php 的代码：

<?php
/**
 * 带参数自定义分享按钮
 * @param string $show 逗号分隔平台标识
 * 可用值：qq,qqzone,weibo,douban,wechat,moments,copy
 */
function custom_social_share_shortcode($atts){
    global $post;
    // 默认参数
    $args = shortcode_atts([
        'show' => 'qq,qqzone,copy' // 默认显示QQ、QQ空间、复制链接
    ], $atts);
    $show_arr = array_map('trim', explode(',', $args['show']));

    // 文章信息编码
    $post_title = urlencode(get_the_title($post->ID));
    $post_link  = urlencode(get_permalink($post->ID));
    $post_exc   = urlencode(get_the_excerpt($post->ID));
    $permalink  = get_permalink($post->ID);

    $thumb = '';
    if(has_post_thumbnail($post->ID)){
        $thumb = urlencode(get_the_post_thumbnail_url($post->ID, 'medium'));
    }

    ob_start();
?>
<style>
.wp-social-share{margin:30px 0;padding:20px;background:#f8f9fa;border-radius:12px;}
.share-title{font-size:16px;margin-bottom:15px;color:#333;}
.share-list{display:flex;flex-wrap:wrap;gap:12px;}
.share-item{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;color:#fff;text-decoration:none;font-size:14px;cursor:pointer;transition:opacity .2s;}
.share-item:hover{opacity:.85;}
.share-icon{font-weight:bold;}
.share-weibo{background:#e6162d;}
.share-qqzone{background:#2da1f4;}
.share-qq{background:#00c6ff;}
.share-wechat{background:#07c160;}
.share-moments{background:#01b875;}
.share-douban{background:#41ac52;}
.share-copy{background:#666;}

/* 微信弹窗 */
.wechat-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:9999;}
.modal-box{background:#fff;padding:25px;border-radius:10px;text-align:center;max-width:320px;}
.modal-box h4{margin:0 0 15px;color:#333;}
.qrcode-box{width:220px;height:220px;margin:0 auto 15px;border:1px solid #eee;}
.close-modal{padding:6px 18px;background:#07c160;color:#fff;border:none;border-radius:4px;cursor:pointer;}

/* 复制提示 */
.copy-tip{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 20px;border-radius:20px;display:none;z-index:9999;}
</style>

<div class="wp-social-share">
    <h3 class="share-title">分享到：</h3>
    <div class="share-list">
        <?php if(in_array('weibo', $show_arr)): ?>
        <a class="share-item share-weibo" target="_blank"
        href="https://service.weibo.com/share/share.php?title=<?php echo $post_title; ?>&url=<?php echo $post_link; ?>&pic=<?php echo $thumb; ?>">
            <span class="share-icon">微</span>微博
        </a>
        <?php endif; ?>

        <?php if(in_array('qqzone', $show_arr)): ?>
        <a class="share-item share-qqzone" target="_blank"
        href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <span class="share-icon">空</span>QQ空间
        </a>
        <?php endif; ?>

        <?php if(in_array('qq', $show_arr)): ?>
        <a class="share-item share-qq" target="_blank"
        href="https://connect.qq.com/widget/shareqq/index.html?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <span class="share-icon">Q</span>QQ好友
        </a>
        <?php endif; ?>

        <?php if(in_array('wechat', $show_arr)): ?>
        <span class="share-item share-wechat" onclick="openWechatModal('friend')">
            <span class="share-icon">微</span>微信好友
        </span>
        <?php endif; ?>

        <?php if(in_array('moments', $show_arr)): ?>
        <span class="share-item share-moments" onclick="openWechatModal('moments')">
            <span class="share-icon">圈</span>朋友圈
        </span>
        <?php endif; ?>

        <?php if(in_array('douban', $show_arr)): ?>
        <a class="share-item share-douban" target="_blank"
        href="https://shuo.douban.com/share/service?image=<?php echo $thumb; ?>&href=<?php echo $post_link; ?>&name=<?php echo $post_title; ?>&text=<?php echo $post_exc; ?>">
            <span class="share-icon">豆</span>豆瓣
        </a>
        <?php endif; ?>

        <?php if(in_array('copy', $show_arr)): ?>
        <span class="share-item share-copy" onclick="copyLink('<?php echo $permalink; ?>')">
            <span class="share-icon">链</span>复制链接
        </span>
        <?php endif; ?>
    </div>
</div>

<?php
// 只要开启微信/朋友圈才输出弹窗DOM
if(in_array('wechat', $show_arr) || in_array('moments', $show_arr)):
?>
<div class="wechat-modal" id="wechatModal">
    <div class="modal-box">
        <h4 id="modalTip"></h4>
        <div class="qrcode-box" id="qrcodeWrap"></div>
        <button class="close-modal" onclick="closeWechatModal()">关闭</button>
    </div>
</div>
<?php endif; ?>

<?php
// 只要开启复制链接才输出提示框
if(in_array('copy', $show_arr)):
?>
<div class="copy-tip" id="copyTip">链接复制成功！</div>
<?php endif; ?>

<script>
const shareUrl = "<?php echo $permalink; ?>";

// 微信弹窗
function openWechatModal(type){
    const modal = document.getElementById('wechatModal');
    const tip = document.getElementById('modalTip');
    const qrWrap = document.getElementById('qrcodeWrap');
    tip.innerText = type === 'friend' ? '微信好友，扫码分享' : '朋友圈，长按二维码分享';
    qrWrap.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(shareUrl)}" width="220" height="220">`;
    modal.style.display = 'flex';
}
function closeWechatModal(){
    document.getElementById('wechatModal').style.display = 'none';
}
document.getElementById('wechatModal')?.addEventListener('click',e=>{
    if(e.target.id === 'wechatModal') closeWechatModal();
});

// 复制链接
function copyLink(url){
    let temp = document.createElement('input');
    temp.value = url;
    document.body.appendChild(temp);
    temp.select();
    document.execCommand('copy');
    document.body.removeChild(temp);
    const tip = document.getElementById('copyTip');
    tip.style.display = 'block';
    setTimeout(()=>tip.style.display='none',1500);
}
</script>
<?php
    return ob_get_clean();
}
add_shortcode('social_share', 'custom_social_share_shortcode');
?>

调用示例

  1. 只显示 QQ 好友 + QQ 空间（无复制、无其他）
[social_share show="qq,qqzone"]
  1. QQ、QQ 空间、复制链接（默认）
[social_share]
  1. 全套所有平台
[social_share show="qq,qqzone,weibo,douban,wechat,moments,copy"]
  1. 仅微博 + 复制链接
[social_share show="weibo,copy"]

模板文件中 PHP 直接调用写法

// 只展示QQ和QQ空间
<?php echo do_shortcode('[social_share show="qq,qqzone"]'); ?>

// 全套
<?php echo do_shortcode('[social_share show="qq,qqzone,weibo,wechat,moments,weibo,douban,copy"]'); ?>

逻辑说明

  1. 短代码接收 show 参数，逗号分割平台标识；
  2. 使用 in_array() 判断是否输出对应按钮 HTML；
  3. 智能按需输出弹窗、复制提示 DOM，不加载多余代码；
  4. CSS 全部内置，无需额外样式文件；
  5. 纯原生 JS，无 jQuery、无第三方分享 SDK。

修改样式

直接把下面这段 CSS 替换 原来functions.php 的部份代码： <style>...</style> 即可。

<style>
/* 分享容器：更干净的卡片风格 */
.wp-social-share {
    margin: 32px 0;
    padding: 28px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.share-title {
    font-size: 18px;
    margin: 0 0 20px;
    color: #1f2933;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* 分享按钮：圆角胶囊 + 图标居中 + 更舒适尺寸 */
.share-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.22s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.share-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    opacity: 0.95;
}

.share-item:active {
    transform: translateY(-2px);
}

/* 图标放大，更有识别度 */
.share-svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

/* 各平台配色：更接近官方品牌色 */
.share-weibo {
    background: linear-gradient(135deg, #ff6600 0%, #e6162d 100%);
}

.share-qqzone {
    background: linear-gradient(135deg, #2da1f4 0%, #0088cc 100%);
}

.share-qq {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
}

.share-wechat {
    background: linear-gradient(135deg, #07c160 0%, #008f5c 100%);
}

.share-moments {
    background: linear-gradient(135deg, #00b875 0%, #008055 100%);
}

.share-douban {
    background: linear-gradient(135deg, #41ac52 0%, #2e8b3a 100%);
}

.share-copy {
    background: linear-gradient(135deg, #666 0%, #444 100%);
}

/* 微信弹窗 */
.wechat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.modal-box {
    background: #fff;
    padding: 32px 28px;
    border-radius: 24px;
    text-align: center;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-box h4 {
    margin: 0 0 18px;
    color: #1f2933;
    font-weight: 600;
    font-size: 16px;
}

.qrcode-box {
    width: 240px;
    height: 240px;
    margin: 0 auto 20px;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
}

.close-modal {
    padding: 10px 28px;
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.close-modal:hover {
    background: #008f5c;
}

/* 复制成功提示 */
.copy-tip {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    display: none;
    z-index: 99999;
    font-size: 14px;
    font-weight: 500;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .wp-social-share {
        padding: 20px;
    }

    .share-item {
        width: calc(50% - 9px);
        padding: 14px 10px;
        font-size: 14px;
    }

    .share-svg {
        width: 20px;
        height: 20px;
    }
}
</style>

修改样式完整代码：

完整可直接丢进 functions.php 的代码：

<?php
/**
 * 带SVG图标美化版分享按钮 支持参数筛选平台
 * @param show 可选：qq,qqzone,weibo,wechat,moments,douban,copy
 */
function custom_social_share_shortcode($atts){
    global $post;
    $args = shortcode_atts([
        'show' => 'qq,qqzone,copy'
    ], $atts);
    $show_arr = array_map('trim', explode(',', $args['show']));

    $post_title = urlencode(get_the_title($post->ID));
    $post_link  = urlencode(get_permalink($post->ID));
    $post_exc   = urlencode(get_the_excerpt($post->ID));
    $permalink  = get_permalink($post->ID);

    $thumb = '';
    if(has_post_thumbnail($post->ID)){
        $thumb = urlencode(get_the_post_thumbnail_url($post->ID, 'medium'));
    }

    ob_start();
?>
<style>
/* ===== 分享容器 ===== */
.wp-social-share {
    margin: 40px 0;
    padding: 30px 28px 32px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.02);
    border: 1px solid rgba(255,255,255,0.8);
    transition: box-shadow 0.3s ease;
}
.wp-social-share:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ===== 标题 ===== */
.share-title {
    font-size: 18px;
    margin: 0 0 20px;
    color: #1a1a2e;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

/* ===== 按钮列表 ===== */
.share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== 分享按钮通用 ===== */
.share-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.share-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.share-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.share-item:active {
    transform: translateY(-1px) scale(0.98);
}

/* ===== SVG 图标 ===== */
.share-svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.share-item span {
    position: relative;
    z-index: 1;
}

/* ===== 各平台配色 ===== */
.share-weibo {
    background: linear-gradient(135deg, #ff8200 0%, #e6162d 100%);
}
.share-qqzone {
    background: linear-gradient(135deg, #4da6f7 0%, #1a7bc4 100%);
}
.share-qq {
    background: linear-gradient(135deg, #2d9eff 0%, #0078d7 100%);
}
.share-wechat {
    background: linear-gradient(135deg, #2ecc71 0%, #07c160 100%);
}
.share-moments {
    background: linear-gradient(135deg, #1abc9c 0%, #00b475 100%);
}
.share-douban {
    background: linear-gradient(135deg, #5cb85c 0%, #2d8a3c 100%);
}
.share-copy {
    background: linear-gradient(135deg, #7f8c8d 0%, #2d3436 100%);
}

/* ===== 微信弹窗 ===== */
.wechat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-box {
    background: #fff;
    padding: 36px 32px 32px;
    border-radius: 20px;
    text-align: center;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-box h4 {
    margin: 0 0 18px;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 17px;
}
.modal-box .modal-sub {
    color: #888;
    font-size: 13px;
    margin: -10px 0 16px;
}
.qrcode-box {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    background: #fff;
    padding: 6px;
}
.qrcode-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.close-modal {
    padding: 10px 32px;
    background: linear-gradient(135deg, #07c160 0%, #059a4a 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(7,193,96,0.3);
}
.close-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7,193,96,0.4);
}

/* ===== 复制提示 ===== */
.copy-tip {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 12px 28px;
    border-radius: 30px;
    display: none;
    z-index: 99999;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: tipPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tipPop {
    from { transform: translateX(-50%) translateY(30px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ===== 响应式 ===== */
@media (max-width: 640px) {
    .wp-social-share {
        padding: 20px 16px 24px;
        margin: 28px 0;
        border-radius: 16px;
    }
    .share-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .share-item {
        padding: 8px 14px;
        font-size: 12.5px;
        gap: 6px;
        border-radius: 10px;
    }
    .share-svg {
        width: 17px;
        height: 17px;
    }
    .modal-box {
        padding: 28px 20px 24px;
    }
    .qrcode-box {
        width: 180px;
        height: 180px;
    }
}
</style>

<div class="wp-social-share">
    <h3 class="share-title">分享到</h3>
    <div class="share-list">
        <?php if(in_array('weibo', $show_arr)): ?>
        <a class="share-item share-weibo" target="_blank"
        href="https://service.weibo.com/share/share.php?title=<?php echo $post_title; ?>&url=<?php echo $post_link; ?>&pic=<?php echo $thumb; ?>">
            <svg class="share-svg" viewBox="0 0 24 24">
                <path d="M15.5 8.5c.8.8 1.3 1.9 1.4 3"/>
                <path d="M18 5.5c1.5 1.5 2.5 3.5 2.5 5.5"/>
                <circle cx="12" cy="14" r="6"/>
                <path d="M7.5 10.5c-1.2-.8-2.3-1.8-3.2-3"/>
                <path d="M4.5 7C3.2 5.4 2.5 3.5 2.5 1.5"/>
                <path d="M12 2c-3.3 0-6.3 1.6-8.2 4"/>
                <circle cx="10" cy="14" r=".5"/>
                <circle cx="14" cy="14" r=".5"/>
            </svg>
            <span>微博</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('qqzone', $show_arr)): ?>
        <a class="share-item share-qqzone" target="_blank"
        href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <svg class="share-svg" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10"/>
                <path d="M8 10c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z"/>
                <path d="M16 10c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z"/>
                <path d="M8 15h8c.55 0 1 .45 1 1s-.45 1-1 1H8c-.55 0-1-.45-1-1s.45-1 1-1z"/>
                <circle cx="10" cy="10" r=".5"/>
                <circle cx="18" cy="10" r=".5"/>
            </svg>
            <span>QQ空间</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('qq', $show_arr)): ?>
        <a class="share-item share-qq" target="_blank"
        href="https://connect.qq.com/widget/shareqq/index.html?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <svg class="share-svg" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10"/>
                <path d="M8 13c0-1.5 1.79-2.5 4-2.5s4 1 4 2.5"/>
                <path d="M9 9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
                <path d="M15 9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
                <path d="M12 16.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
            </svg>
            <span>QQ好友</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('wechat', $show_arr)): ?>
        <span class="share-item share-wechat" onclick="openWechatModal('friend')">
            <svg class="share-svg" viewBox="0 0 24 24">
                <path d="M8.5 4C5.46 4 3 6.12 3 8.75c0 1.33.72 2.52 1.82 3.33l-.48 1.6 1.87-.94c.48.14.98.22 1.51.22.23 0 .46-.02.68-.05"/>
                <path d="M15.5 4c3.04 0 5.5 2.12 5.5 4.75 0 1.33-.72 2.52-1.82 3.33l.48 1.6-1.87-.94c-.48.14-.98.22-1.51.22-.23 0-.46-.02-.68-.05"/>
                <circle cx="6.5" cy="7.5" r=".8"/>
                <circle cx="10.5" cy="7.5" r=".8"/>
                <circle cx="15.5" cy="7.5" r=".8"/>
                <circle cx="19.5" cy="7.5" r=".8"/>
                <path d="M12 14c0-2.21 1.79-4 4-4s4 1.79 4 4-1.79 4-4 4c-.55 0-1.08-.11-1.57-.32L12 16.5l.43-1.43C12.16 14.74 12 14.38 12 14z"/>
            </svg>
            <span>微信好友</span>
        </span>
        <?php endif; ?>

        <?php if(in_array('moments', $show_arr)): ?>
        <span class="share-item share-moments" onclick="openWechatModal('moments')">
            <svg class="share-svg" viewBox="0 0 24 24">
                <rect x="3" y="3" width="18" height="18" rx="2"/>
                <line x1="9" y1="3" x2="9" y2="21"/>
                <line x1="15" y1="3" x2="15" y2="21"/>
                <line x1="3" y1="9" x2="21" y2="9"/>
                <line x1="3" y1="15" x2="21" y2="15"/>
                <circle cx="12" cy="12" r="3.5"/>
                <circle cx="12" cy="12" r="1.5"/>
            </svg>
            <span>朋友圈</span>
        </span>
        <?php endif; ?>

        <?php if(in_array('douban', $show_arr)): ?>
        <a class="share-item share-douban" target="_blank"
        href="https://shuo.douban.com/share/service?image=<?php echo $thumb; ?>&href=<?php echo $post_link; ?>&name=<?php echo $post_title; ?>&text=<?php echo $post_exc; ?>">
            <svg class="share-svg" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10"/>
                <path d="M7 8h10v2H7z"/>
                <path d="M7 12h8v2H7z"/>
                <path d="M7 16h4v2H7z"/>
            </svg>
            <span>豆瓣</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('copy', $show_arr)): ?>
        <span class="share-item share-copy" onclick="copyLink('<?php echo $permalink; ?>')">
            <svg class="share-svg" viewBox="0 0 24 24">
                <rect x="9" y="9" width="13" height="13" rx="2"/>
                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                <path d="M12 11l4 4"/>
                <path d="M16 11l-4 4"/>
            </svg>
            <span>复制链接</span>
        </span>
        <?php endif; ?>
    </div>
</div>

<?php if(in_array('wechat', $show_arr) || in_array('moments', $show_arr)): ?>
<div class="wechat-modal" id="wechatModal">
    <div class="modal-box">
        <h4 id="modalTip">扫码分享</h4>
        <p class="modal-sub" id="modalSub">打开微信扫一扫，轻松分享</p>
        <div class="qrcode-box" id="qrcodeWrap"></div>
        <button class="close-modal" onclick="closeWechatModal()">我知道了</button>
    </div>
</div>
<?php endif; ?>

<?php if(in_array('copy', $show_arr)): ?>
<div class="copy-tip" id="copyTip">✅ 链接已复制，快去分享吧！</div>
<?php endif; ?>

<script>
const shareUrl = "<?php echo $permalink; ?>";

function openWechatModal(type){
    const modal = document.getElementById('wechatModal');
    const tip = document.getElementById('modalTip');
    const sub = document.getElementById('modalSub');
    const qrWrap = document.getElementById('qrcodeWrap');
    if(type === 'friend') {
        tip.innerText = '💬 微信好友';
        sub.innerText = '扫码打开，一键分享给朋友';
    } else {
        tip.innerText = '📱 朋友圈';
        sub.innerText = '长按二维码，分享到朋友圈';
    }
    qrWrap.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(shareUrl)}" width="220" height="220" alt="二维码">`;
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeWechatModal(){
    document.getElementById('wechatModal').style.display = 'none';
    document.body.style.overflow = '';
}

document.getElementById('wechatModal')?.addEventListener('click', function(e) {
    if(e.target === this) closeWechatModal();
});

// 复制链接
function copyLink(url){
    if(navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(() => showCopyTip());
    } else {
        const textarea = document.createElement('textarea');
        textarea.value = url;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showCopyTip();
    }
}

function showCopyTip() {
    const tip = document.getElementById('copyTip');
    tip.style.display = 'block';
    clearTimeout(tip._timer);
    tip._timer = setTimeout(() => {
        tip.style.display = 'none';
    }, 1800);
}

document.addEventListener('keydown', function(e) {
    if(e.key === 'Escape') {
        const modal = document.getElementById('wechatModal');
        if(modal && modal.style.display === 'flex') closeWechatModal();
    }
});
</script>
<?php
    return ob_get_clean();
}
add_shortcode('social_share', 'custom_social_share_shortcode');
?>

修改样式完整代码：调用外部图标

主要改动说明

  1. 引入 Font Awesome：在页面头部添加了 CDN 链接。
  2. 替换图标：将原本内联的 SVG 代码全部替换为 <i class="..."></i> 标签，使用了 Font Awesome 的图标类。
  3. 调整样式：微调了 CSS，确保新图标能完美适配现有的按钮风格和交互效果。

完整可直接丢进 functions.php 的代码：

<?php
/**
 * 带Font Awesome图标美化版分享按钮 支持参数筛选平台
 * @param show 可选：qq,qqzone,weibo,wechat,moments,douban,copy
 */
function custom_social_share_shortcode($atts){
    global $post;
    $args = shortcode_atts([
        'show' => 'qq,qqzone,copy'
    ], $atts);
    $show_arr = array_map('trim', explode(',', $args['show']));

    $post_title = urlencode(get_the_title($post->ID));
    $post_link  = urlencode(get_permalink($post->ID));
    $post_exc   = urlencode(get_the_excerpt($post->ID));
    $permalink  = get_permalink($post->ID);

    $thumb = '';
    if(has_post_thumbnail($post->ID)){
        $thumb = urlencode(get_the_post_thumbnail_url($post->ID, 'medium'));
    }

    ob_start();
?>
<!-- 在页面头部或需要的地方引入 Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<style>
/* ===== 分享容器 ===== */
.wp-social-share {
    margin: 40px 0;
    padding: 30px 28px 32px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.02);
    border: 1px solid rgba(255,255,255,0.8);
    transition: box-shadow 0.3s ease;
}
.wp-social-share:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ===== 标题 ===== */
.share-title {
    font-size: 18px;
    margin: 0 0 20px;
    color: #1a1a2e;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

/* ===== 按钮列表 ===== */
.share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== 分享按钮通用 ===== */
.share-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.share-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
    border-radius: inherit;
}
.share-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.share-item:active {
    transform: translateY(-1px) scale(0.98);
}

/* ===== Font Awesome 图标样式 ===== */
.share-item i {
    font-size: 18px;
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}
.share-item span {
    position: relative;
    z-index: 1;
}

/* ===== 各平台配色 ===== */
.share-weibo {
    background: linear-gradient(135deg, #ff8200 0%, #e6162d 100%);
}
.share-qqzone {
    background: linear-gradient(135deg, #4da6f7 0%, #1a7bc4 100%);
}
.share-qq {
    background: linear-gradient(135deg, #2d9eff 0%, #0078d7 100%);
}
.share-wechat {
    background: linear-gradient(135deg, #2ecc71 0%, #07c160 100%);
}
.share-moments {
    background: linear-gradient(135deg, #1abc9c 0%, #00b475 100%);
}
.share-douban {
    background: linear-gradient(135deg, #5cb85c 0%, #2d8a3c 100%);
}
.share-copy {
    background: linear-gradient(135deg, #7f8c8d 0%, #2d3436 100%);
}

/* ===== 微信弹窗 ===== */
.wechat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-box {
    background: #fff;
    padding: 36px 32px 32px;
    border-radius: 20px;
    text-align: center;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    animation: slideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.modal-box h4 {
    margin: 0 0 18px;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 17px;
}
.modal-box .modal-sub {
    color: #888;
    font-size: 13px;
    margin: -10px 0 16px;
}
.qrcode-box {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    background: #fff;
    padding: 6px;
}
.qrcode-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}
.close-modal {
    padding: 10px 32px;
    background: linear-gradient(135deg, #07c160 0%, #059a4a 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(7,193,96,0.3);
}
.close-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(7,193,96,0.4);
}

/* ===== 复制提示 ===== */
.copy-tip {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 12px 28px;
    border-radius: 30px;
    display: none;
    z-index: 99999;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    animation: tipPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tipPop {
    from { transform: translateX(-50%) translateY(30px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ===== 响应式 ===== */
@media (max-width: 640px) {
    .wp-social-share {
        padding: 20px 16px 24px;
        margin: 28px 0;
        border-radius: 16px;
    }
    .share-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    .share-item {
        padding: 8px 14px;
        font-size: 12.5px;
        gap: 6px;
        border-radius: 10px;
    }
    .share-item i {
        font-size: 16px;
    }
    .modal-box {
        padding: 28px 20px 24px;
    }
    .qrcode-box {
        width: 180px;
        height: 180px;
    }
}
</style>

<div class="wp-social-share">
    <h3 class="share-title">分享到</h3>
    <div class="share-list">
        <?php if(in_array('weibo', $show_arr)): ?>
        <a class="share-item share-weibo" target="_blank"
        href="https://service.weibo.com/share/share.php?title=<?php echo $post_title; ?>&url=<?php echo $post_link; ?>&pic=<?php echo $thumb; ?>">
            <i class="fab fa-weibo"></i>
            <span>微博</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('qqzone', $show_arr)): ?>
        <a class="share-item share-qqzone" target="_blank"
        href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <i class="fas fa-star"></i>
            <span>QQ空间</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('qq', $show_arr)): ?>
        <a class="share-item share-qq" target="_blank"
        href="https://connect.qq.com/widget/shareqq/index.html?url=<?php echo $post_link; ?>&title=<?php echo $post_title; ?>&pics=<?php echo $thumb; ?>&desc=<?php echo $post_exc; ?>">
            <i class="fab fa-qq"></i>
            <span>QQ好友</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('wechat', $show_arr)): ?>
        <span class="share-item share-wechat" onclick="openWechatModal('friend')">
            <i class="fab fa-weixin"></i>
            <span>微信好友</span>
        </span>
        <?php endif; ?>

        <?php if(in_array('moments', $show_arr)): ?>
        <span class="share-item share-moments" onclick="openWechatModal('moments')">
            <i class="fas fa-camera"></i>
            <span>朋友圈</span>
        </span>
        <?php endif; ?>

        <?php if(in_array('douban', $show_arr)): ?>
        <a class="share-item share-douban" target="_blank"
        href="https://shuo.douban.com/share/service?image=<?php echo $thumb; ?>&href=<?php echo $post_link; ?>&name=<?php echo $post_title; ?>&text=<?php echo $post_exc; ?>">
            <i class="fab fa-douban"></i>
            <span>豆瓣</span>
        </a>
        <?php endif; ?>

        <?php if(in_array('copy', $show_arr)): ?>
        <span class="share-item share-copy" onclick="copyLink('<?php echo $permalink; ?>')">
            <i class="fas fa-copy"></i>
            <span>复制链接</span>
        </span>
        <?php endif; ?>
    </div>
</div>

<?php if(in_array('wechat', $show_arr) || in_array('moments', $show_arr)): ?>
<div class="wechat-modal" id="wechatModal">
    <div class="modal-box">
        <h4 id="modalTip">扫码分享</h4>
        <p class="modal-sub" id="modalSub">打开微信扫一扫，轻松分享</p>
        <div class="qrcode-box" id="qrcodeWrap"></div>
        <button class="close-modal" onclick="closeWechatModal()">我知道了</button>
    </div>
</div>
<?php endif; ?>

<?php if(in_array('copy', $show_arr)): ?>
<div class="copy-tip" id="copyTip">✅ 链接已复制，快去分享吧！</div>
<?php endif; ?>

<script>
const shareUrl = "<?php echo $permalink; ?>";

function openWechatModal(type){
    const modal = document.getElementById('wechatModal');
    const tip = document.getElementById('modalTip');
    const sub = document.getElementById('modalSub');
    const qrWrap = document.getElementById('qrcodeWrap');
    if(type === 'friend') {
        tip.innerText = '💬 微信好友';
        sub.innerText = '扫码打开，一键分享给朋友';
    } else {
        tip.innerText = '📱 朋友圈';
        sub.innerText = '长按二维码，分享到朋友圈';
    }
    qrWrap.innerHTML = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(shareUrl)}" width="220" height="220" alt="二维码">`;
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeWechatModal(){
    document.getElementById('wechatModal').style.display = 'none';
    document.body.style.overflow = '';
}

document.getElementById('wechatModal')?.addEventListener('click', function(e) {
    if(e.target === this) closeWechatModal();
});

// 复制链接
function copyLink(url){
    if(navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(() => showCopyTip());
    } else {
        const textarea = document.createElement('textarea');
        textarea.value = url;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showCopyTip();
    }
}

function showCopyTip() {
    const tip = document.getElementById('copyTip');
    tip.style.display = 'block';
    clearTimeout(tip._timer);
    tip._timer = setTimeout(() => {
        tip.style.display = 'none';
    }, 1800);
}

document.addEventListener('keydown', function(e) {
    if(e.key === 'Escape') {
        const modal = document.getElementById('wechatModal');
        if(modal && modal.style.display === 'flex') closeWechatModal();
    }
});
</script>
<?php
    return ob_get_clean();
}
add_shortcode('social_share', 'custom_social_share_shortcode');
?>

🎯 新图标速览

平台Font Awesome 类名图标样式
微博fab fa-weibo官方微博图标
QQ空间fas fa-star星星 (代表空间)
QQ好友fab fa-qq官方QQ图标
微信好友fab fa-weixin官方微信图标
朋友圈fas fa-camera相机 (代表朋友圈)
豆瓣fab fa-douban官方豆瓣图标
复制链接fas fa-copy复制图标

💡 使用提示

  • 图标来源：现在所有图标都来自 CDN 引入的 Font Awesome 库，您可以通过修改 <i> 标签的 class 属性来更换图标。
  • 样式控制：图标颜色和大小由 CSS 中的 .share-item i 规则控制，与按钮主题色保持一致。
  • 性能：由于使用了 CDN，用户浏览器可能已有缓存，加载速度会很快。当然，如果您的主题已经引入了 Font Awesome，可以删除开头的 <link> 标签以避免重复加载。