WordPress Theme機能を語ります
WordPressのテーマ機能について
最近の WordPress は、より複雑に進化しています。
テーマ制作においても WordPress の進化に向き合い続けることが求められてきています。
フルサイトエディット や サイトビルディング と呼ばれる新しい機能も実験され、テーマでの役割も変化すると言われていますが、そうでしょうか？
そもそも WordPressでの「テーマ」とは何なのでしょうか？
日本語での「テーマ」
日本語で「テーマ」と言う言葉は「創作や議論の根本的意図・主題」の意味を表す名詞です。
たとえば、絵画や映像の「テーマ」であれば、その作品における制作者が主に伝えたいことを指しています。
WordPress用語での「テーマ」
では、WordPress用語での「テーマ」とは何でしょうか？
日本語での「テーマ」の意味を当てはめて考えてみます。
- WordPress で作られているウェブサイト「作品」
- ウェブサイト制作者が主に伝えたいこと「テーマ」
となりますが、これでは意味が異なってしまっています。
ウェブ制作者が主に伝えたいのは、記事内容・コンテンツです。
なので WordPress における「テーマ」と言う言葉は「主題」と言う日本語の意味のままにすることは正しくありません。
この記事では WordPress 用語での「テーマ」について語っています。
ですから日本語で言う「テーマ」、つまり「主題」と言う意味は一旦この記事を読むときは忘れてください。
さて、
WordPress用語での「テーマ」ですが、ウェブサイト制作者の意図や主題を正しく伝えさせる為のデザイン・スタイル・機能を提供するファイル群 を指します。
WordPressのテーマの役割
フランス、パリのルーブル美術館を訪れたことはありますか？
約6万平方メートル の面積に、38万点以上 の素晴らしい美術品の数々が展示されています。
それらはただ単純に飾られている訳ではありません。美術品の歴史や意図、雰囲気などに合わせて展示空間が創られています。
創られた空間は、ゲストに美術品の歴史や意図、雰囲気を正しく伝える役割を持っています。
電脳世界の空間、つまりウェブサイトでも同じことが言えます。ただ単純に文章や画像を表示させるだけではウェブサイト制作者の意図や主題を伝えることは難しいです。ウェブサイト制作者が伝えたい意図や主題を表現するに、デザインやスタイルを彩り、空間を演出しなければなりません。
さて、
WordPress は CMS(コンテンツ・マネジメント・システム) ですから、コンテンツをマネジメントできるはずです。
コンテンツをマネジメントする為に様々な機能がそれぞれの役割を持っています。
WordPress の「テーマ」機能も、とてもシンプルな役割を持っています。
ですが、とても重要な役割です。
WordPressの「テーマ」の役割は、ウェブサイト制作者が意図している通りの空間に彩ることです。
デザイン・スタイリングを行い、ウェブサイト制作者が意図している通りに表現・表示を提供することです。
「テーマ」のファイルの役割
「テーマ」はファイル群です。役割を満たす為に、多くのファイルで成り立っています。
style.css
テーマのスタイルとテーマの情報を記載するファイルです。
テーマの情報も、このファイルに記載されています。
最初の理由は 初期の WordPress ではテーマ機能が無く、 CSS(スタイルシート) のみでデザインのスタイルを整えている程度だったことからです。テーマ機能に近い機能は WordPress 1.x 〜 1.5 の頃に追加されたのですが、初期の WordPress の後方互換から、追加された PHPファイルにテーマ情報を記載するのではなく style.css にテーマ情報を記述する形に落ち着きました。
現在では style.css にテーマ情報を記述する理由が別にもあるのですが、割愛します。
テンプレートファイル
さきほど少し触れましたが WordPress の初期のバージョンでは「テーマ」機能が存在していません。
現在のテーマ機能に近い機能が登場したのは WordPress 1.x 〜 1.5 のあたりです。そのバージョンで header.php や footer.php など現在のテーマファイル郡の構成に近いテンプレートファイルの仕組みが誕生しました。その仕組みが誕生したことで各箇所を細かくデザイン・スタイリングが可能になりました。そして、表現・表示の役割を「プラグイン」から「テーマ」で担う現在のかたちが生まれました。
テンプレートファイル以外
現在の WordPress のテーマのファイル群を見てみましょう。
テンプレートファイルとは別に、その他のファイルも存在しています。
テンプレート以外のファイルとなる functions.php や screenshot.png は、WordPress 2.0 で追加されました。
この頃のバージョンから現在のテーマとほぼ同一の構造になりました。
screenshot.png
WordPress 2.0 でサポートされるようになった screenshot.png は、テーマのスクリーンショット画像ファイルです。該当のテーマによってサポートされる表現の例を管理画面に表示する役割があります。
該当のテーマがウェブサイト制作者に対してどのような表現を提供するかを正しくしなければ、役割が失われてしまいます。
最近のテーマにおいては、ブランドロゴを表示するのみでテーマの表示例を出さない傾向も増加しています。ブランドの PR 目的で本来のスクリーンショットの役割を失わせるのはあまり推奨されることではありません。
WordPress 3.5 で追加された「カスタマイザー」機能により、テーマの表現・表示例がスクリーンショットと異なる姿にカスタマイズを可能になったこともありますが正しく表現の例を表示させるべきです。
functions.php
WordPress 2.0 で追加されたこのファイルは、WordPress のテーマハンドブックによれば
- WordPress のプラグインのように動作する
- WordPressのウェブサイトに機能追加するものである
- WordPress の関数を呼び出したり、独自の関数を定義したりすることができる
とされているようです。
このファイルの役割は「テーマにおける表現・表示の統一ルールを設定、また新しい表現・表示ルールを追加を行う」です。
たとえば
- 抜粋は最初の100文字を表示するルールを設定
- パンくずを表示できるようにしたり、その並び順を変更できるようにルールを追加(定義)
- 追加の JavaScript を読み込むように定義
などのルールを設定できるでしょう。
テーマ設定値について
テーマ設定値とは
テーマの設定値は、各テーマ固有の設定値です。
theme_mod と呼ばれるかたちで保持されています。
取得には get_theme_mods Function や get_theme_mod Function を使用します。
get_theme_mods Function
[https://developer.wordpress.org/reference/functions/get_theme_mods/]
get_theme_mod Function
[https://developer.wordpress.org/reference/functions/get_theme_mod/]
テーマ設定値は、別のテーマに引き継がれない
各テーマの設定値は、テーマを変更した場合の変更後のテーマには引き継がれません。
なぜ、テーマの設定値は引き継がれないのでしょうか？
それは、テーマが表現・表示の為のファイル群だからです。
それぞれの各テーマで表現・表示の仕組みは異なります。そのテーマの表現したい内容に合わせて設定項目が作られており、それに合わせて値も設定されているはずです。
ほとんどの場合、変更前と変更後のテーマで同じような設定項目となりえないでしょう。
その為、テーマの設定は各テーマに対して値が引き継がれずに保存されるようになっています。
それは親テーマや子テーマの関係であっても同様です。すべて別のテーマと見なされます。
色違いのテーマを別のテーマで用意することは推奨されません。
色を変更するだけのためにテーマの設定をリセットさせてしまうのは良くありません。
各テーマ設定値の保存されている箇所
テーマ設定値は、データベースの wp-options テーブルに option_name が theme_mods_ からはじまるカラム行に、連想配列をラップした形式で保存されます。
それぞれのカラム名は、 theme_mods_(テーマのディレクトリ名) となっており、テーマ毎にカラム行が存在しています。
もし、あなたが別のテーマの設定値を使用したいのであれば、WP_QUERYなどでクエリ処理を行い、この値を取得すれば良いでしょう。推奨はできませんが。
制作依頼がテーマ制作となってしまう理由
WordPress を使用したウェブサイト制作を企業に依頼する際には、新しくテーマを制作されるケースが多く存在しているようです。
ウェブサイト制作企業の依頼達成条件が、希望された表現・表示を可能にすることであれば間違いではありません。
テーマと言う機能の役割がそれを担う為、依頼達成のためにはテーマを制作するのが近道になるケースが多いからでしょう。
制作依頼が満足されない理由
ウェブサイト制作依頼結果が希望通りに達成されていないとなるケースを調査していくと
- 別テーマとの使用感の相違
- 納品されたテーマの確認不足
- 希望の表現・表示を行うことが難しい場合
- 納品後に表現・表示を変更したくなる場合
のパターンが多いようです。
別テーマとの使用感の相違
別テーマで可能だったことができない、使用感に相違がある場合にやや起こりやすいケースです。
リニューアル依頼であれば、リニューアル前に使用しているテーマの気に入られている機能や表現などをヒアリングするようにするべきです。
納品されたテーマの確認不足
制作依頼者の確認不足によって起こる問題も多いですが、テーマ制作側がテーマを制作するだけで実際に表現が可能か確認を怠っている場合に起こりやすいケースです。
テーマの表示を確認する為に使用される「テーマユニットテストデータ」は優秀なダミーデータですが、テーマ特有の表現までカバーされるテストデータではありません。
実際に表現を表示されるテスト投稿データを生成することを忘れないようにするべきです。
希望の表現・表示を行うことが難しい場合
納品されたテーマにおいて、希望の表現・表示を行うことが難しい場合です。
最近のデザインでは、レスポンシブと呼ばれる PC、タブレット、スマートフォンなど、異なる画面サイズでも見やすく最適な表示を提供する手法が主流となっています。
依頼側に各端末での表現・表示の希望を正しく伝えてもらうことでこのケースは回避しやすいです。
またモバイルファーストと言う言葉もありますが、モバイル端末やスマートフォンで希望の表示にしたからと PC、タブレットでの表示を疎かにするのは間違いです。
納品後に表現・表示を変更したくなる場合
そのテーマに依存するようにテーマが制作された場合、少しの表現でも変更するのが困難になってしまいます。
カスタマイズ性が乏しいテーマが納品された場合にも該当するようです。
スタイルシートには CSS設計を基にコーディングスタイルでスタイリングするべきです。
独自の設計より BEM や OOCSS といった多くの制作者に親しまれているコーディングスタイルを導入するとよいでしょう。
日本であれば FLOCSS (https://github.com/hiloki/flocss) や REMM (https://remm.work) が親しまれています。
リニューアル制作時に確認すること
変更前のテーマには、上記の使用感の相違やショートコードなどの問題も起こりえます。
リニューアル後のウェブサイトでも正しく表示されるように変換を行うか、または同様のショートコードを制作するなども考慮しなければなりません。
リニューアル制作時には可能である限り、リニューアル前の投稿データもテストデータとして使用すると良いでしょう。
正しく表示ができるか、使用感に相違が起こらないかなども検証をするべきです。
このことは、ターゲット層のマーケティングにも役に立つ手法です。
たとえば、ブロガーをターゲットに取る場合にはブロガーに気に入られているテーマの機能を分析し、そのテーマで投稿したデータを基にして移行しやすい設計・機能を制作すると良いでしょう。
テーマに含むべきか否かの機能
テーマのファイル群に、含むか否か度々上げられる代表的な機能を語りましょう。
含むべきか否かは、テーマの使用者や設計者によって考えが異なるでしょう。ここでは含むべきか否かについては取り扱いません。
ショートコード
ショートコードをテーマに含むのが良くないとされる理由は
テーマを変更した際に[short_code]などといった括弧表記になる問題が生じる為です。
カスタム投稿タイプ
この問題もパターンによって含むべきでないとされています。
たとえば「製品情報」といったカスタム投稿タイプで製品の情報を表現するテーマがあったとします。
テーマにカスタム投稿タイプの機能を含めている場合に、テーマを変更した際に製品の情報が表示できなくなってしまう問題が生じてしまう為です。
カスタムブロック
この問題はショートコードに似ています。
テーマを変更した際にテーマに含まれていたブロックが使用できず、使用していた投稿を編集する際や表示する際には障害になる為です。
含んでも問題ないとされる機能
含むべきではないとされたこともありますが、公式ディレクトリテーマのほうではテーマに含んでいて問題がないとされている機能です。
カスタムブロックパターン
ブロックパターン機能の実態は、ブロックの集合体を挿入するのみです。
テーマを変更した場合でも挿入されたブロックはそのまま変わりません。
ブロックパターンから集合体を挿入できなくなるのみである為、テーマに含んでいても大きな問題にはなりません。
カスタムブロックスタイル
ブロックスタイル機能の実態は、ブロックのクラスに選択したスタイルを追加するのみです。
テーマを変更した場合でもブロックのスタイルが使用できなくなるのみでその他に変更はない為、テーマに含んでいても大きな問題にはなりません。
デフォルトテーマ
最初のデフォルトテーマは、名前もDefault
現在のデフォルトテーマと言われている Twenty シリーズが登場したのは新しいことです。
最初のデフォルトテーマは WordPress 1.5 で登場した Default と言うテーマです。
Defaultより古い。1.2時代のデザインの互換テーマ
それまではテーマと言う概念はありませんでしたが、WordPress 1.5の時にはこれまでのデザインとの互換性のために別のテーマも用意されていました。その名も Classic です。
余談：WordPressでは古い機能を Classic と呼ぶ
WordPress のバージョン名は、ジャズミュージシャンで構成されています。
そのことにちなみ、古くなった互換として維持している廃止予定のことを公式では Classic と頭文字につけて呼んでいるそうです。古くなった機能はClassic Functionsということです。
Classic Editorの名前の由来もこのことからなのでしょうか？
デフォルトテーマ名は西暦が由来
Twenty からはじまるテーマ名のデフォルトテーマは、現在のデフォルトテーマです。
2010年の Twenty Ten からはじまり、2020年09月現在は Twenty Twenty One が開発版としてリリースされています。
このテーマの由来は西暦って知っていましたか？
Twentyシリーズと呼ぶ方もいますが、厳密にはシリーズではありません。
ほぼ毎年新しく登場するこのテーマには、その時その時のウェブトレンドのデザインやカラーなどのアイデアも取り込みながらすごく考えられて作られています。
デフォルトテーマが生まれる過程を見てみると、ウェブデザインのアイデアがいっぱい詰まっていることが分かります。
デフォルトテーマに備わっている特殊な役割
WordPress のデフォルトテーマは他のテーマと異なり、特殊な役割が与えられています。
デフォルトテーマ以外のテーマや開発中のテーマで不具合があった場合、ウェブサイトを正しく表示させる復元を容易に対処する役割です。
WordPressは、デフォルトテーマ以外のテーマが無い場合に強制的にデフォルトテーマを読み込もうとしてくれます。
デフォルトテーマが存在していると、開発中のテーマの不具合によって真っ白な画面になった場合でも開発中のテーマをサーバから退避させることで容易に復旧可能です。
メジャーアップデート時に新しく登場するデフォルトテーマに後方互換を考えられて過去2つ分のデフォルトテーマが同封されるようになっています。
復旧を容易にする際にはデフォルトテーマは1つで大丈夫ですので、必要が無ければ過去2つ分のデフォルトテーマは削除しても問題ありません。
随時更新
良いテーマを制作するためにも、テーマの役割、機能を整理していくことが重要です。
記事は随時更新していきます。
Discussion