WordPressでは、なぜ固定ページの内容をテンプレートファイルに書いてはいけないのか?

最近、WordPress界隈をにぎわしているTwitter上のアンケートがあります。

「WordPressの固定ページの内容は、テンプレートファイル(page-xxxx.php)に書くか? それとも、管理画面のエディタで書くか?」

というものです。

正直、私はこの質問を読んで『管理画面に書くにきまってるだろう。今どき、こんなことを聞く人がいるのか?』と驚いたのですが、もっと驚いたことに回答した人の中でテンプレートファイルに書くという人の割合がかなり多かったのですね。

結論から言うと、WordPressでテンプレートファイルにコンテンツを直書きするのはやめたほうが良いです。
その理由と、ではどうすればよいのかということを、この投稿では書いておきたいと思います。

テンプレートファイルに固定ページの内容を書くとはどういうことか?

まず、テンプレートファイルに固定ページの内容を書くというのはどういうことか? について書いておきます。
(ここがずれていては議論になりませんので)

今回のアンケートでいうところのテンプレートファイルとは、WordPressのテーマディレクトリ内にある固定ページの内容を表示するためのテンプレートファイルです。

└ themes
  └ mytheme(テーマディレクトリ)
    └ archive.php
    └ footer.php
    └ functions.php
    └ header.php
    └ index.php
    └ page.php(★固定ページ用テンプレートファイル)
    └ screenshot.png
    └ single.php
    └ style.css

固定ページを作成した場合、固定ページの表示には通常「page.php」というテンプレートファイルが使われます。
ただし、実際にはWordPressは下記の順でテンプレートファイルを探して、見つかったものを使います。

  1. 固定ページで指定されたカスタムテンプレート
    通常は、サイドバーの左右位置、全幅コンテンツなど、レイアウト別に用意されることが多い
    (例)full-width.php, page-onecolumn.php などとなっていることが多い
  2. page-{slug}.php
    例えば、ある固定ページのスラッグが「access」だとして、page-access.php というテンプレートファイルがあったら、そのページだけは表示に「page-access.php」が使われる
  3. page-{id}.php
    ある固定ページの page-id が6だとして、page-6.php というテンプレートファイルがあったら、そのページだけは表示に「page-6.php」が使われる
  4. page.php
  5. singlar.php
  6. index.php

page-{slug}.phppage-{id}.phpページテンプレートと呼ばれます。

カスタムテンプレートおよびページテンプレートは、拡張子が php であれば内容は何でも構いません。
極端なことを言うと、WordPressの仕組みに全く関係しないロジックのページでも構いませんし、それこそPHPの構文を含んでいなくても構わないのです。
この仕組みを利用して、WordPressの固定ページ作成画面からでは作りづらいページを、他の手段で作ることができます。
例えば「page-access.php」を作ってGoogleマップを埋め込んだアクセスページを作りこんだり、「page-company.php」を作って会社の概要や沿革を表組で表したりすることもできます。

これが、テンプレートに固定ページの内容を書くということです。

カスタムテンプレートおよびページテンプレートは、WordPressの管理画面からではなく、HTMLエディタなどで作成して直接テーマディレクトリにアップロードします。

テンプレートファイルに固定ページの内容を書くと何がマズいのか?

なぜ、テンプレートファイルに固定ページの内容を書いてしまうのでしょうか?
私が考えるに次のような理由があると思います。(他にもあったら教えてください)

  1. 投稿画面のWYSIWYGエディタが使いにくいので、慣れたHTMLエディタでつくりたい
  2. ページにJavaScriptやPHP、もしくはWordPressのテンプレートタグを入れたい
  3. WordPressのデフォルトテンプレートと全く違うレイアウトのページを作りたい
  4. ユーザーに固定ページを触らせたくない

では、テンプレートファイルに固定ページの内容を書いてしまうと何がマズいのでしょうか?

テーマを変えたり更新するとコンテンツが消えてしまう

WordPressは、見た目をテーマで、機能をプラグインで作っていくという設計になっています。
そのため、管理画面から簡単にテーマを切り替えられるようになっています。

固定ページの内容を記述したカスタムテンプレートおよびページテンプレートはテーマディレクトリ内に置かれますので、テーマを切り替えてしまうとアクセスできなくなります。

└ themes
  └ theme01(テーマ01)
    └ page.php
    └ page-access.php(ページテンプレート)

  └ theme02(テーマ02)
    └ page.php
     (テーマ02には、ページテンプレートが無い)

上記の例だと、theme01からtheme02に切り替えると、page-access.php にはアクセスできなくなります。

