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


How can I edit my enqueue script function to include Internet Explorer and page template stylesheets?

在我的Wordpress主题中,我一直在使用一个排队脚本函数,该函数将我的jQuery脚本和样式表添加到我的网站中。因为我有一个单独的页面模板和我的标准page.php,所以我一直在使用下面代码中写的"if"answers"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错误,但它没有加载IE样式表,而且似乎只是恢复到上面的第一段代码。有人能帮我指出我做错了什么吗?我想通过组合这些代码来实现的是能够为多个页面模板添加样式表,并且还具有依赖于IE的样式表,这些样式表继承了我的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 ----------- */

对于IE条件样式表

将脚本排入队列后,可以使用以下命令:

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

因此,对于上面的示例,假设您有一个脚本,它按照如下方式排队。

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

您可以在排队后添加以上内容,即使完整声明出现的主题:

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_enque_style方法包装在check 中

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

请参阅此堆栈交换问题以获取参考