オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方①(ファイルの準備編)

WordPressオリジナルテーマの作り方①(ファイルの準備編)
WordPressのオリジナルテーマってどうやって作るの?

今回はそんな疑問にお答えします。

普通にWordPressでブログを始めたいという人には無縁かと思いますが、Web制作ではWordPressのオリジナルテーマ制作という仕事があります。

特に制作会社からの案件に多く、私の場合WordPress案件はほぼオリジナルテーマ制作です。

ということで、今回はHTMLやCSSで静的ページのコーディングが完了し、これからそのファイルを使ってWordPressのオリジナルテーマ制作したい人向けの記事となります。

最初から最後まで書くとボリュームが半端ないので、何回かに分けて書いていきます。

 

またWordPressを1から勉強したい方は動画で学べるUdemyがおすすめです。

本と違って動画だと手を動かしながら確認出来るのでいいですね。

Udemyは有料の教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう。

私が購入したのはコチラです(セール時に購入しました)

WordPress開発マスター講座

「WordPressの動画教材と言えばコレ」というくらい有名な教材です。

こちらの教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

効率よくWordPress制作したい人はこちら

WordPressオリジナルテーマの作り方

まず静的サイトをWordPress化するとどうなるかですが、

  • 投稿ページが作れる(ブログが書ける)
  • プラグインを使ってお問い合わせフォームが作れる
  • ファイルをいじらなくてもWordPressの管理画面からテキストや画像の差し替えが可能
  • 便利なプラグインでカスタマイズ可能

というメリットがあります。

静的サイトとの一番大きな違いは投稿機能になります。

この投稿機能により、常に最新の情報を発信出来るというわけですね。

そして本題のオリジナルテーマの作り方ですが、ざっくり書くと以下のようになります。

  1. HTML / CSSでコーディングする(静的サイト)
  2. WordPressのローカル環境を構築(PC上で擬似的なWordPressサイトを構築)
  3. 必要なテーマフォルダやテンプレートファイルを作成
  4. テンプレートファイルにHTMLで書いたコードをコピペ
  5. テンプレートファイルに画像やパスを読み込む為のコードを書く
  6. WordPressの管理画面で色々設定

最後に「色々設定」と思い切り省略しましたが、ここは次回以降の記事で解説していきます。

今回メインで解説するのは③になります。

 

ローカル環境を構築

まずはローカル環境を構築します。

通常オリジナルテーマを作成する時は自分のPC内でローカル環境を構築することが多いと思います。

  1. ローカル環境を構築
  2. テストサーバーにアップ
  3. 本番サーバーにアップ

といった感じです。

ローカル環境の構築方法については以下の記事を参照下さい。

WordPressのローカル環境を構築できるLocal by Flywheelの使い方

Local by Flywheelの名称はLocalに変わりました

 

テーマフォルダを作成

まずは先ほどLocalで作ったローカル環境の場所を確認します。

これから作るテーマフォルダを入れる場所はthemesというフォルダの中になります。

Macの場合

Macintosh HD ⇒ ユーザ ⇒ user ⇒ Local Sites
⇒ (サイト名) ⇒ app ⇒ public ⇒ wp-content ⇒ themes

Windowsの場合

Cドライブ ⇒ ユーザー ⇒ (ユーザー名)⇒ Local Sites
⇒ (サイト名) ⇒ app ⇒ public ⇒ wp-content ⇒ themes

もしくはLocalのこちらの矢印をクリックすると、appフォルダのある場所が開きます。

あとはapp ⇒ public ⇒ wp-content ⇒ themesとthemesフォルダを開きましょう。

themesフォルダ内はこうなっています。

twenty~というのはデフォルトで用意されてるテーマですね。

例えばここに「test」という名前のテーマフォルダを作るとこうなります(フォルダ名は変更可能)

そしてこのtestというテーマフォルダに、次から作成するテンプレートファイルをどんどん入れていきます。

 

WordPressのテンプレートファイルを作成

これからテンプレートファイルを作成していきます。

テンプレートファイルは、ファイル名によってそれぞれ役割が決まっています。

