Home › 技術コラム › wptt – WordPress Theme Template を使う

wptt – WordPress Theme Template を使う

公開日　 技術コラム

WordPressテーマの自作をしたい方々の助けになるかもしれないwpttの使い方。

wpttはphpjadeを使ってWordPressのテーマ作成をするためのひな形です。
twentyfifteenテーマを、割と単純に移植した形になっています。
このサイトも、wpttをカスタマイズして作っています。
(現時点ではほとんどtwentyfifteenそのままですが)

wpttは以下のような方々に向いていると言えます。

  • twentyfifteenベースで良いからテーマをカスタマイズしたい方
  • ゼロからテーマを作りたい方
  • WordPressテーマ作りの勉強をしたい方

残念ながら他の既存テーマをベースにカスタマイズしたい方にはあまり向かないかもしれません。
(ひと手間ふた手間余計に必要になります)

インストール

まず前提として、

  • Version 1.7以上のGitがインストールされている事。
  • nodejsがインストールされている事。
  • お使いのPHPのバージョンが5.3以上である事、これはwpttがPHPのnamespaceを使用しているためです。

以上の前提を踏まえて。

  1. nodeのビルドツールGruntをインストールします、既に入っているならこの作業は不要です。 
    npm install -g grunt
  2. wpttを適当な作業ディレクトリの下にcloneします。 
    git clone https://github.com/kurohara/wptt.git
  3. 依存するnodeモジュールをローカルインストールします。 
    cd wptt
npm install

セットアップ

wpttのセットアップスクリプトを起動します。

grunt setup

質問が表示されますので答えます。
まずテーマの名前を聞かれます。

Running "setup" task
? What is the name of your theme?  (mgitest)

自分のテーマに名前を付けましょう。
適当に付けて、後で変更も出来ます。
(変更するときはもう一度セットアップスクリプトを起動します)
次にあなたの名前を入力してください、これも適当で良いです。

What is author's name?  (Hiroyoshi Kurohara(Microgadget,inc.))

最後に、「コンパイルしたテーマファイルをどこに置くか？」と聞かれます。

? Where to place the compiled theme files?  (./theme)

WordPressがインストールされているディレクトリの下の'wp-content/theme/テーマの名前'を指定しておくとテストが楽になります。
WordPressが自分のシステムにインストールされていないなら、デフォルトのままで良いです。

このセットアップスクリプトは、wptt/wpttenv.json を編集しているだけですので、このファイルを手作業で編集してもＯＫです。
以下のこのファイルの内容を載せておきます。

{
  "name": "mgitest",
  "uri": "",
  "author": "Hiroyoshi Kurohara(Microgadget,inc.)",
  "authoruri": "",
  "description": "",
  "version": "1.0.0",
  "license": "GNU General Public License v2 or later",
  "licenseuri": "http://www.gnu.org/licenses/gpl-2.0.html",
  "tags": "",
  "themedir": "/Users/kurohara/work/wordpress/wp-content/themes/mgitest",
  "jadedir": "./src",
  "styldir": "./src",
  "prebuilt": "./src",
  "tmpdir": "./tmp"
}
キー 意味
name テーマの名前 style.cssの”Theme Name” に転記される
uri style.cssの”Theme URI” に転記される
author テーマの作者、style.cssの”Author”に転記される
authoruri style.cssの”Author URI”に転記される
description style.cssの”Description”に転記される
version style.cssの”Version”に転記される
license style.cssの”License” に転記される
licenseuri style.cssの”License URI”に転記される
tags style.cssの”Tags”に転記される
themedir 出力先ディレクトリ
jadedir phpjadeのソースディレクトリ
styldir stylusのソースディレクトリ
prebuilt コンパイル不要ソースディレクトリ
tmpdir 一時ファイルディレクトリ

ちょっと使ってみる

早速使ってみましょう。
まずwpttディレクトリにcdして。

ビルドは以下のコマンドで行います。

grunt

出力先のテーマディレクトリにテーマが出来ていればＯＫです。

phpファイルのみを生成するには、

grunt php

cssファイルのみを生成するには、

grunt style

メッセージファイル(pot)の生成のみ行うには、

grunt pot

カスタマイズする

wpttのsrcディレクトリにテーマのソースがありますので好きなように編集します。
*.jade は phpjadeでコンパイルされます。
*.styl は stylusでコンパイルされます。
その他のファイルは、そのまま出力先ディレクトリにコピーされます。

WordPressテーマは国際化を考えてgettext系の関数を使う事が良くあります。
このとき、text domain名(通常はテーマ名を使う) の部分を簡易に書く事が出来ます。

_e('Text displayed on the screen', 'twentyfifteen');

例えば上の’twentyfifteen’の部分は、*.jadeの中では ‘$$’ に置き換え可能です、また、他のPHPスクリプト中なら、ns_('') に置き換え可能です。
実際のwpttで見てみると、wptt/src/cotent.jade の中では、

 __( 'Page', '$$' )

のように書かれていますが、wptt/src/inc/customizer.php では、

__( 'Base Color Scheme', ns_('') )

のように書かれています。

jadeおよびphpjadeの文法に付いては、
phpjadeで楽々php を参考にしてください。

ちょっとした注意点ですが、 header.php と footer.phpは headerfooter.jadeから生成されます。
headerfooter.jadeの真ん中辺りに、

       // separator mark for splitter tool

