如何基于当前URL创建WhatsApp分享链接并替换网站分享按钮

一、替换Pinterest为WhatsApp分享按钮 #

直接替换原Pinterest对应的<li>模块即可，WhatsApp支持通过标准URL唤起分享，拼接当前页面的标题和链接，确保分享内容完整：

修改要点： #

• 替换分享链接为WhatsApp官方分享格式
• 更换Font Awesome图标为fab fa-whatsapp
• 更新按钮文本的翻译项

二、替换Twitter为Instagram分享按钮 #

注意：Instagram没有官方网页端直接分享的接口，通常需要引导用户复制链接后在APP内完成分享。这里实现了复制链接+APP唤起的兼容方案，兼顾移动端和网页端用户：

修改要点： #

• 用JavaScript实现链接复制功能，适配网页端
• 可选添加instagram://share协议唤起APP（仅移动端有效）
• 更换Font Awesome图标为fab fa-instagram
• 更新按钮文本的翻译项

修改后的完整代码 #

<a href="#" class="rz-close">
    <i class="fas fa-times"></i>
</a>

<div class="rz-modal-heading rz--border">
    <h4 class="rz--title"><?php esc_html_e( 'Share', 'routiz' ); ?></h4>
</div>

<div class="rz-modal-content">
    <div class="rz-modal-append">
        <div class="rz-modal-container rz-scrollbar">

            <div class="rz-signin-social rz-mb-1">
                <ul>
                    <li>
                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" class="rz-button rz--gg" target="_blank">
                            <span class="fab fa-facebook rz-mr-1"></span>
                            <span><?php esc_html_e( 'Share with Facebook', 'routiz' ); ?></span>
                        </a>
                    </li>
                    <!-- 替换Twitter为Instagram分享按钮 -->
                    <li class="rz-mt-2">
                        <a href="instagram://share?text=<?php echo urlencode( get_permalink() ); ?>" class="rz-button rz--gg rz-instagram-share" target="_blank">
                            <span class="fab fa-instagram rz-mr-1"></span>
                            <span><?php esc_html_e( 'Share with Instagram', 'routiz' ); ?></span>
                        </a>
                    </li>
                    <!-- 替换Pinterest为WhatsApp分享按钮 -->
                    <li class="rz-mt-2">
                        <a href="https://wa.me/?text=<?php echo urlencode( esc_html( get_the_title() ) . ' ' . get_permalink() ); ?>" class="rz-button rz--gg" target="_blank">
                            <span class="fab fa-whatsapp rz-mr-1"></span>
                            <span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
                        </a>
                    </li>
                    <li class="rz-mt-2">
                        <a href="mailto:?&subject=<?php echo esc_html( get_the_title() ); ?>&body=<?php echo get_permalink(); ?>" class="rz-button rz--gg">
                            <span class="far fa-paper-plane rz-mr-1"></span>
                            <span><?php esc_html_e( 'Share by email', 'routiz' ); ?></span>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <?php Rz()->preloader(); ?>
</div>

<!-- Instagram分享兼容脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const instagramBtn = document.querySelector('.rz-instagram-share');
    
    instagramBtn.addEventListener('click', function(e) {
        // 尝试唤起APP，若失败则触发复制链接
        setTimeout(function() {
            const pageUrl = '<?php echo get_permalink(); ?>';
            navigator.clipboard.writeText(pageUrl).then(() => {
                alert('链接已复制，请打开Instagram粘贴分享');
            }).catch(err => {
                console.error('复制失败:', err);
                // 降级处理：手动选中复制
                const tempInput = document.createElement('input');
                tempInput.value = pageUrl;
                document.body.appendChild(tempInput);
                tempInput.select();
                document.execCommand('copy');
                document.body.removeChild(tempInput);
                alert('链接已复制，请打开Instagram粘贴分享');
            });
        }, 1000);
    });
});
</script>

关键细节说明 #

1. WhatsApp分享逻辑：
   使用https://wa.me/?text=拼接URL编码的页面标题和链接，用户点击后会直接打开WhatsApp并自动填充分享内容，无需额外操作。

2. Instagram兼容逻辑：

   • 移动端安装Instagram APP时，点击按钮会直接唤起APP并携带链接；
   • 若唤起失败（如网页端或未安装APP），会自动复制当前页面URL，并提示用户打开Instagram粘贴分享，确保所有场景都能正常使用。

内容的提问来源于stack exchange，提问作者Ricardo Matute