在 WordPress 中正确排队脚本和样式 [英] Correctly enqueue scripts and styles in WordPress

问题描述

这是一个简单的任务，但我失败了:(

This is a simple task but I fail :(

在 HTML 模板中，我会在 head 部分执行:

In a HTML template I would do in the head section:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mdb.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

在 body 闭合标记之前:

and before the body closure tag:

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.js"></script>

如何在 WP 中排入确切的样式和 JS 之上?

How do I enqueue above exact styles and JS in WP?

是的，使用 enqueue_style 和 enqueue_script

Yes, using enqueue_style and enqueue_script

但是，不幸的是，当我尝试时，JS 没有入队.总是被 bootstrap JS 覆盖而不是 mdv.js

But, unfortunately, when I try it, JS is not enqueued. Always overwritten by bootstrap JS instead of the mdv.js

谁能给我举个例子，上面的样式+脚本如何正确地排入我的functions.php?

Can somebody give me a example, how above styles + scripts would be correctly enqueued in my functions.php?

我很感激

这里是示例代码

function my_scripts() {


    wp_enqueue_style( 'google-styles', get_template_directory_uri() . '/css/mdb.css');
    wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri() . '/css/goldbootstrap.css', array(), '3.3.4', 'all' );

    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.3.0', 'all' );

    wp_enqueue_style( 'my-style', get_stylesheet_uri() );





    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.4' );
    wp_enqueue_script('mdb-js', get_template_directory_uri() . '/js/mdb.js' );


    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

推荐答案

请尝试使用以下代码，也许对您有用.

Please try with below code maybe useful for you.

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {

  wp_enqueue_style( 'google-styles','https://fonts.googleapis.com/icon?family=Material+Icons' );
  wp_enqueue_style( 'font-awesome-css','https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
  wp_enqueue_style( 'bootstrap-min-css',get_template_directory_uri() . '/css/bootstrap.min.css' );
  wp_enqueue_style( 'mdb-css',get_template_directory_uri() . '/css/mdb.css' );
  wp_enqueue_style( 'style-css',get_template_directory_uri() . '/css/style.css' );
  wp_enqueue_script( 'jquery-script', get_template_directory_uri() . '/js/jquery.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
  wp_enqueue_script( 'mdb-script', get_template_directory_uri() . '/js/mdb.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

尝试一下，如果有任何疑问，请告诉我.

Try it and let me know if any queries.

这篇关于在 WordPress 中正确排队脚本和样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！