WordPress のテンプレートをレイアウトファイルとビューファイルに分離するメリット

mimizuku

Mimizuku Advent Calendar 2日目の記事です。石川さんの WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016 が少しずつ埋まっているようで羨ましいです!

SaCSS Special08 : WordPress + フロントエンド 鍋パーティー にお声がけしてもらいまして、今日は札幌で書いています。長崎はまだ冷えるなーくらいですが、札幌思った以上に冷たくてビビりました…

ということで本題。

レイアウトファイルとビューファイル

Mimizuku の大きな特徴の1つとして、single.phppage.phpなどのページテンプレートがコントローラーになっており、レイアウトファイルとビューファイルを指定してレンダリングされている、というものがあります。一般的な WordPress テーマのコーディング作法だとページテンプレートは次のような感じが多いかと思います。

<?php get_header(); ?>
コンテンツ
<?php
get_sidebar();
get_footer();

僕もこういう風にやっていたのですが、これには2つ問題があると思っています。

header.php、footer.php の肥大化

上記のようなテンプレートの構成にすると、「ヘッダーだからheader.phpに書く」「フッターだからfooter.phpに書く」というよりは「3つに分割したときにここはメインじゃないからheader.phpに書く」みたいな感じになりがちだと思うんですよね。一見するとメインテンプレートはシンプルですが、header.phpfooter.phpはどんどん肥大化していき中身はifだらけになって意味不明みたいな。なので僕は多少ページテンプレート間で重複があるにしても次のように書くことが多いです。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<body <?php body_class(); ?>>
    <?php get_header(); ?>
    <div>
        <main>
            コンテンツ
        </main>
        <?php get_sidebar(); ?>
    </div>
    <?php get_footer(); ?>
<?php wp_footer(); ?>
</body>
</html>

header.phpの中は<header />のみ、footer.phpの中は<footer />のみ、という感じです。

ページテンプレート間の重複

そうするとやはりページテンプレート間で重複が発生するのでページテンプレートの数が多くなってくると「何回同じHTML登場するんや…」という感情が強くなってきてしまいます。ただ重複しているだけでそのまま納品して、以降一切更新が無いのであればまぁ良いですが、途中で重複部分にレイアウトの修正が入ったりすると全てのページテンプレートに修正を入れなければいけなくなります。超めんどくさい!

レイアウトファイルとビューファイルを作ろう

ではどうするかと考えまして、Mimizuku では、ページテンプレートには HTML は書かずにコントローラー(という言い方が正しいかわかりませんが便宜上…)として使うことにして、そこでレイアウトファイルとビューファイルを指定してレンダリングさせよう、ということにしました。レイアウトファイルは全体のレイアウトを定義したテンプレート、ビューファイルはそのメインテンプレートが出力するコンテンツ部分にあたるテンプレートです。

例えばsingular.phpはこんな感じです。

$controller = new \Mimizuku\App\Controllers\Controller();
$controller->layout( 'right-sidebar' );
$controller->render( 'content/content', get_post_type() );

そしてレイアウトファイルがこんな感じ(わかりやすくするため実際とはちょっと変えています)。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<?php get_template_part( 'template-parts/head' ); ?>
<body <?php body_class(); ?>>
<div class="_l-container">
    <?php get_header(); ?>
    <div class="_l-contents" role="document">
        <main class="_l-main" role="main">
            <?php $this->view(); ?>
        </main>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
</div>
<?php wp_footer(); ?>
</body>
</html>

でビューファイルがこんな感じ。ビューファイルは一般的なcontent.phpと同じです。

<article <?php post_class(); ?>>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
</article>

こういう風にレイアウトファイル(とビューファイル)に切り出してしまえば、共通部分に修正が必要になったとしてもレイアウトファイル1つだけを修正すれば良いのです!素晴らしい!

ページテンプレートをコントローラーとして使うとなると、普通の見慣れた感じとはだいぶ違う見た目になってしまうためか、自慢しても結構引かれちゃったりするのですが、Mimizuku はあくまで親テーマ。実際につくるのは子テーマ。レイアウトファイルやビューファイルを呼び出す部分にフックが仕込んでありまして、functions.phpとかでフックして任意の条件でレイアウトファイルやビューファイルを差し替えることができます。つまり子テーマではコントローラー的なコードは一切書かなくても、ほとんどの場合なんとかなってしまうというわけです。上記に記載したレイアウトファイルやビューファイルのコードなら見慣れていますよね。うーん良いアイデアだと思うんですけどねぇ…どうでしょうか。

ということで次回は Mimizuku の基本設計について書きます(Adventar 「 Mimizuku の基本設計」と書いたものの、一体どんな内容を書くつもりだったか思い出せない…)。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく