【WordPress】美化汇总
本文最后更新于 87 天前,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

wordpress美化汇总

前言

收集网上关于 WordPress 的实用美化技巧,便于后续使用查询。

Argon 主题

耗时及占用内存

footer.php</footer> 标签之前加入代码:

<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2022-04-10");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

运行时间、耗时及占用内存

footer.php</footer> 标签之前加入代码:

var birthDay =NewDate("2020-03-12");,修改成自己网站的创建时间即可。

<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
<!--这里要改成自己博客的诞生时间-->
var birthDay =NewDate("2020-03-12");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

鼠标文字特效

footer.php</body> 标签之前加入代码:

<!--鼠标特效开始-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
   $("body").click(function(e) {
       var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤");
       var $i = $("<span/>").text(a[a_idx]);
       a_idx = (a_idx + 1) % a.length;
       var x = e.pageX,
       y = e.pageY;
       $i.css({
           "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
           "top": y - 20,
           "left": x,
           "position": "absolute",
           "font-weight": "bold",
           "color": "#ff6651"
       });
       $("body").append($i);
       $i.animate({
           "top": y - 180,
           "opacity": 0
       },
       1500,
       function() {
           $i.remove();
       });
   });
});
</script>
<!--鼠标特效结束-->

鼠标指针特效之影相随

footer.php</body> 标签之前加入代码:

<!--鼠标样式:两个同心圆,大圆追小圆-->
<style type="text/css">
#cursor{position:fixed;width:16px;height:16px;background:#009688;border-radius:8px;opacity:0.25;z-index:10086;pointer-events:none;transition:0.2s ease-in-out;transition-property:background,opacity,transform}
#cursor.hidden{opacity:0}
#cursor.hover{opacity:0.1;transform:scale(2.5)}
#cursor.active{opacity:0.5;transform:scale(0.5)}
#clickME{cursor:pointer;display:inline-block;border:1px solid #009688}
</style>
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/cursor_01.js"></script>
<!--鼠标样式结束-->

鼠标指针特效之仙女棒

footer.php</body> 标签之前加入代码:

<!--全页特效开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);

    // PC生效,手机/平板不生效
    // md.mobile(); md.phone();
    if(!md.phone()){
        if(!md.tablet()){
            // 雪花
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");

            // 樱花
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");

            // 小烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");

            // 大烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");
           // document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')

            // 鼠标移动的仙女棒特效
            // $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/halo-dream/fairyDustCursor.min.js");

            // 鼠标移动的泡泡特效
            // $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js");
        }
    }
</script>
<!--全页特效结束-->

文字输入撒花特效

footer.php</body> 标签之前加入代码:

<!--网站输入效果开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

font awesome v6

v6 有一些特别的图标。在 footer.php 里添加以下 css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css">

在这里搜索图标:https://fontawesome.com/search 。与 v4 版本相比有很多新的图标。

额外CSS

额外CSS一般用于增加一些自定义样式,比较改大某些字体的属性(大小、颜色)。这里修改的好处就是主题切换、升级时,该设置也不会丢失。

/*=========字体设置============*/

/*网站字体*/
/*原则上你可以设置多个字体,然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:btfFont;
    src:
    url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}

/*说说预览模式的代码字体颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}

/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 20px;
}

/*文章标题字体大小*/
.post-title {
    font-size: 30px
}

/*正文字体大小(不包含代码)*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;
}

/*评论区字体大小*/
p {
    font-size: 1.2rem
}

/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}

/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body{
    color:#364863
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*========透明设置===========*/

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.85) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素,如果用同一个透明度会叠加变色,故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}

/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}

/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}

/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}

/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}

/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}

/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看!*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'btfFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.2rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}

/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 0rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}

/*隐藏wp-SEO插件带来的线条阴影(不一定要装)*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

/*网站黑白色(悼念)- 额外CSS的最底部(否则容易和其它CSS代码冲突)*/
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

Twenty Twelve 木头人修改精简版

项目地址:https://github.com/huhexian/2012-huhexian

