วิธีใส่ IE Conditional Stylesheet ใน WordPress

เวลาใส่ CSS ใน WordPress Theme เค้าจะแนะนำให้ใช้ wp_enqueue_style() เป็นมาตรฐานครับ ไม่ว่าจะเป็นใน Themeforest หรือใน WordPress.org เองก็ตาม

function addMyScript() {
    wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/mystyle.css');
}
add_action('wp_head', 'addMyScript');

ทีนี้ถ้าเป็นไฟล์ CSS ทั่วไปก็ไม่มีปัญหาอะไรครับ พอดีผมเพิ่งเจอเคสที่ใช้ IE Conditional Stylesheet หรือ CSS ที่จะใช้งานเฉพาะใน Internet Explorer บางเวอร์ชั่นนั่นเอง (Front-end จะเอาไว้แก้บั๊กที่เจอเฉพาะใน IE เก่า ๆ ครับ)

<!--[if lt IE 9]>
    <link href="style.css" rel="stylesheet" type="text/css">
<![endif]-->

บางคนไม่รู้จะทำยังไงดี เพราะ wp_enqueue_style ใส่ if ไปคั่นไม่ได้ ก็เลยโยน HTML ทั้งก้อนใส่เข้าไปแบบนี้ครับ ซึ่งเป็นวิธีที่ผิด

<?php
add_action( 'wp_print_styles', 'print_my_styles' );
function print_my_styles() {
    echo '<!--[if lt IE 9]><link href="style.css" rel="stylesheet" type="text/css"><![endif]-->';
}

วิธีที่ถูกต้องในการใส่ IE Conditional Stylesheet ด้วย wp_enqueue_style

วิธีที่ถูกต้องคือใช้ wp_enqueue_style นี่แหละครับ หลายคนไม่รู้ว่าสามารถเขียนโค้ดเพิ่ม 1 บรรทัดเพื่อใส่ IE Conditional Stylesheet แบบง่าย ๆ ได้ แบบนี้:

wp_enqueue_style( 'my-theme-old-ie', get_stylesheet_directory_uri() . "/css/old-ie.css", array( 'my-theme' ) );
$wp_styles->add_data( 'my-theme-old-ie', 'conditional', 'lt IE 9' );

ลองดูตัวอย่างการใช้งานแบบเต็ม ๆ กัน

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

function enqueue_my_styles() {
    
    global $wp_styles;
    
    // Load the main stylesheet
    wp_enqueue_style( 'my-theme', get_stylesheet_uri() );
    
    /**
     * Load our IE-only stylesheet for all versions of IE:
     * <!--[if IE]> ... <![endif]-->
     * 
     * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
     * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
     * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
     * properly handle non-IE conditional comments.
     */
    wp_enqueue_style( 'my-theme-ie', get_stylesheet_directory_uri() . "/css/ie.css", array( 'my-theme' )  );
    $wp_styles->add_data( 'my-theme-ie', 'conditional', 'IE' );
    
    /**
     * Load our IE version-specific stylesheet:
     * <!--[if IE 7]> ... <![endif]-->
     */
    wp_enqueue_style( 'my-theme-ie7', get_stylesheet_directory_uri() . "/css/ie7.css", array( 'my-theme' )  );
    $wp_styles->add_data( 'my-theme-ie7', 'conditional', 'IE 7' );
    
    /**
     * Load our IE specific stylesheet for a range of older versions:
     * <!--[if lt IE 9]> ... <![endif]-->
     * <!--[if lte IE 8]> ... <![endif]-->
     * NOTE: You can use the 'less than' or the 'less than or equal to' syntax here interchangeably.
     */
    wp_enqueue_style( 'my-theme-old-ie', get_stylesheet_directory_uri() . "/css/old-ie.css", array( 'my-theme' )  );
    $wp_styles->add_data( 'my-theme-old-ie', 'conditional', 'lt IE 9' );
    
    /**
     * Load our IE specific stylesheet for a range of newer versions:
     * <!--[if gt IE 8]> ... <![endif]-->
     * <!--[if gte IE 9]> ... <![endif]-->
     * NOTE: You can use the 'greater than' or the 'greater than or equal to' syntax here interchangeably.
     */
    wp_enqueue_style( 'my-theme-new-ie', get_stylesheet_directory_uri() . "/css/new-ie.css", array( 'my-theme' )  );
    $wp_styles->add_data( 'my-theme-new-ie', 'conditional', 'gt IE 8' );
}

ขอขอบคุณตัวอย่างโค้ดจาก WP Scholar ครับผม

Categories: CSS

Leave a Reply

Your email address will not be published. Required fields are marked *