テーマ

#0004 - WordPressでオリジナルテーマを作るための基礎

WordPressは、テーマによってウェブサイトの見た目、ウェブの動作をコントロールしています。
つまり、WordPressでウェブサイトを作ると言うことは、WordPressのテーマを作ると言っても過言ではありません。

テーマに必要なファイル

WordPress がテーマとして認識するには、最低限以下の２ファイルが必要となります。

ファイル名用途
index.phpウェブサイトに表示するコンテンツをHTMLで記述するファイル
style.cssウェブサイトの見た目をCSSで記述するファイル

この２つのファイルがあればWordPressは、テーマとして認識します。

index.php

ウェブサイトに表示する内容を記載します。ですが、基本的に何も記述せず空白のファイルで構いません。
ただし、ファイルとしては存在する必要があります。

本来はウェブサイトに表示する内容を記述するファイルなのですが、今後テーマ制作を進めると index.php の内容が表示されることがないのです。逆に、index.phpが表示されてしまうようであれば、テーマ制作に不備があると思ってください。

詳しくは後ほど説明します。

style.css

WordPressにおいてstyle.cssは、とても重要は役割を果たします。
cssファイル、すなわちスタイルシートファイルですから基本的には、見た目を制御する役割を果たすファイルです。

ですが、「とても重要は役割」と表現したのには理由があります。それは、style.cssにテーマの情報を記述するからです。

具体例を見てみましょう。これはWordPressの標準テーマ「Twenty Twenty-Two」の style.css の冒頭です。

/*
Theme Name: Twenty Twenty-Two
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

このように /* */ で囲われたコメントとして、様々な情報が記載されています。これを、テーマコメントと呼びます。
WordPressでは、style.cssに記載されたテーマコメントからテーマの情報を取得します。

テーマコメントにつては、別の投稿で詳しく紹介します。

テーマにあると便利なファイル

index.php と style.css の２ファイルがあれば、WordPressはテーマとして認識してウェブサイトを表示することができます。
縦長１ページのウェブサイトであれば、この２ファイルで作成することも可能です。

しかし、複数ページから構成されるウェブサイトでは、この２ファイルで全てのページを制御することは、制作効率やメンテナンス性を考えると困難です。

そこで一般的には以下のようなファイルをテーマとして作成します。

ファイル名説明
header.php共通ヘッダー部を表示するファイル
footer.php共通フッター部を表示するファイル
front-page.phpトップイメージを表示するファイル
page.phpWordPressの固定ページを表示するファイル
single.phpWordPressの固定を表示するファイル
functions.phpテーマ内で使用する関数を記述するファイル

このほかにも様々なファイルがありますので、各ファイルがどのように動作するのを含め、後ほど紹介します。

テーマを作ってみよう

Local WP で WordPressを実行する で用意したテスト環境に、新しいテーマを作成してみましょう。

http://test.local を c:¥User¥ユーザー名¥Documents¥test に作成した例を元に紹介します。

テーマを作る場所

オリジナルテーマ「mytheme」を作成する場合は、wp-content themes の中にmythemeフォルダを作成します。

  • c:¥
    • User
      • ユーザー名
        • Documents
          • test
            • app
              • public
                • wp-admin

                  ここにはWordPressの管理画面に関するファイルが保存されています。このフォルダ内のファイルは変更・削除しないでください。

                • wp-content
                  • languages

                    ここにはWordPressの多言語対応時の翻訳情報が保存されています。このフォルダ内のファイルは変更・削除しないでください。

                  • plugins

                    ここにはWordPressのプラグインが保存されています。このフォルダ内のファイルは変更・削除しないでください。

                  • themes
                    • mytheme
                      • index.php
                      • style.css
                    • twentytwentyfour
                    • twentytwentythree
                    • twentytwentytwo
                  • upgrade

                    ここにはWordPressのアップデート情報が保存されています。このフォルダ内のファイルは変更・削除しないでください。

                  • uploads

                    ここにはWordPressの管理画面からアップロードしたメディア（画像・動画など）が保存されています。このフォルダ内のファイルは変更・削除しないでください。

                • wp-includes

                  ここにはWordPressのシステムファイルが保存されています。このフォルダ内のファイルは変更・削除しないでください。

              • sql

                ここにはLocal WPのシステムファイルが保存されています。このフォルダ内のファイルは変更・削除しないでください。

            • conf

              ここにはLocal WPのシステムファイルが保存されています。このフォルダ内のファイルは変更・削除しないでください。

            • logs

              ここにはLocal WPのシステムファイルが保存されています。このフォルダ内のファイルは変更・削除しないでください。

テーマに必要なファイルを作る

WordPress にテーマとして認識させるには、mythemeフォルダ内に index.php と style.css の２つのファイルを作成します。

index.php は、中身のない空ファイルです。style.css には、テーマコメントを記述します。

テーマコメントを記述する

ここでは、テーマ名（Theme Name）の他、Local WP で test.local を作成したときの情報を元に、各バージョンを記述しました。

/*
Theme Name: my-theme
Description: これは、オリジナルテーマです
Tested up to: 6.4.1
Requires PHP: 8.1.23
Version: 0.0.1
*/

テーマが保存されたフォルダ名を「mytheme」、テーマコメントのテーマ名を「my-theme」としました。
これにより、WordPressが、フォルダ名ではなくテーマ名で認識していることを確認する為です。
フォルダ名とテーマ名を同じにしても問題ありません。

WordPressでテーマを確認する

それでは、作成したテーマが WordPress に認識されるか、確認してみましょう。

WordPress の管理画面から「外観」を選択します。
先ほど作成したテーマが表示されていることが確認できると思います。

テーマの名前がフォルダ名「mytheme」ではなく、テーマコメントに記述した「my-theme」になっていることが確認できます。

さらに、mythemeをクリックして詳細を表示すると、テーマコメントに記述したバージョン情報やコメントも確認することができます。

（テーマコメントにAuthorを記述していない為、作者が「匿名」になっています）

まとめ

今回は、テーマの基礎として、テーマに必要なファイルとテーマを作る場所について紹介しました。

次回からは本格的にテーマの作成方法を紹介していきます。

  • この記事を書いた人

UOCN

IT業界29年の現役フリーランスエンジニア。 一部上場企業の大規模システムから個人商店のウェブサイトまで50を超えるプロジェクトに参画。 近年は、WordPressを採用したウェブサイト製作を中心に活動中。

-テーマ
-,