【 更新 】おすすめ記事はこちら

【WordPress】CSSとJavaScriptをfunctions.phpで読み込み出力する

スタイルシートやスクリプトファイルは「functions.php」に書くと「header.php」のコードがすっきりするのでおすすめです。

CSSは「wp_enqueue_style」、JavaScriptは「wp_enqueue_script」を使って読み込みます。ただし、CDNなどの外部サイトの場合と、ディレクトリに保存している場合とで書き方に違いがあるので注意が必要です。

CSSおよびJavaScriptの記述方法、そして外部ファイルの記述方法に分けて解説していきます。

CSSをfunctionsで読み込む

wp_enqueue_style(‘任意の名前’, 関数 . ’/ディレクトリ/ファイル名.css’); 」の内容で順に記載しています。

「get_template_directory_uri()」は、保存場所であるテーマディレクトリまでのURLを出力する関数です。任意の名前はシングルクォーテーションで囲まれており、文字列として認識されるため日本語もOKです。分かりやすい名前をつけてください。

wp_enqueue_style('reset_style', get_template_directory_uri() . '/css/style.css'); 

JavaScriptをfunctionsで読み込む

wp_enqueue_style(‘任意の名前’, 関数 . ‘/ディレクトリ/ファイル名.js’, このファイル以前に読み込むスクリプトファイル, ’ バージョン’, footerで読み込むか); 」の内容で順に記載しています。

「wp_enqueue_style」との違いは、ディレクトリより後の記述です。特に「array()」に関しては、各々につけた任意の名前を使って該当のファイルより前に読み込みたいものを設定できます。

wp_enqueue_script('accordion_script', get_template_directory_uri() . '/js/headersize.js', array(), '', true); 

例えば、WordPressにデフォルトで組み込まれている「jQuery」を利用するときなどが挙げられます。こちらはよく使われる記述で、(‘jquery’)と書いて先に読み込む必要があります。

外部ファイルをfunctionsで読み込む

CDNなどでフォントやファイルを読み込むときは記述が少し変わります。ディレクトリのURLを考える必要はないので、関数以降を消して絶対パスで書いていきます。

wp_enqueue_script('fontawesome_script', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'); 

外部ファイルでもバージョンがある場合は、以下のような内容で記述します。

wp_enqueue_script('jquery_script', get_template_directory_uri() . '/js/jquery-3.4.1.min.js', array(), '3.4.1', true);

ファイルをヘッダーに出力する

出力するときは先ほど読み込んだものを「custom_enqueue」という任意の関数(変更可)で囲み、さらにphpで挟まれるように配置します。最後に「add_action」で関数を実行します。

<?php
    function custom_enqueue(){
        wp_enqueue_style('main_style', get_template_directory_uri() . '/style.css');
    }
     add_action('wp_enqueue_scripts','custom_enqueue'); 
?> 

複数のファイルを読み込むときは

複数のファイルを読み込むときは、このような順で書いていきましょう。

<?php
    function custom_enqueue(){
        wp_enqueue_style('main_style', get_template_directory_uri() . '/style.css');
        wp_enqueue_script('fontawesome_script', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css');
        wp_enqueue_script('accordion_script', get_template_directory_uri() . '/js/accordion.js', array('jquery'), '', true);
    }
      add_action('wp_enqueue_scripts','custom_enqueue');  
?>

CSSとJavaScriptを「functions.php」で読み込み、ヘッダーで出力する方法をご紹介しました。

「header.php」はすっきりしましたか?ソースコード上ではheadに記述されたときとほぼ同じ形で出力されるため、外から見ただけでは分かりません。

カスタマイズする段階になると、基本的な機能は「functions.php」にまとめられていた方が分かりやすいように思います。複数のファイル間を移動することもないので、作業の効率化アップにもなりますよ。