Zibll子比主题美化之WordPress右键菜单美化图文教程-主题铺

AI 智能摘要

主题铺为您带来一款灵感源自他人博客的右键菜单美化方案，它采用了独特的透明模糊背景设计，并融入了智能识别图片并提供复制图片链接的功能，让您的网站在细节之处也充满惊喜。这里就介绍一下Zibll子比主题美化之WordPress右键菜单美化图文教程。

在WordPress网站的细节优化中，自定义右键菜单是一个能显著提升用户体验和网站个性的亮点。厌倦了浏览器默认的单调右键菜单？主题铺为您带来一款灵感源自他人博客的右键菜单美化方案，它采用了独特的透明模糊背景设计，并融入了智能识别图片并提供复制图片链接的功能，让您的网站在细节之处也充满惊喜。这里就介绍一下Zibll子比主题美化之WordPress右键菜单美化图文教程。

美化亮点概览

设计美学： 菜单背景采用半透明的磨砂玻璃效果（Frosted Glass），结合模糊滤镜，营造出轻盈、现代的视觉感受。圆角边框和精致的描边动画，更添一份优雅。
交互优化：
- 智能识别图片： 当鼠标右键点击图片时，菜单会自动调整，提供“复制此图片”的选项，极大地方便了用户。
- 非图片区域： 在非图片区域右键，则显示常规菜单选项。
- 顶部快捷导航： 菜单顶部新增返回上一页、返回下一页和返回顶部的快捷图标，提升导航效率。
- 平滑滚动： “返回顶部”功能加入平滑动画，提升用户体验。
- 复制提示： 复制内容或图片链接成功后，会有简洁的提示框浮现。
功能实用： 集成了复制内容、刷新页面、返回首页、前进/后退、复制地址、搜索选中内容等常用功能。

美化截图：

图片[1]-Zibll子比主题美化之WordPress右键菜单美化图文教程-主题铺

美化教程：手把手教您实现

此美化方案主要通过自定义CSS和JavaScript代码实现，适用于大多数WordPress主题。如果您的网站使用的是子比主题（Zibll），则有更便捷的集成方式。

步骤一：添加自定义CSS样式

将以下CSS代码添加到您的WordPress网站中。通常有以下几种方式：

主题自定义器： 登录WordPress后台，前往“外观”>“自定义”>“额外CSS”（或“自定义CSS”），将代码粘贴进去并保存。
子主题的style.css文件： 如果您使用了子主题，将代码添加到子主题的style.css文件中。
（推荐子比主题用户）子比后台设置： 打开子比主题后台设置，找到“全局功能”>“自定义代码”>“底部HTML”，将CSS代码粘贴到<style type="text/css">标签内或直接粘贴在</head>标签之前。

/* 主题铺www.zhutipu.com */
<style type="text/css">
    /* 基础样式重置 */
    a {
        text-decoration: none;
        color: inherit;
    }

    /* 菜单容器 - 修复版 */
div.usercm {
    background: rgba(255, 255, 255, 0.7); /* 半透明白色背景 */
    backdrop-filter: blur(15px) saturate(180%); /* 模糊和饱和度滤镜 */
    -webkit-backdrop-filter: blur(15px) saturate(180%); /* 兼容Safari */
    font-size: 14px;
    width: 160px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 基础阴影 */
    position: absolute;
    display: none; /* 初始隐藏 */
    z-index: 10000; /* 确保在最上层 */
    border-radius: 12px; /* 圆角 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 细边框 */
    transition: all 0.3s ease; /* 过渡动画 */

    /* 新的描边方案 */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 0 0 0px rgba(44, 123, 229, 0); /* 初始状态无描边 */
}
/* 鼠标悬停时通过box-shadow添加描边 */
div.usercm:hover {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(44, 123, 229, 0.5); /* 悬停时蓝色描边 */
}

    /* 菜单列表 */
    div.usercm ul {
        list-style: none; /* 去除列表点 */
        margin: 0;
        padding: 5px 0;
    }

    /* 菜单项 */
    div.usercm ul li {
        margin: 0;
        padding: 0;
        transition: all 0.2s ease;
    }

    /* 菜单链接 */
    div.usercm ul li a {
        color: #555;
        padding: 10px 20px; /* 增加内边距 */
        display: flex; /* Flex布局使图标和文本对齐 */
        align-items: center; /* 垂直居中对齐 */
        transition: all 0.2s ease;
    }

    /* 菜单图标 */
    div.usercm ul li a i {
        width: 20px;
        margin-right: 12px;
        text-align: center;
        color: #666;
    }

    /* 悬停效果 */
    div.usercm ul li:hover {
        background: rgba(100, 149, 237, 0.2); /* 更强的悬停效果 */
    }

    div.usercm ul li a:hover {
        color: #2c7be5; /* 悬停时文字变蓝 */
    }

    div.usercm ul li a:hover i {
        color: #2c7be5; /* 悬停时图标变蓝 */
    }

    /* 分隔线 */