また、オリジナルテーマでない場合は、テーマを最新に更新した際に、自分で作成したカスタムテンプレートやページテンプレートと同名のテンプレートが追加されて上書きされてしまうかもしれません。

テーマを切り替えたり更新するとコンテンツが消えてしまうって、ちょっとマズくないでしょうか?

管理画面からコンテンツを管理できない

カスタムテンプレートやページテンプレートは管理画面から内容を編集することができません。
(テーマエディターで編集することは可能ですが、現実的ではないでしょう)

コンテンツを管理できないCMS(コンテンツ管理システム)って何なんでしょうか?

サイト内検索に引っかからない

WordPressのサイト内検索は、データベースに登録されたデータを検索するものですから、投稿画面から登録された内容だけが対象となります。
カスタムテンプレートやページテンプレートに直書きされた内容は、サイト内検索の対象外になります。

SEOを手動でやらないといけない

WordPressにはSEOのための優秀なプラグインがあり、タイトルの調整、XMLサイトマップの自動作成をはじめとした様々なことを自動化、または簡単な操作で行うことができ、簡単に設定変更することができます。
しかし、カスタムテンプレートやページテンプレートに直書きされた内容は対象外です。
プラグインのSEO設定は常に自動生成されますので、手動で修正することはできません。
かといって、そういったプラグインを使わずに手動でSEOの調整を行うのは、もっと非現実的です。

固定ページを検索結果に出したくないのであればそれでも構いませんが、そんなわけがないですよね?

ではどうしたらいいのか?

とはいえ、過去のWordPressの投稿画面に使われていたTinyMCEエディタではやりにくいような難しいことをしたいから、カスタムテンプレートやページテンプレートに直書きしたいという要望はあると思います。

例えば、

  1. ランディングページのような凝ったレイアウトのページを作りたい
  2. ランディングページやポップアップなど、レイアウトが全く異なるページを作りたい
  3. ページ内にJavaScriptを入れたい
  4. ページ内に新着記事一覧を入れたい

このような場合、私はこんな風に作っています。

HTMLを書きたいなら「カスタムHTMLブロック」

テンプレートファイルに直書きしたいと思う人の多くは、WordPressの新しいエディタ「Gutenberg」を使ったことがないのではないでしょうか?
Gutenbergの細かい解説はここではしませんが、セクションごとにブロックになる構造は思った以上に便利です。
用意されているブロックは多彩でこれだけでも十分に凝ったページは作れます。

しかし、あらかじめ用意されているブロックのコードでは実現できない場合もあります。
そのような場合は「カスタムHTMLブロック」を使えば、エディタ内に直にHTMLを書くことができます。
カスタムテンプレートに書くのと違ってデータベースに保存されますから、サイト内検索の対象になります。
(なお、無理してブロック内でHTMLを書かなくても、好きなHTMLエディターで書いてコピー&ペーストすればOKです)

カスタムHTMLブロックのサンプル
固定ページで「カスタムHTMLブロック」を使う

段落ブロックのHTMLモードと何が違うかというと、カスタムHTMLブロックはタグの制限が圧倒的に緩いです。
scriptタグでJavaScriptも書けます
styleタグでCSSも書けます。(厳密にはbodyタグ内にstyleタグを書くのは文法違反ですが、下書きの時にテストで書いてみるのはいいと思います)

私がいいなと思っているところは、セクションごとにブロックが分けられることです。
長いページになっても混乱せずに作っていくことができます。
ブロックごとにプレビューできるので、使い慣れてくると非常に楽です。

ページ内で、段落・画像・動画など他のブロックとも混在できますから、必要なところだけカスタムHTMLブロックにするというのが現実的な使い方だと思います。

カスタムブロックを追加するプラグインもあり、中には、コンテナーブロックを追加してくれるものがあります。
コンテナーブロックはブロックを入れ子にできるもので、これにより複数のブロックをまとめてクラスをつけたりできます。

さらに、よく使うコードは「再利用ブロック」として登録し、スニペットのように呼び出すことができます。

何もないカスタムテンプレートを作る

ブラウザの幅いっぱいに広がるレイアウトとか、ポップアップウィンドウのようにヘッダーフッターのないレイアウトでページ全体を組みたい場合は、カスタムテンプレートを使います。
例えば、ちょっと極端ですがこんなテンプレートを作ります。

<?php
/*
 * Template Name: page-simple
 */
get_header('simple');

while ( have_posts() ) :
    the_post();
    the_content();
endwhile;

get_footer('simple');
?>

