【WordPress】CSS, JSファイルの管理方法

CSS, JSファイルの管理方法

WordPressではコードの肥大化を防ぐために、それぞれの機能を持ったパーツファイルを作成して、必要な時に読み込むという方法が一般的です。
「get_header()関数でheader.phpを読み込む」とか「アクションフックはfunctions.phpに書く」とかはどの参考書にも書いてあると思います。

しかし実際のWordPress開発ではJQueryプラグインやCSSプラグイン、それぞれの固定ページ専用のテンプレートファイルなどを使って、独自の機能が実装されたWEBサイトを作成します

そうなるとファイルの肥大化は避けられず、開発が進むにつれて管理が難しくなります

今回は私が普段使っているファイルやディレクトリの管理方法の一部、特にCSSとJavaScriptファイルの管理方法を紹介します。

大事なのはfuncitons.phpの書き方

まずはパーツになるCSSファイルを作る

style.css以外に独自のCSSが書かれた、例えばapp.cssなどを作って、そちらにCSSを書き込んでいくパターンは有名です。
しかし、これだけでは十分ではありません。

WordPressでは通常投稿の詳細ページや固定ページのデザインはある程度共通です。
そこで、以下のようにCSSファイルを分類することを考えます。

  • 全ページに共通のCSSファイル(all.css)
  • トップページのみに適用されるCSSファイル(home.css)
  • 固定ページのみに適用されるCSSファイル(page.css)

all.cssには、全ページに共通のCSS、例えばページ全体を包むwrapper、ボタンリンク、コンテンツのリスト、セクションのmarginやpaddingに関するCSSを書きます。

home.cssには、トップページにのみ適用されるCSSを書きます。
というのも、トップページはWEBサイトに訪れて始めに目に入るページなので、他のページと比べてデザインが独特なものになるからです。
そうなるとトップページにしか効かないCSSが大量に発生するので、home.cssのようなファイルを作ります。

page.cssには、固定ページにしか効かないCSSを書きます。
それぞれの固定ページはデザインがある程度共通になるので、page.cssのようなファイルを作ります。

上記3つのファイル名は任意です。わかりやすい名前をつけましょう。

そして、これらのファイルは別ディレクトリに保存しましょう。
ここではテーマディレクトリの下に「style」という名前のディレクトリを作って、その中に保存します。

functions.phpにCSSファイルを読み込ませる

CSSの読み込みはheadタグ内にlinkタグを入れて書くことが一般的ですが、WordPressではfunctions.phpを使って読み込ませると便利です。
CSSを読み込ませるときはwp_enqueue_style()を使います。

前述のall.css、home、home.css、page.cssに加えてstyle.cssも読み込むのですが、以下のようなコードをfunctions.phpに書くことで読み込ませます。

上記のコードは以下の記述と等価です。

これだけならまだいいのですが、JavaScriptやCSSの読み込むファイル数が多くなると一気に見辛くなります。

随所にあるextract()関数はハッシュのキーと同じ名前を持った変数を作って、ハッシュのバリューをその変数の値に代入します。
wp_enqueue_style()関数に直接書かずに、一旦変数に置いてから代入しています。

wp_enqueue_style()の引数の意味は以下のリンクをご覧ください。

あと、home.cssはトップページにしか読み込まれれないということなので、if文を使ってis_home()とis_front_page()の少なくとも一方がtrueだったときに読み込まれるようにします。
page.cssは固定ページだけなので、is_page()がtrueになったときに読み込まれるようにしています。

JavaScriptファイルを読み込ませる

JavaScriptもCSSのときと同様に記述します。

その際はwp_enqueue_script()を使いましょう。

ただし注意があります。
JavaScriptファイルをページ読み込み前かそれとも後に置くかが大事です。
そのために上述の$arrハッシュ内の「in_footer」キーのバリューを、ページ読み込み前ならfalse、読み込み後ならfalseを書きます。

まとめ

管理の方法に正解はありません。
使用する人が最も使いやすいと思う方法をとりましょう。

もっとスマートな方法を日々追求しています。
WEBエンジニアとして「楽をするための努力」を頑張ってまいります。