Wordpress：为啥我的样式表没有入队？

Posted 2023-02-16

【中文标题】Wordpress：为啥我的样式表没有入队？

【英文标题】：Wordpress: Why isn't my stylesheet being enqueued?Wordpress：为什么我的样式表没有入队？

【发布时间】：2015-10-31 01:25:02

【问题描述】：

我正在修改现有的 WP 插件，方法是制作一个单独的插件来扩展它。我想编写将覆盖插件的 CSS。但是，当我尝试将样式表排入队列时，它不起作用。我知道这不起作用，因为我在includes() 中添加了一个简单的表单，并尝试将单词设置为红色以查看更改。为什么这不起作用？？

注意 - 我正在使用动作钩子 plugins_loaded，我在法典中读到的动作钩子发生在 wp_enqueue_script 之前。所以我不怀疑我的排队错过了时机，但我是 WP dev 的新手，如果我错了，请纠正我。

更新 - 请在下面查看我更新的 CSS 代码。 #id 选择器并没有将文本染成红色本身，但是当我添加 p（段落选择器）时它起作用了。两个选择器都不能单独工作，只有在我同时添加两者时才有效。这是为什么呢？

find-do-for-anspress.php

if (! defined('WPINC')) 
    die;


Class Find_Do_For_Anspress 

    /**
     * Class instance
     * @var object
     * @since 1.0
     */
    private static $instance;

    /**
     * Get active object instance
     *
     * @since 1.0
     *
     * @access public
     * @static
     * @return object
     */
    public static function get_instance() 

        if ( ! self::$instance ) 
            self::$instance = new Find_Do_For_Anspress(); 

        return self::$instance;
    
    /**
     * Initialize the class
     * @since 2.0
     */
    public function __construct() 

        if ( ! class_exists( 'AnsPress' ) ) 
            return; // AnsPress not installed.
        
        if ( ! defined( 'FIND_DO_FOR_ANSPRESS_DIR' ) ) 
            define( 'FIND_DO_FOR_ANSPRESS_DIR', plugin_dir_path( __FILE__ ) ); 
        

        if ( ! defined( 'FIND_DO_FOR_ANSPRESS_URL' ) ) 
            define( 'FIND_DO_FOR_ANSPRESS_URL', plugin_dir_path( __FILE__ ) );
        

        $this->includes();

        add_action( 'wp_enqueue_scripts', array($this, 'fd_enqueue'));




    private function includes() 

        require_once (FIND_DO_FOR_ANSPRESS_DIR.'braintree/lib/braintree.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-keys.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-process-trans.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-functions.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/fd-bt-form.php');
        require_once (FIND_DO_FOR_ANSPRESS_DIR.'includes/fd-ask-form.php');



    

    public function fd_enqueue() 
        wp_enqueue_style( 'fd_for_anspress_css', FIND_DO_FOR_ANSPRESS_DIR.'css/fd-css.css', array(jquery), null); //handle, source, dependencies, version, media (the type of media for which the stylesheet is designed, e.g. mobile, web, print...)
        //wp_enqueue_script( 'fd_for_anspress_js', FIND_DO_FOR_ANSPRESS_DIR.'fd-braintree/js/fd-braintree-js.js', array(), null);  used require_once to directly add it to fd-bt-form.php
     

 //End class

function find_do_for_anspress() 
    $FDClassStart = new Find_Do_For_AnsPress();

add_action( 'plugins_loaded', 'find_do_for_anspress' );

        //html "testing" block
        echo '<p id="checkout">Testing the enqueued CSS</p>';

fd-css.css 尝试 1

<style>
#checkout 
    color: red;

</style>

fd-css.css 尝试 2

<style>
#checkout 

    color: red;


p 
    color: red;

</style>

【参考方案1】：

当您调用 wp_enqueue_style 时，您将 array(jquery) 作为依赖项传递。 jquery 是一个无效句柄（它应该用引号括起来），永远不会加载依赖项，因此不会加载您的样式表

也就是说，您可能不希望 CSS 有任何依赖项。如果您想控制样式表的加载顺序，您将使用它，您在此处放置的任何句柄都将在您的脚本之前加载。如果句柄无效，您的脚本将不会被加载。

wp_enqueue_style( 'fd_for_anspress_css', FIND_DO_FOR_ANSPRESS_DIR.'css/fd-css.css' );

【讨论】：

嗯，好的。由于我的测试，我离开了 jquery 部分。使用您的代码行，它仍然无法正常工作:(

有没有办法测试入队过程的每个部分，看看它可能卡在哪里？

您的“测试”HTML 块将被加载到头部上方 - 您甚至在将样式排入队列之前就调用了它。您是否查看了源代码以查看它是否真的不存在或只是不适用于您的测试？

“测试”块肯定存在，只是没有被涂成红色。这就是我知道 CSS 没有正确排队的方式。但我看不出有什么问题。

我确定它是可见的，但它可能在您的 HTML 标记之前？绝对不在身体里。