WordPress自作テーマの作り方【開発環境などの導入部分】

投稿日 2020年6月5日
更新日 2020年7月9日
著者 tomo
カテゴリープログラミング

WordPressのテーマファイルを自作したので、学んだことを記事にします。
（このブログに使っているテーマが自作したものです。）
詳細な解説は別記事にまとめますので、本記事ではおおまかな概要や開発環境などの導入部分について紹介します。

【この記事の対象者】

これからWordPressテーマを作ろうと考えている人
WordPressの構造についてもっと詳しく理解したい人

WPテーマってどこに保存してあるの？

正直、僕は最初にここでつまずきました。。
最初は「どこにある、どのファイルをいじればいいのか？」、「そもそもファイルをいじっちゃっていいのか？」ってところで悩んでいました。
なので同じ悩みを持つWordPress初心者の方向けのメモです。

Web上に公開されているテーマの場合

WordPressをインストールしているサーバー内の、
ドメイン名フォルダ＞wp-content＞themesフォルダの中に入っています。
（デフォルトだと「twentytwenty」とかが入ってます。）

なので、このフォルダ内のファイルをいじることで、テーマをカスタマイズすることが可能です。
（このフォルダ内のファイルをそのままいじっちゃうのはNGです。。あくまで仕組みのお話。。）

開発用のローカル開発環境内のWordPressテーマの場合

Xamppをインストールしたフォルダ（通常だとCドライブかな？）の中の、
xampp＞htdocs＞wordpress＞wp-content＞themesフォルダの中に入っています。
（wordpress以降はWeb上と同じですね。）

テーマの開発はローカル環境でやるため、こちらのフォルダ内に新しいフォルダ、ファイルを作って自作テーマを作っていきましょう。

ローカル開発環境を構築する目的

さて、上の項ではテーマ開発にローカル開発環境を使うと説明しましたが、それはなぜでしょうか？

実は、WordPressの場合はindex.htmlのようなHTMLファイルは存在せず、そのままだとブラウザ上でプレビューすることが出来ないのです。
（静的ページのように、index.htmlファイルをブラウザにドラッグ＆ドロップするだけで表示できるわけじゃありません。）

WordPressを使ったWebページは複数のphpファイル（header.phpやfooter.php）とデータベース上のデータを組み合わせて作られます。（下図参照）
複数のphpファイルやデータベースを組み合わせてページを生成するのがWordPressの役割で、それをさせるためにローカル開発環境下で作業する必要がある、ということなのです。

ローカル開発環境（Xammp）のインストール、設定方法は別記事にて紹介します。

WordPressの構成ファイルとその役割

WordPressテンプレートファイルには、大きく分けて「テーマテンプレート」、「モジュールテンプレート」が存在します。
モジュールテンプレートは、前項で紹介したheader.php、footer.phpなど、一つのページを構成するパーツファイルです。

一方、テーマテンプレートは、固定ページ、アーカイブページ（カテゴリページや投稿年月日ページ）、個別投稿ページの構成を決めるためのファイルです。
WordPressでは、ドメイン名の後にくるurlにより、どのテーマテンプレートを使用するかが決まっています。

例えば、urlとテーマテンプレートの関係は以下の感じです。

http://○○.com/?p=××	ID××の個別投稿ページ
http://○○.com/?cat=××	ID××のカテゴリーアーカイブページ
http://○○.com/?page=××	ID××の固定ページ
http://○○.com//?tag=××	ID××のタグアーカイブページ

URLと表示ページの関係性

ただし通常は投稿時にスラッグを指定しちゃうため、これらのurlは表には現れません。
（このページのスラッグは「wordpress-theme01」）

でも実際、裏側では?p=××などのurlは有効に機能しているのです。
試しに、「https://moto-blog.net/?p=232」にアクセスしてみてください。
ちゃんとこのページにアクセス出来ることが確認できます。
（このページのIDは「232」）

以上、前置きが長くなっちゃいましたが、代表的な構成ファイルとその役割を紹介します。