Wordpressのテーマを自作するための最小限ファイルとは?

やわなべです。

先週半ばにいきなりこの「やわなべ.net」のデザインを変えました。

ほっとんど見た目変わってないんですが、大きな違いが一点。

実は、このブログで使ってるWordpressのテーマ(デザインテンプレート)をゼロベースで自作しました。

テーマ作成は、空き時間でちまちまやってたんですが、かかった工数としては全部あわせて丸3日くらいでしょうか。

主な狙いだった「最小限のファイルで要件を満たす」という点がかなり実現できたのではないかと自負してるので、シェアさせていただきます。(←これが言いたかった)

スポンサーリンク

自作した理由と結果

前に使ってたのは「hueman」という高機能な無料テーマで、スマホでもPCでも、見栄えもよく、気に入ってたんですが、カスタマイズしてるうちにレスポンシブ表示がうまくできなくなってしまったんですよね。

100%自分が悪いんですが、高機能なテーマって、やたらファイルが多いのに加えて、管理メニューで独自にデザイン調整ができたりするんで、どの処理をどこでやってるのか、追っかけるのが非常にめんどくさい。そうこうしてるうちに、ふと思ったんですよ。

「Wordpressのテーマって最小構成で書いたらどのくらいで書けるのかなー」

って。

これはその「hueman」テーマを構成しているファイル群の一部。この下層にさらにファイルがあります。広く配布する用のテーマだと、いろんなユーザのニーズに対応できるよう汎用的に作りこむ必要があるんで、こうなるんでしょうね。

一方、私が「これが最小限ではないか」と考えたファイル一覧がこちら。

現在の「やわなべ.net」は、もう少し細かくパーツをバラしたので、ファイル数は5つくらい増えましたが、それでも上の配布用に作られたテーマに比べて全然少ないです。

すっきりしたのはファイル数だけではありません。

普通、管理画面のメニューの外観のところに、サイドバーに置く要素を編集する「ウィジェット」設定があると思いますが、今回、サイドバーの各パーツも自分で書くようにしたんで、ウィジェットを使う必要がなくなりました。

使ってるプラグインも通知系を中心に6つ。かなり少ない方なんではないかと。

PageSpeed Insights でのスピードチェック。まあ赤の要素がなければいいや。

モバイルフレンドリーテストも合格。(実は公開時点でviewport指定を忘れてて、スマホ表示で豪快にエラー起こしてた)

最小限のWordpressテーマのファイル構成

というわけで本題です。wordpressのテーマ作成の手順はいろんな方が書いてますが、「最小構成で書きたい」という方が押さえておきたいポイントはこの2つ。

・ テーマに最低限必要なファイルは「index.php」「style.css」の2つだけ
・ 「投稿ページ」「カテゴリページ」…などの分岐は3パターンに集約できる

テーマに最低限必要なファイルは「index.php」「style.css」の2つ

普通、テーマフォルダのトップは index.php以外に

・single.php
・archive.php
・header.php
・footer.php

など、多くのファイルがあると思います。HTMLやPHPに多少心得のある人でも、どれをいじればいいかわからなくて挫折する人もいると思うんですよね。

上の例だと「single.php」「archive.php」はそれぞれ、個別記事ページ、アーカイブページ用のテンプレート。そして、「header.php」「footer.php」は各テンプレートで共通で使うための部分テンプレートです。(もちろん、テーマによって構成を変えることは自由)

WordPressは、例えばアーカイブページを表示しようとするときには、テーマフォルダ内の「archive.php」を探して、あればそれを呼び出しますが、なければ「index.php」を表示します。

その他のページもそれ用のテンプレートがなければ index.php を呼び出します。つまり、index.php1枚あれば、全てを処理させることができるわけです。

もうひとつの必須ファイル、「style.css」はデザインを定義するファイルですが、重要なのは中身じゃなくて上のコメント部分。

style.css

このように所定の書式でコメントをかいておくことで、wordpressが「テーマ」として認識してくれます。cssの記述そのものはなくても構いません。

ページ分岐は3パターンに集約できる

で、1枚のindex.phpでどうやってサイト全ての表示要素を処理できるのか、というと、

index.php

ポイントはこの17-25行目のPHP文。メインの部分をif文で分岐して表示させるんですが、その分岐パターンは、

・ページが存在しない場合
・特定の記事(投稿または固定ページ)を表示する場合
・記事一覧を表示する場合

この3つ。これでで全部カバーできます。このブログの場合、トップページもカテゴリページも検索結果のページもすべて3つめのposts.phpで表示させてます。

分岐後の内容を全部書くのはさすがに冗長なので、サブフォルダ「inc」という下に、それぞれ別ファイルに書いたものを「get_template_part」という命令文で読み込むようにしています。

とっても、それぞれそんなにコード量はいらなくて、

404.php

post.php

posts.php

こんな感じ。

ちなみの上の形だと、ヘッダーが全ページ同じになるので、「やわなべ.net」では、OGPやmeta description記述あたりを柔軟に対応するため、先日別記事で書いた以下の設定をしています。

プラグインなしでWordPressのOGP対応をやっつける(facebook & Twitterカード) | やわなべ.net

サイドバーのウィジェット機能は大変便利なんですけど、いざデータを移行しようとしたり、別のテーマに変えようとする場合にトラブルの元になりがちです。かといって、自分だけで使うテーマ向けにウィジェットの作り方を勉強するのもめんどくさいんで、これも「inc/sidebar.php」というところへ外出しして、じかにコードを書きました。

sidebar.php

デフォルトで用意されてる各種ウィジェットも、少ないコードで書けるようにできてるんですよね。便利ですね wordpress。

あ、申し遅れましたが、以上のファイル群には、デザイン定義の要素は皆無です。なので、上のファイルのまんまでテーマを適用すると

こんなダサダサ表示で、やる気も一気に失せますが、BootstrapあたりのCSSフレームワークを使って、足りない部分だけ「style.css」で補うようにすれば、素人仕事でもどうにか見られるものはできますよ。

さらにムダを排したいあなたに

おまけとして、ムダな要素を排したくてしょうがないという、「wordpressテーマ ミニマリスト」のあなた(私)向けに補足。

functions.php

WordPressは最近のバージョンで、絵文字を文字化けなく表示させるためのスクリプトを全ページのヘッダー部分に書くようになってるんですが、このブログで絵文字使うことなんてないんで、上の2行を書いて除去します。

その下の2行は、上に書いたプラグインのうち、サイトにメールフォームを設置できる「Contact Form7」を使ってる人向け。人気のプラグインですが、フォームのないページのフッターにもスクリプトを埋め込む点が気に入らなかったんですよねぇ。

この点については公式サイトに案内があって、上のfunctions.phpの制御で消すことができます。

必要な場合だけ JavaScript とスタイルシートをロードさせるには | Contact Form 7 [日本語]

案内には「消す代わりに、フォームを置くページでは明示的に読みこむようにしないといけませんよ」とあるんですが、書かなくても動いてるんですよねぇ。まあ、エラー表示とかは赤で表示とかにならなかったりはするんですが。

まとめ

WordPressのテーマ自作に必要なスキルですけど、ひととおり終えた感触としては…

「Wordpressの理解 : HTML/CSSの理解 : PHPの理解 = 4 : 5 : 1」、くらいでしょうか。(※画像に特に意味はありません)

ぶっちゃけ、おすすめはしませんけれども、体感でもかなり軽くなった気がしますし(気のせい?)、年末の大掃除のあとくらいの爽快感はありますよ。