WordPress子比主题美化教程-备忘录

WordPress子比主题美化教程-备忘录

源地址:https://www.tianyubk.com/253.html

网站设置动态标题

在 子比主题后台 – 自定义代码 – 自定义 javascript 代码 里面添加下面代码:

//【网站动态标题】开始 天域博客 www.tianyubk.com
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦! " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
//【网站动态标题】结束 天域博客 www.tianyubk.com

网站添加侧边彩色滚动条

在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码:

/*【彩色滚动条样式】开始 天域博客 www.tianyubk.com */
::-webkit-scrollbar {
  width: 7px;  
  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.tianyubk.com */

网站鼠标样式修改

在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码:

/*【鼠标指针样式美化】开始 天域博客 www.tianyubk.com */
/** 普通**/body{cursor: url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F/001/1-1.cur), default;}
/** 链接**/a:hover,.cursor:hover,button:hover,svg:hover{cursor:url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F/001/1-2.cur), pointer;}
/*【鼠标样式美化】开始 天域博客 www.tianyubk.com */

网站底部添加好看的蓝色波浪 – 更新主题需要备份

将下面的 PHP 代码加入到主题目录下:themes/zibll/footer.php 文件中的 </footer>下面:

<!--【底部蓝色波浪】开始 天域博客 www.tianyubk.com -->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--【底部蓝色波浪】开始 天域博客 www.tianyubk.com -->

网站添加添加居中复制透明提示框

1、在 子比主题后台 – 自定义代码 – 自定义 javascript 代码 里面添加下面代码:

//【透明复制提示框】开始 天域博客 www.tianyubk.com
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【天域博客 www.tianyubk.com】<br>复制成功,若要转载请务必保留原文链接!</p>', function(){});};
//【透明复制提示框】结束 天域博客 www.tianyubk.com

2、在 子比主题后台 – 自定义代码 – 自定义底部 HTML 代码 里面添加下面代码:

<!--【透明复制提示框】开始 天域博客 www.tianyubk.com -->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--【透明复制提示框】结束 天域博客 www.tianyubk.com -->

用户头像呼吸光环+鼠标悬停旋转放大

在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码:

/*【用户头像呼吸光环+鼠标悬停旋转放大】开始 天域博客 www.tianyubk.com */
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*【用户头像呼吸光环+鼠标悬停旋转放大】结束 天域博客 www.tianyubk.com */

首页文章列表悬停上浮

在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码:

/*【首页文章列表悬停上浮】开始 天域博客 www.tianyubk.com */
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*【首页文章列表悬停上浮】结束 天域博客 www.tianyubk.com */

评论框添加背景图片

在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码:

/*【评论背景图】开始 天域博客 www.tianyubk.com */
textarea#comment{border: 1px solid var(--main-border-color);background:url(https://bk.cos.tianyubk.com/%E7%BE%8E%E5%8C%96/%E8%AF%84%E8%AE%BA%E6%A1%86%E5%9B%BE%E7%89%87/pinglun.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: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;}
@media (max-width:440px){textarea#comment{background-size:93%;}}
/*【评论背景图】结束 天域博客 www.tianyubk.com */

温馨提示:本文最后更新于2024-07-21 01:23:24,某些文章具有时效性,若有错误或已失效,请在下方留言或联系洛秋站长
© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 共3条

请登录后发表评论

    • luoqiu的头像-洛秋资源小站钻石会员luoqiu徽章-签到达人-洛秋资源小站等级-LV2-洛秋资源小站作者0