header-simple.php には headの部分とbodyタグ、footer-simple.php にはbodyタグとhtmlタグの閉じタグだけ書いておいて、中身は全部カスタムHTMLブロックで書いても構わないわけです。

この使い方、concrete5に似てる感じがしなくもないですね。

ページ内に新着記事一覧を入れたいなら「最新の記事ブロック」

標準で「最新の記事ブロック」があります。
また、カスタムブロックを追加するプラグインの中には、「最新のカスタム投稿タイプ」が追加できるものもあります。

ページ内にPHPコードを入れたいなら「ショートコードブロック」

functions.php にPHPをショートコードとして使えるように書いて、ショートコードブロックで追加します。
テーマを切り替えても使いたい場合は、その部分を切り出してプラグインにしましょう。

自作プラグインはとても簡単に作れます。
下記の記事を参考にしてみてください。

ユーザーに固定ページを触らせたくないなら、ユーザーの権限を変更

普段の運用はブログ投稿のみで固定ページは触ってほしくないというのであれば、管理者とは別に「運用のためのユーザー」を作成し、権限グループを「投稿者」にすればOKです。

一部の固定ページだけ編集を許可する場合は、「User Role Editor」プラグインを使います。
「投稿者」権限グループをベースに、下記の権限を追加した新規の権限グループを作成して、運用のためのユーザーに適用します。

  • edit_pages
  • edit_private_pages
  • edit_published_pages
  • read_private_pages
  • publish_pages

edit_others_pagesdelete_others_pages を含めないことで、自身が作成者である固定ページのみ操作できるようにして、操作を許可する固定ページのみ、作成者を運用のためのユーザーに変更します。

動けばいい、は後で苦労する

いろいろ偉そうに書いてきましたが、私もWordPress初心者の頃は、投稿画面にPHPが書けるプラグインを入れたり、カスタムテンプレートにバリバリコンテンツ書いて固定ページの中身は空にしたりしていました。
WordPressのことを知らなかったというのもありますが、今思うと、裏技的なことをやって使いこなしていると錯覚していたようにも思います。

ところが、そうやって作ったサイトを何年かたってメンテナンスしようとすると、とにかくやりづらい。
管理画面を見てもテーマを見てもサイトの全貌がつかめなかったり、あちこち依存しすぎてちょっとしたことができなかったりと、とんでもなく手間がかかります。
さらに、WordPressの機能追加の恩恵を受けられなくなっているサイトもあります。

それに対して、その後、勉強会や書籍などで仕組みや設計思想を理解してから作ったサイトは、最初の制作こそ苦労しましたが、とにかくメンテナンスがしやすいのです。
管理画面を見ればサイトの全貌がつかめるし、WordPressの機能追加への対応も特に気にせずできます。
そして、何か問題が起きてもSNSでシェアするだけで解決策が返ってきたりするんです。

WordPressは多く使われている割にはきちんと知られていないことが多かったり、間違って広められていることが多いです。
そして、何がより良いのかを見極められるようになるのも難しいです。
そんなときは、各地で開催されている MeetUp に参加してみてください。
WordPressのダッシュボードでも見つけることができます。
そこで、いろんな知見をシェアしたりされたりしてほしいなと思います。

WordPressは自由なシステムですので制作者がどんな設計でサイトを作ろうと構わないのですが、設計思想を理解することで受けられる恩恵は計り知れません。
世界中でWordPressに関わっているデザイナーエンジニアは、それこそ数百万人もいます。
そういった人たちの知恵が結集されたシステムなのですから、使わない手はないですよ。

