共计 4459 个字符，预计需要花费 12 分钟才能阅读完成。
这是一个系列，如果在本文遇到知识盲区可以回顾一下之前的文章：
在真正开始写文章之前，我花了很多时间在寻找和折腾 WordPress 主题上。
我很喜欢 Substack 这种简约又能突出重点的风格，不知道为什么很多主题喜欢首页一篇文章怼大半个版面。
而我本人能力有限复制不了这种风格，最终看起来还算舒服的 Puock 成为了我的选择，并且它真的有很多配置也很好用。
具体的配置教程我就不展开了，作者曾在 B 站上发过 视频教程，相信会比文字生动得多。
我就说一些我魔改的部分：
Live2D 小人儿
谁能拒绝网站下面有一个会动的嘉然小人儿呢？
我对嘉然没啥感觉，但这个美术实在是太棒了！B 站大佬 木果阿木果 出品。
如果你也想要同款 Live2D，下载我上传的 压缩包，解压。
找到 load.js 文件，用记事本打开，修改箭头指的两处为你的主题名字，然后上传到服务器的主题文件夹中。
接着同样修改下面的代码：
</script>
<!--live2d-->
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/TweenLite.js"></script>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/live2dcubismcore.min.js"></script>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/pixi.min.js"></script>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/cubism4.min.js"></script>
<link href="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/pio.css" rel="stylesheet" type="text/css"/>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/pio.js"></script>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/pio_sdk4.js"></script>
<script src="/wp-content/themes/wordpress-theme-puock-2.8.17/live2d/load.js"></script>把它放到 Puock 主题配置的【全站底部广告内容】里，这样就有嘉然看了。
全站顶部广告
如果你有想推广的内容，那肯定是放网站顶部比较好。
这段代码也是我让 Gemini 帮我写的，如果有什么问题可以随时让它修改，甚至你可以把网址给它让它看看网页代码，AI 真的太好用了你知道吗：
<div style="text-align: center; font-size: 13px; line-height: 1.8; color: inherit;">
<span style="font-weight: bold; margin-right: 5px;">🔥 加密交易所注册优惠:</span>
<span style="display: inline-block; margin: 0 8px; white-space: nowrap;">
<span style="color: #F0B90B; font-weight: bold;">🔶 币安(Binance)</span>
<a href="https://binance.com/join?ref=SRXT5KUM" target="_blank" style="color: #F0B90B; font-weight: bold; text-decoration: underline;"> 点击注册 </a>
<span style="opacity: 0.8;">(邀请码:SRXT5KUM/ 合约:416378774)</span>
</span>
<span style="display: inline-block; margin: 0 8px; white-space: nowrap;">
<span style="font-weight: bold;">⚫ 欧易(OKX)</span>
<a href="https://okx.com/join/A999998" target="_blank" style="color: inherit; font-weight: bold; text-decoration: underline;"> 点击注册 </a>
<span style="opacity: 0.8;">(邀请码:A999998)</span>
</span>
</div>文章内容底部广告
我觉得放文章顶部广告挺打扰观感的，但底部广告还是要的，于是我又让 Gemini 给我写了一个。
因为这个主题的底部广告竟然是在【正文完】后面，都看完了还算什么广告？
因此我只好使用 Code Snippets 魔改，Gemini 写的卡片一直间距很大，最后找到了问题所在：
WordPress 的编辑器有一个“自动纠正”功能（wpautop），它会把代码里的换行符自动转换成标签或换行。因为 AI 为了让你看清楚代码，写了很多换行，结果 WordPress 把这些换行全变成了页面上的大片空白。
最终效果如图：
代码太多，发出来会被网页渲染，如果需要的话可以私我。
修复小瑕疵
这个主题文章前面有一个蓝色的小方块，意味不明，我也不是很喜欢，还是加了代码把它去掉了。
/**
* 隐藏文章标题前的蓝色装饰小块
* 作用于: .title-l-c.bg-primary 元素
*/
add_action('wp_head', function() {
echo '
<style>
/* 强制隐藏蓝色小竖条 / 色块 */
span.title-l-c.bg-primary {display: none !important;}
</style>';
});个人介绍
最后就是这里的个人介绍了，可以用 HTML 或者 JS，依旧是让 Gemini 帮我写。
填在【外观】-【自定义】-【小工具】-【首页侧边栏】-【关于博主】里：
虽然 AI 的代码能力很强，但还是改了好多次，代码如下：
<div class="oc-sidebar-widget">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.oc-sidebar-widget {
width: 100%;
/* 关键：强制继承父元素的文字颜色，确保夜间模式文字变白 */
color: inherit;
font-family: inherit;
padding-top: 5px;
}
/* 1. 社交图标 (推特 /TG/Substack) */
.oc-social-row {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 15px;
}
.oc-social-icon {
font-size: 1.3rem;
/* 关键：使用 currentColor 让图标颜色自动跟随文字颜色 */
color: currentColor;
opacity: 0.6; /* 稍微透明一点，显得不刺眼 */
transition: all 0.2s;
display: flex;
align-items: center;
text-decoration: none;
}
.oc-social-icon:hover {
opacity: 1;
transform: scale(1.1);
}
/* 保持品牌色悬停效果 */
.oc-social-icon.twitter:hover {color: #1DA1F2; opacity: 1;}
.oc-social-icon.telegram:hover {color: #0088cc; opacity: 1;}
.oc-social-icon.substack:hover {color: #FF6719; opacity: 1;}
/* 2. 支持文案 (半透明蓝色背景) */
.oc-support-box {
/* 使用 rgba 实现透明蓝，深色浅色背景都通用 */
background-color: rgba(59, 130, 246, 0.12);
color: #3b82f6;
padding: 8px;
border-radius: 6px;
font-size: 0.8rem;
text-align: center;
font-weight: 500;
margin-bottom: 12px;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* 3. 链接区域容器 */
.oc-links-container {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 并排容器 */
.oc-dual-row {
display: flex;
gap: 8px;
width: 100%;
}
/* 通用按钮样式 (核心修改) */
.oc-btn {
/* 关键：背景使用通用半透明灰，不再是死板的 #f3f4f6 */
/* 白天：白色背景 + 灰色遮罩 = 浅灰 */
/* 晚上：深色背景 + 灰色遮罩 = 深灰按钮 */
background-color: rgba(127, 127, 127, 0.08);
/* 关键：文字颜色跟随网站主题 */
color: inherit;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
/* 加一个极淡的边框，增加夜间模式的层次感 */
border: 1px solid rgba(127, 127, 127, 0.15);
}
.oc-btn:hover {
/* 悬停时加深一点遮罩 */
background-color: rgba(127, 127, 127, 0.15);
transform: translateY(-1px);
text-decoration: none;
color: inherit; /* 防止部分主题强制变色 */
}
/* 半宽按钮 */
.oc-btn-half {
flex: 1;
padding: 10px 5px;
font-size: 0.85rem;
}
/* 全宽按钮 */
.oc-btn-full {
width: 100%;
padding: 12px;
font-size: 0.9rem;
box-sizing: border-box;
}
.oc-icon {margin-right: 6px;}
/* 品牌颜色优化：增加亮度以适应深色背景 */
.c-binance {color: #FCD535;}
/* OKX 在深色下用白色，浅色下用黑色，这里用 inherit 跟随文字 */
.c-okx {opacity: 0.9;}
.c-book {color: #60a5fa;} /* 稍微调亮一点的蓝色 */
/* 强制深色模式补丁 (以防网站只变背景不变文字) */
@media (prefers-color-scheme: dark) {.oc-support-box { color: #60a5fa;} /* 浅蓝更易读 */
}
</style>
<div class="oc-social-row">
<a href="https://x.com/0xCheshire" target="_blank" class="oc-social-icon twitter" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
<a href="https://t.me/CheshireBTC" target="_blank" class="oc-social-icon telegram" title="Telegram"><i class="fa-brands fa-telegram"></i></a>
<a href="https://0xcheshire.substack.com/" target="_blank" class="oc-social-icon substack" title="Substack"><i class="fa-solid fa-newspaper"></i></a>
</div>
<div class="oc-support-box">
<i class="fa-solid fa-heart" style="margin-right:4px;"></i> 创作不易，注册以支持博主
</div>
<div class="oc-links-container">
<div class="oc-dual-row">
<a href="https://binance.com/join?ref=SRXT5KUM" target="_blank" class="oc-btn oc-btn-half">
<i class="fa-solid fa-coins oc-icon c-binance"></i> 注册币安
</a>
<a href="https://okx.com/join/A999998" target="_blank" class="oc-btn oc-btn-half">
<i class="fa-solid fa-chart-line oc-icon c-okx"></i> 注册欧易
</a>
</div>
<a href="https://0xcheshire.gitbook.io/web3/" target="_blank" class="oc-btn oc-btn-full">
<i class="fa-solid fa-book-open oc-icon c-book"></i> Web3 投资手册
</a>
</div>
</div>经过这几天的折腾可以看出，AI 可以解决大多数问题。
我的 WordPress 建站之旅也就此告一段落，接下来就是认真输出的时候了！
🤝 创作不易，感谢支持
您的支持是我持续输出的动力
加密资产波动大 • 能力要求高 • 请自行判断
正文完
找遍了全网的 WordPress 主题，最终我选择了这款 - 柴宝养成计划 […] 解决 WordPress 图片和主题太大无法上传的问题 […]