WPOPT插件新功能外链跳转自定义模版
前言
WPOPT插件是本站主题作者一同开发的插件，配合着主题一起使用可以更好的优化网站的运行状态，同时该插件也支持所有的WordPress主题使用；插件官网地址：【WordPress优化插件】WPOPT，最近作者把插件更新到V2.4.5版本后，新增加了外链跳转功能；该功能支持自定义跳转页面模版，本站也设置了一个自定义的页面，本文把该代码共享给大家。
使用方法
具体使用方法请参考官方文档 https://www.yuque.com/applek/wpopt/link
按照文档找到相应位置添加代码即可
方案效果
本站自定义方案效果展示；主要是圆形外观，外围增加彩色氛围灯特效，同时设置小屏自动适配。
方案样式
自定义代码
<?php
/**
* name:煜轩博客外链模板
*/
global $url;
?>
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="https://picx.watlam.com/image/icons/favicon1.ico" type="image/x-icon"/><!--favicon图片地址-->
<title>煜轩博客 - 安全中心</title><!--修改文字-->
<style>
body { margin: 0; font-family: 'PingFangSC', sans-serif; background-color: #EFF4FA; }
.go-wild-box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.go-wild-container {
width: 70vmin; /* 使用vmin单位确保在任何屏幕上都保持圆形 */
height: 70vmin; /* 使用vmin单位确保在任何屏幕上都保持圆形 */
padding: 20px; /* 添加内边距，但不会影响圆形大小 */
background-color: #fff;
border-radius: 50%; /* 圆形 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box; /* 确保padding不会增加元素实际大小 */
overflow: hidden; /* 防止内容溢出 */
}
/* 添加呼吸灯特效 */
.go-wild-box::before {
content: '';
position: absolute;
width: calc(70vmin + 10px);
height: calc(70vmin + 10px);
border-radius: 50%;
z-index: 1;
animation: colorChange 3s infinite ease-in-out;
}
@keyframes colorChange {
0% { background-color: rgba(7, 193, 96, 0.3); } /* 绿色 */
20% { background-color: rgba(21, 94, 239, 0.3); } /* 蓝色 */
40% { background-color: rgba(255, 105, 0, 0.3); } /* 橙色 */
60% { background-color: rgba(221, 0, 129, 0.3); } /* 粉色 */
80% { background-color: rgba(153, 0, 255, 0.3); } /* 紫色 */
100% { background-color: rgba(7, 193, 96, 0.3); } /* 回到绿色 */
}
.logo-img { width: 200px; height: auto; margin-bottom: 10px;}
.logo-wrapper {
position: relative;
display: inline-block;
margin-top: -20px;
}
.logo-ico {
position: absolute;
top: -50px; /* 向上偏移 */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 确保完全居中 */
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
background-color: white;
padding: 3px;
z-index: 3;
}
.tips-title { margin: 15px 0; font-size: 20px; color: #2a3c59; font-weight: 500; }
.address {
margin-bottom: 15px;
padding: 12px;
background-color: #EFF4FA;
border-radius: 8px;
color: #2a3c59;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 80%;
max-width: 350px; /* 减小宽度以适应圆形容器 */
margin: 0 auto;
}
.tips-subtitle { font-size: 14px; color: #ff0000; margin-bottom: 20px; margin-top: 15px; }
.btn-groups { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.ant-btn { width: 140px; height: 40px; line-height: 40px; border-radius: 20px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s ease; }
.ant-btn-primary { background: linear-gradient(152deg, #07C160 0%, #07c183 100%); color: #fff; }
.ant-btn-default { background-color: #fff; color: #2a3c59; border: 1px solid #ccc; }
.ant-btn-default:hover { background-color: #fff; border-color: #07C160; color: #07C160; }
/* 移动端适配 */
@media screen and (max-width: 768px) {
.go-wild-container {
width: 90vmin;
height: 90vmin;
padding: 15px;
}
.go-wild-box::before {
width: calc(90vmin + 10px);
height: calc(90vmin + 10px);
}
.logo-img {
width: 130px;
margin-bottom: 0;
}
.logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0;
}
.logo-ico {
position: static;
width: 35px;
height: 35px;
transform: none;
margin-right: 10px;
}
.tips-title {
font-size: 16px;
margin: 10px 0;
}
.address {
font-size: 12px;
padding: 8px;
width: 90%;
}
.btn-groups {
flex-direction: column;
gap: 8px;
margin-top: 15px;
}
.ant-btn {
width: 120px;
height: 36px;
line-height: 36px;
font-size: 12px;
}
}
/* 超小屏幕适配 */
@media screen and (max-width: 320px) {
.go-wild-container {
width: 95vmin;
height: auto;
min-height: 95vmin;
border-radius: 20px;
}
.go-wild-box::before {
width: calc(95vmin + 5px);
height: calc(95vmin + 5px);
border-radius: 20px;
}
.logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-top: 0;
}
.logo-img {
width: 100px;
margin-bottom: 0;
}
.logo-ico {
position: static;
width: 25px;
height: 25px;
transform: none;
margin-right: 5px;
}
.tips-title {
font-size: 14px;
}
.address {
font-size: 11px;
padding: 6px;
}
.tips-subtitle {
font-size: 12px;
margin-bottom: 15px;
}
}
</style>
</head>
<body>
<div class="go-wild-box">
<div class="go-wild-container">
<div class="logo-wrapper">
<a href="https://www.watlam.com/" style="display: flex; align-items: center; text-decoration: none;">
<img class="logo-ico" src="https://picx.watlam.com/image/icons/favicon1.ico" alt="图标" />
<img alt="煜轩博客" src="https://picx.watlam.com/image/icons/logo.webp" class="logo-img" /><!--修改Logo地址-->
</a>
</div>
<div class="tips-title">您即将从煜轩博客跳转到外部网站</div><!--修改文字-->
<div class="address"><?php echo $url ?></div>
<div class="tips-subtitle">请注意您的账号和财产安全</div>
<div class="btn-groups">
<button onclick="try { window.close(); } catch(e) { alert('请手动关闭此页面'); }" type="button" class="ant-btn ant-btn-default">取消访问</button>
<a href="<?php echo htmlspecialchars($link); ?><?php echo $url ?>" rel="nofollow">
<button type="button" class="ant-btn ant-btn-primary">继续访问</button>
</a>
</div>
</div>
</div>
</body>
</html>其他博主方案
本站自定义方案参考了广然笔记网站的方案修改，大家也可以使用他的方案
阅读剩余
提示：本文最后更新于2025年3月25日，如有错误或者已经失效，请留言告知。
THE END
