Mignon Style

こんにちは！Mignon Styleです。
2016年9月17日に開催されたWordCamp Tokyo 2016にて「ノンプログラマーのためのWordPressテーマ作成ステップアップ術」というセッションで登壇させていただきました。
今回はそのフォローアップの記事になります。

はじめに

タイトルに「ノンプログラマーのための」とついているので、PHPのコードとかが出てこない、易しい内容なのかと思われた方もいらっしゃるかと思いますが、PHPのコードがガッツリ出てきてすみません。

WordCamp TokyoではこれまでWordCamp Tokyo 2014、WordCamp Tokyo 2015、そして今回のWordCamp Tokyo 2016と、ありがたいことに3年連続でテーマのお話で登壇させていただきました。

スライドの内容としては多少重複するところもありますが、

• ・2014年 html＋CSSで作成したベースを元に、1からWordPressのテーマを作成する方法
• ・2015年 既存の公式テーマなどを使用して、子テーマでテーマを作成する方法
• ・2016年 テーマ作成について、今よりもうちょっとステップアップするための方法

といった流れになっていますので、2014年、2015年のスライドもあわせてご覧いただけるとより一層理解が深まるかと思います。

これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう！〜 from Mignon Style（2014年）

ノンプログラマーのためのカンタンWordPressテーマ作成入門　〜子テーマでテーマ作成＆カスタマイズ〜 from Mignon Style（2015年）

ノンプログラマーのためのWordPressテーマ作成ステップアップ術 from Mignon Style（2016年）

推奨・非推奨について

セッションでお話させていただくときに、意識的に入れるようにしていることのひとつに「推奨・非推奨」があります。

「非推奨」というのは「使用していけない」ということではなく、「以前は使用されていたが、今はよりよい方法（テンプレートタグ）があるのでそちらを使用してください」といったニュアンスで理解していただけるとよいかなと思います。

使用することが多い bloginfo() も、bloginfo( ‘url’ ) や bloginfo( ‘stylesheet_url’ ) などパラメータによっては非推奨になっているものがあります。

WordPress Codex | テンプレートタグ/bloginfo

出力される結果は同じですが、コアファイルを見てみるとコードの中では「推奨されるテンプレートタグ」を使用して呼び出しています。

wp-includes/general-template.php

function bloginfo( $show = '' ) {
  echo get_bloginfo( $show, 'display' );
}

function get_bloginfo( $show = '', $filter = 'raw' ) {
  switch( $show ) {
  〜 省略 〜
    case 'stylesheet_url':
    $output = get_stylesheet_uri();
    break;
  〜 省略 〜
  }
  return $output;
}

もちろん非推奨のテンプレートタグを使用していても問題ありませんが、これからWordPressを始める方や使い始めたばかりの方は最初から「現在のスタンダードな方法」で覚えたほうがよいかと思います。

テンプレート階層について

WordPressで使用するテンプレートファイルの名前にはルールがあります。

HTML+CSSで作成したWebサイトの場合だと、会社情報は about.html、お問い合わせは contact.html といったファイル名を使用したりしますが、そのファイルを about.php、contact.php としてもそのままでは表示されません。

WordPressでは、投稿ページ、固定ページ、アーカイブページなど、使用するファイル名が決まっていて、該当するファイルがない場合は index.php が読み込まれるしくみになっています。

この、表示するテンプレートファイルの優先順位のルールのことを「テンプレート階層」と言って、特定のページだけレイアウトを変えたいときなどはこのルールに従ってテンプレートファイルを作成します。

テンプレート階層については WordPress Codex に詳しく書かれています。
そのルールをわかりやすく図にしたものがテンプレート階層の概観図です。（下図をクリックすると概観図が拡大表示できます。）

WordPress Codex | テンプレートタグ階層
WordPress テンプレート階層概観図

また、セッションではお話ししませんでしたが、固定ページで「会社情報系の複数ページのレイアウトを変えたい」といったような場合にはカスタムテンプレートファイルを作成します。

page.phpなどのテンプレートファイルよりカスタムテンプレートの優先順位が高いので、ページでカスタムテンプレートが割り当てられていれば自動的にカスタムテンプレートが使用されます。カスタムテンプレートファイルでは about.php、contact.php といった任意のファイル名が使用できます。

