functions.phpからスタイルシートやjQueryのファイルを呼び込む方法

functions.phpに各ファイルの呼び込みコードを記載してソースを整理!

header.phpやfooter.phpにスタイルシートやjsファイルの呼び出しをすると

ソースがごちゃごちゃになってしまって管理しづらいですよね。

ごちゃごちゃのソースは見た目もあまり良くありません。

クライアントとの信頼関係を築く上でも、ソースはなるべく簡潔に、出来る限り管理しやすく別ファイルに書いていくほうが適切でしょう。

下記のコードをコピペすれば、自動的にcssはwp_head();の記載のある部分に、jsはwp_footer();の記載がある部分に書き出されます。

functions.php

function themes_file_scripts() {
	wp_enqueue_style('ここに任意の名前', 'ここにファイルのパス');
	wp_enqueue_style( 'ここに任意の名前', get_template_directory_uri() . '/css/テーマの「css」フォルダのファイル名' ); //この行をコピペしてパスを変更したり任意の名前を変更して追加していく
	wp_enqueue_style( 'ここに任意の名前', get_stylesheet_uri() ); //テーマフォルダのstyle.css

	
    if(is_admin()) return; //管理画面ではスクリプトは読み込まない
    wp_deregister_script( 'jquery'); //デフォルトの jQuery は読み込まない
    //CDN から読み込む
    wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3', true);
    wp_enqueue_script( 'jquery-mig', '//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js', array(), '1.2.1', true);
	wp_enqueue_script( 'ここに任意の名前', get_template_directory_uri() . '/js/テーマの「js」フォルダのファイル名', array(), '20151215', true ); //この行をコピペしてパスを変更したり任意の名前を変更して追加していく
}
add_action( 'wp_enqueue_scripts', 'themes_file_scripts' );

注意点

ここに任意の名前っていうのは、他のファイルの被らない様にして下さい。

たとえばcolorbox.jsを呼び出す際に任意の名前がcolorboxで、他のファイルにもcolorboxという記述があるとバッティングをして、うまく書き出されません。

あと、毎回言っているのですが、functions.phpを編集する際は必ずバックアップをよろしくお願いいたします。

最新情報をチェックしよう!