Question

我已将此代码添加到functions.php中，但startwordpress_scripts（）函数并未运行。

function startwordpress_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
    wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );

所以我在header.php中添加了以下代码，它们运行良好。

<?php wp_head(); ?>

现在我想知道wp_head（）函数的神奇作用。感谢。

Answer 1

在WordPress中，actions和filters被视为hooks。钩子允许我们修改WordPress的默认行为，而无需修改核心中的代码。

只要您有add_action('xxx', 'callback')，就会在callback执行时调用do_action('xxx')函数。

换句话说：当您拥有add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );时，这意味着WordPress将在执行startwordpress_scripts()时运行do_action('wp_enqueue_scripts')。

现在，让我们看一下WordPress核心中的代码。

如果查看其功能定义，wp_head()是do_action( 'wp_head' );的“快捷方式”

function wp_head() {
        /**
         * Print scripts or data in the head tag on the front end.
         *
         * @since 1.5.0
         */
        do_action( 'wp_head' );
}

换句话说，wp_head()将执行使用add_action('wp_head')定义的所有回调。

如果您现在查看wp-includes/default-filters.php文件，您会看到：

add_action( 'wp_head', 'wp_enqueue_scripts',1 );

这意味着当您的模板中遇到wp_head()时，正在执行一个名为wp_enqueue_scripts()的函数，因为它挂钩到wp_head，如上面的代码行所示。 / p>

wp_enqueue_scripts()的函数定义是：

function wp_enqueue_scripts() {
    /**
     * Fires when scripts and styles are enqueued.
     *
     * @since 2.8.0
     */
    do_action( 'wp_enqueue_scripts' );
}

上面的do_action( 'wp_enqueue_scripts' );告诉WordPress执行定义的所有add_action('wp_enqueue_scripts', 'callback')的回调函数。

简而言之：

wp_head()来电do_action('wp_head')
do_action('wp_head')执行所有add_action('wp_head','callback')
wp_enqueue_scripts()是add_action('wp_head','callback')
wp_enqueue_scripts()来电do_action('wp_enqueue_scripts')
do_action('wp_enqueue_scripts')执行所有add_action('wp_enqueue_scripts','callback')
startwordpress_scripts()是add_action('wp_enqueue_scripts','callback')
包含startwordpress_scripts()中定义的JS / CSS

Answer 2

在该部分内触发wp_head动作钩子 wp_head（）函数的用户模板。

如果删除wp_head（）函数，则所有操作 add_action（'wp_head'，'your_custom_action'）; 也不起作用插件也会使用wp_head动作操作来添加css或js。

如果你从header.php文件中删除wp_head函数，那么下面的函数不会在标题中添加任何JS。

function startwordpress_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
    wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );

如果要删除wp_head（）函数，则需要添加如下所示。

<link rel='stylesheet' id='bootstrap-css' href='http://www.siteurl.com/wp-content/themes/your-theme/css/bootstrap.min.css?ver=3.3.6' type='text/css' media='all' />
<link rel='stylesheet' id='blog-css' href='http://www.siteurl.com/wp-content/themes/your-theme/css/blog.css?ver=1.0' type='text/css' media='all' />
<script type='text/javascript' src='http://www.siteurl.com/wp-content/themes/your-theme/js/bootstrap.min.js?ver=3.3.3'></script>

请参阅wp_enqueue_script函数和args

的链接

Answer 3

上面显示的代码中没有错误，我已经仔细检查，看它在新的WP安装中是否正常工作。它不应该是您错误的原因。

看看代码的DEBUG部分来改变它。这可能需要放入你的wp-config.php。

// allow debugging 
defined( 'WP_DEBUG' ) or define( 'WP_DEBUG', true );

// log errors to wp-content/debug.log
defined( 'WP_DEBUG_LOG' ) or define( 'WP_DEBUG_LOG', true );

// show errors on screen
defined( 'WP_DEBUG_DISPLAY' ) or define( 'WP_DEBUG_DISPLAY', true );

为什么要为wp_enqueue_scripts插入wp_head（）？

3 个答案: