WordPressで外部CSSやJavaScriptを読み込む時にはheader.phpやfooter.phpに直接記述せずに、functions.phpにwp_enqueue_styleやwp_enqueue_script 関数を使って読み込むことが推奨されています。
functions.phpで一元管理することで読み込みによる不具合回避や更新時の対応が楽になリます。
また、ページ表示スピードに影響を与える無駄な読み込みの制御することも容易にできます。
例えば、アクションフックで wp_enqueue_script を読み込む時に、条件分岐タグを使えば、サイトのフロントページだけに読み込ませたり、スマホとタブレットでは読み込ませないといった対応も楽にできます。
01 02 03 04 05 06 07 08 09 10 | function _s_scripts() { if ( is_front_page() ) { wp_enqueue_script( '_s-use-masonry', get_template_directory_uri() . '/js/use-masonry.js', array( 'jquery-masonry', 'jquery' ), '1.0', true ); wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/jquery.bxslider.min.js', array(), '4.1.2', true ); } if ( !wp_is_mobile() ) { wp_enqueue_script( 'scrolltopcontrol', get_template_directory_uri() . '/js/scrolltopcontrol.js', array(), '1.0', true ); }}add_action( 'wp_enqueue_scripts', '_s_scripts' ); |
上記コードのwp_is_mobileはWordPress バージョン3.4から導入された条件分岐タグです。これは、ユーザーがモバイルデバイスを使ってページを訪問しているかどうかをチェックしてくれますが、注意点はタブレットもモバイルデバイスとして認識されること。
スマホでは読み込みたいけどタブレットとPCは読み込ませたくないといった場合には、それに対応した条件分岐タグは今のところありません。
「wp_is_mobile」からタブレットを除外した条件分岐タグが使えるようにfunctions.phpに下記コードを追記しましょう。
01 02 03 04 05 06 07 08 09 10 11 12 | function is_mobile(){ $useragents = array( 'iPhone', 'Android.*Mobile', 'Windows.*Phone', 'iPod', 'blackberry', 'incognito' ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);} |
この設定により「is_mobile」が使えるようになります。
