在WordPress中使用Simple Custom CSS and JS插件美化页面

news2024/9/24 14:32:10

一、插件安装

二、添加代码

三、使用案例

1、图片居中

2、段落前空两格

四、代码编写简述

WordPress是目前使用最广泛的开源建站框架，其主要功能就是“主题”（Theme）系统，该功能可以让用户自定义主题，也可以直接选择第三方个人或公司开发的主题。

不过自定义主题不是一般用户都能做到的，大部分用户还是选择第三方主题。不过第三方主题制作的再好，也有些地方不太令人满意，这就是“一人难称百人心”。如果仅仅是对显示的页面“稍作”修改，可以试试今天要介绍的插件：Simple Custom CSS and JS。

从插件名称上就能看出，这个插件就是“简单自定义CSS和JS”。不错，这个插件确实简单，直接添加css代码、JS脚本就可以应用到页面中，方便用户对主题的“微调”。

一、插件安装

WordPress后台→插件→安装插件→搜索插件→Simple Custom CSS and JS→向下寻找

立刻安装→启用

二、添加代码

WordPress后台→Simple Custom CSS and JS→Add……

添加代码一般的操作就是：

Add CSS/JS/HTML Code→输入代码名称→编写代码→发布

三、使用案例

1、图片居中

WordPress后台→Simple Custom CSS and JS→Add CSS Code→输入文件名→输入代码：

img {

    disp1ay:block

    margin-left:auto

    margin-right:auto;

}

单击“发布”按钮，我们回到前台看效果

2、段落前空两格

WordPress后台→Simple Custom CSS and JS→Add CSS Code→输入文件名→输入代码：（也可以不新建文件，直接在上面的页面中继续添加代码）

p {

         text-indent: 4ch;

}

发布/更新后看前台效果：

3、添加版权声明

有的时候，我们无法预知网站内容来源，因此可能面临“侵权”的问题。因此，非常有必要再每篇文章开始前，说明版权来源，虽然无法完全免责，至少可以获取原作者一些谅解。

网站发文时，不见得都能加上版权生明，因此可以通过JS代码给文章在标题后统一添加一个“声明”。

WordPress后台→Simple Custom CSS and JS→Add JS Code→输入文件名→输入代码：

// 在文章标题后添加版权声明

var elements = document.getElementsByClassName("bs-header");

for (var i = 0; i < elements.1ength; i++){

         elements[i].innerHTML += "<p style='color:red' >版权声明:文章来源于网络，如有侵权，请联系删除</p>”;

}