例えば、

  • front-page.php → トップページ用テンプレート
  • header.php → ヘッダー用テンプレート
  • footer.php → フッター用テンプレート

という感じです。

なので、以下のようにはなりません。

  • front-page.php → ヘッダーのコード ❌
  • header.php → 投稿ページのコード ❌
  • footer.php → トップページのコード ❌

そしてサイトにもよりますが、オリジナルテーマ制作で作成するページは以下のような種類があります。

  • トップページ
  • 固定ページ
  • 投稿一覧ページ
  • 投稿個別ページ
  • カテゴリー一覧ページ
  • カスタム投稿一覧ページ
  • カスタム投稿個別ページ
  • カスタム投稿カテゴリーページ
  • 投稿者別一覧ページ
  • タグ一覧ページ
  • 検索結果ページ
  • 日付別一覧ページ
  • 404ページ

トップページ、固定ページ、404ページ以外は全て投稿系になります。

もちろんカスタム投稿がない場合もありますし、投稿者一覧やタグ一覧は滅多に使わないので、上記全て作成するという訳ではありません。

 

テンプレートファイル一覧

それでは先ほどのページの種類にはどのテンプレートを使うか見てみます。

  • index.php(テーマの必須ファイル)
  • style.css(スタイルシート・必須ファイル)
  • functions.php(テーマで使う関数を書くファイル)
  • front-page.php(トップページ)
  • header.php(ヘッダー)
  • footer.php(フッター)
  • page-〇〇.php(固定ページ)
  • home.php(今回は記事一覧ページとして使用)
  • single.php(個別記事ページ)
  • category.php(カテゴリー一覧ページ)
  • archive-〇〇.php(カスタム投稿一覧ページ)
  • single-〇〇.php(カスタム投稿個別ページ)
  • taxonomy-〇〇.php(カスタム投稿カテゴリー一覧ページ)
  • author.php(投稿者別一覧ページ)
  • tag.php(タグ一覧ページ)
  • searchform.php(検索フォーム)
  • search.php(検索結果ページ)
  • date.php(日付別一覧ページ)
  • 404.php(404ページ)

見て分かる通り、ページではないテンプレートやファイルもあります(ヘッダーやフッターは共通パーツ、style.cssはテーマの必須ファイルなど)

また非常に沢山あるように見えますが、滅多に使わないファイルもあり、上記ファイルを全て使う事はまずないと思います。

今回の記事は基本的にファイルの準備だけで、各テンプレートファイルに書くコードなどは次の記事以降で解説したいと思います。

それでは順番に解説していきます。

 

index.php(テーマの必須ファイル)

index.phpはテーマとして認識させる為に必須のファイルで、index.htmlとは中身も別物です。

index.phpの中身は空のまま(コード書かなくてOK)で大丈夫ですが、これがないとテーマとして認識されません。

まずこちらがテーマフォルダを作る前です。

これだけ見ても良く分からないと思うので、themesフォルダ内に「test」というフォルダを作ります。

こちらがtestフォルダを作る前。

そしてこちらがtestフォルダを作った後。

するとこのように変わります。

 

下の方に先ほどは表示されてなかった文章が表示されています。

壊れているテーマとちょっと怖い事が書いてありますが、焦らなくて大丈夫です。

テーマフォルダの中にindex.phpとstyle.cssがないとこのように表示され、これがテーマとして認識されていないという状態になります。

まずはテーマフォルダにindex.phpというファイルを作成して置きましょう(themesフォルダにあるindex.php(testと同じ階層にある方)は別物です)

 

style.css(スタイルシート)

そしてindex.phpに続き、テーマとして認識させるのに必要なもう1つのファイルがstyle.cssです。

style.cssの役割はこちら。

  • テーマとして認識させる為の必須ファイル
  • コメントヘッダーでテーマの情報を入力
  • テーマのCSSを記入可能

テーマのCSS、つまりデザインを整えるCSSをここに書くことも出来ますが、

  • テーマを認識させる為のstyle.css(今回のstyle.css)
  • デザインを整える為のstyle.css(静的サイトのコーディングで作成したstyle.css)