div.usercm ul li.divider {
    height: 1px;
    background: transparent;
    border-top: 1px dashed #2c7be5; /* 蓝色虚线 */
    margin: 8px 15px;
    opacity: 0.6;
}
div.usercm ul li.divider:hover {
    opacity: 1; /* 悬停时更明显 */
}

    /* 禁用状态 */
    a.disabled {
        color: rgba(204, 204, 204, 0.7) !important; /* 半透明禁用状态 */
        cursor: not-allowed; /* 禁用光标 */
    }

    a.disabled:hover {
        background-color: transparent !important;
    }

      /* 透明风格的顶部导航容器 */
    .quick-nav {
        display: flex;
        justify-content: space-around; /* 均匀分布 */
        padding: 10px 10px;
        background: transparent; /* 完全透明背景 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 极细的分隔线 */
        margin-bottom: 5px;
    }

    /* 透明导航按钮基础样式 */
    .quick-nav a {
        padding: 8px 12px;
        border-radius: 6px;
        transition: all 0.25s ease;
        color: rgba(85, 85, 85, 0.9); /* 半透明文字 */
        font-size: 15px;
        background: transparent; /* 透明背景 */
    }

    /* 悬停效果 - 优雅的淡入背景 */
    .quick-nav a:hover {
        background: rgba(100, 149, 237, 0.15); /* 轻微蓝色背景 */
        color: #2c7be5; /* 悬停时文字变蓝 */
    }

    /* 点击效果 */
    .quick-nav a:active {
        background: rgba(100, 149, 237, 0.25); /* 点击时背景加深 */
        transform: scale(0.98); /* 轻微缩小效果 */
    }

    /* 图标动画 */
    .quick-nav a i {
        transition: transform 0.2s ease;
    }

    .quick-nav a:hover i {
        transform: scale(1.1); /* 悬停时图标轻微放大 */
    }

    /* 按钮边框动画 (可选) */
    .quick-nav a {
        position: relative;
    }

    .quick-nav a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 6px;
        border: 1px solid transparent;
        transition: border-color 0.3s ease;
    }

    .quick-nav a:hover::after {
        border-color: rgba(100, 149, 237, 0.3); /* 悬停时显示淡淡边框 */
    }

    /* 复制成功/失败提示框 */
    .copy-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0; /* 初始隐藏 */
    transition: opacity 0.3s;
    pointer-events: none; /* 不响应鼠标事件 */
    z-index: 10001;
    white-space: nowrap; /* 不换行 */
    }
</style>

步骤二：添加HTML结构

将以下HTML代码添加到您网站的<body>标签内部的任意位置。通常，为了不影响页面布局，可以将其放在<footer>标签之后，或直接放在WordPress主题的footer.php文件中。

对于子比主题用户： 同样，在子比后台设置“全局功能”>“自定义代码”>“底部HTML”中，将这段HTML代码粘贴到</body>标签之前。

