ワードプレスのテーマを自作する手順

投稿日:2019年2月27日 最終更新日:2020年4月17日

ワードプレスのテーマは基本的なデザイン・機能のみであれば簡単に作成可能です。
本ブログのテーマも自作のものを適用しており、その作成手順を記載しております。
ワードプレステーマの適用方法など、テーマの基本的な使い方は本ページでは扱わないものとし、必要があれば都度解説へのリンクを貼っておきます。

Contents

必要な技術要素

  • PHP
  • HTML
  • CSS
  • JavaScript

前提

今回は、以下の前提で解説を進めていきます。

  • テーマ名は「sample_theme」
  • この記事を読む前にWordPress Codexのテーマ作成を軽く読んでおきましょう。
  • 本ブログのテーマはgithubにソースあげてます。
  • CSSの設定はお好きにしてください。
  • この記事では、「動くものが作れた」という実感が持てる程度の実装をゴール地点としています。より詳細に学習しながらテーマ作成したい場合は、やはりWordPress Codexのテーマ作成を読み込みながら作成していきましょう。

手順

1.とりあえずトップページを表示可能にする

1-1.最小限のファイルの作成

まずは、必要最低限のファイル群を作成します。
ファイル群の構成は以下の通りです。
フォルダを作成して、空のファイルを作成してください。

1-2.style.cssの実装

ワードプレスでは、テーマ読み込み時にテーマ情報をstyle.cssから取得します。
この際に、style.cssに規格通りの実装がなければエラーとなります。
以下がサンプルです。必要最低限の記述をしています。

それぞれの項目に対して、以下の値を設定します。

  • Theme Name: テーマ名
  • Description: テーマの説明
  • Theme URI: テーマのURI
  • Author: 製作者名
  • Author URI: 製作者のURI
  • Version: バージョン
  • License: ライセンスの種類
  • License URI: ライセンスのURI

上記以外にも、「Tags」など、ワードプレステーマの公式レポジトリに登録した際の検索に有利となる項目も存在します。今回はレポジトリへの登録は前提としていないため、必要最低限の記述で進めていきます。

1-3.index.phpの実装

空ファイルのままテーマを適用すると、トップページは空白で何も表示されません。
そのため、

  • ヘッダー
  • コンテンツ部
  • フッター

を表示できるように、index.phpを実装します。
以下の関数は、index.phpと同階層に存在するheader.phpなどを呼び出す関数で、ファイルが存在しない場合はデフォルトで定義された処理が呼び出されるようになっています。

この状態でテーマを適用すると、以下のようにトップ画面が表示されます。
もちろん、設定しているブログタイトルなどによって、表示されるテキスト情報は異なります。

これで、トップページをとりあえず表示できるようになりました。

1-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme.git
commit b899e65baeb7fc5f63d2478ed14852e6c1d2ef39

うまくいかない場合は、こちらのリビジョンを取得して差分比較してみましょう。

2.JavaScript/CSSのライブラリを導入

今回はBootStrapを利用します。

2-1.ライブラリ取得

bootstrapの公式ページにて、「Download」ボタンを押下して、最新版のbootstrapをダウンロードします。

ダウンロードしたらzipファイルを展開して、以下のファイルを見つけましょう。

  • css/bootstrap.css: bootstrapのcss
  • css/bootstrap.min.css: bootstrap.cssの不要スペース・改行を削除したもの
  • js/bootstrap.js: bootstrapのJavaScript
  • js/bootstrap.min.js: bootstrap.jsの不要スペース・改行を削除したもの

この4ファイルを、sample_themeフォルダの中に配置します。
header.phpにて、bootstrap.min.cssとbootstrap.min.jsを読み込ませる予定ですが、フレームワークで定義されているクラス・関数について調査したい時のために、bootstrap.cssとbootstrap.js配置しておきます。

2-2.ライブラリ配置

配置先パスは宗教の問題なので、任意のフォルダ構成でどうぞ。
僕は以下のように配置します。

2-3.オリジナルのcss/jsファイルを作成

