CoreNext主题美化教程合集

免费领流量卡

流量卡包邮

本站同款主题

广告招租

狐狸在网站建设过程中对主题进行了多次美化，为了方便记录美化的部分特意写了教程，以便于各位站长进行对自己的网站美化。教程中有些是CoreNext主题和WordPress通用的，没有特意在文中说明，如需使用请自测。

CoreNext主题美化教程合集

部分内容在WordPress其他主题也同样适用，此文章长期更新教程，点击标题展开文章入口，这是一篇“活”的文章。

CoreNext主题 – 小工具之标题圆圈样式美化

实现方法

如同上方位置插入代码

PS：如果选择的样式是经典模式需要把classic修改为mac

此处内容已隐藏，请付费后查看

CoreNext主题 – 文章段落间距调整

直接在网站后台加入以下CSS代码 即可实现

此处内容已隐藏，请评论后刷新页面查看.

CoreNext主题 – 添加运行天数代码美化

这个是统计服务器运行时间，很多站长友友们，都喜欢在自己网站的底部加入“本站已运行多少天”的小功能，今天好软猫就把代码分享出来，有需要就拿去吧。

此处内容已隐藏，请评论后刷新页面查看.

适配 WPOPT 插件的外链跳转模板

前言

最近果核更新了 WPOPT 插件到 2.4.5 版本，从该版本开始，集成了外链跳转插件的功能，同时支持自定义外链跳转界面的模板，于是我也把直接写的针对wp外链跳转插件的模板给移植过来了。

使用方法

