RiPRO子主题开发教程系列,从0开始,教程02-加载自定义CSS,JS文件,新建functions.php

RiPRO子主题开发教程系列,从0开始,教程02-加载自定义CSS,JS文件,新建functions.php

  • 正文概述
  • 教程是基于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文件,不需要每次都清除浏览器缓存。

    纯净子主题,干净整洁,独立后台,集成自助广告系统。
    主题兽 » RiPRO子主题开发教程系列,从0开始,教程02-加载自定义CSS,JS文件,新建functions.php

    发表评论