踩过十几个WP小坑的我：轻松搞定WordPress模板新增模块

咱先唠唠为啥非自己搞WordPress模板新增模块不可

有人可能说，啊，现成插件堆一堆不香吗？买的高级主题功能都全还要啥自行车？别天真，姐妹兄弟——我之前也是这么躺平当伸手党的！

先举个自己踩过的雷栗子给你拍脑袋敲警钟哈：去年搞了个小众农产品博客，买了个号称“全场景覆盖农场生活”的高级主题，结果想加个「今日溯源直播入口悬浮球」「节气采摘报名倒计时」「本地菜篮子群引流页脚小格子」，这仨玩意儿主题愣是没留现成位置？插件倒是找着了三个凑，结果用了俩礼拜，悬浮球和倒计时插件打架把我首页菜单挤飞了，菜篮子小格子的颜色调了八百遍还是和主题不搭，整得我像个穿着高定西装套回力鞋戴歪草帽的村支书助理——土洋土洋的不伦不类，而且后台卡顿得像我那台用了五年的红米Note8刷抖音直播似的，卡三秒卡五秒，气的我差点把键盘摔烂啃玉米棒子泄愤！

后来没办法，硬着头皮找了个程序员同事喝了三杯奶茶才搞定，人家说我这是“放着现成的毛坯房改造工具不用，非得买一堆定制家具硬塞，塞不下还怪设计师图纸歪”——哦不对，是放着WordPress模板新增模块的简单底层逻辑不用，瞎堆一堆代码臃肿的插件，纯属没事找罪受。

所以听我一句劝，过来人掏心窝子的话：不管你是搞个人博客、公司官网还是电商小站，偶尔需要加一两个专属小模块WordPress模板新增模块这种小事，咱自己能搞定就自己搞定WordPress模板新增模块，既省钱又省心，还能锻炼一下自己的“电子装修师”技能，以后想改啥都不用求人喊爹喊妈喊程序员同事喝奶茶了！（程序员同事别打我，三杯奶茶还是留着请你们撸串更划算）

搞WordPress模板新增模块前的三个“电子装修师”入门准备

咱既然要当自己的电子装修师，那总得先有趁手的工具和毛坯房图纸吧？别慌，咱不需要考什么装修资格证，三个入门准备就能搞起WordPress模板新增模块！

准备一：备份！备份！备份！重要的事情说三遍都不够

我之前那个红米Note8刷抖音就算了，刷成砖过三次，每次都靠提前备份的聊天记录照片视频哭哭啼啼救回来，电子装修WordPress模板新增模块也是一样的道理！

要是不小心把主题的代码改坏了，整个网站直接变“打不开的毛坯房废墟”，那之前花的钱花的时间发的文章岂不是全打水漂了？所以备份是搞WordPress模板新增模块前的底线操作底线操作底线操作！

备份怎么搞？其实很简单，有两种方法：一种是用WordPress后台自带的“工具-导出”功能把文章、评论、媒体文件导出来存到电脑硬盘或者云盘里；另一种是用靠谱的备份插件（比如UpdraftPlus）一键备份整个网站（包括主题、插件、数据库这些所有“电子装修材料”），UpdraftPlus这个插件我用了快两年了，没出过一次问题，而且可以自动备份到百度网盘、阿里云盘、OneDrive这些地方，不用自己天天手动点，懒人福音有没有！

准备二：找到你的“电子装修图纸”——主题模板文件

搞WordPress模板新增模块就像装修毛坯房，你总得知道毛坯房的墙在哪里、窗户在哪里、门在哪里吧？主题模板文件就是你的“电子装修图纸”！

怎么找主题模板文件？也很简单，有两种路径：

• 路径一：WordPress后台找——登录你的WordPress后台，点击左侧菜单栏的「外观-主题编辑器」，就能看到你的当前主题的所有模板文件了；不过这里要提醒一下，新手尽量别直接在后台改模板文件，万一改坏了连后台都进不去就麻烦了（虽然咱提前备份了，但能少折腾就少折腾）！
• 路径二：FTP/SFTP找——用靠谱的FTP/SFTP工具（比如FileZilla）连接你的网站服务器，找到「/wp-content/themes/你的当前主题名称/」这个文件夹，里面的所有PHP、CSS、JS文件就是你的“电子装修图纸”；这个路径是最安全的，改坏了可以直接用之前备份的文件覆盖回去就行！

这里插一句嘴：你的当前主题名称怎么看？很简单，登录WordPress后台，点击左侧菜单栏的「外观-主题」，找到右上角标着“已启用”的那个主题，名字就是了！

准备三：戴上你的“电子安全帽”——子主题Child Theme