style.css 中加入样式代码:

标签云

/* 标签云样式修改 */
 .tagcloud {
     overflow:hidden;
     line-height:20px;
 }
 .tagcloud a {
    font-size: 13px!important;
    padding: 3px;
    margin-right: 3px;
    float: left;
    display: block;
 }
 .tagcloud a:not(.dots):hover {
     background-color: #336699;
     color: #FFFFFF;
     border:0;
 }

引用

/*引用*/
.entry-content blockquote,
.comment-content blockquote
{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg1NTQxNjE3MDQ5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM3MTgiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTQwNi41NTcyNTcgMTE4LjUzNTMxNHYxMzcuOTAzNTQzYy04Ny4xNDI0IDE5Ljk1MzM3MS0xMjguODkyMzQzIDc0LjQ3NDA1Ny0xMzQuMzYzNDI4IDE3Ni4wMTA5NzJoMTM0LjM2MzQyOHYzMjYuNzQzNzcxSDExNC4yOTMwMjlWNDkwLjUxMDYyOWMwLTE5NC4xNzk2NTcgODMuNDk5ODg2LTM0My4wMTA3NDMgMjkyLjI2NDIyOC0zNzEuOTc1MzE1bTAtNTguNTE0Mjg1Yy0yLjY3NzAyOSAwLTUuMzU0MDU3IDAuMTkwMTcxLTguMDQ1NzE0IDAuNTU1ODg1QzE3Ny41MDMwODYgOTEuMjM4NCA1NS43Nzg3NDMgMjQzLjkzMTQyOSA1NS43Nzg3NDMgNDkwLjUxMDYyOXYyNjguNjY4MzQyYTU4LjUxNDI4NiA1OC41MTQyODYgMCAwIDAgNTguNTE0Mjg2IDU4LjUxNDI4NmgyOTIuMjY0MjI4YTU4LjUxNDI4NiA1OC41MTQyODYgMCAwIDAgNTguNTE0Mjg2LTU4LjUxNDI4NlY0MzIuNDQ5ODI5YTU4LjUxNDI4NiA1OC41MTQyODYgMCAwIDAtNTguNTE0Mjg2LTU4LjUxNDI4NmgtNjQuNTI2NjI4YzE0LjQ1MzAyOS0zNy42MTAwNTcgNDEuNDI4MTE0LTUyLjE4MDExNCA3Ny41ODk5NDItNjAuNDU5ODg2YTU4LjUxNDI4NiA1OC41MTQyODYgMCAwIDAgNDUuNDUwOTcyLTU3LjAzNjhWMTE4LjUzNTMxNGE1OC41MTQyODYgNTguNTE0Mjg2IDAgMCAwLTU4LjUxNDI4Ni01OC41MTQyODV6TTkwOS43MDY5NzEgMjY0LjgyMTAyOXYxMzcuOTAzNTQyYy04Ny4xMTMxNDMgMTkuOTUzMzcxLTEyOC44NjMwODYgNzQuNDc0MDU3LTEzNC4zMzQxNzEgMTc2LjAxMDk3MmgxMzQuMzM0MTcxdjMyNi43NDM3NzFINjE3LjQ0Mjc0M1Y2MzYuNzk2MzQzYzAtMTk0LjE3OTY1NyA4My41MTQ1MTQtMzQzLjAxMDc0MyAyOTIuMjY0MjI4LTM3MS45NzUzMTRtMC01OC41MTQyODZjLTIuNjc3MDI5IDAtNS4zNTQwNTcgMC4xOTAxNzEtOC4wNDU3MTQgMC41NTU4ODYtMjIxLjAwODQ1NyAzMC42NzYxMTQtMzQyLjczMjggMTgzLjM1NDUxNC0zNDIuNzMyOCA0MjkuOTQ4MzQydjI2OC42NjgzNDNhNTguNTE0Mjg2IDU4LjUxNDI4NiAwIDAgMCA1OC41MTQyODYgNTguNTE0Mjg2aDI5Mi4yNjQyMjhhNTguNTE0Mjg2IDU4LjUxNDI4NiAwIDAgMCA1OC41MTQyODYtNTguNTE0Mjg2VjU3OC43MzU1NDNhNTguNTE0Mjg2IDU4LjUxNDI4NiAwIDAgMC01OC41MTQyODYtNTguNTE0Mjg2aC02NC40OTczNzFjMTQuNDUzMDI5LTM3LjYxMDA1NyA0MS40MTM0ODYtNTIuMTgwMTE0IDc3LjU3NTMxNC02MC40NTk4ODZhNTguNTE0Mjg2IDU4LjUxNDI4NiAwIDAgMCA0NS40MzYzNDMtNTcuMDM2OHYtMTM3LjkwMzU0MmE1OC41NDM1NDMgNTguNTQzNTQzIDAgMCAwLTU4LjUxNDI4Ni01OC41MTQyODZ6IiBmaWxsPSIjY2YzZjc0IiBwLWlkPSIzNzE5Ij48L3BhdGg+PHBhdGggZD0iTTM1OS42MTQxNzEgNjY2LjU1MDg1N2ExNC42Mjg1NzEgMTQuNjI4NTcxIDAgMCAxLTE0LjYyODU3MS0xNC42Mjg1NzFWNDkxLjI3MTMxNGgtNjguMDgxMzcxYTE0LjYyODU3MSAxNC42Mjg1NzEgMCAxIDEgMC0yOS4yNTcxNDNoODcuNzcxNDI4YzguMDg5NiAwIDkuNTY3MDg2IDYuMjkwMjg2IDkuNTY3MDg2IDE0LjM2NTI1OHYxNzUuNTQyODU3YTE0LjYyODU3MSAxNC42Mjg1NzEgMCAwIDEtMTQuNjI4NTcyIDE0LjYyODU3MXpNODcxLjYxNDE3MSA4NDIuMDkzNzE0YTE0LjYyODU3MSAxNC42Mjg1NzEgMCAwIDEtMTQuNjI4NTcxLTE0LjYyODU3MXYtMjkuMjU3MTQzYTE0LjYyODU3MSAxNC42Mjg1NzEgMCAxIDEgMjkuMjU3MTQzIDB2MjkuMjU3MTQzYTE0LjYyODU3MSAxNC42Mjg1NzEgMCAwIDEtMTQuNjI4NTcyIDE0LjYyODU3MXpNODcxLjYxNDE3MSA3NTQuMzIyMjg2YTE0LjYyODU3MSAxNC42Mjg1NzEgMCAwIDEtMTQuNjI4NTcxLTE0LjYyODU3MnYtMTAyLjEzNjY4NWgtNjguMDgxMzcxYTE0LjYyODU3MSAxNC42Mjg1NzEgMCAxIDEgMC0yOS4yNTcxNDNoODcuNzcxNDI4YzguMDg5NiAwIDkuNTY3MDg2IDYuMjkwMjg2IDkuNTY3MDg2IDE0LjM2NTI1N3YxMTcuMDI4NTcxYTE0LjYyODU3MSAxNC42Mjg1NzEgMCAwIDEtMTQuNjI4NTcyIDE0LjYyODU3MnoiIGZpbGw9IiNjZjNmNzQiIHAtaWQ9IjM3MjAiPjwvcGF0aD48L3N2Zz4=);
    background-repeat: no-repeat;
    color: rgba(0,0,0,.7);
    margin-top: 0;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 20px 20px 60px;
    position: relative;}

