CSSとJavaScriptの読み込み

2020.04.01 2020.04.02

TOPICS

翻訳元記事はこちらです。

テーマを作成する際には、スタイルシートやJavaScriptファイルを追加で作成したいと思うかもしれません。しかし、WordPress のウェブサイトでは、テーマだけでなく、多くの異なるプラグインも使用していることを覚えておいてください。
すべてが調和して動作するように、テーマとプラグインがWordPressの標準的な方法でスクリプトやスタイルシートを読み込むことが重要です。そうすることで、サイトの効率性が維持され、互換性の問題がないことを確認することができます。

WordPress にスクリプトとスタイルを追加するのは、かなりシンプルなプロセスです。基本的には、すべてのスクリプトやスタイルを読み込む関数を作成します。
スクリプトやスタイルシートを読み込む際には、WordPress がハンドルとパスを作成してファイルや依存関係（jQuery など）を探し、スクリプトやスタイルシートを挿入するフックを使用します。

スクリプトとスタイルを読み込む

テーマにスクリプトとスタイルを追加する適切な方法は、functions.phpで読み込む方法です。style.cssファイルはすべてのテーマで必要ですが、テーマの機能を拡張するために他のファイルを追加する必要があるかもしれません。

WordPress には、ソフトウェアパッケージの一部として、jQuery などの一般的に使用されるライブラリを含む多くの JavaScript ファイルが含まれています。独自の JavaScript を追加する前に、含まれているライブラリを利用できるかどうかを確認してください。

基本的には、wp_enqueue_script()とwp_enqueue_style() を使って、スクリプトや、スタイルを読み込みます。

スタイルシート

CSSスタイルシートは、テーマの表示をカスタマイズするために使用されます。スタイルシートはテーマに関する情報が保存されているファイルでもあります。このため、style.cssファイルはすべてのテーマに必要です。

スタイルシートを header.php ファイルにロードするのではなく、 wp_enqueue_style を使ってロードする必要があります。メインのスタイルシートは、functions.php で以下のように記述して読み込みます。

wp_enqueue_style( 'style', get_stylesheet_uri() );

“style”という名前のついたファイルを探して、読み込みます。

この関数の引数を説明します。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle　スタイルシートの名称
$src　ファイルの場所。これ以降のパラメーターはオプションになります。
$deps　このスタイルシートが他のスタイルシートに依存しているかどうかを示します。これが設定されている場合、依存するスタイルシートがロードされない限り、このスタイルシートはロードされません。
$ver　バージョン番号
$media　このスタイルシートをロードするメディアのタイプを指定します。例: ‘all’、’screen’、’handheld’、’print’

そのため、テーマのルートディレクトリにある「CSS」という名前のフォルダにある「slider.css」という名前のスタイルシートをロードしたい場合は、次のようにします。

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

スクリプト

テーマで必要とされる追加の JavaScript ファイルは wp_enqueue_script を使用して読み込まなければなりません。これにより、適切な読み込みとキャッシュが保証され、特定のページを対象とした条件付きタグの使用が可能になります。これらはオプションです。

wp_enqueue_script は、wp_enqueue_styleと文法が似ています。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle　スクリプトの名称
$src　スクリプトの場所
$deps　依存しているスクリプト。jQueryなど。
$ver　バージョン番号
$in_footer　booleanパラメーター。trueにすると、フッターで読み込まれる。

コードサンプル

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

コメント返信スクリプト

WordPress のコメントには、スレッドコメントや強化されたコメントフォームなどの機能が搭載されています。コメントを適切に動作させるためには、いくつかの JavaScript が必要です。しかし、このJavaScript内で定義する必要がある特定のオプションがあるので、コメント返信スクリプトはコメントを使用するすべてのテーマに追加する必要があります。

コメント返信を含めるための適切な方法は、条件タグを使って特定の条件が存在するかどうかをチェックすることで、スクリプトが不必要にロードされないようにすることです。
例えば、is_singularを使って個別投稿ページにのみスクリプトをロードし、「スレッドコメントを有効にする」がユーザーによって選択されているかどうかを確認します。

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}

ユーザーがコメントを有効にしていて、投稿ページにいる場合は、コメント返信スクリプトが読み込まれます。そうでない場合は読み込まれません。

読み込み関数を組み合わせる

読み込みたいすべてのスクリプトとスタイルを一つの関数にまとめ、wp_enqueue_scripts アクションを使って呼び出すのがベストです。この関数とアクションは、初期設定の下のどこかに配置する必要があります。

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
 
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

WordPressに含まれているデフォルトのスクリプトと登録されているスクリプト

デフォルトでは、WordPressには、WordPress自体が使用するスクリプトだけでなく、ウェブ開発者が一般的に使用する多くの人気のあるスクリプトが含まれています。そのうちのいくつかを下の表にまとめました。

リストは完全ではありません。含まれるファイルの完全なリストは wp-includes/script-loader.php にあります。

※訳者注：かなり量が多かったので、表は省略してあります。
翻訳元をご覧ください。

「jquery」しかないと思ってましたが、jQueryを使用したライブラリや、jQueryUIなども、ハンドル名を指定するだけで読み込めるんですね。
わざわざ自分でCDNを探して読み込まなくていいのは便利ですね。