で分けた方がいいでしょう。

コメントヘッダーの書き方

style.cssのコメントヘッダーの書き方は以下のようになります。

@charset "utf-8";
/*
Theme Name: テーマ名
Theme URI: テーマのホームサイトのURL
Description: テーマの説明
Author: 作者の名前
Author URI: 作者のサイトのURL
Version: バージョン
*/

これがないと先ほどのようにテーマとして認識されません。

この中で必須なのはTheme Nameだけとなるので、それ以外は項目ごと削除してもOKです。

(@charset "utf-8";は日本語のコメントを入れる場合は必要となります)

Theme Nameは作成したテーマフォルダと同じ名前でいいかと思います(今回で言えば「test」)

ここまででテーマフォルダの中はこのようになります。

このstyle.cssとindex.phpがテーマフォルダにあると、このように表示されます。

 

「壊れているテーマ」ではなく、テーマとして認識されました。

あとはこのテーマを選択して有効化すればOKです。

 

次からは一般的に必要となるテンプレートファイルを書いていきます。

これから紹介するテンプレートファイルは説明が色々書いてありますが、とりあえずは必要なファイルを作ってテーマフォルダに入れるだけでOKです(中身の書き方は別記事で解説しています)

 

functions.php(テーマで使う関数を書くファイル)

functions.phpはちょっと特殊なファイルで、カスタマイズするのに必要なコードをまとめて書いておくプラグインのようなファイルです。

必要な機能を後から追加していくような場所なので、最初は必要なコードだけ書いておけば大丈夫です。

例えば静的ページではCSSやJavaScriptはheadタグから読み込むと思います。

WordPressでもheadタグが書いてあるheader.phpから読み込んでも大丈夫ですが、基本的にはfunctions.phpから読み込むのが一般的なようです。

理由の1つとしてはファイルの読み込みやカスタマイズに必要なコードを一元管理出来るというのがあります。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方③(functions.php編)

 

front-page.php(トップページ)

トップページのテンプレートとして使われるファイルには、front-page.phpのほかにもhome.phpindex.phpがあります。

もしこの3つのファイルが全てあった場合はfront-page.phpがトップページとして使われるので、front-page.phpをトップページとして使うのがおすすめです。

front-page.phpがなければhome.phpがトップページ、
さらにhome.phpがなければindex.phpがトップページになります。

同じトップページを表示出来るテンプレートにも優先順位があるという事です。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方②(トップページ編)

 

headar.php(ヘッダー)

header.phpは名前の通りヘッダー部分のファイルなのですが、htmlファイルでの<header>から</header>までのことではありません。

1行目の<!DOCTYPE html>から</header>までとなります

そしてこの<!DOCTYPE html>から</header>までを切り取って張り付けたものがheader.phpとなります。

このような事をする理由や、コードの書き方については次の記事で解説します。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方②(トップページ編)

 

footer.php(フッター)

footer.phpも<footer>から</footer>ではなく、<footer>から一番最後の行である</html>までを切り取ったものです。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方②(トップページ編)

 

home.php(今回は記事一覧ページとして使用)

「今回は」と書いたのは、先ほど説明しましたがfront-page.phpがなかった場合はトップページにもなることがあるからです。

ただし今回はfront-page.phpがあるので、トップページにはhome.phpではなくfront-page.phpが使われます。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑥(記事一覧ページ編)

 

page-〇〇.php(固定ページ)

page-〇〇.phpは固定ページ用のテンプレートファイルとなります。

これは投稿ページと違い、会社概要やお問い合わせといった頻繁に更新されないようなページとなります。

もちろん情報が更新されればテンプレートファイルを編集すればOKです(もしくは更新したい箇所だけカスタムフィールドにしておく)

また〇〇の部分には固定ページとして分かりやすい名前をつけましょう。

例えば会社概要ページであれば、page-company.php などがいいかと思います。

なのでpage-〇〇.phpというファイルは、固定ページの数だけ作ってください。

例えば、

  • page-company.php(会社概要ページ)
  • page-contact.php(お問い合わせページ)
  • page-recruit.php(採用ページ)