头像转动

/*头像转动*/
.avatar{-webkit-transition:0.4s;-webkit-transition:-webkit-transform 0.4s ease-out;transition:transform 0.4s ease-out;-moz-transition:-moz-transform 0.4s ease-out;}
.avatar:hover{transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);}

调整网页宽度

/* 网页宽度 */
 .site {
     margin: 0 auto;
       max-width: 960px;
     overflow: hidden;
 }
html {
    margin-top: 32px !important;
}

小工具及首页文章标题下划线

/* 小工具标题字体样式以及下横线 */
 .widget-title {
     font-size: 18px;
     font-weight: normal;
     color: #21759b;
     border-bottom: 1px solid #ededed;
 }
/* 首页文章标题行高以及下横线 */
 .entry-header .entry-title {
     line-height: 2.181818182;
     border-bottom: 1px solid #ededed;
 }

二级、三级标题样式

/*标题样式*/
.entry-content h2, .comment-content h2, .mu_register h2 {
    font-weight: bold;
    background-color: #f6f6f6;
    margin: 20px 0;
    border-bottom: 0px solid #21759b;
    padding: 5px 12px;
    border-left: 5px solid #21759b;
}

.entry-content h3, .comment-content h3, .mu_register h3 {
    font-weight: bold;
    background-color: #f6f6f6;
    margin: 20px 0;
    border-bottom: 0px solid #53a7dc;
    padding: 0px 12px;
    border-left: 5px solid #53a7dc;
}

