bootstrap,JQuery等追加ファイルを読み込む正しい方法

スポンサーリンク

長く更新されずに放置されたままの古いテーマでは、未だに<header>タグ内に追加のCSSファイルやJSファイルの読み込みを書き込んでしまっているのをたまに見掛けますが、WordPressでは、必要なファイルの読み込みはfunctions.php内でまとめて行うのが正解です。

必要なファイルの読み込みを行うサンプルコード



function add_my_files() {
    if(is_admin()) return; 		    //管理画面ではスクリプトは読み込まない
	wp_enqueue_style('bootstrap-min-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(), '3.3.6');
	wp_enqueue_style('fontawsome-min-css', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', array(), '4.6.3');
	wp_enqueue_style('style', get_stylesheet_uri(), array(), wp_theme_version());
        wp_deregister_script('jquery');     //デフォルトの jQuery は読み込まない 
        wp_enqueue_script('jquery', '//code.jquery.com/jquery-3.0.0.min.js', array(), '3.0.0', false);
        wp_enqueue_script('jquery-mig', '//code.jquery.com/jquery-migrate-3.0.0.min.js"', array(), '3.0.0', false);
        wp_enqueue_script('bootstrap-min-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array(), '3.0.0', true);
	if(is_home()){
    	    //ホーム画面でのみ読み込むCSS,スプリプトを記述(スライダー等)
            wp_enqueue_script('trio-js', get_template_directory_uri() .'/js/trio.js', array('jquery'), wp_theme_version() , true);
 	}
}
add_action('init', 'add_my_files');


functions.phpファイル内に、新しくファイルを読み込むための関数(add_my_files)を作成します。

cssファイルを読み込むにはwp_enqueue_style、javaScriptファイルを読み込むにはwp_enqueue_script関数を使用します。

wp_enqueue_style関数の呼び出し方法例


wp_enqueue_style('好きな固有の名前を付ける', '読み込みファイルのURL', array(依存するファイルがあるならカンマ区切りで指定する), '読み込みファイルのバージョン',headタグ内で読み込むならfalse、タグの上で読み込むならtrueを指定するデフォルトはFalse);

wp_enqueue_script関数の呼び出し方法例



wp_enqueue_script('好きな固有の名前を付ける', '読み込みファイルのURL', array(依存するファイルがあるならカンマ区切りで指定する), '読み込みファイルのバージョン',headタグ内で読み込むならfalse、タグの上で読み込むならtrueを指定するデフォルトはFalse);


反対に、読み込みたくないファイルを指定するならwp_deregister_script関数を利用します。

headタグ内に、次のように書き込むのはやめて、functions.phpファイル内で一元管理しましょう。



<head>
   <link rel='stylesheet' id='bootstrap-min-css-css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?ver=3.3.6' type='text/css' media='all'/>
   <link rel="stylesheet" id="fontawsome-min-css-css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css?ver=4.6.3" type="text/css" media="all">
</head>


スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!