如何将Internet Explorer特定的样式表放入Wordpress函数文件夹中


How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

我很难将Wordpress主题设置为Internet Explorer早期版本所支持。我在网上找到的大多数教程都指示我在标题中排列特定于IE的样式表,当我尝试时,这些样式表不起作用,我无论如何都不愿意这样做,因为我读到这是一项应该在函数文件夹中完成的工作。

我的当前样式表已经在函数文件夹中排队了。我只有两个——我的主样式.css和另一个用于具有透明标题的不同页面模板。我已经开始为每个页面模板创建单独的样式表,进行一些轻微的调整,并删除InternetExplorer8及以下版本不支持的所有内容。

所以我的问题如下:

1) 根据我下面的代码,有没有一种方法可以让我的主题检测是否使用了早期版本的Internet Explorer,如果是这样的话,让它将任何IE样式表排队?我看过一些声称可以做到这一点的教程,但它们看起来与下面的代码完全不同,我不太了解重写它。

2) 我提到我有两个不同的页面模板(包括page.php),我想为InternetExplorer配置它们。它们都有自己的样式表,因为它们之间有一些显著的差异。如何让我的函数文件夹检测哪个样式表已经为每个页面模板排队,然后让它检测是否正在使用Internet Explorer,然后将正确的样式表排队覆盖它?(我可能完全偏离了我的逻辑,但据我所知,这就是这个过程的工作方式)

3) 如果我正在覆盖我现有的Internet Explorer CSS,是否可以只覆盖我的IE样式表中的必要规则?我的意思是,与其重写整个内容,不如让主题先查看原始样式表,然后读取我覆盖的在原始样式表中不兼容的规则。

例如,如果我的布局中有一个对象设置为display:flex,I.E8显然无法处理这个问题,但代码的其余部分可能还可以。因此,如果我在I.E8样式表中将该对象设置为display:inline-block,我是否也需要编写其余的代码?

这是我的代码,请原谅注释——当我试图了解内容时,它们实际上只是为了我的利益。我也包含了javascript队列,因为出于某种原因,如果我删除它们,它也不会接受我的样式表。

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function lucieaverillphotography_scripts() {
    /* JAVASCRIPT ----------- */
    wp_enqueue_script(
        'lucieaverillphotography-menu-toggle',
        get_template_directory_uri().
        '/js/menu-toggle.js');
    wp_enqueue_script(
        'lucieaverillphotography-add-submenu',
        get_template_directory_uri().
        '/js/add-submenu.js');
    /* END JAVASCRIPT ----------- */
    /* PAGE TEMPLATE STYLESHEETS ----------- */
    if (is_page_template('page-templates/full-page.php')) {
        wp_enqueue_style('lucieaverillphotography-full-page',
            get_template_directory_uri().
            '/css/full-page.css');
    }
    /* END PAGE TEMPLATE STYLESHEETS ----------- */
    /* MAIN STYLESHEET ----------- */
    else {
        wp_enqueue_style('lucieaverillphotography_style', get_stylesheet_uri());
    }
}
/* END MAIN STYLESHEET ----------- */
add_action('wp_enqueue_scripts', 'lucieaverillphotography_scripts');
/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

我的标题:

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                       <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                    </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

更新:

大卫,根据你的建议,我试过wp_enqueue_style('/css/ie8.css', 'get_stylesheet_directory_uri()', array('style.css') );

根据我在网上找到的一个教程,我也给这个版本打了一个wp_enqueue_style( 'lucieaverillphotography-ie', get_stylesheet_directory_uri() . "/css/ie8.css", array( 'lucieaverillphotography' ) ); $wp_styles->add_data( 'lucieaverillphotography-ie', 'conditional', 'IE 8' );

我用这两种方法中的任何一种都接近目标了吗?我在CrossBrowserTesting.com上尝试过,没有看到任何区别,所以看起来我的ie8.css文件没有被识别。

  1. 您可以使用$_SERVER['HTTP_USER_AGENT']

&这个页面http://www.useragentstring.com/pages/Internet%20Explorer/

&这个页面http://www.phpliveregex.com/

创建要与preg_match 一起使用的正则表达式

例如

functions.php(最好是在函数挂钩的wp_enque_scripts中,除非呈现页面,否则不希望运行preg-match)

if(preg_match("/MSIE [23456789].0/",$_SERVER['HTTP_USER_AGENT']) ){
   wp_enqueue_style('whatever');
}

可以说,您可以使用modernizer而不是加载自定义样式表。你可能会失去上面的一些数字,使功能稍微快一点。我怀疑任何访问你网站的人都有IE<6

  1. 显然,如果你想匹配特定版本的IE,从正则表达式中删除数字以适合

  2. 是的,你可以,你先把你的常规样式表入队,然后在wp入队样式中设置dependency参数

wp_enqueue_style('iecss', 'uri', array('normalcss handle') )

但处理这一问题的一个更简单的方法是只修改css规则

.class{
   display: inline-block;
   display: flex;
}

如果显示flex失败,内联块将是应用的显示值(只要不被后期样式或更高的特异性否决)