Wordpress 报纸子主题加载 CSS 两次

Question

我正在使用带有报纸主题的 Wordpress（作为子主题）。我注意到来自子主题的自定义 CSS 被加载了两次。

我检查了function.php，我想知道第二个函数是否是我问题的根源？

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 1001 );

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'chld_thm_cfg_parent','td-theme','td-theme-demo-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );  

感谢您的帮助。

编辑 1：我通过站点代码检查器找到了这两行代码。你认为这可能是它吗？

<link rel='stylesheet' id='td-theme-css'  href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_child-css'  href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />

Answer 1

我们可以看到样式表被包含了两次不同的 id...：

<link rel='stylesheet' id='td-theme-css'  
      href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_child-css'  
      href='.../wp-content/themes/Newspaper-lesser-old-child/style.css?ver=8.1.1504096948' type='text/css' media='all' />

...所以我们可以使用 ids td-theme 和 chld_thm_cfg_child 来定位问题。

您需要在您的父主题和子主题中查看您的functions.php 中wp_enqueue_scripts 操作中调用的函数。

您已经找到您的样式表在您的子主题中排队的位置，并且可以从 id 中看到它是由您的子 functions.php 中的以下代码加载的：

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_child', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'chld_thm_cfg_parent','td-theme','td-theme-demo-style' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );  

所以现在我们需要追踪另一个实例。这就是困难所在 因为您没有包含来自父级的入队代码。

潜在原因和解决方案：

1. 父主题使用get_stylesheet_directory_uri

据我所知，id td-theme 来自报纸主题。这表明它使用get_stylesheet_directory_uri 而不是get_template_directory_uri() 来加载样式表。

get_stylesheet_directory_uri 从活动主题的文件夹中加载样式表，因此如果该主题的子主题处于活动状态，那么它将加载子样式表而不是自己的。

如果它已经被父主题加载，您不需要在子主题中再次加载它，因此删除子functions.php中再次加载子样式表的代码

还有其他可能导致此问题的原因，但它们似乎不适用于此处。但是，我会将它们包括在内，以防您的问题没有所有排队功能，也适用于可能有类似问题的其他人。

1. 如果您的子主题包含它而不是父主题

子主题可能会错误地尝试加载父样式表以及子样式表。在这种情况下，我希望在您孩子的 function.php 中看到类似的内容：

wp_enqueue_style( 'td-theme', get_stylesheet_directory_uri() . '/style.css',  
                  array(), $version);
wp_enqueue_style( 'chld_thm_cfg_child', get_stylesheet_directory_uri() . '/style.css',  
                  array(), $version);

在您的情况下，这似乎不是问题，因为您使用不同的 id ("chld_thm_cfg_parent") 来加载父样式表。

如果是这种情况，要修复它，您应该将get_template_directory_uri 用于父样式表，将get_stylesheet_directory_uri 用于子样式表，例如：

/* load parent stylesheet from parent theme folder with get_template_directory_uri */
wp_enqueue_style( "td-theme", get_template_directory_uri() . '/style.css' , 
                  array(), $version);

/* load child stylesheet from child theme folder withget_stylesheet_directory_uri
   Note: we include the parent's id in the dependencies array so it gets loaded first */ 
wp_enqueue_style( "chld_thm_cfg_child", get_stylesheet_directory_uri() . '/style.css', 
                  array("parent-id"), $version);

（请注意，这可能会导致父主题被包含两次，具体取决于其包含在父主题中的方式 - 但同样没有看到实际代码，很难确切知道）。