【WordPress】functions.phpで独自のcss・jsファイルを一元管理する方法

更新日：

完全版を表示する

どうも、カッパです。

WordPressを使うなら、テーマの機能を熟知して素早く見栄えの良い記事を量産するのが至上命題だとは思います。

思いますが...。

技術的なことも少しは身につけておくと、実績とスキルの相乗効果でさらに良い積み上げができるんじゃないでしょうか。

functions.phpに独自のcssファイル、jsファイルを読み込ませるアクションフックを作成する

というわけで、早速functions.phpにアクションフックを追加して、独自のcssファイルとjsファイルを読み込んでみましょう。


add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
function my_theme_enqueue_scripts() {
  // 子テーマの独自CSSファイルを読み込み
  wp_enqueue_style( 'original-styles', get_stylesheet_directory_uri() . '/css/child-theme.css', array(),  true);

  // 子テーマの独自jsファイルを</body>直前で読み込む（jQueryの後に）
  wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/base.js', array(), true);
}

このコードを一部ご自身の環境に合わせて書き換えてfunction.phpに追加することにより、オリジナルのcssとjsファイルが読み込まれます。

なお、cssを読み込むタグには「original-styles-css」というidが付与され、jsはページ下部、</body>の直前で読み込まれます。

まず冒頭の「add_action( $tag, $fuction_to_add );」ですが、

「$tagのfunctionに、オリジナルの$function_to_addのfunctionを追加しますよ〜」

と、宣言をしています。

$tagのfunctionは、cssファイルやjsファイルの読み込みでもともと使われている「wp_enqueue_scripts」というfunction。

これにadd_action()の下にあるオリジナルのfunction「my_theme_enqueue_scripts()」を追加しています。
ちなみにmy_theme...の部分は自分の好みで名前をつけることができます。

これをWordPressの専門用語でアクションフックといいます。

このブログではまだ「子テーマ」の解説記事もないのにいきなり子テーマ前提でコードが書かれているところが素晴らしいです。子テーマについては後日記事を追加したいと思います。

wp_enqueue_style()で、オリジナルのcssファイルを読み込ませる

まずfunction「my_theme_enqueue_scripts()」の最初に出てくる


wp_enqueue_style( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $media:string );

で、オリジナルのCSSを読み込みます。

今回の記事ではパラメーターの詳細な解説は別記事に譲るとして、複数のcssファイルを読み込ませたい場合は「$handle」の部分を、固有の名称にしましょう。

wp_enqueue_style()の詳細記事追記しました

【WordPress】functions.phpで独自のスタイルシートを読み込む【wp_enqueue_style】

どうもカッパです。 今回は、前回簡単に説明したfunction.phpでスタイルシートを読み込むための関数「wp_enqueue_style」について、より詳しく解説します。 wp_enqueue_s ...

続きを見る

wp_enqueue_script()で、オリジナルのjsファイルを読み込ませる

jsファイルの読み込みもcssと同じように


wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean );

こちらも今回詳細は省きますが、jsファイルを<head>〜</head>内で読み込ませたい場合は、wp_enque_script()内の最後にある「ture」を「false」に書き換えましょう。

柔軟なカスタマイズにいつでも対応できるようにしたい

このブログを読んでくれている人たちはだいたい

  • AFFINGER
  • JIN
  • SANGO
  • STORK
  • etc...

無料なら「Cocoon」でしょうか。

どれも見栄えだけではなく、内部SEOまで考えて作られた素晴らしいテーマです。

できることなら、テーマのルールからはあまり逸脱せずにホームページを作って行くことが、工数節約にもなって結果的には良いのですが、お客さんによっては

ここだけはこうしてほしい！

みたいな要望が出てきます。

そんな時にテーマの機能を無理にいじって改造するよりは、オリジナルの部分をfunctions.phpを使ってカスタマイズできれば、コードも綺麗で素早く対応できます。

今回は簡単な解説に留めましたが、

  • wp_enque_style
  • wp_enque_script

この二つだけでもかなり奥が深く、柔軟なカスタマイズが可能です。まずは基本をマスターして、少しずつ実力を積み上げていきたいですね。

  • B!