归档页面样式修改

#archives {
    position: relative;
}

#archives h3 {
    margin-bottom: 0;
    padding: 0 15px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 5px
}

#archives ul {
    list-style: none;
    margin: 0 30px;
    padding: 10px 0 20px 10px;
    border-left: 1px solid #ddd;
    font-size: 18px
}

#archives li {
    list-style: none;
    position: relative;
    line-height: 30px
}

#archives ul ul {
    margin: -15px 0 0 0;
    padding: 15px 0 10px 0
}

#archives ul ul li {
    padding: 0 0 0 15px
}

#archives ul ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    border-top: 5px dashed transparent;
    border-bottom: 5px dashed transparent;
    border-left: 10px solid #ddd
}

#al_expand_collapse {
    display: inline-block;
    line-height: 24px;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent;/*这个颜色和下面的我都做了一些修改*/
    background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent
}

#al_expand_collapse:hover {
    background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent
}

#archives em {
    padding-left: 5px;
    font-size: 12px;
    color: #777
}

#archives .al_mon {
    padding-left: 5px;
    font-size: 14px;
    font-weight: 700
}

#archives .al_mon:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 15px;
    width: 10px;
    height: 1px;
    background: #ddd
}

#archives .al_mon em {
    font-size: 12px;
    font-weight: 400
}

添加面包屑导航

functions.php 中加入下列代码:

