wordpress自制插件,实现主题自定义CSS和JS样式

站点建设评论1.8K2字数 3039阅读10分7秒阅读模式

主题使用后,不免会进行一番折腾。修改下[code]functions.php[/code],或者CSS样式。但是主题一但升级,我们修改后的内容就需要重新整理。最近看wordpress有博主制作一个wordpress插件,用来存放自定义的内容,感觉不错。于是将自定义的代码都重新整理下。

wordpress自制插件,实现主题自定义CSS和JS样式文章源自亦枫博客-https://yflad.cn/2433.html

插件制作

在站点目录[code]wp-content\plugins[/code]下创建一个插件文件夹,然后来个独一无二的名称。插件文件夹目录下,新建一个PHP文件(以下用yflad-diy代替),粘贴修改以下代码注释部分:文章源自亦枫博客-https://yflad.cn/2433.html

<?php
/*
Plugin Name: 亦枫博客自定义功能
Plugin URI: https://yflad.cn
Description: 亦枫博客自定义功能
Version: 1.0
Author: 亦枫
Author URI: https://yflad.cn
*/

接下来可以将原先在[code]functions.php[/code]下添加的代码剪切到这里文章源自亦枫博客-https://yflad.cn/2433.html

释义:文章源自亦枫博客-https://yflad.cn/2433.html

Plugin Name: (required) 插件的名称文章源自亦枫博客-https://yflad.cn/2433.html

Plugin URI: 插件的主页文章源自亦枫博客-https://yflad.cn/2433.html

Description: 插件的简短描述文章源自亦枫博客-https://yflad.cn/2433.html

Version: 版本号文章源自亦枫博客-https://yflad.cn/2433.html

Author: 插件作者的名字文章源自亦枫博客-https://yflad.cn/2433.html

Author URI: 作者的网站文章源自亦枫博客-https://yflad.cn/2433.html

更多可以参考官方文档!文章源自亦枫博客-https://yflad.cn/2433.html

 文章源自亦枫博客-https://yflad.cn/2433.html

插件启用

完成后,即可在后台 - 插件下看到刚才制作的,点击启用即可。文章源自亦枫博客-https://yflad.cn/2433.html

 文章源自亦枫博客-https://yflad.cn/2433.html

插件添加主题自定义的CSS

将主题自定义的CSS移到新建的插件中文章源自亦枫博客-https://yflad.cn/2433.html

然后在上面新建的yflad-diy文件中添加:文章源自亦枫博客-https://yflad.cn/2433.html

function diy_begin_style(){
	echo'<style type="text/css">CSS样式代码</style>';
}
add_action('wp_head', 'diy_begin_style');

这样对于样式的个别更改,量少的话还行。样式多的话,既不美观,看起来也有些有晕。可以将样式添加到CSS文件中,用wp_register_style()和wp_enqueue_style()来注册引入这个文件即可文章源自亦枫博客-https://yflad.cn/2433.html

插件目录下新建一个CSS文件夹,建立一个CSS后缀文件,将样式复制到文件中文章源自亦枫博客-https://yflad.cn/2433.html

然后在yflad-diy中添加:文章源自亦枫博客-https://yflad.cn/2433.html

function diy_begin() {
  wp_register_style('diy_begin_style', plugins_url('css/diy-begin-style.css', __FILE__), array(), '1.0', 'all');
  wp_enqueue_style('diy_begin_style');
}
add_action( 'wp_enqueue_scripts', 'diy_begin' );

wp_register_style()是wordpress用于注册一个新的样式文件的函数。注册完成后我们可以使用 wp_register_style() 函数引入样式。好处就是wp_register_style() 可以有效地避免在多个代码块中重复调用样式文件的问题。语法如下:文章源自亦枫博客-https://yflad.cn/2433.html

点击展开了解?

展开收缩
wp_register_style( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, string $media = 'all' )

$handle:字符串(必填)。样式名称,必须是唯一值。

$src:字符串或布尔值(必填)。完整的样式文件路径或基于WordPress根目录的相对路径。如果资源为false,则样式为基于其他样式的别名。

$deps:数组(可选)。样式将在该数组所包含的其他样式之后引入。

$ver:字符串、布尔值或空值(可选)。指定样式版本号,将其作为查询字符串添加到 URL 中以清除缓存。 如果设置为 false ,则自动设置当前安装的 WordPress 版本为版本号。 如果设置为 null ,则不添加任何版本。

$media:布尔值(可选)。该样式表针对何种媒体设备使用,支持“all”、’print’ 以及 ‘screen’ ,或者 ‘(orientation: portrait)’ 与 ‘(max-width: 640px)’等。

该函数返回布尔值( true 或 false),用以判定样式是否注册。

plugins_url(),获取当前插件的目录的 URI

再次刷新页面,效果是一样的。

插件添加主题自定义的JS

JS基本同CSS,不过是用的wp_register_script()和wp_enqueue_script(),如下:

function blog_time() {
  wp_register_script('blog_time_script', plugins_url('js/diy-blog-time.js', __FILE__), array(), '', true);
  wp_enqueue_script('blog_time_script');
}
add_action( 'wp_enqueue_scripts', 'blog_time' );

wp_register_script()是wordpress用于注册一个新的脚本文件的函数。注册完成后我们可以使用 wp_enqueue_script()函数挂载脚本。好处就是使用wp_register_script()可以有效地避免在多个代码块中重复调用脚本文件的问题。语法如下:

点击展开了解?

展开收缩
wp_register_script( string $handle, string|bool $src, array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

$handle:字符串(必填)。脚本名称,必须是唯一值。

$src:字符串或布尔值(必填)。完整的脚本文件路径或基于WordPress根目录的相对路径。如果资源为false,则脚本为基于其他脚本的别名。

$deps:数组(可选)。脚本将在该数组所包含的其他脚本之后处理。

$ver:字符串、布尔值或空值(可选)。指定脚本版本号,将其作为查询字符串添加到 URL 中以清除缓存。 如果设置为 false ,则自动设置当前安装的 WordPress 版本为版本号。 如果设置为 null ,则不添加任何版本。

$in_footer:布尔值(可选)。是否在 body 标签之前加载,而不是在 head 中加载。

 

插件目录结构的美化

以上操作完之后是不是发现yflad-diy代码有些多?且排查问题也不是很方便。对于强迫症的我来说,当然希望能再分层以下。

接下来我们将,上面所添加的function都移植到单独的php文件中。比如自定义的diy_begin_style(),在插件目录或者插件下的其他文件夹目录下,新建一个diy_begin.php,粘贴代码。需要注意css样式文件路径不要引入错了。

然后在yflad-diy中引入这个php文件

//主题自定义样式修改
require 'XXX/diy_begin.php';   // 注意文件路径

引入文件有include和require,两者使用的语法是一样的,但是却有本质上的差别。include引用文件会在一个功能文件不可用的情况是给予警告并继续执行下一个功能文件,require会在一个功能文件不可用的情况下直接停止主文件的进一步执行。使用哪一个,看你自己咯!

完成之后,原先的代码就是注释或者删掉了。

有CDN或者缓存的,刷新下哦

继续阅读
扫扫关注公众号
weinxin
我的微信
扫扫体验小程序
weinxin
我的公众号
亦枫
  • 本文由 发表于 2021年2月10日 18:03:17
评论  0  访客  0
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定