<div class="usercm" style="display: none;">
    <!-- 新增的顶部导航图标 -->
    <div class="quick-nav">
        <a href="javascript:history.go(-1);" rel="external nofollow" title="返回上一页"><i class="fa fa-arrow-left"></i></a>
        <a href="javascript:history.go(1);" rel="external nofollow" title="返回下一页"><i class="fa fa-arrow-right"></i></a>
        <a href="javascript:smoothScrollToTop();" rel="external nofollow" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    </div>

    <ul>
        <!-- 注意：此处的“成为邻居”链接和图标在JS中会被动态修改 -->
        <li><a href="https://www.zhutipu.com/frieds"><i class="fa fa-meh-o fa-fw"></i><span>成为邻居</span></a></li>
        <li class="divider"></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制内容</span></a></li>
        <li><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新页面</span></a></li>
        <li class="divider"></li>
        <li><a href="https://www.zhutipu.com/"><i class="fa fa-home"></i><span>返回首页</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
        <li class="divider"></li>
        <li><a href="javascript:void(0);" onclick="copyPageUrl();"><i class="fa fa-link"></i><span>复制地址</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索选中内容</span></a></li>
    </ul>
</div>

主题铺提示：

Font Awesome图标： 上述HTML代码使用了Font Awesome图标（例如<i class="fa fa-arrow-left"></i>）。请确保您的WordPress主题已经加载了Font Awesome库，否则图标可能无法正常显示。如果未加载，您需要手动引入Font Awesome CDN链接到您的网站头部（header.php）。
rel="external nofollow"： 建议检查这些重复的rel属性，通常一个就足够了。

步骤三：添加JavaScript脚本

将以下JavaScript代码添加到您网站的底部，通常是</body>标签之前。

对于子比主题用户： 在子比后台设置“全局功能”>“自定义代码”>“底部HTML”中，将这段JavaScript代码粘贴在</body>标签之前。

<script type="text/javascript">
// 顶部平滑滚动函数
let scrollAnimationId = null;
function smoothScrollToTop() {

    if (scrollAnimationId) {
        cancelAnimationFrame(scrollAnimationId);
    }

    const startPosition = window.pageYOffset;
    const startTime = performance.now();
    const duration = 800; // 动画持续时间(ms)

    const animateScroll = (currentTime) => {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        // 使用缓动函数使滚动更自然
        const easeProgress = easeOutCubic(progress);

        window.scrollTo(0, startPosition * (1 - easeProgress));

        if (progress < 1) {
            scrollAnimationId = requestAnimationFrame(animateScroll);
        } else {
            scrollAnimationId = null;
        }
    };

    // 缓动函数 - 平滑减速
    function easeOutCubic(t) {
        return (--t) * t * t + 1;
    }

    // 监听用户滚动中断
    const handleUserScroll = () => {
        if (scrollAnimationId) {
            cancelAnimationFrame(scrollAnimationId);
            scrollAnimationId = null;
            window.removeEventListener('wheel', handleUserScroll);
            window.removeEventListener('touchmove', handleUserScroll);
        }
    };

    window.addEventListener('wheel', handleUserScroll, { passive: true });
    window.addEventListener('touchmove', handleUserScroll, { passive: true });

    scrollAnimationId = requestAnimationFrame(animateScroll);
}

// 保持原有功能不变 (jQuery 扩展)
(function(a) {
    a.extend({
        mouseMoveShow: function(b) {
            var d = 0,
                c = 0,
                h = 0,
                k = 0,
                e = 0,
                f = 0;

            var menu = a(b); // 右键菜单容器
            var isMenuShowing = false; // 菜单是否显示
            var isOnImage = false; // 是否在图片上
            var imageUrl = ''; // 图片URL

            // 创建提示框元素
            var tooltip = $('<div class="copy-tooltip">复制成功</div>').appendTo('body');

            // 添加CSS过渡效果
            menu.css({
                'transition': 'left 0.3s ease, top 0.3s ease'
            });

            // 检测是否在图片上并修改菜单项
            function checkIfOnImage(target) {
                var imgElement = $(target).closest('img'); // 使用jQuery的closest()
                if (imgElement.length) { // 检查元素是否存在
                    isOnImage = true;
                    imageUrl = imgElement.attr('src'); // 获取图片src
                    // 修改"成为邻居"为"复制图片链接"
                    menu.find('a[href="https://www.zhutipu.com/frieds"] i')
                        .removeClass('fa-meh-o')
                        .addClass('fa-link');
                    menu.find('a[href="https://www.zhutipu.com/frieds"] span')
                        .text('复制此图片');
                } else {
                    isOnImage = false;
                    imageUrl = '';
                    // 恢复"成为邻居"
                    menu.find('a[href="https://www.zhutipu.com/frieds"] i')
                        .removeClass('fa-link')
                        .addClass('fa-meh-o');
                    menu.find('a[href="https://www.zhutipu.com/frieds"] span')
                        .text('成为邻居');
                }
            }

            // 复制图片链接函数
            function copyImageUrl() {
                if (!isOnImage || !imageUrl) return false;

                try {
                    var tempInput = document.createElement('input');
                    tempInput.value = imageUrl;
                    document.body.appendChild(tempInput);
                    tempInput.select();
                    var success = document.execCommand('copy');
                    document.body.removeChild(tempInput);

                    if (success) {
                        // 显示提示框
                        var menuPos = menu.offset();
                        tooltip.text('复制成功').css({
                            'background': 'rgba(0,0,0,0.7)',
                            'left': menuPos.left + menu.outerWidth() + 10,
                            'top': menuPos.top
                        }).stop().css('opacity', 1)
                          .delay(1500)
                          .animate({opacity: 0}, 500);
                        return true;
                    } else {
                        throw new Error('复制失败');
                    }
                } catch (err) {
                    tooltip.text('复制失败').css({
                        'background': 'rgba(255,0,0,0.7)',
                        'left': menu.offset().left + menu.outerWidth() + 10,
                        'top': menu.offset().top
                    }).stop().css('opacity', 1)
                      .delay(1500)
                      .animate({opacity: 0}, 500);
                    return false;
                }
            }

            // 鼠标移动事件
            a(window).mousemove(function(g) {
                d = a(window).width();
                c = a(window).height();
                h = g.clientX;
                k = g.clientY;
                e = g.pageX;
                f = g.pageY;

                // 调整菜单位置防止超出窗口
                h + menu.width() >= d && (e = e - menu.width() - 5);
                k + menu.height() >= c && (f = f - menu.height() - 5);
            });

            // 阻止默认右键菜单并显示自定义菜单
            a("html").on("contextmenu", function(c) {
                if (3 == c.which) { // 鼠标右键
                    checkIfOnImage(c.target); // 检查是否在图片上

                    if (isMenuShowing) {
                        // 菜单已显示，平滑移动到新位置
                        menu.css({
                            left: e,
                            top: f
                        });
                    } else {
                        // 菜单未显示，显示菜单
                        menu.css({
                            left: e,
                            top: f
                        }).show();
                        isMenuShowing = true;
                    }
                    c.preventDefault(); // 阻止默认右键菜单
                }
            });

            // 点击页面任意处隐藏菜单
            a("html").on("click", function() {
                menu.hide();
                isMenuShowing = false;
            });

            // 修改"成为邻居"的点击事件，使其在图片上时复制图片链接
            menu.on('click', 'a[href="https://www.zhutipu.com/frieds"]', function(e) {
                if (isOnImage && imageUrl) {
                    e.preventDefault(); // 阻止默认跳转
                    copyImageUrl();
                    menu.hide();
                    isMenuShowing = false;
                }
            });

            // 新增：滚动时隐藏菜单
            a(window).scroll(function() {
                if (isMenuShowing) { // 仅在菜单显示时执行
                    menu.hide();
                    isMenuShowing = false;
                }
            });
        },
        // 禁用浏览器默认右键菜单
        disabledContextMenu: function() {
            window.oncontextmenu = function() {
                return !1
            }
        }
    })
})(jQuery);

// 复制选中内容函数
function getSelect() {
    var selectedText = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
    if (selectedText === "") {
        // 使用layer.msg需要引入layer.js，这里暂时用alert替代或确保已引入layer.js
        alert("请先选择要复制的内容！"); 
    } else {
        document.execCommand("Copy");
        // 显示复制成功提示
        var menu = $('.usercm');
        var tooltip = $('.copy-tooltip').text('复制成功');
        var menuPos = menu.offset();
        tooltip.css({
            'left': menuPos.left + menu.outerWidth() + 10,
            'top': menuPos.top
        }).stop().css('opacity', 1)
          .delay(1500)
          .animate({opacity: 0}, 500);
    }
}