bootstrapだけでなく、オリジナルでcssやjsを定義したい場合があるため、あらかじめcustom.cssとcustom.jsを作成しておきます。
custom.css/jsというファイル名は、適当に僕が決めているだけなので、自由に変えてもらって構いません。

ソースの答え合わせ

対象のコミットハッシュは以下です。
https://github.com/web-commander/sample-theme.git
commit 43215ab2f3f31092501cfc216e84922b4098948a

うまくいかない場合は、gitからこちらのリビジョンを取得して差分比較してみましょう。
custom.css/jsも自分の実装をpushしておきましたので、参考になればと思います。

3.オリジナルのヘッダーを作成

ヘッダー部分を作成していきます。
トップページおよび単一投稿記事、固定ページなど全ページ共通で呼び出すことを想定して作成します。
ページごとに異なるヘッダーを呼び出したい場合も、実装は可能なのでやってみたい方はget_header関数のレファレンスあたりをヒントに実装してみましょう。

3-1.header.phpを作成

header.phpというファイルを以下の場所に作成します。
各ページからget_header()関数が呼び出された際は、このファイルが存在している場合は、その存在するファイルを読み込み、存在しない場合はデフォルトの処理が呼び出されます。

3-2.header.phpを実装

以下、実装例です。
後述しますが、faviconの画像などもURL指定するようにしています。

また、ヘッダー部ではHTMLにおけるheadタグ〜head終了タグ、およびbodyタグを記述します。
各ページで共通的な部分はなるべくこのheader.phpに記述し、単一ページや固定ページで異なる部分はsingle.phpやpage.phpに記述していくことにします。

また、wp_head()関数をhead終了タグ直前で呼び出しておきます。

3-3.ヘッダー・ファビコン表示に必要な画像ファイルを配置

header.php内で画像のURLを指定した箇所があるため、その画像を配置します。

3-4.画面表示確認

この状態でテーマを適用し、画面表示を確認してみましょう。
ヘッダーの表示が変更されたことが分かるかと思います。

また、ファビコンについても変更されているはずです。

3-5.ソースの答え合わせ

何か問題あれば、以下のリビジョンと差分をとってみましょう。
https://github.com/web-commander/sample-theme.git
commit 120bf85acdb3d47c72ea939fe893a563138ba5f8

4.オリジナルのフッターを作成

フッター部分を作成していきます。
ヘッダーと同様に、今回は全ページで共通のフッターを呼び出す想定です。

4-1.footer.phpを作成

以下場所にfooter.phpを作成します。

4-2.footer.phpを実装

このファイル内では、body終了タグを記述する必要があります。
また、wp_footer()関数をbody終了タグ直前で呼び出しておきます。

コピーライト部の著者名はご自身の名前に変えておいてください。また、著者名に貼るリンク先についても任意でページ作成してリンクを貼っておきましょう。

4-3.画面表示確認

以下のようにフッターが表示されていると思います。
index.phpにて、get_footer()のあとにget_search_form()を呼び出しているため、検索窓がフッターより下に出てしまっており違和感がありますが、これは後ほど直しましょう。

4-4.ソースの答え合わせ

対象のコミットハッシュは以下です。

https://github.com/web-commander/sample-theme.git
commit 704dc14e7949df5bb4a07c3927b8e2d0fba00912

何かあれば差分比較で。

5.indexのメインカラム・サイドバーを作成

index.phpのbody部を埋めていきます。
これにより、ひとまずページが1つ完成することとなります。

5-1.index.phpを実装

get_header()とget_sidebar()の間に、過去投稿のタイトル・ディスクリプションが一覧表示されるようにします。

5-2.functions.php/sidebar.phpを作成

以下の場所にfunctions.phpとsidebar.phpを作成します。

5-3.function.phpを実装

function.phpに、ウィジェット登録に必要な関数をオーバーライドし、作成したウィジェット用の関数をadd actionでフックします。

5-4.sidebar.phpを実装

sidebar.phpに以下の内容を記述して、ウィジェットの内容を取得可能とします。

5-5.画面表示確認