搞WordPress模板新增模块戴子主题Child Theme这个“电子安全帽”，就像装修毛坯房戴安全帽一样，是保护自己保护网站的核心操作！

为什么要戴子主题Child Theme？因为如果直接修改父主题的模板文件，等父主题更新的时候，你之前修改的所有WordPress模板新增模块WordPress模板新增模块WordPress模板新增模块都会被一键覆盖，就像你刚装修好的房子，开发商突然把整个房子拆了重建一样，你哭都没地方哭去！

子主题Child Theme怎么弄？其实也不难，有两种方法：一种是用靠谱的子主题生成插件（比如Child Theme Configurator）一键生成；另一种是自己手动创建两个文件（style.css和functions.php），放到服务器的「/wp-content/themes/」文件夹里就行；新手推荐用Child Theme Configurator一键生成，三分钟就能搞定，不用自己写一行代码！

举个栗子！手把手教你搞一个超实用的WordPress模板新增模块

说了这么多入门准备，咱总得实际操作一个WordPress模板新增模块才过瘾吧？就拿我之前踩过雷的「今日溯源直播入口悬浮球」来举栗子吧！这个模块超实用，不管你是搞直播带货、知识分享还是农产品溯源，都能用得上！

第一步：给悬浮球写个“电子身体”——HTML代码

咱先给悬浮球写个简单的HTML代码作为“电子身体”，代码很简单，就是一个链接加一个图片或者文字：

```html ```

这里要注意哦：“你的直播链接地址”要换成你自己的真实直播链接地址“你的悬浮球图片地址”要换成你自己上传到WordPress媒体库的真实图片地址，图片尽量选正方形的，尺寸在100px×100px左右就行，太大太小都不好看！

第二步：给悬浮球穿个“漂亮衣服”——CSS代码

光有“电子身体”还不够，咱得给悬浮球穿个“漂亮衣服”才能吸引眼球对吧？CSS代码就是悬浮球的“漂亮衣服”，代码也很简单：

```css .my-live-ball { position: fixed; / 固定在屏幕上，不随页面滚动 / right: 20px; / 距离屏幕右边20px / bottom: 20px; / 距离屏幕下边20px / z-index: 9999; / 放在所有元素的最上层，不会被盖住 / width: 80px; height: 80px; border-radius: 50%; / 变成圆形 / overflow: hidden; / 隐藏超出圆形的部分 / box-shadow: 0 4px 12px rgba(0,0,0,0.3); / 加个阴影，更有立体感 / animation: shake 2s infinite; / 加个摇晃动画，更吸引眼球 / } .my-live-ball a { display: block; width: 100%; height: 100%; text-align: center; text-decoration: none; } .my-live-ball img { width: 60px; height: 60px; margin-top: 5px; } .my-live-ball span { display: block; font-size: 12px; color: fff; background-color: ff6600; line-height: 15px; } / 摇晃动画 / @keyframes shake { 0%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(-5deg); } 20%, 40% { transform: rotate(5deg); } } ```

这里要注意哦：可以根据自己的喜好调整CSS代码里的颜色、位置、尺寸、动画时间等参数，比如把颜色换成红色、绿色、蓝色，把位置换成左边、上边，把尺寸换成100px×100px，把摇晃动画改成弹跳动画，都可以！

第三步：把悬浮球“安装”到网站上——functions.php代码

最后一步，咱得把悬浮球“安装”到网站上对吧？functions.php代码就是“安装工具”，代码也很简单：

```php // 添加今日溯源直播入口悬浮球WordPress模板新增模块 add_action('wp_footer', 'my_live_ball'); function my_live_ball() { // 这里粘贴第一步写的HTML代码 echo ' '; // 这里粘贴第二步写的CSS代码，注意要用 '; } ```

这里要注意哦：这段functions.php代码要粘贴到你的子主题Child Theme的functions.php文件里，不要粘贴到父主题的functions.php文件里，不然等父主题更新的时候，你之前修改的所有WordPress模板新增模块WordPress模板新增模块WordPress模板新增模块都会被一键覆盖！

最后唠唠搞WordPress模板新增模块的土味心得

其实搞WordPress模板新增模块就像做饭一样，不需要你会做满汉全席，只要你会煮个面条、炒个鸡蛋，就能满足自己的基本需求！

别觉得技术很难，别觉得自己不行，咱都是普通人，都是从踩坑过来的，只要你敢试敢做敢备份，就没有搞不定的WordPress模板新增模块WordPress模板新增模块WordPress模板新增模块！

加油吧，电子装修师们！自己动手，丰衣足食，以后咱的网站咱自己说了算！（哦对了，如果搞砸了别慌，直接用之前备份的文件覆盖回去就行，大不了重来一次嘛，反正咱年轻，有的是时间和精力！）