本文最后更新于105 天前，其中的信息可能已经过时，如有错误请发送邮件到1979007616@qq.com
说明
博客所有美化方法均来自网络，我只是站在巨人的肩膀上而已，特别感谢大佬们的无私分享。
本文章记录本人博客中所用到的美化方法。
整体代码
CSS样式
具体修改内容见注释，添加位置：外观-自定义-额外CSS
单项设置（代码）
主题菜单栏设置
设置博客主题导航栏框架
外观-菜单
字体
字体可以在字体天下、100font等网站里免费下载。通过转换网站获得woff2格式文件。你可以上传到网站根目录或者某个CDN里，然后添加下列额外CSS（具体方法见下）：
/*设置网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体*/
@font-face{
font-family:btfFont;
src: url(fonts/13.woff2) format('woff2')
}
body{
font-family:"btfFont" !important
}以下提供其他几种url，具体看自己的选择（区别在于加载速度，可查看WordPress博客加速）
https://img.crowya.com/font/FZFWZZAY.woff2
https://cdn.jsdelivr.net/gh/xiemuhou/WPFonts/13.woff2全页樱花特效及鼠标移动特效
编辑主题页脚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://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");
// 鼠标移动的泡泡特效
// $.getScript("https://bensz.onmicrosoft.cn/bloghelper/mouse/joe/censor10.js");
}
}
</script>
<!--全页特效结束-->鼠标指针外观
编辑主题页脚footer.php文件，在末尾的</body>上方添加以下代码：
<!--鼠标指针外观2 开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--鼠标指针外观2 结束-->博客向上滑动背景图片虚化
编辑主题页脚footer.php文件，在末尾的</body>上方（以下所有修改都是在此标签上方，不做重复说明），添加以下代码：
<!--滚动模糊-->
<script>
window.addEventListener("scroll", function (e) {
if (window.scrollY > window.innerHeight * 0.3) {
document.querySelector("#content").classList.add("scrolled");
} else {
document.querySelector("#content").classList.remove("scrolled");
}
});</script>
<style>
#content.scrolled::before, #content.scrolled::after {
filter: blur(6px); /*数字越大虚化越明显*/
transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
transition: filter .3s ease, transform .3s ease !important;
filter: blur(0px);
transform: scale(1.02);
}
</style>Argon主题点击文章概要也可以进入文章
Argon主题选项-布局，找到自己的文章卡片布局
根据布局选择不同的preview.php文件，外观-主题文件编辑器-[template-parts]-[content-preview.php]找到class=”post-content”，在后面添加一行代码：
onclick="window.location.href='<?php the_permalink(); ?>'" style="cursor: pointer"个人暂时没有看出这个设置的太大用处，美观性也一般；建议使用布局2设置，不要加代码，外观展示可参考：建站笔记 – 鸦鸦的巢穴 (crowya.com)
小工具：时间进度条
博客左侧栏有一个时间进度条，显示一年的时间进度，具体做法如下：
- 下载
progress-wrapper.php文件。下载地址：Alist; Github。 - 将
progress-wrapper.php保存在WordPress根目录下的某个位置。比如，我放的位置是./fonts/progress-wrapper.php。 - 在主题编辑器中找到
sidebar.php文件。 - 在
sidebar.php的<div id="leftbar_part2" class="widget widget_search card bg-white shadow-sm border-0">标签前引用命令：<?php require('./fonts/progress-wrapper.php'); ?>，如图所示：
progress-wrapper.php文件中有一些参数可根据实际情况进行修改。
友链页面设置
页面-添加页面，添加一个简码区块，再里面添加一段代码[friendlinks/]，如下图：
右下角回到顶部图标修改-JavaScript方式
编辑主题页脚footer.php文件，添加以下代码：
<!--回顶图标修改-->
<script>
$("#fabtn_back_to_top > span > i").removeClass("fa fa-angle-up");
$("#fabtn_back_to_top > span > i").addClass("fa fa-arrow-up");
$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
</script>说说标题改成脑电波-JavaScript方式
编辑主题页脚footer.php文件，添加以下代码：
<!--以下内容每次跳转新页面都执行，pjax额外处理-->
<script>
window.pjaxLoaded = function(){
//说说标题替换为脑电波
if (window.location.pathname == "/talklove/") { //talklove根据说说页面的url命名修改
if ($("#content > div.page-information-card-container > div > div").length > 0) {
var temp_str = document.querySelector("#content > div.page-information-card-container > div > div").innerHTML.replace(/说说/g, "脑电波");
document.querySelector("#content > div.page-information-card-container > div > div").innerHTML = temp_str;
$("#content > div.page-information-card-container > div > div > p").append('<br>由<a href="https://t.me/xiemuhou" target="_blank">谢幕后</a>频道自动同步');
$("#content > div.page-information-card-container > div > div > p > i").removeClass("fa fa-quote-left");
$("#content > div.page-information-card-container > div > div > p > i").addClass("fa fa-bolt");
}
}
//卡片3D效果，包含说说和文章
if (screen.width >= 768 && !isSafari) {
VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full), .shuoshuo-preview-container"), {
reverse: true, // reverse the tilt direction
max: 8, // max tilt rotation (degrees)
startX: 0, // the starting tilt on the X axis, in degrees.
startY: 0, // the starting tilt on the Y axis, in degrees.
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1.02, // 2 = 200%, 1.5 = 150%, etc..
speed: 600, // Speed of the enter/exit transition
transition: false, // Set a transition on enter/exit.
axis: "y", // What axis should be banned. Can be "x", "y", or null
reset: true, // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false, // if it should have a "glare" effect
"max-glare": 0.8, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
"mouse-event-element": null, // css-selector or link to HTML-element what will be listen mouse events
gyroscope: true, // Boolean to enable/disable device orientation detection,
gyroscopeMinAngleX: -45, //陀螺仪最小角度X
gyroscopeMaxAngleX: 45, //陀螺仪最大角度X
gyroscopeMinAngleY: -45, //陀螺仪最小角度
gyroscopeMaxAngleY: 45, //陀螺仪最大角度
})
}
}
window.pjaxLoaded();
</script>首页说说左上角图标修改
主题 – 自定义 – 额外 CSS，添加以下内容：
/*首页说说左上角图标修改*/
.shuoshuo-preview-container:before {
background-size: 50%;
background-position: 50% 45%;
background-image: url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0MjM2MjAwNjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzYxLjY2ODMzMiAzMjMuNDM3NzEycTEwLjMxMzE0MyAxMS40MTAyODYgNC4wMjI4NTcgMjUuMTYxMTQzbC0zMDguNTg5NzEyIDY2MS4xMzgyODFxLTcuNDYwNTcxIDE0LjI2Mjg1Ny0yMy45OTA4NTcgMTQuMjYyODU3LTIuMjY3NDI5IDAtNy45NzI1NzEtMS4xNzAyODYtOS43MjgtMi44NTI1NzEtMTQuNTU1NDI4LTEwLjgyNTE0M3QtMi41Ni0xNy4xMTU0MjhsMTEyLjU2Njg1Ni00NjEuNjc3NzExLTIzMi4wMDkxNDEgNTcuNzA5NzE0cS0yLjI2NzQyOSAwLjU4NTE0My02Ljg3NTQyOSAwLjU4NTE0My0xMC4zMTMxNDMgMC0xNy43MDA1NzEtNi4yOTAyODYtMTAuMzEzMTQzLTguNTU3NzE0LTcuNDYwNTcxLTIyLjMwODU3MWwxMTQuODM0Mjg1LTQ3MS40MDU3MTFxMi4yNjc0MjktNy45NzI1NzEgOS4xNDI4NTctMTMuMTY1NzE0dDE2LjAxODI4Ni01LjEybDE4Ny40NjUxNDIgMHExMC44MjUxNDMgMCAxOC4yODU3MTQgNy4xNjh0Ny40NjA1NzEgMTYuODIyODU3cTAgNC41MzQ4NTctMi44NTI1NzEgMTAuMzEzMTQzbC05Ny43MTg4NTYgMjY0LjU1NzcxMiAyMjYuMzAzOTk4LTU2LjAyNzQyOHE0LjUzNDg1Ny0xLjE3MDI4NiA2Ljg3NTQyOS0xLjE3MDI4NiAxMC44MjUxNDMgMCAxOS40NTYgOC41NTc3MTR6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyNTI0Ij48L3BhdGg+PC9zdmc+);
}
.shuoshuo-preview-container:hover:before {
background-position: 50% 50%;
background-size: 60%;
}
/*折叠说说颜色修改*/
.shuoshuo-content.shuoshuo-folded:after {
border-radius: 10px;
background: linear-gradient(180deg, transparent 0%, var(--mycolor) 100%);
}
:root {--mycolor: #e6ddd3;}
html.darkmode {--mycolor: #424242;}点击头像跳转相关页面-JavaScript方式
编辑主题页脚footer.php文件，添加以下代码：
<!--点击头像名字跳转相关页面-->
<script>
window.pjaxLoaded = function () {
//站点概览点击头像或作者名跳转到关于页
$("#leftbar_overview_author_image").wrapAll('<a href="/about" /a>');
$("#leftbar_overview_author_name").wrapAll('<a href="/about" /a>');
}
window.pjaxLoaded();
</script>调用一言API
第一步：在模板函数 (functions.php)中添加Hitokoto()功能函数。
//一言API
function Hitokoto(){
$url = 'https://v1.hitokoto.cn/?encode=json'; // 不限定内容类型
// $url = https://v1.hitokoto.cn/?encode=json&c=d'; // 限定内容类型
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 6);
$response = curl_exec($ch);
if($error=curl_error($ch)){return '欢迎来到我的博客';} // 如果6s内，一言API调用失败则输出这个默认句子
curl_close($ch);
$array_data = json_decode($response,true);
$lxtx_content = $array_data['hitokoto']; //.'——'.$array_data['from']; // 输出格式：语句——出处
return $lxtx_content;
}第二步：在需要显示的地方调用函数，比如边栏 (sidebar.php)中的公告栏。
<?php if (get_option('argon_sidebar_announcement') != '') { ?>
<div id="leftbar_announcement" class="card bg-white shadow-sm border-0">
<div class="leftbar-announcement-body">
<div class="leftbar-announcement-title text-white" style="text-align: center"><?php _e('一言', 'argon');?></div>
<div class="leftbar-announcement-content text-white" style="text-align: center"><?php echo get_option('argon_sidebar_announcement'); ?><?php echo Hitokoto(); ?></div>
</div>
</div>
<?php } ?>效果图如下：
站点概览点击文章跳转到时间轴
编辑主题页脚footer.php文件，添加以下代码：
<!--站点概览点击文章跳转到时间轴-->
<script>
window.pjaxLoaded = function(){
document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").removeAttribute("style");
document.querySelector("#leftbar_tab_overview > nav > div.site-state-item.site-state-posts > a").setAttribute("href","/pigeonhole/");
}
window.pjaxLoaded();
</script>小窗口模式下左上角按钮打开左侧栏
编辑主题页脚footer.php文件，添加以下代码：
//小窗口模式下左上角按钮打开左侧栏
<script>
document.querySelector("#navbar-main > div > button").removeAttribute("data-target");
document.querySelector("#navbar-main > div > button").setAttribute("id","fabtn_open_sidebar");
</script>【关于】页面展示网站运行时间
新建一个关于页面，插入一个自定义HTML，输入以下代码：
<script>
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
</script>
<script type="text/javascript" language="javascript">
function setTime() {
// 博客创建时间秒数，时间格式中，月比较特殊，是从0开始的，所以想要显示5月，得写4才行，如下
var create_time = Math.round(new Date(Date.UTC(2023, 11, 7, 0, 0, 0))
.getTime() / 1000);
// 当前时间秒数,增加时区的差异
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + ' 年 ' + currentTime[1] + ' 天 '
+ currentTime[2] + ' 时 ' + currentTime[3] + ' 分 ' + currentTime[4]
+ ' 秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
setInterval(setTime, 1000);
</script>
<p>本博客始建于 2023 年 12 月 7 日，距今已艰难运行 <span id="htmer_time"></span>。</p>博客五彩小图标
Argon 主题内置了 Font Awesome 4 图标库，使用 <i class="fa fa-xxxx"></i> 添加图标。其中 xxxx 为图标名。
如果想要添加颜色也可以使用<i class="fa fa-xxxx" style="red"></i> ，但是由于图标本身限制，颜色单一，显示效果一般。
于是有了下面的方法，通过图标网站直接复制五颜六色的图标，必须是可直接复制的，不同与下载的icon图标，在必应上可以搜索到很多网站，大都差不多，例如：🐢 EmojiTerra 🌍 | Emoji Copy Paste | Get Emoji Meanings
Github Repo信息卡样式修改
wordpress自带的Github Repo信息卡样式有点丑，所以我做了一点小小的修改。
添加位置：外观-自定义-额外CSS，代码如下：
/* 修改github样式卡的背景颜色 */
.github-info-card {
/*设置背景颜色*/
background-color: #A8E9F0 !important;
}
/* 修改github图标样式 */
.github-info-card-header a{
color: red !important;
}
/* 修改github用户名和项目名样式 */
.github-info-card-name {
color:#464AFC;
font-weight: bold;
margin-left:1rem;/* 偏移量 */
}
/* 修改github项目描述样式 */
.github-info-card-description{
color: black; /* 设置字体颜色 */
margin-left:1rem;/* 偏移量 */
}
/* 修改github项目Website样式 */
.github-info-card-description a{
color:#464AFC; /* 设置字体颜色 */
margin-left:1rem;/* 偏移量 */
}
/* 修改github star样式 */
.github-info-card-bottom{
color: #0000FF;
}效果如下：
Argon主题自带设置
Argon主题选项每个设置都值得去设置，让博客更加美观，设置选项下面都有说明，仔细阅读后设置。
页脚内容
Argon主题选项-页脚-页脚内容，将以下代码复制进去即可，页脚内容代码：
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
<span class="badge-value bg-orange">
<!-- 备案链接 -->
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">湘ICP备2023038664号</a>|
<a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank" one-link-mark="yes" rel=\"noreferrer\" >
<img src="https://upyun.xmhweb.cn/blogImage/baianLogo.png" style="width: 15px; height: 15px;"/>
湘公网安备43020002000016</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN</span>
<span class="badge-value bg-green">
<!-- 又拍云链接 -->
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" one-link-mark="yes">
<img src="https://upyun.xmhweb.cn/2023/12/又拍云_logo6.png" alt="Upyun" style="width: 50px; height: 15px;" />
</a>
</span>
<span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
<span class="badge-value bg-green">
<!-- wordpress链接 -->
<a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">
WordPress</a></span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
<span class="badge-value bg-red">2023-2024</i>
<a href="https://www.xmhweb.cn/" target="_blank" one-link-mark="yes">@ xmh
</span>
</script>
</div>
<!-- 运行时间 -->
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span
class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
days
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S
</span>页脚内容样式：
<!-- 页脚CSS样式 -->
<style>
/* 核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .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-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}
</style>
<!-- 页脚js样式 -->
<script no-pjax="">
var blog_running_days = document.getElementById("blog_running_days");
var blog_running_hours = document.getElementById("blog_running_hours");
var blog_running_mins = document.getElementById("blog_running_mins");
var blog_running_secs = document.getElementById("blog_running_secs");
function refresh_blog_running_time() {
var time = new Date() - new Date(2023, 11, 7, 0, 0, 0); /*此处日期的月份改为自己真正月份的前一个月*/
var d = parseInt(time / 24 / 60 / 60 / 1000);
var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
var s = parseInt((time % (60 * 1000)) / 1000);
blog_running_days.innerHTML = d;
blog_running_hours.innerHTML = h;
blog_running_mins.innerHTML = m;
blog_running_secs.innerHTML = s;
}
refresh_blog_running_time();
if (typeof bottomTimeIntervalHasSet == "undefined") {
var bottomTimeIntervalHasSet = true;
setInterval(function () {
refresh_blog_running_time();
}, 500);
}
</script>左下角音乐播放
Argon主题选项-脚本-页尾脚本，将以下代码复制进去即可
<!--底部音乐-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js
server="netease"
type="playlist"
id="7010595794"
fixed="true"
mini="true"
order="list"
loop="all"
preload="auto"
list-folded="true"
lrc-type="0"
>
</meting-js>遇到的问题及解决方法
用户头像不显示
前提：用户-个人资料-资料图片，先在Gravatar设置头像进行关联，如果不显示再进行修改操作
在模板函数 (functions.php)中添加一下代码：
/*修复Gravatar头像在wordpress上无法显示问题*/
if ( ! function_exists( 'get_cravatar_url' ) ) {
/**
*替换Gravatar头像为Cravatar头像
*
* @param string $url
*
* @return string
*/
function get_cravatar_url( $url ) {
$sources = array(
'www.gravatar.com',
'cn.gravatar.com',
'secure.gravatar.com',
'0.gravatar.com',
'1.gravatar.com',
'2.gravatar.com'
);
return str_replace( $sources, 'cravatar.cn', $url );
}
add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
}更新失败。 此响应不是合法的JSON响应。
编写文章时提示“更新失败。 此响应不是合法的JSON响应。”，具体原因未知，可在宝塔面板中的网站设置-伪静态选择wordpress。代码如下：
location /
{
try_files $uri $uri/ /index.php?$args;
}
rewrite /wp-admin$ $scheme://$host$uri/ permanent;结语
还有很多美化方法借助了插件实现WordPress插件及配置 – 谢幕后 (xmhweb.cn)
以下大佬们的文章还有很多美化，自己喜欢的才是合适的。
相关链接
Argon官方文档：Argon Theme Docs (solstice23.top)
Docker系列 WordPress系列 特效 – Bensz (hwb0307.com)
Argon主题博客美化 – Echo小窝 (liveout.cn)
评论