などなど。

また、固定ページはpage-〇〇.phpではなく、page.phpというテンプレートファイルを使う方法もありますが、ここではこの方法は使いません。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方④(固定ページ編)

 

single.php(個別記事ページ)

これはブログページ(投稿ページ)になります。

WordPressでいうと投稿 ⇒ 新規追加で作成した記事のページになり、投稿した記事情報を取り出すためのファイルになります。

これは一覧ページではなく個別ページとなります(一覧ページはhome.phpにしています)

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑧(個別記事ページ編)

 

category.php(カテゴリーページ)

これは特定のカテゴリーだけを表示する一覧ページとなります。

ページのレイアウトは記事一覧ページと同じ場合がほとんどだと思うので中身もほとんど同じになりますが、一覧ページとは特定のカテゴリーだけ表示させる為のコードが違います。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑨(カテゴリーページ編)

 

archive-〇〇.php(カスタム投稿一覧ページ)

これはカスタム投稿があった場合に必要なテンプレートファイルで、例えばカスタム投稿タイプが news であれば archive-news.php といったファイルを作ります。

◯◯の部分については固定ページと同じような感じで、カスタム投稿の種類の数だけ作成します。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑩(カスタム投稿編)

 

single-〇〇.php(カスタム投稿個別ページ)

これもarchive-◯◯.phpと考え方は同じです。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑩(カスタム投稿編)

 

taxonomy-〇〇.php(カスタム投稿カテゴリー一覧ページ)

これもarchive-◯◯.phpと考え方と似てますが、これについては◯◯の部分はタクソノミースラッグになります。

このテンプレートファイルは最初に作らなくてもいいかと思うので、一旦保留でOKです。

詳細は以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑩(カスタム投稿編)

 

author.php(投稿者別一覧ページ)

通常の記事一覧ページは全ての投稿者の記事が表示されますが、これは投稿者別の一覧ページになります。

ページのレイアウトは基本的に記事一覧ページと同じになるかと思います。

もちろん投稿者が複数いないと意味のないテンプレートで、小規模のサイトでは滅多に使わないと思います。

 

tag.php(タグ一覧ページ)

これはタグ一覧ページになります。

ページのレイアウトは基本的に記事一覧ページと同じになるかと思います。

ただ私は2年間の実務で一度も使った事がありません・・・

 

searchform.php(検索フォーム)

これはページではなく、検索フォームのテンプレートファイルになります。

あまり使う機会はないと思いますが、もし検索フォームを作る必要があれば思い出してみて下さい。

 

search.php(検索結果ページ)

これは検索結果ページになります。

searchform.phpと名前が似ていますが、こちらはページのテンプレートファイルとなり、ページのレイアウトは基本的に記事一覧ページと同じになるかと思います。

 

date.php(日付別一覧ページ)

これは日付別一覧ページになります。

ページのレイアウトは基本的に記事一覧ページと同じになるかと思います。

これも滅多に使う機会はないと思います。

 

404.php(404ページ)

404ページとは、ページが見つからなかった時に表示されるエラーページです。

これがなくてもエラーページは表示されますが、表示されるのはWordPressが用意した画面なので、ちゃんとデザインしたページで表示したい場合に使います。

 

あとはcssやjsのフォルダを作成して、事前に作成しておいたstyle.cssをcssフォルダに入れればひとまず完了です。

画像で見るとこんな感じですね(ここではtestという名前のテーマフォルダを作成しました)

 

先ほども書きましたが全て使うわけではないので、必要なテンプレートファイルだけ作成しましょう。

 

まとめ:WordPressオリジナルテーマの作り方はファイルの準備から!

今回はテンプレートファイルを作成しただけなので、次の記事以降でこれらのテンプレートファイルに書くコードなどを解説していきます。

またテンプレート階層の概念はとても重要なので、以下のページで確認しておきましょう。

テンプレート階層 - WordPress Codex 日本語版

最初は良く分からないと思いますが、印刷して手元に置いておいてもいいくらいです。


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-オリジナルテーマ, WordPress
-