WordPressを自作テーマで作ることで発生する様々な問題

以前、WordPressのテーマ作成の際の種類について書きました。

WordPressのテーマはオリジナル、無料、有料どれがいいのか

その中で、自作テーマ（オリジナルテーマ）は色々な理由からあまりおすすめできないと書きました。今回はもう少し掘り下げて、自作テーマで作ることでどんな問題があるのか具体例を上げてご紹介します。

WordPress初心者にはハードルが高い自作テーマ作り

WordPressでウェブサイトを作る方法としては用意されているテーマを使う方がメジャーですが、「完全オリジナルデザインで作りたい」「作成したHTMLをそのままWordPress化したい」という場合は、テーマを自作してオリジナルテーマとして設定して作る方法が一般的です。

この方法はウェブで検索すればたくさん出てきますが、必要最低限のテンプレートファイルがあるか、正しいテンプレートタグを使えているか、ブロックエディタにどこまで対応するのか等、ケアしなければいけないことがたくさんあるため、WordPressにまだ慣れ親しんでいない人には簡単ではありません。

いくつか例を挙げます。

wp_headとwp_footerの書き忘れ

WordPressを使う上でこのテンプレートタグが入っていないと正常に動作しないため実質不可欠です。「こんな重要なタグ書き忘れるなんてありえない」と思いますよね。しかし、今までにwp_headとwp_footerが入っていなかったオリジナルテーマのサイトというのがいくつかありました。公式テーマや有料テーマを使わずに（使えずに）オリジナルテーマでの制作の判断となったケースに多いように思えます。デザインにこだわっていたり、ウェブ担当者が独学で構築した場合等が想定されます。

これらを書いていないWordPressはプラグインが正しく動作しなかったり、必要なコードが生成されなかったり、ログイン時に上部に表示されるアドミンバーが表示されない等、様々な不具合を引き起こします。

「WordPress オリジナルテーマ 作り方」のようなキーワードで検索すると作成方法を丁寧に紹介してくれている記事が出てきて、たいていその中にwp_headとwp_footerを追加するよう解説されているはずです。

必要なテンプレートファイルが用意されていない

WordPressの最小構成ファイルは index.php と style.css の2つのファイルです。これがあればテーマとして認識できます。しかし、これだけではテーマとして機能しないことがほとんどなので、その他に主要な必要ファイルを用意します。例えば以下のようなテンプレートファイルです。

• single.php: 記事詳細ページ用
• archive.php: 一覧ページ用（カテゴリー、タグ、ユーザー毎、日付といったアーカイブページ）
• page.php: 固定ページ用
• 404.php: 目的のページがなかったときページ用
• search.php: 検索結果一覧ページ用

WordPressがどのテンプレートファイルを呼び出すかについては階層の概観図がわかりやすいです。

ファイル:wp-template-hierarchy.jpg – WordPress Codex 日本語版

概観図を見てもらえれば分かる通り、どのページも該当するテンプレートファイルがなければ最終的には index.php を読みに行きます。404エラーでも検索結果でも index.php 内に条件分岐の記述がされていればテンプレートファイルとしての機能は果たしますが、一つのファイルでいくつも条件分岐があるのはわかりづらいですし、運用もしづらいです。

記事詳細ページ用の single.php 、固定ページ用の page.php 等は用意されていても、一覧ページ用としてはカテゴリーページ用のテンプレートファイル category.php しかないためタグや日付一覧ページ用のテンプレートファイルがなかったり、404エラーや検索結果ページ用のテンプレートファイルがなく、ページ自体表示ができないで公開・運用されているウェブサイトも少なからず見てきました。

これはスターターテンプレートを使って構築することでクリアできる問題です。冒頭で紹介した記事にも書きましたのでご参照ください。

PC/スマホだけではなくあらゆるデバイスに対応した完全レスポンシブ対応

自作テーマの場合、ウェブデザインを作成し、HTMLコーディングし、WordPress化するというフローになることが特にクライアント向けにWordPressを構築している場合は多くなると思います。この場合はデザイン上、デスクトップとモバイルは作成してもタブレットデザインまでは作成する余裕がないということがよくあります。そうすると、コーディング時にタブレットに相当する横幅の見た目が定義されていないために予期しない崩れが発生する可能性が高まります。

また、モバイル用のデザインをCSSで定義しても、例えば iPhone SEの小さめのデバイス（第一世代は4.0インチ）や、Max系の特定のデバイス（iPhone 13 Pro Maxは6.7インチ）でも大きく異なるため、崩れる、または同じモバイル用デザインが再現できないという問題も往々にして発生します。

例を挙げます。これは当サイトの各モバイルデバイスでの見た目を比較した画像ですが、大きな崩れはないものの、トップの説明文章の左右の余白が詰まっているのと余裕があるので違いがあるのがわかります。これは横幅ピッタリに合うようにデザインしていて、デバイス幅の違いによりデザインが再現できない場合に崩れたり、予期しない改行が発生する可能性があることを指します。

多くのテーマは完全レスポンシブに対応しています。素晴らしい技術者が作成してくればテーマを使わない手はありません。「デザインを作成してからコーディング&WordPress化」という制作フローではなくなりますが、そういったテーマを選択した上で（ページビルダーを利用も有り）、必要なデザインカスタマイズを行うという方法を採用することで、崩れ等が発生するリスクを極限まで少なくでき、工数を少なくしてレスポンシブ対応できるという大きなメリットがあります。

WordPressテーマの自作は慎重に

• WordPress 5.0から有効になったブロックエディタや、WordPress 5.8から有効になったウィジェットのブロック化への対応
• PHPのアップデートやWordPressのアップデートに合わせて、エラーや非推奨となるコードを変更
• 構造化データのHTMLマークアップへの対応（Googleの検索結果への最適化）

など、他にも対応すべき箇所・気をつけるべき点があります。

ウェブは時間とともに進化をしていて、それに合わせてサイト側も進化しないと取り残されてしまいます。すべてに人員を割いて対応できる体力がある場合はいいですが、現実はそうもいかないため、優秀なテーマに乗っかりつつ、必要なデザインを対応する、という方法が10年以上WordPressに関わり長年テーマを作成してきた現時点の見解です。

この先手法は変わるかもしれませんが、その時その時に合った最適なやり方を選択し、変化して時代に対応していくのが懸命だと考えています。

WordPressのオリジナルテーマ作成は構造や出力がどうなっているのかがよくわかるいい方法です。これからWordPressを学んでいきたいという場合は練習に是非お勧めします。一方、公開サイトでの判断は今回ご紹介したデメリットや注意点を踏まえた上で、自作テーマにするのかどうかを慎重に考えていただければと思います。テーマ変更は簡単にできませんし、少なくとも数年単位での運用になりますからね。