使用jQuery实现WordPress站点Facebook按钮响应式链接切换

核心思路 #

直接通过jQuery监听窗口加载与尺寸变化事件，根据屏幕宽度动态修改按钮的href属性——移动端（≤768px）用fb://协议链接，桌面端（>768px）还原主题自动生成的www.facebook.com链接，无需替换整个元素。

实现代码 #

jQuery(document).ready(function($) {
    // 替换为你的Facebook按钮实际选择器（比如class/id）
    const $fbButton = $('.social-btn.facebook');
    // 保存主题生成的原始Facebook网页链接
    const originalWebUrl = $fbButton.attr('href');
    // 替换为你的Facebook页面对应的fb协议链接（比如fb://page/页面ID）
    const fbAppUrl = 'fb://page/1234567890';

    // 定义切换链接的逻辑函数
    function updateFbLink() {
        const screenWidth = $(window).width();
        if (screenWidth <= 768) {
            $fbButton.attr('href', fbAppUrl);
        } else {
            $fbButton.attr('href', originalWebUrl);
        }
    }

    // 页面加载完成后立即执行一次
    updateFbLink();

    // 监听窗口尺寸变化，实时切换链接
    $(window).on('resize', updateFbLink);
});

关键注意事项 #

• 选择器适配：把.social-btn.facebook替换成你按钮的真实CSS选择器——可以通过浏览器开发者工具（F12）查看按钮元素的class或id。
• fb协议链接正确性：fb://page/页面ID中的页面ID需要替换为你Facebook主页的实际ID，可从页面URL或Facebook开发者工具获取；个人主页用fb://profile/用户ID。
• jQuery冲突处理：WordPress默认用jQuery而非$，代码中通过jQuery(document).ready(function($) {...})让内部可以正常使用$。
• 保留原有属性：此方法仅修改href，不会破坏按钮的rel="nofollow noreferrer"、样式、文本等其他属性。

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