という行がありまして、この行より上がheader.phpに、下がfooter.phpになります。1

他の既存テーマを持ってくる

wpttはtwentyfifteenを移植しているので、他のテーマからカスタマイズしたい場合は自分で移植する必要があります。
twentyfifteenからカスタマイズしていって、完全に自分好みのテーマに書き換える、という人には不要な作業です。

wpttのビルド設定では、ビルド実行時にまず通常のファイルを出力フォルダにコピーしますので、テーマファイルを丸ごと srcディレクトリに持ってくれば移植完了です。
カスタマイズしたいファイルだけ、
.phpファイルは .jadeに名前を変えて編集、
.cssファイルは .styleに名前を変えて編集、
とやればカスタマイズ出来ます。
jadeは通常のhtmlタグの類いはそのまま出力しますので、別にがんばって jadeフォーマットに移植する必要はないです。
stylusも通常のcssの記法もそのまま受け付けますから。

ただ、これだけだとその後の作業があまり楽にならないので、ちょっとだけがんばってみます。
まず、テーマの名称を簡単に変えられるように工夫します。

  • style.css を style.stylに変更したら、ヘッダ部分を以下のように変更します。 
    /*!
 Theme Name: <%= wpttenv.name %>
 Theme URI: <%= wpttenv.uri %>
 Author: <%= wpttenv.author %>
 Author URI: <%= wpttenv.authoruri %>
 Description: <%= wpttenv.description %>
 Version: <%= wpttenv.version %>
 License: <%= wpttenv.license %>
 License URI:  <%= wpttenv.licenseuri %>
 Tags: <%= wpttenv.tags %>
 Text Domain: <%= wpttenv.name %>
 */
  • 全てのphpファイルの先頭に、namespace宣言を入れます。 
    namespace <%= wpttenv.name %>;

    このphpファイルをjadeに移植するときは、以下のように書き換えます。

    :php
  namespace #{wpttenv.name};
  • 全てのphpファイルで定義されている関数名からテーマ名を削除します。
    例： twentyfifteen_javascript_detection -> javascript_detection
  • functions.phpにユーティリティ関数を追加します。
    追加する関数は、テーマ内で使用する各種の名前がWordPress内で衝突しないようにするための工夫です。
    元のテーマ内では、そのままテーマの名前をハードコーディングしているような場所で使えます。

    function ns_($str) {
  return __NAMESPACE__ . $str;
}

function ns_name($str) {
  return ns_("\" . $str);
}

function ns_tag($str) {
  return ns_('_' . $str);
}

function add_ns_action($action_name, $function_name, $priority = 10, $accepted_args = 1) {
  return add_action($action_name, ns_name($function_name), $priority, $accepted_args);
}

function ns_add_ns_action($action_name, $function_name, $priority = 10, $accepted_args = 1) {
  return add_ns_action(ns_tag($action_name), $function_name, $priority, $accepted_args);
}

function ns_add_action($action_name, $function_name, $priority = 10, $accepted_args = 1) {
  return add_action(ns_tag($action_name), $function_name, $priority, $accepted_args);
}

function add_ns_filter($hook, $function_to_add, $priority = 10, $accepted_args = 1) {
  return add_filter($hook, ns_name($function_to_add), $priority, $accepted_args);
}

function ns_add_filter($hook, $function_to_add, $priority = 10, $accepted_args = 1) {
  return add_filter(ns_tag($hook), $function_to_add, $priority, $accepted_args);
}

function ns_add_ns_filter($hook, $function_to_add, $priority = 10, $accepted_args = 1) {
  return add_ns_filter(ns_tag($hook), $function_to_add, $priority, $accepted_args);
}

function ns_apply_filters( $tag, $value ) {
  $argarr = func_get_args();
  $argarr[0] = ns_tag($argarr[0]);
  return call_user_func_array('apply_filters', $argarr);
}

function ns_function_exists($funcname) {
  return function_exists(ns_name($funcname));
}

function ns_do_action($action_name) {
  $argarr = func_get_args();
  $argarr[0] = ns_tag($argarr[0]);
  return call_user_func_array('do_action', $argarr);
}

    これらの関数を以下のようにして使用します。
    add_action('wp_head', 'twentyfifteen_javascript_detection') から、add_ns_action('wp_head', 'javascript_detection')
    ns_add_action は、 第一引数にテーマ名を付加します、add_ns_actionは、第二引数にテーマ名を付加します。
    先頭にns_の付いた関数は、タグ名やアクション名、フィルタ名などにテーマ名を付加します。
    _nsが途中に出てくる関数は、関数名にテーマ名(namespace)を付加します。

  • テーマのソースから、ハードコーディングされたテーマ名を削除する
    上で述べた作業でかなりのテーマ名が削除されますが、残っている部分は、_ns() 関数などを駆使して削除しましょう。

以上で移植がほぼ出来た事になります。
結構な手間になりますが、その後テーマのソースがとても見やすくなりますので、余裕のある方は気に入ったテーマを移植してみる事をおすすめします。

  1. 正確には、
    まず、headerfooter.jade が headerfooter.phpにコンパイルされる。
    次に、headerfooter.php が ‘<!– separator mark for splitter tool –>’ を目印に、上が header.php、下が footer.php に分割されます。 ↩