最近、デザイン、HTMLコーディングまでをデザイン会社様の方で実施し、システム会社でそのHTMLをWordPress化するという役割分担での作業が出てくるようになりました。

こういったケースでWordPressを実装する際に注意していることを書いてみます。

インクルードタグ最小限にする

WordPressでは、ページ内の各部をヘッダー、サイドバー、フッターその他いろいろ分割して、別ファイルで管理できるようになっています。詳細はWordPressCodexこれらは複数のテンプレートを作成する上で非常にメンテナンス性を上げてくれる(1箇所を修正するだけで複数のページに修正を反映させられる)便利なものです。

twntyfourteenですが、プログラマはこういったコードを正規化していくことを好む傾向にある人が多いと思いますが、こうしていくと、テンプレートフォルダの中身が、左のようになります。(twentyfourteenというWordPressデフォルトのテーマです)うーん、美しい。

blocks

ではなく、プログラマの立場から見ると、テンプレート階層に合わせて作成され、無駄の少ないきれいなテンプレート構造になっています。

ですが、WordPress(というか、PHPに)慣れていない人にとっては少々難解です。

そこで、弊社では、WordPressテンプレートを作成する際は、テンプレート階層のファイルの他にはheader.php/footer.php/sidebar.php以外は極力別ファイルを作成しないでテンプレートを作るようにしています。

こうすることで、1つの修正で複数のファイルを触らなくてはならなくなるケースも出てきますが、プログラムに強くない方でもわかりやすく後からのメンテナンスで直感的にファイルの場所やHTMLの構造を想像しやすくするようにしています。

 

プログラムをfunction.phpに設置せず、プラグインとしてまとめる。

WordPressでは、テンプレートに合わせた、actionやfilterはfunction.phpに記述するケースが多いと思います。また、テンプレートフォルダ内に、MVCモデルのフォルダ構造を作成してテンプレートを作成するケースもよくあります。

テンプレートに紐づくプログラムはテンプレートフォルダ内に設置するのが本来正しく、ある意味ではトラブルを生みにくいのですが、本題の分担の場合を考慮して、弊社では、Viewに当たるもの以外は、基本的にテンプレート専用にプラグインを1つ作成し、そこで対応するようにしています。

sumiwake

プラグインを有効にしないとエラーになるという問題はありますが、これによって、テーマフォルダは非常に単純で見やすいものになり、デザイナ、コーダーの方の担当範囲とプログラマの担当範囲を分けることができるようになります。

テーマ内にプログラム的なものを記載する必要がどうしてもある場合はどうするか?

もちろん、テーマフォルダ内にプログラムモジュール的なものを一切記述しないわけではありません。ですが可能な範囲で、こういう場合は2つの対応で回避しています。

  • プラグイン内で関数を定義し、それをテンプレートファイル内で利用する。
  • ショートコードを作成しておき、投稿内に設置してもらい利用する。

例えば、ほぼ必ず弊社で用意するショートコードは、WordPress関数でbloginfoに当たるものです。テンプレートのページ数を少なくすることでコストを圧縮し、投稿内に直接HTMLを記述することでページを柔軟に編集できるようにするといったケースの時に、このショートコードは力を発揮します。今まで絶対パスやhttpから記述していた画像などへのリンクをショートコードに置き換えることで、テンプレート内にまとめることができ、投稿内の絶対パス表記をなくすことができます。

ショートコード関数の例

これで、投稿内に[template_directory]と記載すると、テンプレートディレクトリがへのフルパスが表示されます。

 

これらは、弊社での方法論で賛否色いろあると思います。また、これから、新しい役割分担やサイト構築のプロセスが生まれてくればそれに合わせてどんどん変わっていくと思いますので、一例として見ていただければと思います。