共计 4495 个字符，预计需要花费 12 分钟才能阅读完成。
提醒：本文最后更新于 2025-07-03 22:03，文中所关联的信息可能已发生改变，请知悉！
前言
考虑到我在主题魔改的道路上越走越远，现将魔改的地方总结起来记录一下，以免后续使用过程中忘记
纲要
根据页面布局编写文章，从上到下，从左到右；从全局到局部。
- 字体
- 标题栏
- 圆角（不通用）
- 鼠标
- 小工具
- 音乐播放器
- 关于博主图片随机 API（不通用）
- 网站打字粒子效果
- 网站点击粒子爆炸效果
正文
字体
在后台的 “外观 - 自定义 - 额外 css” 里，找不到的可以复制下面的链接将域名替换成自己的然后打开
https:// 域名 /wp-admin/customize.php?return=%2Fwp-admin%2Fpost.php%3Faction%3Dedit%26post%3D361/* 设置网站字体 */
@font-face{
font-family:btfFont;
src: url(https:// 资源链接地址) format('woff2')
}
body{font-family:"btfFont" !important}免费商用字体 可以在这下载 100font.com – 免费字体下载 – 免费商用字体下载网站，然后通过CloudConvert 将字体资源转换成 woff2 格式，存放到任意位置且确保该文件能被正常访问
标题栏
标题栏修改之后在切换窗口时会有这样的 样式变化
- 切出窗口
- 切入窗口
将以下代码粘贴到 footer.php 的</body>前
<!-- 标题字符 -->
<script>
$.getScript("https:// 目录 /title.js");
</script>将这个 js 文件下载然后存放到任意位置且确保该文件能被正常访问，js 文件其中 ’ ‘ 内的文字可以随意替换
document.title = '哎，人不见了？！';圆角（不通用）
通过观察 Puock 主题 的页面区块，编写以下 css 放入“Puock 主题配置 - 脚本及样式 - 头部自定义全局 CSS 样式”
.p-block,.widget,.input-group {border-radius: 20px;}
.widget-puock-author .header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.col-6,.p-0 {border-radius: 20px;}
.abhl {border-radius: 20px;}
.wight{filter: blur(1px);
} 即可实现区块圆角，其他的主题想要圆角的话可以 F12 观察区块 class 类 来改写
鼠标
将以下代码填进去
// 链接地址替换成自己的资源地址
/** 普通指针样式 **/
body {cursor: url(链接地址), default;
}
/** 链接指针样式 **/
a:hover{cursor:url(链接地址), pointer;
}样式可以在这里像我一样通过 F12 下载Custom Cursor (custom-cursor.com) 然后存放到任意位置且确保该文件能被正常访问，其中 cursor 对应着 普通样式 ，pointer 对应着 链接样式
小工具
目前本站在用的 HTML 区块小工具 有天气 和年度倒计时
-
- 天气预报代码_天气预报插件_免费天气预报代码 (插件) 调用——天气网 (tianqi.com)，从这里获取天气代码
- 年度倒计时：将以下代码放入 HTML 区块小工具
<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {let year = new Date().getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}</style>音乐播放器
<?php wp_footer(); ?> 之前
先下载 MetingJS 文件
将这个 js 文件下载然后存放到任意位置且确保该文件能被正常访问
打开“外观 - 主题文件编辑器”，找到header.php，并找到
<div id="mobile-menu" class="d-none">这一行代码，大概在偏末尾的位置，紧挨着这一行代码之前放入下面代码
<link rel="stylesheet" href="https://jsd.admincdn.com/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://jsd.admincdn.com/npm/hls.js/dist/hls.min.js"></script>
<script src="https://jsd.admincdn.com/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https:// 路径 /meting.js"></script>
<meting-js server="tencent" type="playlist" id="2732740880" autoplay="false"
fixed="true" mini="true" order="random" loop="all" preload="auto"
volume="0.6" mutex="true" list-folded="false">
</meting-js>给大家解释一下我这么多参数的意义
server="tencent" 指定音乐平台为 QQ 音乐，type="playlist" 指播放音乐来源类型，
id="xxxxxxxxxx" 为歌单的 id（这里的 id 为打开歌单，网址显示的 id），打开网页自动播放autoplay="false"，
开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0"
注意 :id 需要为自己创建的歌单，不能为我喜欢的音乐;server可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐) 等
参数太多了给你们 po 个网站 参数 – APlayer
关于博主图片随机 API（不通用）
下载 API 文件保存到有 PHP 环境的目录里，推荐放在网站根目录
在“外观 - 小工具 -Puock 主题 关于博主 - 顶部背景图 url”这里填入
https:// 路径 /api.php?rand=true保留?rand=true 则每刷新一次，重新请求得到新图片
网站打字粒子效果
将以下代码粘贴到 footer.php 的</body>前
<!-- 网站打字粒子效果 -->
<script src="https:// 路径 /input-with-fire.js"></script>将这个 js 文件下载然后存放到任意位置且确保该文件能被正常访问
网站点击粒子爆炸效果
<!-- 给 WordPress 网站添加鼠标点击爆炸五颜六色特效 -->
<canvas class="fireworks"
style="position: fixed; left: 0; top: 0; z-index: 99999999; pointer-events: none;"></canvas>
<script src="https:// 路径 /djtx.js"></script>将这个 js 文件下载然后存放到任意位置且确保该文件能被正常访问
总结
作为一个时尚潮流的博主，魔改之路永远在路上
所以本文设置需要留下您的评论才允许阅读
