Typecho Joe主题编辑器：新增wxfans圈粉快捷加密按钮教程

微信公众号圈粉是站长运营的重要手段。wxfans插件作为博客圈粉利器，可以让访客关注公众号后才能查看加密内容。但默认使用时需要手动输入加密代码，操作繁琐。

本教程教你直接在Joe主题编辑器中增加一个快捷按钮，点击即可自动插入加密代码，极大提升写作效率。

各位老宝贝，我又来了！今天给大家带来的教程是给编辑器增加个快捷按钮。

我们都知道啊，wxfans插件使用之后要输入代码才能够使用加密，但是又懒得手动输入，我想直接给它增加到编辑器里面，就像下面这个图片显示的一样：

实现步骤

第一步：创建JS文件

在Joe主题目录下的assets/js/下增加一个js文件夹：joe-edit-button.js（当然也可以是其他名字，但是要.js后缀）。

💡 路径说明：建议将文件放在主题assets/js/目录统一管理，避免网站根目录文件过多难以维护，到时候文件多了容易忘记用途。

第二步：编写按钮逻辑代码

添加好文件之后，双击打开它在joe-edit-button.js添加下面的代码：

注意：修改后的代码可以直接输出文本，不需要在代码前面加@符号。原文教程中加了@是为了防止注释被解析，新版已优化这个问题。

第三步：引入JS文件

有以下几种引入方法，根据你的部署需求选择：

方法一：本地资源引用（推荐）

<script src="<?php _getAssets('assets/js/joe-edit-button.js'); ?>"></script>

方法二：CDN地址引用

<script src="https://你的CDN域名/assets/js/joe-edit-button.js"></script>

本地资源建议用方法一，自定义CDN地址的用方法二。如果用自定义CDN又想用方法一的话，上传文件到CDN托管文件目录要和方法一目录一致。

引入位置（三选一）

1. functions.php：在usr/themes/Joe/functions.php里引入
2. core/factory.php：在core/factory.php里面引入
3. public/include.php：在public/include里引入

第四步：注意事项

⚠️ 如果你按照方法一本地引入的方式，不要使用后台的自定义CDN静态地址。要用的话请将新增的JS文件上传到CDN托管的文件夹里面。如果使用本站的CDN静态加速地址的话，直接引入就行了，因为本站已经上传新增JS文件到CDN加速地址文件夹了。

使用效果

引入完成后，打开后台进行文章撰写的时候就可以看到新增的图标了：

[hide type=”reply”]

点击按钮后的效果

点击按钮后的效果