// 面包屑导航
function breadcrumb() {
  // Check if is front/home page, return
  if ( is_front_page() ) {
    return;
  }
  // Define
  global $post;
  $custom_taxonomy  = ''; // If you have custom taxonomy place it here
  $defaults = array(
    'seperator'   =>  ' / ',
    'id'          =>  'breadcrumb',
    'classes'     =>  'breadcrumb',
    'home_title'  =>  esc_html__( '⚐ Home', '' )
  );
  $sep  = '<li class="seperator">'. esc_html( $defaults['seperator'] ) .'</li>';
  // Start the breadcrumb with a link to your homepage
  echo '<ul id="'. esc_attr( $defaults['id'] ) .'" class="'. esc_attr( $defaults['classes'] ) .'">';
  // Creating home link
  echo '<li class="item"><a href="'. get_home_url() .'">'. esc_html( $defaults['home_title'] ) .'</a></li>' . $sep;
  if ( is_single() ) {
    // Get posts type
    $post_type = get_post_type();
    // If post type is not post
    if( $post_type != 'post' ) {
      $post_type_object   = get_post_type_object( $post_type );
      $post_type_link     = get_post_type_archive_link( $post_type );
      echo '<li class="item item-cat"><a href="'. $post_type_link .'">'. $post_type_object->labels->name .'</a></li>'. $sep;
    }
    // Get categories
    $category = get_the_category( $post->ID );
    // If category not empty
    if( !empty( $category ) ) {
      // Arrange category parent to child
      $category_values      = array_values( $category );
      $get_last_category    = end( $category_values );
      // $get_last_category    = $category[count($category) - 1];
      $get_parent_category  = rtrim( get_category_parents( $get_last_category->term_id, true, ',' ), ',' );
      $cat_parent           = explode( ',', $get_parent_category );
      // Store category in $display_category
      $display_category = '';
      foreach( $cat_parent as $p ) {
        $display_category .=  '<li class="item item-cat">'. $p .'</li>' . $sep;
      }
    }
    // If it's a custom post type within a custom taxonomy
    $taxonomy_exists = taxonomy_exists( $custom_taxonomy );
    if( empty( $get_last_category ) && !empty( $custom_taxonomy ) && $taxonomy_exists ) {
      $taxonomy_terms = get_the_terms( $post->ID, $custom_taxonomy );
      $cat_id         = $taxonomy_terms[0]->term_id;
      $cat_link       = get_term_link($taxonomy_terms[0]->term_id, $custom_taxonomy);
      $cat_name       = $taxonomy_terms[0]->name;
    }
    // Check if the post is in a category
    if( !empty( $get_last_category ) ) {
      echo $display_category;
      echo '<li class="item item-current">'. get_the_title() .'</li>';
    } else if( !empty( $cat_id ) ) {
      echo '<li class="item item-cat"><a href="'. $cat_link .'">'. $cat_name .'</a></li>' . $sep;
      echo '<li class="item-current item">'. get_the_title() .'</li>';
    } else {
      echo '<li class="item-current item">'. get_the_title() .'</li>';
    }
  } else if( is_archive() ) {
    if( is_tax() ) {
      // Get posts type
      $post_type = get_post_type();
      // If post type is not post
      if( $post_type != 'post' ) {
        $post_type_object   = get_post_type_object( $post_type );
        $post_type_link     = get_post_type_archive_link( $post_type );
        echo '<li class="item item-cat item-custom-post-type-' . $post_type . '"><a href="' . $post_type_link . '">' . $post_type_object->labels->name . '</a></li>' . $sep;
      }
      $custom_tax_name = get_queried_object()->name;
      echo '<li class="item item-current">'. $custom_tax_name .'</li>';
    } else if ( is_category() ) {
      $parent = get_queried_object()->category_parent;
      if ( $parent !== 0 ) {
        $parent_category = get_category( $parent );
        $category_link   = get_category_link( $parent );
        echo '<li class="item"><a href="'. esc_url( $category_link ) .'">'. $parent_category->name .'</a></li>' . $sep;
      }
      echo '<li class="item item-current">'. single_cat_title( '', false ) .'</li>';
    } else if ( is_tag() ) {
      // Get tag information
      $term_id        = get_query_var('tag_id');
      $taxonomy       = 'post_tag';
      $args           = 'include=' . $term_id;
      $terms          = get_terms( $taxonomy, $args );
      $get_term_name  = $terms[0]->name;
      // Display the tag name
      echo '<li class="item-current item">'. $get_term_name .'</li>';
    } else if( is_day() ) {
      // Day archive
      // Year link
      echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . '年</a></li>' . $sep;
      // Month link
      echo '<li class="item-month item"><a href="'. get_month_link( get_the_time('Y'), get_the_time('m') ) .'">'. get_the_time('M') .'</a></li>' . $sep;
      // Day display
      echo '<li class="item-current item">'. get_the_time('jS') .' '. get_the_time('M'). '</li>';
    } else if( is_month() ) {
      // Month archive
      // Year link
      echo '<li class="item-year item"><a href="'. get_year_link( get_the_time('Y') ) .'">'. get_the_time('Y') . '年</a></li>' . $sep;
      // Month Display
      echo '<li class="item-month item-current item">'. get_the_time('M') .'</li>';
    } else if ( is_year() ) {
      // Year Display
      echo '<li class="item-year item-current item">'. get_the_time('Y') .'年</li>';
    } else if ( is_author() ) {
      // Auhor archive
      // Get the author information
      global $author;
      $userdata = get_userdata( $author );
      // Display author name
      echo '<li class="item-current item">'. 'Author: '. $userdata->display_name . '</li>';
    } else {
      echo '<li class="item item-current">'. post_type_archive_title() .'</li>';
    }
  } else if ( is_page() ) {
    // Standard page
    if( $post->post_parent ) {
      // If child page, get parents
      $anc = get_post_ancestors( $post->ID );
      // Get parents in the right order
      $anc = array_reverse( $anc );
      // Parent page loop
      if ( !isset( $parents ) ) $parents = null;
      foreach ( $anc as $ancestor ) {
        $parents .= '<li class="item-parent item"><a href="'. get_permalink( $ancestor ) .'">'. get_the_title( $ancestor ) .'</a></li>' . $sep;
      }
      // Display parent pages
      echo $parents;
      // Current page
      echo '<li class="item-current item">'. get_the_title() .'</li>';
    } else {
      // Just display current page if not parents
      echo '<li class="item-current item">'. get_the_title() .'</li>';
    }
  } else if ( is_search() ) {
    // Search results page
    echo '<li class="item-current item">Search results for: '. get_search_query() .'</li>';
  } else if ( is_404() ) {
    // 404 page
    echo '<li class="item-current item">' . 'Error 404' . '</li>';
  }
  // End breadcrumb
  echo '</ul>';
}

