よもやまチョモランマ

WPの外部ファイルはfunctionで呼び出すべし

WordPress PHP

CSSとかJavascriptとかの外部ファイルを呼び出すのは、＜head＞ではなく「function.php」でやりなさいよ～、という時代の波に乗っかって、ようやくやってみました。

とりあえず、CSSとJavascript。

// CSSの読み込み
function register_stylesheet() { //読み込むCSSを登録する
	wp_register_style('reset', get_template_directory_uri().'/css/reset.css');
	wp_register_style('lightbox', get_template_directory_uri().'/css/lightbox.css');
	wp_register_style('style', get_template_directory_uri().'/style.css');
}
function add_stylesheet() { //登録したCSSを以下の順番で読み込む
	register_stylesheet();
	wp_enqueue_style('reset', '', array(), '1.0', false);
	wp_enqueue_style('lightbox', '', array(), '1.0', false);
	wp_enqueue_style('style', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// スクリプトの読み込み
function register_script(){ //読み込むJSを登録する
	wp_register_script('smoothscroll', get_template_directory_uri().'/js/smoothscroll.js');
	wp_register_script('lightbox-plus-jquery', get_template_directory_uri().'/js/lightbox-plus-jquery.js');
}
function add_script(){ //登録したJSを以下の順番で読み込む（falseはheader、trueはfooterに書き出し）
	register_script();
	wp_enqueue_script('smoothscroll', '', array(), '1.0', false);
	wp_enqueue_script('lightbox-plus-jquery', '', array(), '1.0', false);
}
add_action('wp_print_scripts','add_script');

まとめて記述する方法もあるのですが。
CSSもJavascriptもファイルが1つだけということはあまりないので、複数登録して順序を制御するこの書き方が好みです。
【参考】WordPressテーマのCSSとJSをfunctions.phpで読み込む方法

ウェブアイコンフォントも。

// FontAwesome をCDNで利用する（EOTの間が出力）
add_action('wp_head', 'script_fa_cdn');
 function script_fa_cdn(){
 $link = <<<EOT
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
EOT;
 echo $link;
};

公式から一式ダウンロードしてファイルをアップロードする方法もあるようですが。
CDNのソース部分を書き替えればいいこの書き方が、末永く便利そうです。
【参考】Webフォント「FontAwesome」をfunctions.phpから読み込ませる方法

あとは、jQuery。

// jQuery をCDNで利用する
function load_google_cdn() {
  if ( !is_admin() ){
    //jQueryを登録解除
    wp_deregister_script( 'jquery' );
    //Google CDNのjQueryを出力
    wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array(), NULL, false );
  }
}
add_action( 'init', 'load_google_cdn' );

これも、バージョンの数字を書き換えればいいだけのものにしました。
【参考】WordPress同梱のjQueryをGoogle CDNのものに変更してwp_footer()で読み込む方法

よし、これでOK。

悩ましいのは、ハンバーガーメニューのトグル部分に数行のスクリプトが直書きされていて、こいつを動かすために全部のスクリプトを「false」にしなきゃいけないことですよ。

こいつも外部にしてしまえば「true」にしてフッターに書けるんだけどなぁ・・・

≪ next post
prev post ≫