about.php

<?php
/*
 * Template Name: 会社情報ページ
 * Description:　会社情報の共通ページテンプレート
 */

WordPress Codex | ページテンプレート

スタイルやスクリプトの読み込みについて

HTML+CSSで作成したWebサイトの場合はheadタグ内でCSSやスクリプトを直接読み込むかと思いますが、WordPressではheadタグ内でCSSやスクリプトを直接読み込むのは「非推奨」とされています。
では、どうするかというと、wp_enqueue_style()、wp_enqueue_script()を使用してwp_enqueue_scriptsフックにひっかけて、functions.phpなどの関数ファイルから読み込むのが推奨される方法です。

スタイルシートの読み込み

スクリプトの読み込み

CSSやスクリプトは他のプラグインなどからも読み込まれています。
wp_enqueue_style()、wp_enqueue_script()を使用することによって、すでに登録済みのCSSやスクリプトと重複しないようにWordPressがチェックして、指定した順番で読み込まれるようになっています。

関数を使うことによって、WordPressに登録されているデフォルトスクリプトを使用したり、wp_deregister_script()でスクリプトを削除したりといったことが簡単にできます。

WordPress Codex | 関数リファレンス/wp enqueue style
WordPress Codex | 関数リファレンス/wp enqueue script

バリデーションとエスケープについて

バリデーションが必要になる場面は、ユーザーに管理画面やフォームなどで値を入力してもらうとき、例えばカスタマイザーやウィジェット、カスタムフィールドなどを作成するときはバリデーションを行います。

エスケープはデータベースに保存された値を出力する際に、規則にそったものに置き換えるといった処理を行います。

WordPress Codex | データ検証

自分で使用する場合や、特定のクライアントさんに入力してもらう場合などは、入力する際に気をつければ良いかもしれませんが、問題は第三者からの悪意のある攻撃を受ける可能性があるかもしれないということです。

バリデーションとエスケープ処理をしてあればセキュリティ対策は万全！というわけではなく、セキュリティ対策の一環として当たり前のことという認識を持つとよいのかなと思います。

セキュリティについては、有名な徳丸本を読んでみるのもオススメです。

体系的に学ぶ 安全なWebアプリケーションの作り方

また、該当するテンプレートタグがない場合など、データベースから直接値を取得したい場合には「wpdb」クラスを使用して、SQL文でデータを取得することができます。
このあたりはデータベースやSQLの知識が必要になってくるので、セッションではお話しませんでしたが、興味のある方はCodexなどを読んでみてください。

WordPress Codex | 関数リファレンス/wpdb Class
WordPress Codex | データベース構造

プラグインテリトリーについて

プラグインテリトリーというのは、AnalyticsのスクリプトやSEOのオプション、SNSの共有ボタンやリンクなどの「機能」のことで、WordPress公式ディレクトリに登録するテーマのハンドブックにはこのプラグインテリトリーをテーマに入れていけないという記載があります。

なぜかというと、AnalyticsのスクリプトやSNSの共有ボタンのコードをテーマの中に入れてしまうと、テーマを変更したときに表示されなくなってしまうからです。

投稿などの記事の表示やデザインはテーマで、それ以外の機能はプラグインにすると、テーマを変更したときにも影響が少なくてすみます。

また、「クライアントさんが触らないように不必要な管理画面の項目を非表示にしている」というような、テーマを作る際に毎回functions.phpに記述しているコードなども、プラグインにすれば他のテーマでも簡単に使用できるようになります。

プラグインを作るのは以外と簡単で、PHPファイルの先頭にプラグインの情報ヘッダーを記述するだけでWordPressにプラグインとして認識されるので、あとはfunctions.phpに書いているコードを記載すればプラグインとして使用できるようになります。

my-plugin.php

<?php
/*
Plugin Name: (プラグインの名前) ※ 必須
Plugin URI: (プラグインのサイトURI)
Description: (プラグインの説明)
Author: (プラグインの作者名)
Version: (プラグインのバージョン)
Author URI: (プラグイン作者のサイトURI)
License: (ライセンス名)
*/

プラグインテリトリーについては、別のスライドでもふれてますので、こちらもあわせてご覧いただけると参考になるかと思います。

