テンプレートエンジン「Jade」で、WordPressのテンプレートを超シンプルなコードに！

シンプルなコードでHTMLを生成できるテンプレートエンジン「Jade」を導入して、快適なHTMLコーディングが実現しました。

Jade – Template Engine
http://jade-lang.com

そこで、

WordPressのテンプレートもJadeで書けないか？

WordPressの実装はHTMLとPHPが混ざり、書きにくい＆可読性が悪いテンプレートになってしまいがちです。
Jadeの中にサクっとPHPを記述できる方法はないかと探したところ、
Jade-PHPというコンパイラを使用して、ものすごくシンプルなテンプレートが公開されていました。

wordpress-jade-template
https://github.com/ajschlosser/wordpress-jade-template

行の先頭にハイフンを付けるだけで、<?php ?>の記述が不要に

もともとJadeには、行頭に「-」をつけることで、HTMLに出力されないJavascriptを書くことができましたが、Jade-PHPではこの機能がPHPの出力に変更されているようです。

例：

single.phpをJadeで書くと、こんなにスッキリ！

- get_header()
section(role="main")
   - while ( have_posts() ) : the_post()
      - get_template_part( 'entry' )
      - if ( ! post_password_required() ) comments_template( '', true )
   - endwhile
footer
   - get_template_part( 'nav', 'below-single' )
- get_sidebar()
- get_footer()

- get_header()

section(role="main")

- while ( have_posts() ) : the_post()

- get_template_part( 'entry' )

- if ( ! post_password_required() ) comments_template( '', true )

- endwhile

footer

- get_template_part( 'nav', 'below-single' )

- get_sidebar()

- get_footer()

コンパイルされたsingle.php

<?php get_header() ?>
<section role="main"><?php while ( have_posts() ) : the_post() ?><?php get_template_part( 'entry' ) ?><?php if ( ! post_password_required() ) comments_template( '', true ) ?><?php endwhile ?>
<footer><?php get_template_part( 'nav', 'below-single' ) ?>
</footer>
</section><?php get_sidebar() ?><?php get_footer() ?>

<?php get_header() ?>

</footer>

</section><?php get_sidebar() ?><?php get_footer() ?>

Jadeで行頭に「-」を付けると、1行ずつ<? php ?>が挿入されるので、PHPコード部分では末尾のセミコロンも取って、できるだけシンプルな記述法にしてみました。
（複数のPHP文を記述する時は、?>の直前以外の文にセミコロンを付けるのをお忘れなく。）

Jade-PHPでコンパイルしているようで、wordpress-jade-templateでは、ビルドシステムgulpでJade-PHPが使えるプラグイン「gulp-jade-php」の設定が同梱されていますので、gulpを導入すればすぐに使えると思います。

gulpの導入方法はこちらがわかりやすいです。

CodeZine：まずは「gulp」を動かしてみよう！～セットアップとはじめてのタスク実行
http://codezine.jp/article/detail/7992

PHPコーディングの注意点：「-」は行頭にしか使えない

<?php ?>の記述が不要になる便利な「-」ですが、PHPコードのみの行にしか使えません。しかしWordPressは、HTMLの属性値にPHPコードを使いたいことも多々あります。

例：aのhrefにPHPコードを使いたい時など

この場合は、Jadeの非エスケープ出力文字「!=」を使って、いつもの<?php ?>を入れる必要があります。

a( href!="<?php the_permllink() ?>" )

1	a( href!="<?php the_permllink() ?>" )

表現できないこともある

属性名と属性値の両方がPHPコードで出力されるものは、Jadeでは表現できなそうです。

例：class=”〜”が出力されるもの

<!--?php post_class(); ?-->

1	<!--?php post_class(); ?-->

そういう時は、Jadeをプレーンテキスト化する「|」を行頭につけて、HTMLタグごと書く必要があるでしょう。

| <div <?php post_class(); ?>>
| </div>

1 2	\| <div <?php post_class(); ?>> \| </div>