我很难将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文件没有被识别。
- 您可以使用
$_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
显然,如果你想匹配特定版本的IE,从正则表达式中删除数字以适合
是的,你可以,你先把你的常规样式表入队,然后在wp入队样式中设置
dependency
参数
wp_enqueue_style('iecss', 'uri', array('normalcss handle') )
但处理这一问题的一个更简单的方法是只修改css规则
.class{
display: inline-block;
display: flex;
}
如果显示flex失败,内联块将是应用的显示值(只要不被后期样式或更高的特异性否决)