sanqi

要么孤独 要么庸俗

WordPress添加点击特效


一些闲话

准备放弃服务器上用WordPress搭建的博客了,还是转到Github上的博客托管服务吧,但之前写的关于WordPress界面美化的一些东西还是准备搬过来,毕竟是自己踩过的一些坑不是。 等把那几篇博客搬过来之后就吧服务器上面的WordPress撤销吧(-_- 麻烦死了)。好了,正文开始。

步骤一:

下载鼠标点击特效的js配置文件

下载完成后加载此文件,传到服务器的根目录内

(PS:每个网站都有一个根目录,而不是把整个服务器作为根目录,此处资源是借用自其他博客的,因为刚用github托管服务,就没把这些本来存储在服务器里面的文件带过来)。

步骤二:

进入网站根目录。你会发现会有wp-admin,wp-content,wp-includes三个文件夹以及其他的全局配置。

通常情况下我们应该保证只对wp-content与根目录下的wp-config.php文件进行修改(这里的根目录指的是网站所处的根目录,而不是linux下的’/’顶层根目录或者说windows下的‘C://’)

理由是当我们对WordPress进行版本更新时会把上述提及的一个文件和一个文件夹之外的所有东西都覆盖掉,如果你对之外的文件或文件夹进行更改配置,当你更新WordPress版本时之前的配置可能会被覆盖掉(我说的是手动将文件压缩包上传到服务器的那种更新方式,因为在网站上的更新方式通常会操作失败)。

步骤三:

进入wp-content这个文件夹。在这里创建一个名为‘js’的文件夹,然后我们将刚刚上传到服务器的js文件转移到该文件夹下。

这样可以使我们在更换WordPress的主题时,在新的主题加上这个鼠标点击特效会容易一点(我们对一个主题的配置更改是不会对另外一个主题产生作用的,避免了高耦合)。为了方便后续说明,这里先假定你刚刚移动到’js’文件夹下的程序叫djtx.js了(就是动态特效的简称,懒得想其他的名字了)。

步骤四

我们再进入themes目录下,这个目录就是用来储存WordPress的主题配置文件的,你可以先进入到浏览器的网站后台上(就是从浏览器上的输入的https://blog.sanqii.top/wp-admin,你把blog.sanqii.top改成你的域名就可以了,当你看到这篇文章的时候,这个域名可能已经失效了,不过这不是重点)。再点击 外观 选择 主题,你会发现你当前网站所使用的WordPress主题。不要忘记记录主题名。

步骤五:

我们再进入themes目录下,这个目录就是用来储存WordPress的主题配置文件的,然后进入你所使用主题的那个文件夹。好的,我们现在所处的位置应该是~/wp-content/themes/twentyseventeen下,最后是我当前使用的主题所在的目录,‘~’指的是网站根目录,具体的会有差别。

步骤六:

(这是最关键的一步)找到该目录下的footer.php文件,进入修改。将以下代码贴近你的配置文件的块内,除了块的

其它位置自选,也就是要符合HTML的常规。代码如下:

<canvas class="fireworks" style="position:fixed;left:0; top:0;z-index:99999999;pointer-events:none;"canvas>
<script type="text/javascript" src="wp-content/themes/js/djtx.js"script>

步骤七:

记得将\<script>块中src的url改成你刚刚储存点击特效的js文件所在位置就可以了。

测试网站特效, 如按上述优化过程完整的操作一遍且没有步骤上的错误,但没有效果,可以试试刷新界面,以更新服务器状态,如果问题仍然存在,可以试着清理浏览器网页内存。

感谢该材料来源