WordPress 美化 基于 Argon 主题

想到啥写啥，可以看左侧的目录或者使用Ctrl+F来找自己想要的内容

随机Banner标题

在argon主题的设置选项中有一个自定义banner标题的选项，如果想要每天换一个或者随机使用不同的标题，手动修改很麻烦，我们可以通过修改主题文件来实现。首先在网站根目录下新建一个txt文件用于存储句子，每个句子占一行，之后从后台进入外观->主题文件编辑器->header.php，通过Ctrl+F搜索class名为banner-title-inner的标签，我们修改text=""中的内容即可，这里给出一个例子

将<?php echo $banner\_title;?>替换为以下内容

<?php
$poetry = file("./poetry.txt",FILE_IGNORE_NEW_LINES);
echo $poetry[rand(0, count($poetry) - 1)];
?>

这里我在网站根目录下新建了一个名为poetry.txt的文件，如果你的网站使用的是云储存，这里也可以填写目标url，file()方法将文件按行读入数组中，所以文件内容必须以行来分隔，再通过rand()方法随机取一个句子，如果不想使用文件，也可以直接创建数组，使用以下语法

<?php
$arr = array("str1", "str2");
echo $arr[rand(0, count($arr) - 1)];
?>

今年过去百分比

将sidebar.php中if ($sidebar\_subtitle != '')表达式之后的内容替换即可

<span id="percentage-text" class="leftbar-banner-subtitle text-white"></span>
<script type="text/javascript">
    function percentageOfYear() {
        const today = new Date();
        const startOfYear = new Date(today.getFullYear(), 0, 1);
        const endOfYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59);
        const diff = today.getTime() - startOfYear.getTime();
        const yearDiff = endOfYear.getTime() - startOfYear.getTime();
        const percentage = ((diff / yearDiff) * 100).toFixed(6);
        const percentageStr = `今年已经过去 ${percentage}%`;
        document.getElementById("percentage-text").innerHTML = today;
        setTimeout(percentageOfYear, 1000);
    }
    percentageOfYear();
</script>

左侧菜单栏动画

在额外css中添加以下代码

@media screen and (min-width: 900px) {
  .leftbar-menu-item a {
    transition: all 0.3s ease-out;
  }
  .leftbar-menu-item a:hover {
    padding-left: calc(50% - 30px);
    font-weight:bold;
  }
}

卡片背景透明

在后台进入外观->自定义->额外CSS，添加如下代码

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.9) !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.8) !important;
/*     backdrop-filter: blur(6px);
    -webkit-backdrop-filter:blur(6px); */
}

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

关于backdrop-filter属性，就是类似于毛玻璃的模糊效果，个人建议不要开，开启之后虽然会有一个比较好的观感，但是对性能的影响非常大，访客访问你的网页会占用大量的资源，直观的影响就是耗电和卡顿，如果非要开启的话，建议只打开分类卡片的模糊效果，另外如果开启了主题色沉浸，夜间模式下的透明效果可能需要修改颜色，可以尝试自己调整来达到最佳效果

分类卡片文字居中

在后台进入外观->自定义->额外CSS，添加如下代码

#content > div.page-information-card-container > div > div{
    text-align:center;
}

网站底部信息

备案号以及版权

这里是本站使用的静态内容，也就是备案号，版权等内容，将其中的文字或者链接替换成自己的即可，代码可以放在Argon主题选项->页脚内容中，也可以放在外观->主题文件编辑器->footer.php中的