「オリジナルのテーマを作りたい！」と思ったそこのあなた！いいですね！
「でもそもそも一体何から始めればいいの…？」
そんな悩みを今回は解決していきましょう！
本記事では、まずはワードプレスからテーマとして認識してもらうための、必要最低限のファイルを作成していきます。
えふぃ
そして実際にワードプレスにテーマを読み込ませます！
その後ワードプレスサイトとして活用していくためにほぼ必須なファイルを紹介します。
自分で作成したHTMLのサイトを、完全オリジナルのワードプレスサイトにしちゃいましょう！閉じる
もくじ
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
それでは本文へ、レッツゴー！
オリジナルテーマ作成に必須のファイルを準備しよう！
まずは、オリジナルテーマを入れるフォルダを用意しましょう！
えふぃ
フォルダ名は自由ですが、テーマ名にしておくとわかりやすいです。
もちろん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は、やりたいことが出てきたら、必要に応じて記述をしていくといった形になります。
現時点では不要ですが、今後本格的にオリジナルテーマを作成し、運用していくためには、最低限記述しておきたいことはあります。
えふぃ
これでオリジナルテーマ作成の舞台は整いました！
この用意したファイルが、テーマ選択画面に出現します！
やっていきましょう！
オリジナルテーマをワードプレスに読み込ませてみよう！
「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【WordPress】投稿一覧（アーカイブ）ページの作成方法【archive.php】2022-03-05WordPress【WordPress】投稿一覧で記事タイトルの出力文字数を制限する方法2022-03-06WordPress【WordPress】ページャー（ページネーション）の実装方法【paginate_links】2022-03-06
【WordPress】ワードプレスをローカルサーバーに設置する方法【MA…【WordPress】カスタム投稿タイプ追加方法【タクソノミーも】
プロフィール
efilamolaです。
WEB制作会社に勤める最強のサラリーマン。パズドラとモンストのログインボーナスをもらうのが日課です！プレイはしていません。
本ブログでは、できるだけ苦労せず、楽しくプログラミング言語を覚えてもらうことを目標にしています。
あなたが夢に向かって一歩でも前進できますように。
記事検索
カテゴリー
アーカイブ
新着記事
- 【WordPress】今見ているページがどのPHPファイルを参照しているのか確認する方法
- 【Sass】SCSSの書き方講座！@mixinや@forを使いこなす【ステップアップ編】
- 【Sass】SCSSの書き方講座！CSSに割く時間を削減しよう！【入門編】
- 【Sass】SCSSの使い方！VSCodeにプラグインをインストールし環境を整える方法
- 【.htaccess】BASIC認証とは？特定のページにアクセス制限をかける方法
人気の記事