查看果核的官方文档：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://logo.grbj.cn/favicon.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; }
.go-wild-container { width: 770px; height: 330px; max-width: 90%; padding: 90px 15px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); text-align: center; }
.logo-img { width: 120px; height: auto; }
.tips-title { margin: 20px 0; font-size: 22px; color: #2a3c59; font-weight: 500; }
.address { margin-bottom: 20px; padding: 15px; background-color: #EFF4FA; border-radius: 8px; color: #2a3c59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 80%; max-width: 600px; margin: 0 auto; }
.tips-subtitle { font-size: 14px; color: #2a3c59; margin-bottom: 30px;margin-top: 20px; }
.btn-groups { display: flex; justify-content: center; gap: 10px; margin-top: 60px; }
.ant-btn { width: 152px; height: 44px; line-height: 44px; 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; }
</style>
</head>

<body>
  <div class="go-wild-box">
    <div class="go-wild-container">
      <a href="https://www.grbj.cn/">
        <img alt="广然笔记" src="https://logo.grbj.cn/logo_black.png" class="logo-img" /><!--修改Logo地址-->
      </a>
      <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>

效果二

<?php
/**
 * name:仿CSDN模板
 */
global $url;
?>
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, 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://logo.grbj.cn/favicon.ico" type="image/x-icon"/>
    <title>广然笔记 - 安全中心</title>
<style>
    html{background:#f4f5f5;}#box{margin:auto;background:#fff;padding:35px 30px 15px 30px;max-width:500px;box-sizing:border-box;border:1px solid #e5e6eb;border-radius:15px;}.note{font-size:18px;line-height:20px;}.link{padding:10px 0 10px;position:relative;color:gray;font-family:"PingFang SC";font-size:14px;word-break:break-all;}.btn-plane{text-align:right;}button{margin-top:10px;color:#248888;border-radius:25px;border:2px solid #248888;background:#fff;height:42px;font-size:14px;padding:0 24px;cursor:pointer;outline:0;}button a{color:#248888;text-decoration:none}.logo-img{text-align:center;margin-top:13%;display:block;margin-bottom:16px;}.link-a{color:#248888;}.loading-img{width:23px;height:23px;}.loading-text{font-size:18px;font-weight:600;color:#222226;line-height:22px;display: flex;align-items: center;}img{vertical-align:middle;}
</style>
</head>
<body>
    <div class="logo-img">
    <a href="https://www.grbj.cn/"> <img alt= "广然笔记" src="https://logo.grbj.cn/logo_black.png" style="width:150px;height:auto;" /> </a>
    </div>
<div id="box">
    <div class="loading-text"><div><svg t="1742641887877" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2621" width="30" height="30"><path d="M957.6 872l-432-736c-6.4-10.4-21.6-10.4-27.2 0l-432 736c-6.4 10.4 1.6 24 13.6 24h864c12 0 20-13.6 13.6-24z m-416-104h-64v-64h64v64z m-63.2-128V384h64v256h-64z" p-id="2622" fill="#d81e06"></path></svg></div>  请注意您的账号和财产安全</div>
    <p class="link">您即将离开《广然笔记》，去往：<a class="link-a"><?php echo $url ?></p></a>
    <p class="btn-plane">
        <a href="<?php echo $url ?>" rel="nofollow"><button>继续访问</button></a>
    </p>
</div>
</body>
</html>

简约H1-H3优化

/* 去掉 H2 标题的伪元素 */
.post-warp .content-warp h2:before {
  content: none;
}

/* 设置 H2 标题字体颜色为黑色 */
.post-warp .content-warp h2 {
  color: #000;
  margin: 20px 0;
  padding-left: 0;
}
/* 去掉 H3 标题的伪元素 */
.post-warp .content-warp h3:before {
  content: none;
}

/* 设置 H3 标题字体颜色为黑色并且左边距为 0 */
.post-warp .content-warp h3 {
  color: #000;
  margin: 20px 0;
  padding-left: 0;
}
/* 设置 H1 标题字体上下间距 */
.post-warp .content-warp h1 {
  margin: 20px 0;
}

导航栏添加背景图和透明效果

首先下载背景图：

css代码如下：

将your img api 替换为你的图片链接

/**  导航栏添加背景图和透明效果  */
header {
    background-color: rgba(255, 255, 255, 0.96);
    background-image: url(your img api);
    background-position: center right;
    background-size: auto 100%;
    box-shadow: 0px 5px 40px 0px rgba(17,58,93,0.1);
}
.menu-header-plane > ul {
   background-color: rgba(255, 255, 255, 0.96);
    background: unset;
}

分割线美化

/* 自定义动画hr样式*/
hr {
	border: 0;
	/* 清除默认边框*/
	height: 2px;
	/* 设置高度*/
	background: linear-gradient(to right, #4285f4, #34a853, #fbbc05, #ea4335);
	/* 使用渐变颜色作为背景*/
	margin: 20px 0;
	/* 设置上下边距*/
	background-size: 400% 100%;
	/* 添加背景尺寸*/
	animation: colorChange 4s linear infinite;
	/* 添加动画效果*/
}

@keyframes colorChange {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

样式：

首页定时问候语


<!--首页问候-->
 <div id="greetingBox"></div>
    <style>
        #greetingBox {
            position: fixed;
            top: 10px;
            left: 15%;
            width: 400px;
            text-align: center;
            z-index: 10000;
            pointer-events: none
        }

        #greeting {
            display: inline-block;
            position: relative;
            opacity: 0;
            top: -110px;
            padding: 5px 40px;
            border-radius: 50px;
            background-color: #fff;
            color: #000;
            font-size: small;
            transition: .5s;
            box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
        }

        #greeting.shown {
            opacity: 1;
            top: 0
        }
    </style>
    <script>
        (() => {
            const greeting = [{"realNode":{"greeting":"\u5DF2\u7ECF\u5F88\u665A\u4E86\uFF0C\u65E9\u70B9\u4F11\u606F\uD83E\uDD17\uFF01","start_time":"22","end_time":"0"}},{"realNode":{"greeting":"\u65E9\u4E0A\u597D\u9E2D\uD83D\uDC4B, \u65E9\u996D\u8BB0\u5F97\u5403\u54E6\uFF0C\u795D\u4F60\u4E00\u5929\u597D\u5FC3\u60C5\uFF01","start_time":6,"end_time":9}},{"realNode":{"greeting":"\u4E0A\u5348\u597D\uD83D\uDC4B, \u72B6\u6001\u5F88\u597D\uFF0C\u9F13\u52B1\u4E00\u4E0B","start_time":10,"end_time":10}},{"realNode":{"greeting":"11\u70B9\u591A\u5566, \u518D\u575A\u6301\u4E00\u4E0B\u5C31\u5403\u996D\u5566\uD83C\uDF71\uFF5E","start_time":11,"end_time":11}},{"realNode":{"greeting":"\u5348\u5B89\uD83D\uDC4B, \u5B9D\u8D1D","start_time":12,"end_time":14}},{"realNode":{"greeting":"\uD83C\uDF08\u5145\u5B9E\u7684\u4E00\u5929\u8F9B\u82E6\u5566\uFF01","start_time":14,"end_time":18}},{"realNode":{"greeting":"19\u70B9\u55BD, \u5956\u52B1\u4E00\u987F\u4E30\u76DB\u7684\u5927\u9910\u5427\uD83C\uDF54\u3002","start_time":19,"end_time":19}},{"realNode":{"greeting":"\u665A\u4E0A\u597D\uD83D\uDC4B, \u5728\u5C5E\u4E8E\u81EA\u5DF1\u7684\u65F6\u95F4\u597D\u597D\u653E\u677E\uD83D\uDE0C~","start_time":20,"end_time":"22"}},{"realNode":{"greeting":"\u5DF2\u7ECF\u5F88\u665A\u4E86\uFF0C\u6700\u8FD1\u8FC7\u7684\u8FD8\u597D\u5417\uD83E\uDE77\uFF1F","start_time":"0","end_time":"3"}},{"realNode":{"greeting":"\u6E05\u6668\u7684\u9633\u5149\u5C31\u8981\u51FA\u6765\u4E86\u2600\uFE0F\uFF01","start_time":"3","end_time":"6"}}].map((itme) => {
                return itme.realNode
            })
            let e = greeting.length !== 0 ? greeting : [
                {
                    greeting: "晚安😴",
                    start_time: 0,
                    end_time: 5
                }, {
                    greeting: "早上好鸭👋, 祝你一天好心情！",
                    start_time: 6,
                    end_time: 9
                }, {
                    greeting: "上午好👋, 状态很好，鼓励一下～",
                    start_time: 10,
                    end_time: 10
                }, {
                    greeting: "11点多啦, 在坚持一下就吃饭啦～",
                    start_time: 11,
                    end_time: 11
                }, {
                    greeting: "午安👋, 宝贝",
                    start_time: 12,
                    end_time: 14
                }, {
                    greeting: "🌈充实的一天辛苦啦！",
                    start_time: 14,
                    end_time: 18
                }, {
                    greeting: "19点喽, 奖励一顿丰盛的大餐吧🍔。",
                    start_time: 19,
                    end_time: 19
                }, {
                    greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
                    start_time: 20,
                    end_time: 24
                }];
            let t = document.createElement("div");
            t.id = "greeting", setTimeout((() => {
                t.classList.add("shown")
            }), 1e3);
            let i = document.querySelector("#greetingBox");
            i.appendChild(t);
            const n = (new Date).getHours();
            let r = "晚上好👋";
            for (let t = 0; t < e.length; t++) if (n >= e[t].start_time && n <= e[t].end_time) {
                r = e[t].greeting;
                break
            }
            t.innerHTML = r, setTimeout((() => {
                t.classList.remove("shown"), setTimeout((() => {
                    i.remove()
                }), 500)
            }), 3e3)
        })()
    </script>

添加彩色滚动条

/**彩色滚动条*/
::-webkit-scrollbar {
    width: 8px;  
    height: 1px;
}
::-webkit-scrollbar-thumb {
    background-color: #12b7f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}

文章底部添加时间和时效性

css代码

 /**文章添加时间和时效性*/
#comment_addface { 
    position: relative 
    
} 
.conment-face-plane { 
    position: absolute; 
    transition: .15s; 
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 
    border: 1px solid rgba(0, 0, 0, .2); 
    border-radius: 6px; 
    top: 100%; 
    padding: 10px; 
    background: #fff; 
    max-width: 300px; 
    z-index: 9999; 
    opacity: 1; 
    visibility: hidden 
    
} 
.popover-btn-face { 
    margin-top: 10px 
    
} 
.popover-btn { 
    border-radius: 4px; 
    display: inline-block; 
    transition: .15s; 
    vertical-align: middle; 
    padding: .3em .5em; 
    text-align: center; 
    line-height: 1.44; 
    border: none; 
    outline: none; 
    cursor: pointer 
    
}

再到子主题的template文件夹内的single.php添加如下代码

<div class="c-alert c-alert-error">本文最后更新于<code><?php echo the_time('Y-m-j');
?></code>部分内容具有时效性，如有失效，请留言</div>

底部菜单美化

css代码

/*CSS 网站底部自定义按钮美化开始*/
:root{--theme-color:#f04494;
--focus-shadow-color:rgba(240,68,148,.4);
--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;    text-shadow: none;    font-size: 12px;    color: #fff;    line-height: 15px;    margin-bottom: 5px;}.badge-subject {
    display: inline-block;    background-color: #4d4d4d;    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;}.github-badge .bg-blue {
    background-color: #007ec6;}.github-badge .bg-brightgreen {
    background-color: #4dc820;}.github-badge .bg-blueviolet {
    background-color: #8833d7;}.github-badge .badge-value {
    display: inline-block;    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;}.github-badge .bg-orange {
    background-color: orange;}.github-badge .bg-red {
    background-color: red;}
    /*CSS 网站底部自定义按钮美化结束*/

再进入小工具的底部左侧添加自定义Html，代码如下

<div class="github-badge">
<span class="badge-subject bg-blue"><a style="color:#fff" href="https://www.xrbk.cn/1018.html#" target="_blank">友链申请</a>
</span>
<span class="badge-subject bg-blueviolet"><a style="color:#fff" href="https://www.xrbk.cn/1018.html#" target="_blank">网站地图</a>
</span>
<span class="badge-subject bg-green"><a style="color:#fff" href="https://www.xrbk.cn/1018.html#" target="_blank">留言建议</a>
</span>
<span class="badge-subject bg-orange"><a style="color:#fff" href="https://www.xrbk.cn/1018.html#" target="_blank">免责申明</a>
</span>
</div>

将其中的#换成自己的链接即可

首页文章悬浮效果

css代码

.post-list .post-item:hover {
    opacity: 1;
    z-index: 99;
    border-radius: 20px;
    transform: translateY(-5px);
    box-shadow: 0 3px 20px rgb(0 0 0 / 25%);
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

.post-list .post-item:hover .post-item__cover {
  transform: translateY(-100%);
}

.post-list .post-item__cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
  transform: translateY(0);
}

.post-list .post-item__title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

文章页图片悬浮

css代码如下：

图片具体文字太近，加了一个 margin 属性，不需要的可以去掉

/*文章图片悬浮效果*/
.core-next-img {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    margin: 10px 0;
}
.core-next-img:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    box-shadow:5px 5px 10px gray;   
}

评论输入框添加背景图

css代码

/*评论背景图*/
textarea.comment-textarea[data-v-1ef8f4cc] {
    background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(/api/img/comment.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;
}
textarea.comment-textarea[data-v-1ef8f4cc]:focus {
    background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;
}

请将其中的/wp-content/uploads/2023/03/comment.png 替换为自己的图片地址

申请友链模块

css代码

/* 友链申请按钮美化 */
.application-url {
    padding: 5px 10px;
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    background: linear-gradient(to right, #fd0808, #df05ed);
    background-size: 200% auto;
    animation: flowingGradient 3s ease-in-out infinite;
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    filter: brightness(130%);
}

.application-url:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
}


@keyframes flowingGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.application-url .friends-title > div  {
    /* 添加一个高度，不然不能对齐 */
    line-height: 32px;
}

本文最后更新于2025-04-04 13:52:54，若文章内容或链接失效，请留言或 QQ群反馈！