然后在 header.php 末尾添加下列代码:

<?php// 文章页面添加面包屑导航
if ( function_exists('breadcrumb') ) breadcrumb();
?>

最后在 style.css 中添加样式代码:

/* 面包屑导航样式 */
 .breadcrumb {
     font-size: 12px;
     color: #888;
     margin:0 auto;
 }
 .breadcrumb a {
     color: #888;
 }
 .breadcrumb a:not(.dots):hover {
     color: #CC0033;
 }
 .breadcrumb li {
     display: inline;
     line-height:20px;
 }

首页文章标题、正文标题下方添加元素

统计每篇文章的字数代码:在 functions.php 文件添加代码。

//字数统计
function zm_count_words ($text) {
    global $post;
    $output='';
    if (empty($text)) {
        $text = $post->post_content;
        if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '<span class="word-count">共' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') .'字</span>';
        return $output;
    }
}

打开 content.php,找到以下代码:

<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>

然后在 <?php else: ?>上面添加以下代码:

<p class="meta"><!--文章页标题下标签-->
Auth:<?php the_author_nickname(); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Date:<?php echo the_time('Y/m/j'); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Cat:<?php the_category('、'); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Word:<?php echo zm_count_words($text); ?>
</p>

content.php 找到 <footer></footer>,将这两个标签内(包括这两个标签)的所有内容删除,并替换为以下代码:

<?php if ( is_single() ) : ?>
            <footer class="content-foot"><!--文章页脚部显示修改-->
                <?php the_tags('⚑Tags:','、'); ?>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            </footer><!-- .content-foot -->
        <?php else : ?>
            <footer class="home-foot"><!--除文章页脚部显示修改-->
                ◷<?php echo the_time('Y/m/j'); ?>&nbsp&nbsp
                @<?php the_author_nickname(); ?>&nbsp&nbsp
                ▤<?php the_category('、'); ?>&nbsp&nbsp
                ⚑<?php the_tags('','、'); ?>
                <?php edit_post_link( __( '——编辑', 'twentytwelve-child' ), '<span class="edit-link">', '</span>' ); ?>
            </footer><!-- .entry-meta -->
        <?php endif;  // is_single() ?>

style.css 中添加样式代码:

/* 文章页标题、meta块、和脚部样式修改 */
#content .title {
    font-size: 24px;
    padding-bottom: 24px;
    text-align: center;
}
#content .meta {
    font-size: 13px;
    padding: 10px 0 10px 0;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    text-align: center;
    letter-spacing: 0.035rem;
}
#content .content-foot {
    font-size: 13px;
    padding: 10px 0 10px 24px;
    margin: 0 -24px -24px -24px;
    letter-spacing: 0.035rem;
    background-color: #ededed;
}

