[WordPress] 外部CSSやJavaScriptの読み込みはfunctions.phpで。スマホでは読み込ませない対応も簡単。

2017年04月24日
Sponsored Link

wordpress1

WordPressで外部CSSやJavaScriptを読み込む時にはheader.phpやfooter.phpに直接記述せずに、functions.phpにwp_enqueue_stylewp_enqueue_script 関数を使って読み込むことが推奨されています。

functions.phpで一元管理することで読み込みによる不具合回避や更新時の対応が楽になリます。

また、ページ表示スピードに影響を与える無駄な読み込みの制御することも容易にできます。

例えば、アクションフックで wp_enqueue_script を読み込む時に、条件分岐タグを使えば、サイトのフロントページだけに読み込ませたり、スマホとタブレットでは読み込ませないといった対応も楽にできます。

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に下記コードを追記しましょう。

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」が使えるようになります。

follow us in feedly

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