最近Web作る調子上がってきたのでポートフォリオを一新したんですが, gulp, webpack, stylus, ES6, JadePHPあたり使ってつくりました. Jade自体がテンプレートエンジンなんで, WordPressのphpテンプレート関数との相性が悪かったりしますが. そのあたりメモ.

インストール

npmから. gulpで使ったんで, 僕はこっち使った, gulp-jade-php. 書いてある通りだけど, コンパイルしたら拡張子もjade→phpに変わります.

テンプレート

WP側のテンプレート階層を使わず, index.phpから全切り替えしてる. 考え方としては, JadeになるたけPHPを入れず, こまいのは全部関数として別途phpにまとめる. グローバルヘッダーとか, メタ情報とか, 全ページ必ずインクルードするって分かりきってるとこは, Jade側でまとめてやって, 動的に切り替える部分だけget_template_part()使う.

index.jade

- require('includes/view.php');
doctype html
html
    head
        include ./jade/_meta.jade
    body
        include ./jade/_gheader.jade

        .content
            - if (is_page('about')) :
                - get_template_part('page/about');
            - elseif (is_home()) :
                - get_template_part('page/work-list');
            - else :
                - get_template_part('page/post');
            - endif;

        footer.gfooter
            - if (is_single()) :
                - edit_post_link();
            - endif;

        script(src='#{template_path}/js/highlight.pack.js')
        script(src='#{template_path}/js/bootstrap.js')

_meta.jade

meta(name='twitter:image:src' content='<?= og_image(); ?>')

title <? title() ?>

view.php

<?
// ...
function title() {
    echo wp_title('|', true, 'right')  . '麦 : Baku';
}

function og_image() {
    if (is_single() && get_post_type() == 'work') {
        $path = MultiPostThumbnails::get_post_thumbnail_url('work', 'wide');
    } else {
        $path = "/wp-content/themes/baku89-2016/img/ogimage.jpg";
    }
    echo "http://$_SERVER[HTTP_HOST]$path";
}
?>

テンプレート関数使えよ, って感じだけど面倒いからそのまま.

Shortcode

あんま, HTMLの文字列とPHPのコードを "<dl>" . $title . "</dl>"みたいな感じで繋げたくなかったから, Shortcodeも無理やり分離. 例えば.

functions-shortcode.php

<?
// ...
function shortcode_vimeo($atts) {
    extract( shortcode_atts( array(
        'id' => '',
        'src' => null
        ), $atts ));

    $embed_url = "//player.vimeo.com/video/$id?title=0&byline=0&portrait=0&color=ffffff";
    $is_work = get_post_type() == "work";

    ob_start();
    include(locate_template('partials/vimeo.php'));
    return ob_get_clean();
}
add_shortcode('vimeo', 'shortcode_vimeo');
?>

vimeo.jade

一部省略.

a(class='embed embed--vimeo <? if ($is_work) echo "wide" ?>')
    img.full(src='<?= $src ?>') 
        iframe(data-src='<?= $embed_url ?>' frameborder='0' allowfullscreen='' webkitallowfullscreen='' mozallowfullscreen='')
        .center-button
            .center-button__body
                .center-button__text PLAY

phpが公開側フォルダ, jadeがソース系まとめたフォルダに分離しちゃうんは気持ち悪いし, phpもsrc側置いてコピーするのもアリだけど, めんどかったからそのままにした.