Your cart is currently empty!
วิธีใส่ 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 ครับผม
by
Tags:
Leave a Reply