夏末笔记美化优化教程合集（长期更新）

2023-12-21

美化说明

本站美化代码优先corenext主题，其他主题基本也都适配，具体请自行测试

主题搭载

使用CoreNext主题，极致优化，专为极客

夏末笔记美化优化教程合集（长期更新）插图

代码美/优化

文章内部标签自动添加超链

夏末笔记美化优化教程合集（长期更新）插图1
wordpress通过代码免插件实现tag标签超链
本来是想用插件的，看了以前常用的一款WP keyword Link Plugin插件，但是已经好久没更新了，国外的吧又一堆英文，本着少用插件，能不用插件就不用的策略，所以……

侧边及底部每日一言美化

夏末笔记美化优化教程合集（长期更新）插图2
wordpress通过代码美化添加一言鸡汤
一言大家应该都比较熟悉了，毒鸡汤句子 最近网站需要美化，要不然太单调了，也是在网上收集了一些前辈的教程 首先就是一言句子了 添加JS脚本 在在footer.php内……

网站添加建站历程时间轴

夏末笔记美化优化教程合集（长期更新）插图3
给wordpress网站添加一个历程时间轴
一个非常美观的时间轴代码，夏末也是从其他地方看见的，非常喜欢，分享给大家啦 自定义css 首先将以下代码加入你的主题自定义css div.timenode { positio……

给网站添加一个百度热搜排行榜

夏末笔记美化优化教程合集（长期更新）插图4
给网站添加一个百度热搜排行榜
好几天没折腾了，主要是工作太忙了，天天加班到八九点，下班再打打游戏，唉，苦逼打工人👨🏻‍🏭 抽空出来水水文，给wordpress网站侧边添加一个百度热搜排行榜的小……

WordPress添加在线live2d看板娘

夏末笔记美化优化教程合集（长期更新）插图5
WordPress网站添加一个在线live2d看板娘玩偶
非常好看的live2d玩偶，动态的，pc端还有互动功能哦，不过目前本站已经取消啦，没办法夏末用的小主机，有点带不动，哈哈哈 效果图 文件+代码 首先下载解压……

WordPress评论框添加背景

夏末笔记美化优化教程合集（长期更新）插图6
WordPress给你的评论框添加背景图装饰一下吧
非常不错的WordPress评论框美化css 把以下代码放置到自定义css即可 此处内容需要回复后并刷新才能查看 效果大家可以看下夏末的评论框 另外再给大家分享一波背……
PC端文章小标签去除

夏末笔记美化优化教程合集（长期更新）插图7

/** * PC端文章小标签去除 * https://www.xiamo.cc/173.html */.cat-float {
    display: none;
}

插入css即可

WordPress文章中的网站链接URL自动生成超链接的方法


/**
 * 让 WordPress 文章的网址URL自动生成超链接
 * https://www.xiamo.cc/173.html
 */
add_filter('the_content', 'make_clickable');

直接插入主题fusion即可

灯笼代码

<!--春节灯笼-->
<link href="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/css/deng.css" rel="stylesheet">
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
 
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">快乐</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>

文字可自行更改

夏末笔记美化优化教程合集（长期更新）插图8

文章末尾版权提示美化

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>夏末笔记</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://www.xiamo.cc</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长🐧号3554171776进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>

 

夏末笔记美化优化教程合集（长期更新）插图9

分割线美化

/* 自定义动画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>

网站添加原神启动背景图

样式

夏末笔记美化优化教程合集（长期更新）插图10

/*原神启动*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(https://www.xiamo.cc/wp-content/uploads/2024/03/18ea52766d9fa261b7a563eeea6a96e7.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 3s;
    pointer-events: none;
}
@keyframes fadeOut {
  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}

添加彩色滚动条

/**彩色滚动条*/
::-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;
}

返回顶部小猫

<!--返回顶部小猫www.xiamo.cc-->
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div>
<link rel="stylesheet" type="text/css" href="https://soujiz.com/demo/topCat/css/szgotop.css" />
<script src="https://qnCDN.wanshifu.com/wshifu-user/js/jquery-3.2.1.min.js"></script>
<script src="https://soujiz.com/demo/topCat/js/szgotop.js"></script>

放到头部即可

样式

夏末笔记美化优化教程合集（长期更新）插图11

插件优化

外链跳转提示

夏末笔记美化优化教程合集（长期更新）插图12
WordPress外链跳转插件美化版
原版是由果核剥壳开发 能对文中外链添加一层过滤，有效防止追踪，以及提醒用户。类似于知乎、CSDN打开其他链接的提示 今天给大家分享它的修改美化版，由广然笔……

用户头像无法显示优化

夏末笔记美化优化教程合集（长期更新）插图13
使用wordpress建站后头像无法显示怎么办？
主要原因 由于wordpress用户头像用的是Gravatar的头像，过国内又屏蔽外网，所以会导致头像加载不出来 解决方法 喜欢折腾的小伙伴可以考虑更换头像源为Cravatar……

 

版权声明：
作者：夏末沫
链接：https://www.xiamo.cc/173.html
文章版权归作者所有，未经允许请勿转载。
THE END
corenextcorepresswordpress优化夏末笔记插件美化
海外软件官方版怎么下载？
<<上一篇
祝大家圣诞快乐～Happy Holidays
下一篇>>
相关推荐
WordPress免费文章摘要AI插件-Core AI Power
给你的wordpress新文章添加随机阅读量
分享几款wordpress首页四格广告美化代码
WordPress给你的评论框添加背景图装饰一下吧
萌ICP备20246001号
本站已苦逼且艰难的运行:
本站由提供CDN加速/云存储服务
夏末
关于