WordPressでは、なぜ固定ページの内容をテンプレートファイルに書いてはいけないのか?” に対して9件のコメントがあります。

  1. ppk より:

    オリジナルデザインのテンプレートだと、固定ページはほぼ直書きでしょ。
    たまに、管理画面にコード張ってる人いますが、改修、修正大変ですよ。
    製品情報などを固定ページで作る場合は、更新性考えてグーテンベルグで良いと思いますが。。

    1. 川井 昌彦 より:

      管理画面以外にコンテンツが書いてあると、単に本文テキストを修正するためにFTPが必要になってしまって、CMS(コンテンツ管理システム)にならない気がしますが・・・

      「管理画面にコード張ってる」というのは、クラシックエディターでHTMLを書いてしまっているケースではないでしょうか?
      あれは、おっしゃるとおり私も改修や修正が大変だと思います。

      ブロックエディターになってからは、かなり高度なレイアウトもHTMLを書かずに表現できるようになりましたので、私はオリジナルテーマで制作する場合でも、少なくとも通常の固定ページのために個別のテンプレートを作ることはなくなりましたよ。
      (会社案内のページを page-profile.php で作るとか)

      1. aki より:

        はじめまして!
        私はデザイン側なのですが、どこまでワードプレスでデザインをするかで悩んでおります。

        教えていただければ大変ありがたいのですが…ワードプレスの管理画面内でできるレベルでデザインを実装するとなると、コーダーさんの役割とは何になるのでしょうか?

        デザイナー側は実装に手間がかかるから、もしくは自分でコーディングができないからコーダーさんに依頼をするのですが、ブロックエディタレベルで再現できるのデザインの実装であれば、わざわざコーダーさんにお願いすることもないのでは?と思います(ブロックエディタでもカスタマイズしていけば大変だと思いますし、ブロックエディタに慣れていないといけないですが)。

        最近デザイナー側とコーダー側で工数イメージが乖離するようなことが何度かあり、それを避けたいと思うようになったのですが、そうなるとデザイナー側がブロックエディタを触って構築するほうが早いのではと思うようになったため、今回の質問を投げかけてみた次第です。

        1. 川井 昌彦 より:

          akiさん、コメントありがとうございます。
          ご質問のケースだと、コーダーは不要ということになってしまいますね。

          他のケースとして、デザイナーはPhotoshopなどでデザインするだけで、コーダーがブロックエディタとCSSでページを作成するというケースもあります。
          ブロックエディタでページを組むのも立派なコーディングだと思いますし、私の周りではこういうケースが結構あります。

          細かくWBS作って事前に誰が担当するかをすり合わせておく必要があるんでしょうね。
          なお、ブロックエディタはコーダーの仕事ではないと考えている方もいらっしゃるので、結構難しい問題だと思います。

          1. akihirosakagamiaki より:

            川井さん

            返信ありがとうございます!

            そうですね、自分で書いていて最初にどれだけデザイナー側とコーダー側での役割分担を詰めておくかだなと思いました。

            TOPや魅せたいページはコーダーさん側にお願いしつつ、それ以外の簡素なページはささっとデザイナー側でやってしまうくらいの感覚でもいいのかもしれません。

  2. ぽんこつえんじにあ より:

    私はこの記事には反対で、wordpressの場合、テーマといっても、独自設定変数やカスタム投稿タイプを追加したりして、テーマの汎用性を著しく損なうことを前提とされているので、管理画面であらゆるコンテンツを管理することは諦めたほうがいいと思っております。functions.phpを切り出してプラグインにするというのも、どうかと思っています。通常、プラグインも汎用性があるものの、その汎用性を失うわけで。実は、wordpressはテーマを編集して稼働したあとは、簡単にテーマを変えることもできず、その程度には不便なのだと思います。

    1. 川井 昌彦 より:

      コメントありがとうございます。
      この投稿の主旨は「コンテンツ」をテンプレートに書くなということです。
      ここでいう「コンテンツ」とはユーザーに伝えたい本文部分(テキストや画像)のことです。
      (こういう書き方でわかっていただけますでしょうか?)
      なので、ちょっと主旨が伝わっていないのかもしれません。

      また、テーマの汎用性を損なうようなカスタマイズはしないほうが良いとも考えていて、最近は functions.php に書かずにプラグインにするアプローチもしています。
      これはプラグインで切り出した部分に汎用性を持たせたいという意味ではなく、テーマの汎用性を失わないため、またはテーマのアップデートがカスタマイズによって反映されないことが無いようにするためです。
      Snow Monkey、Lightning、Nishiki などの国産テーマもその方向になってきていて、ここ数年で開発手法が大きく変わってきているなと感じています。

  3. akko より:

    「SEOを手動でやらないといけない」
    「カスタムテンプレートやページテンプレートに直書きされた内容は対象外」
    「固定ページを検索結果に出したくないのであればそれでも構いませんが、そんなわけがないですよね?」

    こちら、意味がわからないです。
    普通にインデックス登録されて検索結果に表示されますが、きちんと検証されていますか?

    1. 川井 昌彦 より:

      コメントありがとうございます。
      おっしゃるとおり、リンクさえ張られていれば検索エンジンがたどってくれて検索結果に反映されます。

      私が言いたかったのは、テンプレートに直書きされた内容はSEOプラグインが読めないので、プラグインで一括管理できない ということです。
      また、XMLサイトマップに自動で追加されないのでインデックスされるまでに時間がかかります。

      ただ、管理画面で空の固定ページを作ってページテンプレートを適用させれば、SEOプラグインで管理できますね。
      読んでいる方に誤解を与えないように、後で書き直しておこうと思います。

aki へ返信する コメントをキャンセル