禁止加载语言包

functions.php 中加入下列代码:

//关闭翻译
add_filter('locale', function($locale) {
    $locale = ( is_admin() ) ? $locale : 'en_US';
    return $locale;
});

为摘要添加“继续阅读”字样

functions.php 中加入下列代码:

//为摘要添加继续阅读字样
// Remove the ... from excerpt and change the text
function change_excerpt_more()
{
function new_excerpt_more($more)
{
// Use .read-more to style the link
return '......<span class="read-more"> <a href="' . get_permalink($post->ID) . '"><br/><br/>继续阅读»»»</a></span>';
}
add_filter('excerpt_more', 'new_excerpt_more');
}
add_action('after_setup_theme', 'change_excerpt_more');

页面添加 html 后缀

functions.php 中加入下列代码:

//WordPress页面链接添加html后缀
function html_page_permalink() {
global $wp_rewrite;
if ( !strpos($wp_rewrite->get_page_permastruct(), '.html')){
$wp_rewrite->page_structure = $wp_rewrite->page_structure . '.html';
}
}
add_action('init', 'html_page_permalink', -1);

修改全局字体为“霞鹜文楷”

header.php 添加下列代码:

<!-- Screen version -->
<link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/style.css" />
  <style>
    body {
      /* Screen version */
      font-family: "LXGW WenKai Screen", sans-serif;
    }
  </style>

网站统计小工具

在主题目录新建文件 widget-websitestat.php,并添加下列代码:

<?php
// WordPress统计信息小工具

// 定义小工具的类 EfanWebsitestat
class EfanWebsitestat extends WP_Widget{

  function __construct(){
    // 定义小工具的构造函数
    $widget_ops = array('classname' => 'widget_Websitestat', 'description' => '显示网站的统计信息');
//     $this->WP_Widget(false, '网站统计', $widget_ops);
    parent::__construct( false, '网站统计', $widget_ops);
  }

  function form($instance){
    // 表单函数,控制后台显示
    // $instance 为之前保存过的数据
    // 如果之前没有数据的话,设置默认量
    $instance = wp_parse_args(
      (array)$instance,
      array(
        'title' => '网站信息统计',
        'establish_time' => '2021-01-01'
      )
    );

    $title = htmlspecialchars($instance['title']);
    $establish_time = htmlspecialchars($instance['establish_time']);

    // 表格布局输出表单
    $output = '<table>';
    $output .= '<tr><td>标题</td><td>';
    $output .= '<input id="'.$this->get_field_id('title') .'" name="'.$this->get_field_name('title').'" type="text" value="'.$instance['title'].'" />';
    $output .= '</td></tr><tr><td>建站时间:</td><td>';   
    $output .= '<input id="'.$this->get_field_id('establish_time') .'" name="'.$this->get_field_name('establish_time').'" type="text" value="'.$instance['establish_time'].'" />';   
    $output .= '</td></tr></table>';  
    echo $output;   
  }

  function update($new_instance, $old_instance){
    // 更新数据的函数
    $instance = $old_instance;
    // 数据处理
    $instance['title'] = strip_tags(stripslashes($new_instance['title']));
    $instance['establish_time'] = strip_tags(stripslashes($new_instance['establish_time']));
    return $instance;
  }

  function widget($args, $instance){
    extract($args); //展开数组
    $title = apply_filters('widget_title',empty($instance['title']) ? ' ' : $instance['title']);
    $establish_time = empty($instance['establish_time']) ? '2021-01-01' : $instance['establish_time'];
    echo $before_widget;
    echo $before_title . $title . $after_title;
    echo '<div class="widgest-boys"><ul>';
    $this->efan_get_websitestat($establish_time);
    echo '</ul></div>';
    echo $after_widget;
  }

