【WordPress】オリジナルテーマ作成方法！テーマ作成に必須のファイルを紹介

https://efilamola.com/wp/243/
efilamola.com

「オリジナルのテーマを作りたい！」と思ったそこのあなた！いいですね！

「でもそもそも一体何から始めればいいの…？」

そんな悩みを今回は解決していきましょう！

本記事では、まずはワードプレスからテーマとして認識してもらうための、必要最低限のファイルを作成していきます。

えふぃ

そして実際にワードプレスにテーマを読み込ませます！

その後ワードプレスサイトとして活用していくためにほぼ必須なファイルを紹介します。

自分で作成したHTMLのサイトを、完全オリジナルのワードプレスサイトにしちゃいましょう！閉じる

サンプルコードの使い方
オリジナルテーマ作成に必須のファイルを準備しよう！
オリジナルテーマをワードプレスに読み込ませてみよう！
1. テーマが格納されているディレクトリに直接入れる
2. 一応ワードプレス管理画面からテーマを追加する方法も
オリジナルテーマに必要なファイルたち
1. ワードプレステーマに用いるファイル一覧
もっとオリジナルテーマをパワーアップさせていこう！

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。

それでは本文へ、レッツゴー！

オリジナルテーマ作成に必須のファイルを準備しよう！

まずは、オリジナルテーマを入れるフォルダを用意しましょう！

えふぃ

フォルダ名は自由ですが、テーマ名にしておくとわかりやすいです。
もちろんtestやsampleでもOK！

フォルダを作成したら、次の3つを放り込みます。

テーマとして必須のファイル

index.php
style.css
functions.php

ワードプレスに、テーマと認識してもらうための最低限の必須ファイルです。

この3つがあれは、ひとまずテーマとして読み込んでもらうことができるようになります。

ただし、テーマとして読み込んでもらうためには中身にも少し手を加える必要があります。

それぞれどんな記述が必要で、どんな役割を果たしているのでしょうか？

index.php

ワードプレスサイトとして表示されるページの最もベースとなるファイルです。
これについては、後ほど解説します。

テーマとして読み込ませる分には空っぽでもいいのですが、一応ブラウザでの表示確認ができるよう、とりあえずは下記をindex.phpにコピペして保存しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーマ作成テスト</title>
</head>
<body>
    <h1>テストです</h1>
</body>
</html>

style.css

普通のcssファイルなのですが、ファイルの冒頭に、このテーマについての情報を書くというお決まりごとがあります。

えふぃ

ワードプレスさんに対して、このテーマのタイトルや制作者などの情報を教えてあげます。

下記をstyle.cssにコピペして保存しましょう。

右の日本語部分は自由に書き換えてください。

/*
Theme Name: テーマ名
Theme URI: テーマのURL
Author: 製作者名
Author URI:製作者のウェブサイトURL
Description: テーマの説明文
Version: 1.0
*/

最低限テーマ名さえあればOKなので、3〜7行目は消してもOK

これは僕が普段使っているもので、人により掲載する情報は異なり、まあ好みです。

もっと知りたい方は下記のサイトをご参照ください。
種類が多すぎてもはや参考になりませんが…。
テーマの作成 – WordPress Codex 日本語版

functions.php

ワードプレスの様々な機能を制御するためのファイルです。

とりあえず中身は空っぽでOKです。

functions.phpは、やりたいことが出てきたら、必要に応じて記述をしていくといった形になります。

現時点では不要ですが、今後本格的にオリジナルテーマを作成し、運用していくためには、最低限記述しておきたいことはあります。

【WordPress】セキュリティ　functions.phpに記述してセキュリティを強化しよう！

えふぃ

これでオリジナルテーマ作成の舞台は整いました！

この用意したファイルが、テーマ選択画面に出現します！

やっていきましょう！

オリジナルテーマをワードプレスに読み込ませてみよう！

「index.php」「style.css」「functions.php」と最低限必須の3つのファイルを保有したフォルダ、つまりオリジナルテーマが今ここに誕生しました！

それではこれを実際にワードプレスに読み込ませていきましょう！

ワードプレスにテーマを読み込ませる方法は2通りあります。

テーマを読み込ませる方法

テーマが格納されているディレクトリに直接入れる
ワードプレス管理画面から追加する

エンジニアではなくただのブロガーとしてテーマを読み込む場合なら②でもOK

ただ僕たちのようなオリジナルテーマ作成勢は、①でテーマを読み込ませます。

えふぃ

なぜなら僕たちはコードをゴリゴリ触っていくからです。ウホウホ。

①は、ワードプレスが保有している全てのテーマが格納されているディレクトリに、作成したオリジナルテーマのフォルダを直接入れます。

テーマを作成して一度ワードプレスに読み込ませてからも、後からファイルを追加したり、記述を変更することがでてきます。

その場合、該当するファイルを直接上書きするだけでOK

②の方法だと、編集するたびに既存のテーマを一度消して、再度テーマを丸ごと読み込ませ、もう一度テーマを設定する必要があるので、非常に手間となります。

テーマが格納されているディレクトリに直接入れる

ローカルのテスト環境にせよ、本番のサーバーにせよ、格納するディレクトリは決まっています。