WordPress公式ディレクトリテーマ登録のポイント：プラグインテリトリーを理解してハッピーになろう from Mignon Style

更新作業で消耗しない！Web製作者のためのWordPress公式ディレクトリ活用術 from Mignon Style

WordPress Codex | プラグインの作成
Plugin Territory | Theme Review Team

ライセンスについて

WordPressのライセンスはGPLです。
これは、WordPressの元となったb2というブログツールのライセンスがGPLだったからで、GPLのコピーレフトというルールによって決められています。

WordPressのテーマを作ったら配布や公開しないとダメと誤解されてる方もいるかもしれませんが、配布や公開はもちろん個人の自由です。
ただ、配布する際のライセンスはGPLになるので「使用するサイトを制限する」などの制限を儲けるのはGPL違反になります。

また、WordPressのコミュニティには「100%GPL」という考え方があります。

WordPressのテーマやプラグインの場合、WordPressのコードを使用しているPHPファイルはGPLになりますが、CSSやスクリプト、画像などのライセンスについては特に法的な制限がありません。

でも、例えばテーマやプラグインのCSSやスクリプトが自由に使用できないライセンスだった場合、ユーザーはそのテーマやプラグインを自由に使うことができなくなってしまいます。

WordPressでは、こういったユーザーの自由を奪わないために、CSSやスクリプト、画像などのライセンスについてもGPL、もしくはGPL互換ライセンスを推奨しています。
そのためWordPress公式ディレクトリのテーマやプラグインはすべて100%GPL（もしくはGPL互換ライセンス）になっています。

ライセンスについて興味のある方は「GNU 一般公衆利用許諾契約書」を読んでみて、難しいところ、わからないところを調べてみるとよいかなと思います。

GNU 一般公衆利用許諾契約書
100%GPLについて | WordCamp Tokyo 2014

まとめ

テーマについてのセッションは、WordCampのアンケートでも「次回のWordCampで希望する内容」で毎回上位にあがるもので、今回のセッションもありがたいことに会場は満員でした。

だけど、聞く人によって聞きたい内容が変わってくるので、内容選びやターゲット層の選定が難しかったりもします。

今回のセッションは「ステップアップするためのポイント」という内容だったので、これからWordPressをはじめるとかテーマを作ったことがない方には少し難しかったかもしれません。
ですが、全部を一度に理解する必要はなくて、例えばCSSをheadタグに記述しようとしたときに「この書き方は非推奨だった！」と思い出してもらえたら良いかなと思います。

セッションの後や懇親会でお話させていただいた方の中には「本によってCSSをheadタグに書いてるものやfunctions.phpに書いてるものがあって、どうして違うのか不思議だった。」とか「headタグにCSSを書くのが非推奨って知らなかった。」という方もいらっしゃったので、本やブログで覚えた書き方をそのまま使っている場合は、その書き方が非推奨になっていないか、一度見直してみると良いかもしれません。

作成したテーマに非推奨のテンプレートタグが使われていないか調べるには、Theme Checkプラグインを使用するのがおすすめです。

WordPress › Theme Check « WordPress Plugins

Theme Checkプラグインは、テーマで使用されている非推奨のテンプレートタグやプラグインテリトリーをチェックして、該当する項目を表示してくれるプラグインで、公式ディレクトリにテーマを申請する際にもTheme Checkプラグインでチェックします。

ただ、Theme Checkプラグインにも不得意があって、バリデーションに適切なコードを使用しているか、例えばテキストフィールドのバリデーションが行われているか、sanitize_text_field()が正しく使われているか、といったことまではチェックできません。
（公式ディレクトリのテーマの場合でも、テーマレビュアーが目視でテーマをチェックしています。）

でもポイントさえ覚えてしまえば、テンプレートタグはCodexで調べられるので、もし非推奨の書き方をしていたら、少しずつ推奨される書き方を取り入れていってください。

WordCamp Tokyo 2014、2015、2016とテーマのお話で登壇させていただきましたが、テーマについてはブログテーマの作り方やコーポレートサイトの作り方、カスタマイズの仕方、などいろいろなモチーフがあるので、また機会がありましたらぜひお話させていただけたら光栄です。

セッションを聞いてくださったみなさま、WordCamp Tokyo 2016にご参加くださったみなさま、ありがとうございました。