php 将样式文件或脚本引入WordPress模板

c2e8gylq  于 2023-02-28  发布在  PHP
关注(0)|答案(1)|浏览(202)

我为自己设计了一个WordPress主题。
为了将style和脚本文件引入到WordPress主题中,我在function文件中包含了以下代码,以便将CSSJS文件引入到主题中:

add_action( 'wp_enqueue_scripts', 'files_assets' );

function files_assets() {
    
// Introducing CSS files
  wp_enqueue_style( 'Bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.0.0' );

// Introducing JS files
  wp_enqueue_script( 'jQuery3.4.1', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array( 'jquery' ), '1.4.1', true );

}

因为我的模板有很多stylingscripts,所以我把stylescript文件分成了几个部分。
现在我有35个css文件和26个脚本文件,我需要通过上面的代码引入到我的模板中,这是非常困难的!
是否有code,我可以只引入所需的folder,而不是引入单个文件,并且该文件夹中的所有文件都将链接到我的WordPress模板?
或者有没有一种更简单的方法,我不必将61个文件逐一引入到我的模板中?

huwehgph

huwehgph1#

你可以通过使用类和对象来实现。你需要为所有的文件创建一个对象。
例如,我有一些文件,如test1.css、test2.css等。
尝试以下方法:

/**
 * Register styles
 */
class JSXStyle {
    /**
     * Construct function.
     *
     * @param FileName $name file name.
     */
    public function __construct( $name ) {
        $this->name = $name;
        add_action( 'wp_enqueue_scripts', array( $this, 'register_custom_style' ) );
    }

    /**
     * Function for registering custom files.
     */
    public function register_custom_style() {
        wp_enqueue_style( $this->name, get_stylesheet_directory_uri() . "/assets/css/{$this->name}.css", array(), '1.0.0' );
    }
}

new JSXStyle( 'test1' );
new JSXStyle( 'test2' );
new JSXStyle( 'test3' );
new JSXStyle( 'test4' );

/**
 * Register scripts
 */
class JSXScript {
    /**
     * Construct function.
     *
     * @param FileName $name file name.
     */
    public function __construct( $name ) {
        $this->name = $name;
        add_action( 'wp_enqueue_scripts', array( $this, 'register_custom_script' ) );
    }

    /**
     * Function for registering custom files.
     */
    public function register_custom_script() {
        wp_enqueue_script( $this->name, get_stylesheet_directory_uri() . "/assets/js/{$this->name}.js", array( 'jquery' ), '1.0.0', true );
    }
}

new JSXScript( 'test1' );
new JSXScript( 'test2' );
new JSXScript( 'test3' );
new JSXScript( 'test4' );

相关问题