有疑问?请点击复制链接咨询!
教程是基于RiPRO主题,不适用于其它WordPress主题,但方法都大致相同,从0开始,让小白也能开发属于自己的子主题!本系列教程没有专业术语,小白看得懂,高手看笑话,开发大神可以关闭本页面。
functions.php
加载自定义CSS,JS文件必须在一个PHP文件中执行,所以需要在子主题项目中新建一个functions.php,这个functions并不会与父主题冲突,添加新功能等都可以写在里面,而且必须以functions命名WordPress才能识别。
diy.css
ripro主题提供了diy.css文件,在里面写的样式代码会覆盖app.css,只要记住diy.css优先级高于app.css就行了。
diy.css文件在ripro主题目录assets->css,把diy.css复制到子主题项目中。
引入diy.css文件
编辑functions.php,添加下面的代码保存就能加载diy.css文件。
之后就把样式写在diy.css里,无需改动父主题的CSS代码,升级也不影响。
function ripro_child_diy() {
wp_register_style('diy', get_stylesheet_directory_uri() . '/diy.css', array('app'), '', 'all');
wp_enqueue_style('diy');
}
add_action('wp_enqueue_scripts', 'ripro_child_diy');
/*也可以写成下面这样*/
function ripro_child_diy() {
wp_enqueue_style('diy', get_stylesheet_directory_uri() . '/diy.css', array('app'), '', 'all');
}
add_action('wp_enqueue_scripts', 'ripro_child_diy');
代码详解
先用一张图了解引入后的CSS
ripro_child_diy:函数唯一命名,可以自定义,但绝对不能有重复。
wp_register_style:注册。
wp_enqueue_style:wordpress引用CSS文件函数。
diy:CSS文件命名,HTML中的ID,可以自定义,也是唯一。
get_stylesheet_directory_uri():最重要的函数,后面会用的多,大致意思就是获取当前子主题目录,注意:get_template_directory_uri()是父主题目录。
array(‘app’):app是父主题的CSS文件名,可留空array()。
all:媒体类型,填写默认的all就行了。
add_action:添加动作。
wp_enqueue_scripts:wordpress引用CSS及JS文件的函数。
最后一个ripro_child_diy,与前面的函数名一致。
引入JS文件
同样编辑functions.php,添加下面的代码保存就能加载JS文件。
function zhutishou_script() {
wp_register_script( 'shou-ui', get_stylesheet_directory_uri() . '/assets/js/zhutishou.functions.js', array('jquery'), 1.5, true);
wp_enqueue_script('shou-ui');
//多个JS可以重复使用
//wp_register_script( 'auth-ui', get_stylesheet_directory_uri() . '/assets/js/auth.functions.js', array('jquery'), 1.5, true);
//wp_enqueue_script('auth-ui');
}
add_action( 'wp_enqueue_scripts', 'zhutishou_script' );
代码详解
大致跟上面相同,唯一不同的多了个ture,ture放到尾部,留空或者false头部(head里面)加载,会影响网页加载速度。
还有一个1.5是版本号,更改这个版本号可以强制更新JS文件,不需要每次都清除浏览器缓存。