  function efan_get_websitestat($establish_time){
    // 相关数据的获取
    global $wpdb;
    $count_posts = wp_count_posts();
    $published_posts = $count_posts->publish;
    $comments_count = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments");
    $time = floor((time()-strtotime($establish_time))/86400);
    $count_tags = wp_count_terms('post_tag');
    $count_pages = wp_count_posts('page');
    $link = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->links WHERE link_visible = 'Y'"); 
    $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");
    $last = $wpdb->get_results("SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')");
    $last = date('Y-m-d', strtotime($last[0]->MAX_m));
    $total_views = $wpdb->get_var("SELECT SUM(meta_value+0) FROM $wpdb->postmeta WHERE meta_key = 'views'");  
    // 显示数据
    $output = '<div class="widgest-bg widgest-bg1 wb-top"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-snowflake-o" aria-hidden="true"></i> 文章总数:';
    $output .= $published_posts;
    $output .= ' 篇</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg2"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-paper-plane-o" aria-hidden="true"></i> 评论数目:';
    $output .= $comments_count;
    $output .= ' 条</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg3"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-star-o" aria-hidden="true"></i> 标签总数:';
    $output .= $count_tags;
    $output .= ' 个</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg4"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-pie-chart" aria-hidden="true"></i> 浏览次数:';
    $output .= $total_views;
    $output .= ' 次</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg5"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-link" aria-hidden="true"></i> 友链总数:';
    $output .= $link;
    $output .= ' 个</li></div></div></div>';

    $output .= '<div class="widgest-bg widgest-bg7"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-refresh" aria-hidden="true"></i> 运行天数:';
    $output .= $time;
    $output .= ' 天</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg8"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-calendar" aria-hidden="true"></i> 建站时间:';
    $output .= $establish_time;
    $output .= '</li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg9"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-clock-o" aria-hidden="true"></i> 最后更新:';
    $output .= $last;
    $output .= '</li></div></div></div>';
    //   页面生成耗时+数据库查询  
    $output .= '<div class="widgest-bg widgest-bg10"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-podcast" aria-hidden="true"></i> 数据查询:';
    $output .= get_num_queries();
    $output .= ' 次 </li></div></div></div>';
    $output .= '<div class="widgest-bg widgest-bg11 wb-bottom"><div class="widgest-main"><div class="widgest-meat"><li><i class="fa fa-hourglass-half" aria-hidden="true"></i> 生成耗时:';
    $output .= timer_stop(0,5);
    $output .= '秒</li></div></div></div>';
    echo $output;
  }
}

function EfanWebsitestat(){
  // 注册小工具
  register_widget('EfanWebsitestat');
}

add_action('widgets_init','EfanWebsitestat');

?>

然后在 functions.php 文件中加入下列代码:

//添加站点统计小工具
include("widget-websitestat.php");

最后在网站后台添加小工具即可。


其他

百度统计

footer.php 文件中 </body> 之前,添加如下代码:

<!--百度统计-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?71e39fd0f5218799bd4c9fc2016ee4b3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

鼠标点击烟花特效

footer.php 文件中 </body> 之前,添加如下代码:

<!--网站添加鼠标点击烟花特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://www.5iehome.cc/wp-content/themes/argon/firework.js"></script>

依米花播放器

footer.php 文件中 </body> 之前,添加如下代码:

<!--依米花播放器-->
<script id="xplayer" src="https://music.piphp.com/Static/player/player.js" key="6280ecc0ce424" m="1"></script>

网站添加看板娘

footer.php 文件中 </body> 之前,添加如下代码:

<!--网站添加看板娘-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            //jsonpath控制显示模型
            jsonPath: "https://imuncle.github.io/live2d/model/wanko/wanko.model.json",
        "scale": 1
        },
        "display": {
            "position": "right", //表现位置
            "width": 100,  //模型的宽度
            "height": 200, //模型的高度
            "hOffset": 220,
            "vOffset": -40
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

参考文档

【END】

版权归属: E家之长
本文链接: https://www.5iehome.cc/archives/wordpress-theme-optimization-summary.html
许可协议: 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
暂无评论

发送评论 编辑评论


上一篇
下一篇