Question

在我的Wordpress主题中，我一直在使用一个enqueue脚本函数，它将我的jQuery脚本和我的样式表添加到我的网站。因为我有一个单独的页面模板以及我的标准page.php，所以我一直在使用＆＃39; if＆＃39;和＆＃39;其他＆＃39;下面代码中编写的命令，用于区分两个样式表。

<?php

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

function mywebsite_scripts() {

/* JAVASCRIPT ----------- */

    wp_enqueue_script(
    'mywebsite_scripts-menu-toggle',
    get_template_directory_uri() . '/js/menu-toggle.js' );

    wp_enqueue_script(
    'mywebsite_scripts-add-submenu',
    get_template_directory_uri() . '/js/add-submenu.js' );

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

/* END JAVASCRIPT ----------- */

/* PAGE TEMPLATE STYLESHEETS ----------- */

    if (is_page_template('page-templates/full-page.php')) 
    { wp_enqueue_style( 'mywebsite_scripts-full-page' , 
    get_template_directory_uri() . '/css/full-page.css'); }     

/* END PAGE TEMPLATE STYLESHEETS ----------- */

/* MAIN STYLESHEET ----------- */

    else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() ); } }

/* END MAIN STYLESHEET ----------- */

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

当我开始尝试使我的主题与早期版本的Internet Explorer兼容时，我遵循了本教程：https://gist.github.com/wpscholar/4947518

当我将它添加到我的函数文件夹时，此代码有效，但不允许我需要的javascript入队或额外的页面模板样式表。

<?php

function enqueue_my_styles()
{

    global $wp_styles;

    // LOAD THE MAIN STYLESHEET 
    wp_enqueue_style('mywebsite_scripts_style', get_stylesheet_uri());

    wp_enqueue_style('mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array(
    'mywebsite_scripts_style'
    ));
    $wp_styles->add_data('mywebsite_scripts_style_ie8', 'conditional', 'IE 8');

    wp_enqueue_style('mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array(
    'mywebsite_scripts_style'
    ));
    $wp_styles->add_data('mywebsite_scripts_style_ie9', 'conditional', 'IE 9');

}

add_action('wp_enqueue_scripts', 'enqueue_my_styles');

我尝试将两个代码组合在一起，最后得到了以下代码。虽然它没有给我任何PHP错误，但它并没有加载I.E样式表，而且似乎只是回到上面的第一个代码。任何人都可以通过指出我做错了什么来帮助我吗？我希望通过组合这些代码来实现的是能够为多个页面模板添加样式表，还有依赖于I.E的样式表，它继承了我的style.css中的样式，并且只覆盖必要的CSS规则以适用于旧版浏览器。我也需要我的Javascript才能工作。

我希望这一切都是可能的，任何帮助都会非常感激，因为我已尽力使其发挥作用，而且我不确定自己哪里出错了。

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

function mywebsite_scripts_scripts() {

/* JAVASCRIPT ----------- */

    wp_enqueue_script(
    'mywebsite_scripts-menu-toggle',
    get_template_directory_uri() . '/js/menu-toggle.js' );

    wp_enqueue_script(
    'mywebsite_scripts-add-submenu',
    get_template_directory_uri() . '/js/add-submenu.js' );

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

/* END JAVASCRIPT ----------- */

/* PAGE TEMPLATE STYLESHEETS ----------- */

    if (is_page_template('page-templates/full-page.php')) 
    { wp_enqueue_style( 'mywebsite_scripts-full-page' , 
    get_template_directory_uri() . '/css/full-page.css');      

    wp_enqueue_style( 'mywebsite_scripts-full-page_ie', get_stylesheet_directory_uri() . '/css/full-page-ie8.css', 
    array( 'mywebsite_scripts-full-page' ) ); $wp_styles->add_data( 'mywebsite_scripts-full-page_ie', 'conditional', 'IE 8' ); 

} 

/* END PAGE TEMPLATE STYLESHEETS ----------- */

/* MAIN STYLESHEET ----------- */

    else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() ); 

    wp_enqueue_style( 'mywebsite_scripts_style_ie8’, get_stylesheet_directory_uri() . '/css/ie8.css', 
    array( 'mywebsite_scripts_style' ) ); $wp_styles->add_data( 'mywebsite_scripts_style_ie8’, 'conditional', 'IE 8' ); 

} }

/* END MAIN STYLESHEET ----------- */

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

***更新

<?php

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

function mywebsite_scripts_scripts() {

/* JAVASCRIPT ----------- */

    wp_enqueue_script(
    'mywebsite_scripts-menu-toggle',
    get_template_directory_uri() . '/js/menu-toggle.js' );

    wp_enqueue_script(
   'mywebsite_scripts-add-submenu',
    get_template_directory_uri() . '/js/add-submenu.js' );

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

/* END JAVASCRIPT ----------- */


if (is_page_template('page-templates/full-page.php')) 

    { wp_enqueue_style( 'mywebsite_scripts-full-page' , 
    get_template_directory_uri() . '/css/full-page.css'); 

}


else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );

    wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', 
    array( 'mywebsite_scripts_style' ) );

    wp_style_add_data( 'mywebsite_scripts-style_ie9', 'conditional', 'IE 9' );

} }

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

***更新

好的我已经设法让这个工作，但只使用第一种使用全局样式的方法。我还不确定为什么更新的版本不起作用。

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

function mywebsite_scripts_scripts() {


/* JAVASCRIPT ----------- */

    wp_enqueue_script(
    'mywebsite_scripts-menu-toggle',
    get_template_directory_uri() . '/js/menu-toggle.js' );

    wp_enqueue_script(
    'mywebsite_scripts-add-submenu',
    get_template_directory_uri() . '/js/add-submenu.js' );

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

/* END JAVASCRIPT ----------- */


/* PAGE TEMPLATE STYLESHEETS ----------- */

global $wp_styles;

if (is_page_template('page-templates/full-page.php')) 
    { wp_enqueue_style( 'mywebsite_scripts-full-page' , 
    get_template_directory_uri() . '/css/full-page.css');      
} 

/* END PAGE TEMPLATE STYLESHEETS ----------- */


/* MAIN STYLESHEET ----------- */

else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );

wp_enqueue_style( 'mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array( 'mywebsite_scripts_style' ) ); 
$wp_styles->add_data( 'mywebsite_scripts_style_ie8', 'conditional', 'IE 8' ); 

wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array( 'mywebsite_scripts_style' ) ); 
$wp_styles->add_data( 'mywebsite_scripts_style_ie9', 'conditional', 'IE 9' ); 

} }

/* END MAIN STYLESHEET ----------- */

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

Answer 1

FOR IE条件风格表

将队列排入队列后，您可以使用以下命令：

wp_style_add_data( 'ie-theme', 'conditional', 'IE' );

因此，对于上面的示例，假设您有一个像下面这样排队的脚本。

wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css"  );

在您排队ie-theme后，您将添加上述内容，以显示完整声明：

wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css"  );
wp_style_add_data( 'ie-theme', 'conditional', 'IE' );

看起来你读过要点的顶部但没有更低。从WordPress的最新版本开始，有一个更新，您应该使用wp_style_add_data()函数而不是$wp_styles->add_data();示例

用于模板特定样式表

要将单个模板的样式表排入队列，您可以将wp_enqueue_style方法包装在一个检查中

if ( is_page( 'landing-page-template-one' ) ) {
  /** Call landing-page-template-one enqueue */
}

请参阅This Stack Exchange question以获取参考资料

如何编辑我的排队脚本功能以包含Internet Explorer和页面模板样式表？

1 个答案: