如何编辑我的入队脚本函数以包含 Internet Explorer 和页面模板样式表？

Posted 2023-02-21

【中文标题】如何编辑我的入队脚本函数以包含 Internet Explorer 和页面模板样式表？

【英文标题】：How can I edit my enqueue script function to include Internet Explorer and page template stylesheets?

【发布时间】：2016-08-10 19:16:58

【问题描述】：

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

<?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 样式表，并且似乎只是恢复到上面的第一个代码。谁能帮助我指出我做错了什么？我想通过组合这些代码来实现为多个页面模板添加样式表的能力，并且还具有从我的 style.css 继承样式并仅覆盖必要的 CSS 规则以在旧浏览器上工作的依赖于 IE 的样式表。我也需要我的 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 ----------- */

【参考方案1】：

用于 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

【讨论】：

您好 bretterer，感谢您这么快回答。是的，看来我确实错过了要点的后半部分，我一定认为我阅读的部分下面的内容只是其他人的cmets！我对你答案的第一部分感到有些困惑——wp_style_add_data( 'ie-theme', 'conditional', 'IE' );——我可能是错的，但它似乎没有将我的 I.E 样式表排入队列。我想做的是使用我的 ie8.css 或 ie9.css 来继承我的 style.css 的样式，但覆盖我在顶部添加的任何规则。

我在大多数答案中都使用示例，而不是实际代码。我提供的答案向您展示了您需要的功能，但没有填写详细信息。 wp_style_add_data() 方法是用于您的主题的方法。您仍然需要使用wp_enqueue_style() 将其排入队列查看第三个块并将ie-theme 更改为您要使用的引用并将/css/ie.css 更改为您想要的样式表

哦，好吧，我错了。我想我现在明白你的意思了，但是由于做了一些更改，我在其他现代浏览器采用 ie9.css 样式时遇到了问题。我已经使用我现在使用的代码对上面的问题添加了更新。你能看出我做错了什么吗？抱歉，如果我完全误解了，我是学习 PHP 的新手。

我刚刚注意到 Internet Explorer 不再使用 IE 样式表，因此现代浏览器出于某种原因正在使用它。

这可能会有所帮助。 ***.com/questions/19502040/… IE 10+ 不要使用条件。