オリジナルテーマ WordPress

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

WordPressのオリジナルテーマってどうやって作るの?

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

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

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

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

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

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

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

WordPress開発マスター講座

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

ローカル環境を構築

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

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

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

といった感じです。

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

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

 

テーマフォルダを作成

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

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

Macを使っている人は、

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

Windowsを使っている人は、

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

themesフォルダにこれから作るテーマフォルダも、自分が分かりやすいように変更してOKです。

初期状態はこうなっています。

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

例えばここに「test」というサイトのテーマフォルダを作るとこうなります。

そしてここにこれからテンプレートファイルなど、どんどん入れていきます。

 

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

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

まず最初にstyle.cssファイルを作ります。

元々作成されているindex.phpとstyle.cssがあればテーマとして認識されますが、一般的にはもう少しファイルを分けて作成します。

今回想定するサイトは、

  • トップページ
  • 固定ページ
  • 投稿一覧ページ
  • 投稿個別ページ
  • カテゴリー一覧ページ

という一般的なサイトにしたいと思います(カスタム投稿はありません)

 

今回用意するテンプレートファイル一覧

  • index.php(テーマの必須ファイル)
  • style.css(スタイルシート・必須ファイル)
  • front-page.php(トップページ)
  • header.php(ヘッダー)
  • home.php(今回は記事一覧ページとして使用)
  • single.php(個別記事ページ)
  • page-〇〇.php(固定ページ)
  • category.php(カテゴリー一覧ページ)
  • footer.php(フッター)
  • functions.php(テーマの為の関数)

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

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

 

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

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

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

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

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

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

 

 

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

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

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

まずはテーマフォルダにindex.phpというファイルを置きましょう。

(themesフォルダにあるindex.phpは別物なので、自分で作ったテーマフォルダの中にindex.phpを作りましょう)

 

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

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

この中身については以下のようになります。

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

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

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

そしてこれも静的ページで作成したstyle.cssとは別物です。

以上2つのファイルがテーマとして認識させるのに必須のファイルとなります。

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

 

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

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

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

 

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

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

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

 

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

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

ただし今回はfront-page.phpがあり、そちらがトップページとして優先されます。

この辺は記事一覧ページの作り方の記事で詳しく書きたいと思います。

 

headar.php(ヘッダー)

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

1行目の<!DOCTYPE html>から</header>までとなります(ハンバーガーメニューなどがある場合はそこまでお忘れなく)

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

なぜこのようなことをするのかというと、LP(静的ページ)であれば修正する場合1つのファイル(index.html)を修正すればいいですが、複数ページのサイトの場合はページごとにファイルがあるので、修正もファイルの数だけやらなければいけません。

ここで全てのページ共通である箇所のヘッダーやフッターは切り分けておいて、全てのファイルからその切り分けたファイルを読み込みに行くようにすれば修正は1回で済みます。

コードの書き方については次の記事で解説するので、ここではheader.phpというファイルだけで作ってテーマフォルダに入れておいてください。

 

footer.php(フッター)

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

これもheader.php同様にfront-page.phpから該当箇所をカット&ペーストします。

これも次の記事で解説します。

 

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

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

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

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

 

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

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

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

もちろん情報が更新されればテンプレートファイルを編集すればOKです。

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

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

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

例えば、

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

などなど。

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

 

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

これは記事一覧ページと似ていますが、特定のカテゴリーだけを表示する一覧ページとなります。

中身は記事一覧ページとほとんど同じになるかと思います。

 

functions.php(テーマの為の関数)

functions.phpというのはプラグインのようなもので、カスタマイズするのに必要なコードをまとめて書いておく所です。

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

通常静的ページではindex.htmlのheadタグからcssやjsを読み込むと思います。

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

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

この辺の書き方も次の記事以降で説明していきたいと思います。

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

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

 

 

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

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

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

 

ひとまず必要なテンプレートファイルを作成しただけなので、次の記事以降でこれらのテンプレートファイルを使える状態にしていきたいと思います。

-オリジナルテーマ, WordPress