キタジマタカシ 
Mimizuku Advent Calendar 2日目の記事です。石川さんの WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016 が少しずつ埋まっているようで羨ましいです！
SaCSS Special08 : WordPress + フロントエンド 鍋パーティー にお声がけしてもらいまして、今日は札幌で書いています。長崎はまだ冷えるなーくらいですが、札幌思った以上に冷たくてビビりました…
ということで本題。
レイアウトファイルとビューファイル
Mimizuku の大きな特徴の1つとして、single.php、page.phpなどのページテンプレートがコントローラーになっており、レイアウトファイルとビューファイルを指定してレンダリングされている、というものがあります。一般的な WordPress テーマのコーディング作法だとページテンプレートは次のような感じが多いかと思います。
<?php get_header(); ?> コンテンツ <?php get_sidebar(); get_footer();
僕もこういう風にやっていたのですが、これには2つ問題があると思っています。
header.php、footer.php の肥大化
上記のようなテンプレートの構成にすると、「ヘッダーだからheader.phpに書く」「フッターだからfooter.phpに書く」というよりは「3つに分割したときにここはメインじゃないからheader.phpに書く」みたいな感じになりがちだと思うんですよね。一見するとメインテンプレートはシンプルですが、header.phpやfooter.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 の基本設計」と書いたものの、一体どんな内容を書くつもりだったか思い出せない…）。
