完整代码在最下方,方法一:将代码复制在子比主题设置-自定义代码-自定义底部HTML代码中即可使用(自行更换相关链接)方法二:代码复制位置:./wp-content/themes/zibll/footer.php 倒数第三行 ,其他右键内容自行修改即可。亲测有效。无效你打我。
导语: 亲爱的站长们,是否厌倦了千篇一律的网站交互?想要让你的子比主题网站在细节处脱颖而出吗?跟随这篇攻略,我们将手把手教你如何在网站的右键菜单添加自定义按钮,以及如何设计出令人眼前一亮的各类链接按钮,让用户体验瞬间UP UP!🚀
右键菜单美化大法:
Step 1: 魔法代码注入
首先,你需要在你的子比主题的JavaScript文件中施展一点魔法。通过监听contextmenu
事件,你可以轻松定制右键菜单。添加如下代码作为起点:
Javascript1document.addEventListener('contextmenu', function(e) {
2 e.preventDefault(); // 阻止默认右键菜单显示
3 // 在这里创建你的自定义菜单
4});
Step 2: 创建自定义按钮
接着,在阻止默认菜单后,利用DOM操作创建你想要的按钮元素,并赋予它们样式和功能。比如,添加一个“复制链接”的按钮:
Javascript1var customMenu = document.createElement('div');
2customMenu.innerHTML = '<button class="custom-context-btn">复制链接</button>';
3document.body.appendChild(customMenu);
别忘了给按钮添加CSS样式,使其与你的网站风格融为一体!
Step 3: 功能实现
给按钮绑定事件,实现其功能。以“复制链接”为例:
Javascript1document.querySelector('.custom-context-btn').addEventListener('click', function() {
2 var url = window.location.href;
3 navigator.clipboard.writeText(url).then(function() {
4 alert('链接已复制!');
5 });
6});
链接按钮的时尚变身:
设计原则
- 一致性:确保所有按钮的设计风格统一,颜色、形状、大小保持一致,增强页面的整体协调性。
- 清晰度:按钮上的文字简洁明了,让用户一眼看出其功能。
- 互动反馈:鼠标悬停时改变颜色或添加微妙动画,提升用户点击欲望。
实践步骤
- HTML基础:使用
<a>
标签定义链接,并通过class
指定样式类。 - Html
1<a href="https://your-link.com" class="stylish-btn">点击我</a>
- CSS美化:
- 使用渐变色、圆角、阴影等效果增加按钮的现代感。
- 响应式调整:确保按钮在不同设备上都能良好展示,适当调整样式以适应小屏设备。
Css1.stylish-btn { 2 display: inline-block; 3 padding: 10px 20px; 4 background: linear-gradient(to right, #4CAF50, #009688); 5 color: white; 6 text-decoration: none; 7 border-radius: 5px; 8 transition: background 0.3s ease; 9} 10.stylish-btn:hover { 11 background: linear-gradient(to left, #4CAF50, #009688); 12}
结语: 通过这些小技巧,你的子比主题网站不仅在功能性上更加丰富,视觉效果也会大大提升。每一个细节都是吸引用户停留的秘诀,现在就动手改造,让你的网站在众多站点中独树一帜吧!🌟
<!-- 右键美化 天云创想科技工作室 tyzyj.cn -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:window.location.reload();" rel="external nofollow" ><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="https://www.zibll.com/?golink=aHR0cHM6Ly94Y2p5Z3pzLmNuLw==" rel="external nofollow" ><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:history.go(1);" rel="external nofollow" ><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);" rel="external nofollow" ><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
<li><a target="_blank" href="https://www.tyzyj.cn/21498.html" rel="external nofollow" ><i class="fa fa-suitcase fa-fw"></i><span>设计师福利</span></a></li>
<li><a href="https://www.tyzyj.cn/mianfeiziyuan"><i class="fa fa-copyright"></i><span>免费福利</span></a></li>
<li><a href="https://www.tyzyj.cn/quanqiurewen/jinrixinwen"><i class="fa fa-copyright"></i><span>天云导航</span></a></li>
<li><a href="https://www.tyzyj.cn/bozhu"><i class="fa fa-copyright"></i><span>博主故事</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
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 + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要搜索的内容!") : window.open("https://www.xcjygzs.cn/?s=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
<!-- 右键结束 天云创新科技工作室 tyzyj.cn-->
#子比主题定制 #右键菜单美化 #链接按钮设计
下载说明:
- 本站资源都是白菜价出售,同样的东西,我们不卖几百,也不卖几十,甚至才卖几块钱,一个永久会员能下载全站100%源码了,所以单独购买也好,会员也好均不提供相关技术服务。
- 如果源码下载地址失效请联系站长QQ1394025921进行补发。
- 本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!
- 本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,【源码无忧】对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。
- 请您认真阅读上述内容,购买即意味着您同意上述内容。
© 版权声明
THE END
暂无评论内容