以下のように、メインカラムに投稿済み記事のタイトル・ディスクリプションが表示されているか確認します。
また、サイドバーについても、ウィジェット登録した内容が表示されていることを確認します。

5-6.ソースの答え合わせ

コミットハッシュは以下の通りです。

https://github.com/web-commander/sample-theme
commit b1b6c66628cece4fb56ab1e352cd49c1a084efd6

6.カテゴリページの作成

続いて、カテゴリページを表示できるようにします。
作りとしてはindex.phpとほとんど同じです。

6-1.category.phpの作成

以下の場所にcategory.phpを作成します。

6-2.category.phpの実装

category.phpに以下の内容を記述します。
ヘッダー・フッター・サイドバーはindex.phpと同様に呼び出します。

6-3.画面表示を確認

カテゴリページのメインカラムに、対象カテゴリの記事タイトルが箇条書きされるようになりました。

6-4.実装答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit 1e8588de717cc1016611e64ca5b64c8a05960088

7.アーカイブページの作成

カテゴリページと同様にアーカイブページも作成していきます。

7-1.archive.phpを作成

archive.phpを作成します。

7-2.archive.phpを実装

以下のように実装します。
日付ごと、タグごとそれぞれでタイトルを出しわけられるようにしてあります。

7-3.画面表示を確認

日付やタグのアーカイブページを表示した際に、以下のようになっていれば想定通りです。

7-4.実装答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit a40e0a7caeaf1e4bf888a7d0633c34b7d74e22d1

8.404ページの作成

指定されたコンテキストパスに対応するページが存在しない場合に表示する画面を作成します。

8-1.404.phpの作成

以下の場所に404.phpを作成します。

8-2.404.phpの実装

404.phpの実装はすごく簡単です。
ヘッダなどは他のページと同様に取得し、メインカラムに記事が存在しない旨を表示します。

8-3.画面表示確認

URLの末尾に?p=123456789など適当なクエリパラメータを付与してアクセスすると、以下のように表示されます。

8-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit 465c205ec57cd27d66e69f4450d35557ddb6ebb0

9.単一記事ページの作成

単一記事ページの画面を作成していきます。
これは、管理者画面にて「投稿」より作成したページが表示されます。

index.phpとほぼほぼ同じになりますので、そのつもりで実装確認して頂ければと思います。

9-1.single.phpの作成

9-2.single.phpの実装

以下の通り、記事タイトル・記事コンテンツ・コメントテンプレートを出力します。

9-3.画面の表示確認

以下の画像のように単一記事が表示されます。

9-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit cba3c123634cbd1e43f364190268a8c61c846b39

10.固定ページの作成

固定ページの画面を作成していきます。
これは、管理者画面にて「固定ページ」より作成したページが表示されます。
single.phpとほぼほぼ同じ実装となります。

10-1.page.phpの作成

page.phpを以下の場所に作成します。

10-2.page.phpの実装

以下の通り、page.phpを実装します。

10-3.画面の表示確認

固定ページにアクセスすると、以下のように表示されます。

10-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit 48b59897109d5e274c121894fe21358de77eea22

11.検索結果表示ページの作成

続いて検索結果のページです。

11-1.search.phpの作成

以下の場所に、search.phpを作成します。

11-2.search.phpの実装

実装は以下の通りです。

11-3.画面表示確認

検索結果は以下のように表示されます。
この画面では「テスト」というワードで検索した結果です。

11-4.ソースの答え合わせ

コミットハッシュは以下の通りです。
https://github.com/web-commander/sample-theme
commit b6bf16968158c52e66254d2b0f9757d31e0eb14b

以上で、テーマをざっくりと作成できました!
他にも、自作可能だけど今回は作らなかったファイルが存在するため、以下に列挙しておきます。

その他の自作可能なファイル

  • attachment.php
  • author.php
  • comments.php
  • date.php
  • front-page.php
  • rtl.css
  • home.php
  • image.php
  • screenshot.png
  • searchform.php
  • single-.php
  • tag.php
  • taxonomy.php

コメントはこちらから

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。


内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。