ワードプレスをインストールしたディレクトリ/wp-content/themes

ここには、ワードプレスが保有している全てのテーマが入っています。

この「themes」ディレクトリに、オリジナルテーマをフォルダごと放り込みます。

これでワードプレスの管理画面からテーマを選択する画面まで足を運ぶと、オリジナルテーマが選択肢に加わっていることが確認できます。

えふぃ

オリジナルテーマいた！！！

後からオリジナルテーマのファイルを新しく追加したり、既存のファイルを書き換えた場合、そのファイルを追加・上書きするとテーマに反映されます。

有効化するとちゃんとindex.phpの内容が反映されているはずです。

一応ワードプレス管理画面からテーマを追加する方法も

一応軽く触れておきますね。読み飛ばしてもOK

まず作成したオリジナルテーマをzip形式にします。

その後ワードプレス管理画面から

①外観（テーマ）
②新規追加
③テーマのアップロード

の順にクリックしていくことで、オリジナルテーマを読み込ませることができます。

オリジナルテーマに必要なファイルたち

無事必要最低限のミニマムオリジナルテーマの作成が完了し、テーマとして設定することができました。

が、ミニマムすぎて、ワードプレスサイトとしてなんの機能も果たしていない状態です。

お金の入っていない通帳です。

ここからはテーマとして必須のファイルというわけではないのですがが、ワードプレスを活用するためにはほぼ必須のファイルを紹介します。

オリジナルテーマにほぼ必須のファイル

header.php
共通のヘッダーとなるファイル
footer.php
共通のフッターとなるファイル
home.php
ホーム（トップ）を表示する際に参照されるファイル
page.php
固定ページを表示する際に参照されるファイル
固定ページとは投稿機能を持たない独立したページのことです。
例）会社概要、採用情報、プライバシーポリシーなど
single.php
投稿ページを表示する際に参照されるファイル
投稿ページとは、投稿機能によって作成されたページのことです。
例）ブログ記事、お知らせ、施工事例など
archive.php
投稿一覧ページを表示する際に参照されるファイル
例）記事一覧、お知らせ一覧、施工事例一覧など
404.php
存在しないページを表示する際に参照されるファイル
例）https://efilamola.com/not-exist
screenshot.png
ワードプレスのテーマ選択時に表示される画像（880px*660px推奨）

他にも様々なファイルがワードプレスでは使われるのですが、この辺りがほぼ必須のファイルで、あとは必要に応じてといった感じです。

それぞれのファイルの役割や使い方については長くなってしまうので、別記事で紹介しています。

header.php、footer.phpについてはこちら
 single.phpについてはこちら
 archive.phpについてはこちら

ではこれらのファイルが使われる仕組みを見てみましょう。

ワードプレステーマに用いるファイル一覧

ワードプレスはページの種類によって、参照するファイルが異なります。

例えば、トップページは「home.php」を参照してウェブサイトに反映され、通常の投稿ページの場合「single.php」を参照してウェブサイトに反映されるといった感じです。

下の表は、どのページがどのファイルを参照するのかを表しています。

テンプレート階層 – Japanese Team – WordPress.org 日本語

英語だし知らない言葉いっぱい出てくるしで、これを見るにはまだ少し早いかなという気もしますが、一応軽く説明しておきます。

まず灰色が何のページかを指しています。

そしてそのページは、左から順に優先的に参照されます。
一番左がなければその右を探し、それもなければその右を探し…

一番シンプルな404ページを見てみましょう！
下から2つ目の「Error 404 Page」です。

えふぃ

404ページとは、存在していないページのことです。
例）https://efilamola.com/not-exist

表を見ると、

Error 404 Page ー 404.php ー index.php

となっていますね！

だれかが存在しないページを開く
404.phpが存在すれば404.phpをブラウザに反映する
404.phpが存在しなければ、右にあるindex.phpをブラウザに反映する

という流れになっています。

つまり図で一番右にあるindex.phpは、あらゆるページが最終的に辿り着く受け口的役割を果たしています。

えふぃ

そのためテーマに必須のファイルだったんですね！

もっとオリジナルテーマをパワーアップさせていこう！

今回はオリジナルテーマ作成のために最低限必須のファイルと、ワードプレスとして活用するためにほぼ必須なファイルを紹介しました。

これでやっと、オリジナルテーマのスタート地点に立つことができました。

ここから、あの謎ファイルたちにゴリゴリ記述をしていくうほ。

とはいっても、なかなかどこから手をつけていくか難しいですよね。

そんな方のために、ワードプレス学習のためのロードマップを用意しています。

上から順に是非ご活用くださいませ。

今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。

【WordPress】ワードプレスをローカルサーバーに設置する方法【MA…【WordPress】カスタム投稿タイプ追加方法【タクソノミーも】

プロフィール

efilamolaです。
WEB制作会社に勤める最強のサラリーマン。パズドラとモンストのログインボーナスをもらうのが日課です！プレイはしていません。

本ブログでは、できるだけ苦労せず、楽しくプログラミング言語を覚えてもらうことを目標にしています。

あなたが夢に向かって一歩でも前進できますように。