前言

考虑到我在主题魔改的道路上越走越远，现将魔改的地方总结起来记录一下，以免后续使用过程中忘记

纲要

根据页面布局编写文章，从上到下，从左到右；从全局到局部。

1. 字体
2. 标题栏
3. 圆角（不通用）
4. 鼠标
5. 小工具
6. 音乐播放器
7. 关于博主图片随机 API（不通用）
8. 网站打字粒子效果
9. 网站点击粒子爆炸效果

文章字数太多，阅读可以根据所需，在目录中查找

一、字体

在后台的 “ 外观 - 自定义 - 额外 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 格式，存放到任意位置且确保该文件能被正常访问

二、标题栏

标题栏修改之后在切换窗口时会有这样的 样式变化

1. 切出窗口
2. 切入窗口

将以下代码粘贴到 footer.php 的前

<!-- 标题字符 --><script>$.getScript("https:// 目录 /title.js");</script>

文件名称：title.js

文件大小：635.0 B

下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。

下载地址：点击下载title.js

将这个 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 区块小工具 有天气 和年度倒计时

1. 1. 天气预报代码_天气预报插件_免费天气预报代码 (插件) 调用——天气网 (tianqi.com)，从这里获取天气代码
   2. 年度倒计时：将以下代码放入 HTML 区块小工具

  打开

六、音乐播放器

本教程针对 Puock 主题，其他主题请放在 footer.php 的
之前

先下载 MetingJS 文件

文件名称：meting.js

文件大小：3.4 KB

下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。

下载地址：meting.js

jsd 目前已经崩掉，私聊我获取新文件

将这个 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 环境的目录里，推荐放在网站根目录

文件名称：api.php

文件大小：1.2 KB

下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。

下载地址：api.php

在“外观 – 小工具 -Puock 主题 关于博主 – 顶部背景图 url”这里填入

https:// 路径 /api.php?rand=true

保留?rand=true 则每刷新一次，重新请求得到新图片

8、网站打字粒子效果

将以下代码粘贴到 footer.php 的前

<!-- 网站打字粒子效果 --><script src="https:// 路径 /input-with-fire.js"></script>

文件名称：input-with-fire.js

文件大小：7.6 KB

下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。

下载地址：input-with-fire.js

将这个 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 文件下载然后存放到任意位置且确保该文件能被正常访问

文件名称：djtx.js

文件大小：13.8 KB

下载声明：本站部分资源来自于网络收集，若侵犯了你的隐私或版权，请及时联系我们删除有关信息。

下载地址：djtx.js

本文转自：https://cn.lovau.cn/theme-beauty/