WordPress自制插件-免修改主题的function文件增加函数代码以及实现主题自定义CSS和JS样式

释放双眼,带上耳机,听听看~!

主题使用后,不免会进行一番折腾。修改下functions.php,或者CSS样式。但是主题一但升级,我们修改后的内容就需要重新整理。如果自制插件,就可以将一些功能和css以及js集中在一块。

插件制作

c2e9e09d3edbc0bccc67905056b84b15

创建插件

在站点目录wp-content\plugins下创建一个插件文件夹,然后来个独一无二的名称。插件文件夹目录下,新建一个PHP文件(以下用ycbhk-diy代替),粘贴修改以下代码注释部分:

<?php
/*
Plugin Name: 逆念博客自定义功能
Plugin URI: https://ycb.cc
Description: 逆念博客自定义功能
Version: 1.0
Author: 逆念
Author URI: https://ycb.cc
*/
//需要写的代码填在这之后

接下来可以将需要添加的php代码等添加在下面了。

  释义:

Plugin Name: (required) 插件的名称
Plugin URI: 插件的主页
Description: 插件的简短描述
Version: 版本号
Author: 插件作者的名字
Author URI: 作者的网站
更多可以参考官方文档!

插件启用

完成后,即可在后台 - 插件下看到刚才制作的,点击启用即可。

插件添加主题自定义的CSS

将主题自定义的CSS移到新建的插件中

然后在上面新建的ycbhk-diy文件中添加:

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()来注册引入这个文件即可

插件目录下新建一个CSS文件夹,建立一个CSS后缀文件,将样式复制到文件中

然后在ycbhk-diy中添加:

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() 可以有效地避免在多个代码块中重复调用样式文件的问题。语法如下:

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 中加载。

插件目录结构的美化

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

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

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

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

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

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

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

温馨提示:本文最后更新于 2022-12-11 01:48 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

【B2主题美化】过滤器添加更多按钮

2022-4-26 18:27:41

编程开发

WordPress后台文本和HTML编辑器及可视化编辑器添加快捷按钮

2022-4-16 4:58:17

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索