Wordpressテーマ構築の際はパーツをモジュール化すると速いよ

デザインデータをもとにWordPressのテーマを構築することが業務上多いのですが、どうやったらなるべくスピーディーに制作できるかというお話です。
毎回似たような記述をするものの、「前回はこの機能をつけたけど今回は要らない」など案件によって微妙に違うので、functions.phpに記述する内容を外部ファイル化してモジュールのように使うと便利になります。

例えば以下のようなファイル構造↓

テーマ
 |- functions.php
 |- inc
      |- custom-post.php // カスタム投稿を設定するファイル
      |- setup-login.php // ログイン画面の設定をするファイル
      |- setup-widgets.php // ウィジェットをカスタマイズするファイル
      |- popular-posts.php // 人気記事のウィジェットを設定するファイル
      |- pagenation.php // ページネーションを設定するファイル
      |- customizer.php // カスタマイザーの項目を増やすファイル
      |- shortcode.php // ショートコードを設定するファイル

このように、機能をファイルごとに分けて、functions.phpに次のように書いてファイルをインクルードします。

require_once locate_template('inc/custom-post.php', true);

require_once locate_template('inc/setup-login.php', true);

require_once locate_template('inc/setup-widgets.php', true);

require_once locate_template('inc/popular-posts.php', true);

require_once locate_template('inc/pagenation.php', true);

require_once locate_template('inc/shortcode.php', true);

こうすると、functions.phpの中身がスッキリして、どこに何の設定を記述したかわかりやすくなるだけでなく、色々な案件で似たような機能の使い回しをするのも楽になりますね!

また、スタイルシート部分もSassを使ってモジュール化しておくとこれまた便利。

sass
  |- style.scss // 全てのsassファイルをインポートするファイル
       |- base
           |- _normalize.scss // スタイルシートの初期化
           |- _var.scss // 色や数値、フォントなどの設定
           |- _mixins.scss // ミックスイン
           |- _base.scss // 設定した初期値を要素に割り当てる
       |- layout
           |- _layout.scss // レイアウトの設定
       |- module
           |- common
              |- _header.scss
              |- _footer.scss
              |- _gnav.scss
                   ・
                   ・
                   ・
           |- parts
              |- _button.scss
              |- _list.scss
              |- _table.scss
                   ・
                   ・
                   ・
           |- pages
              |- _top-page.scss
              |- _company.scss
                   ・
                   ・
                   ・
       |- vendor
           |- (jQueryプラグインを使用するときなど配布されたスタイルシートのファイル)

ミックスインは大体いつも同じようなものを書いているし、似たようなデザインパーツを使う案件ならパーツごとにゴソとインポートした後で、案件ごとの細かい修正をしていけばOKです。

これで、簡単なWordPressテーマならあっという間に構築出来るようになりました。作業内容はどんどん効率化して制作のスピードを上げていきましょう!