// 搜索选中内容函数
function baiduSearch() {
    var selectedText = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
    if (selectedText === "") {
        alert("请先选择要搜索的内容！"); // 同上，可替换为layer.msg
    } else {
        // 注意：此处搜索链接为主题铺zhutipu.com站内搜索，如果需要百度搜索，请修改为：
        // window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(selectedText));
        window.open("https://www.zhutipu.com/?s=" + encodeURIComponent(selectedText));
    }
}

// 页面加载完成后执行
$(function() {
    // 判断是否为移动设备，如果是则不启用自定义右键菜单
    var userAgent = navigator.userAgent;
    var mobileRegex = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/i;
    var isMobile = mobileRegex.test(userAgent);

    if (!isMobile) { // 如果不是移动设备
        $.mouseMoveShow(".usercm"); // 启用自定义右键菜单显示逻辑
        $.disabledContextMenu(); // 禁用浏览器默认右键菜单
    }
});

// 复制当前页面地址函数
function copyPageUrl() {
    try {
        var tempInput = document.createElement('input');
        tempInput.value = window.location.href;
        document.body.appendChild(tempInput);
        tempInput.select();
        var success = document.execCommand('copy');
        document.body.removeChild(tempInput);

        if (success) {
            // 显示提示框
            var menu = $('.usercm');
            var tooltip = $('.copy-tooltip').text('已复制页面地址');
            var menuPos = menu.offset();
            tooltip.css({
                'left': menuPos.left + menu.outerWidth() + 10,
                'top': menuPos.top
            }).stop().css('opacity', 1)
              .delay(1500)
              .animate({opacity: 0}, 500);
            return true;
        } else {
            throw new Error('复制失败');
        }
    } catch (err) {
        $('.copy-tooltip').text('复制失败').css({
            'background': 'rgba(255,0,0,0.7)',
            'left': $('.usercm').offset().left + $('.usercm').outerWidth() + 10,
            'top': $('.usercm').offset().top
        }).stop().css('opacity', 1)
          .delay(1500)
          .animate({opacity: 0}, 500);
        return false;
    }
}
</script>

最后总结

jQuery依赖： 这段JavaScript代码依赖于jQuery库。WordPress默认会加载jQuery，但请确保您的主题没有禁用或冲突。
layer.msg： getSelect()和baiduSearch()函数中提到了layer.msg，这通常是Layui框架的一部分。如果您的网站没有引入Layui，请将layer.msg替换为alert()或其他您网站已引入的提示框函数，否则可能会报错。
搜索链接： baiduSearch()函数中的搜索链接https://www.zhutipu.com/?s=是站内搜索。如果您希望实现百度搜索选中内容，请将其修改为https://www.baidu.com/s?wd=" + encodeURIComponent(selectedText)。
图片复制功能： 复制图片链接的功能依赖于document.execCommand('copy')，此API在某些浏览器环境或安全策略下可能受限。
版权信息： 代码中保留了原作者的版权信息/*主题铺 www.zhutipu.com */，请尊重原作者的劳动成果。
适应性： 由于每个WordPress主题的结构和CSS可能不同，您可能需要根据您的主题对CSS样式进行微调，以达到最佳的视觉效果。

实施建议：

完成代码添加后，请清除您的网站缓存和浏览器缓存，然后刷新页面并尝试右键点击，即可体验全新的自定义右键菜单。主题铺认为，这种细致的用户体验优化，将使您的WordPress博客更具吸引力，给访问者留下深刻印象。

① 本站文章均为原创，除非另有说明，否则本站内容依据CC BY-NC-SA 4.0许可证进行授权，转载请附上出处链接，谢谢。
② 本站提供的资源(插件或主题)均为网上搜集，如有涉及或侵害到您的版权请立即通知我们。
③ 本站所有下载文件，仅用作学习研究使用，请下载后24小时内删除，支持正版，勿用作商业用途。
④ 因代码可变性，不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
⑤ 本站保证所提供资源(插件或主题)的完整性，但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识！另本站提供汉化使用安装教程，仅供参考。由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑦ 有时可能会遇到部分字段无法汉化，同时请保留作者汉化宣传信息，谢谢！
⑧ 本站资源售价只是赞助和汉化辛苦费，收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源，欢迎捐助本站开通会员享受优惠折扣，谢谢支持！
⑩ 如果网盘地址失效，请在相应资源页面下留言，我们会尽快修复下载地址。

THE END