記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

テーマを自作!オリジナルのWordPressテーマを制作する手順【徹底解説】

WordPressのオリジナルテーマを作成する方法をご紹介。HTML・CSSを学びたてで、WordPressを使ったサイトの開発経験が無い方でも、こちらの記事を見ていただくことでご自身でテーマを作ることができます。一般的なブログ調のサイトを作るためのサンプルコードも用意していますのでご利用ください。

カテゴリ: WordPress

みなさんこんにちは!エンジニアの高澤です。

今回は実案件で使えるレベルでWordPressのテーマを自作する方法を解説しながら、ブログのデモサイトを作っていきたいと思います。

このデモサイトですが、これまでエンジニアである筆者が開発してきた中で実案件で実際にあった要件を盛り込んだデモサイトとなっておりますので、記事の内容通りに進めていただければ高度にカスタマイズされたテーマを、実際の現場レベルで使うことができます

WordPressはとても奥が深いので、初心者の方には本質的に理解することは難易度が高いかもしれませんが、1つひとつわかりやすく解説しておりますので無理なく進めることができます。

WordPress特有の機能であるカスタムフィールドやカスタム投稿タイプなどがよくわからない方、またWordPressについてまだよくわからない方でもテーマ作成について理解でき、人に説明することができるようになるとともに、高品質なテーマをご自身で作ることができるようになるので、ぜひ当記事をご活用していただければと思います。

目次

自作する前にWordPressの基本のおさらい

WordPress初心者の方、またはそもそもWebサイト制作の初心者の方はWordPressって何?と疑問にもたれていることと思います。

なのでテーマ作成に入る前に、「そもそもWordPressってなに?」や「テーマとは?」の疑問について説明します。

WordPressとは

そもそもWordPressとは?というお話ですが、WordPressとはCMS(コンテンツ・マネジメント・システム)というソフトウェアのことで、サーバーにインストールするだけで投稿機能などが初めから備わったWebサイトのことです。

このCMSは、プログラミングの知識がない人でも簡単にサイトを立ち上げられることを目的に作られたものですが、サイトとして重要な見た目の部分や機能などを自由にカスタマイズするとなると、プログラムで作られている以上プログラミングの知識がどうしても必要になります

当記事ではサイトの見た目(デザイン)の部分であるテーマの作成方法について作れるようになることを目的に解説いたします。

WordPressのテーマ作成とは

そもそもWordPressのテーマってなんのこと?という方はいらっしゃるかと思います。

WordPressのテーマとは、Webサイトの見た目のテンプレートのことです。

そもそもこのWordPressはCMS(コンテンツ・マネジメント・システム)であり、初めからWebサイトとしての管理・運用機能を備えているのでサーバーへインストールすればすぐに管理画面から記事の文章やタイトルなどを入力してWebサイトを管理運用することができます。

その管理画面で入力した内容をユーザーの目に見える形でWebサイトとして表示してくれるものが今回作成するテンプレート、つまりテーマです。

テーマ作成をするメリット

WordPressのテーマは世界中の多くの開発者によって作られており、数えきれないほどの数のテーマが無料で配布されています。

よりクオリティの高いテーマを使いたければ有料のテーマを購入して使うこともできます。

お金もしくは労力をかけなくてもすでにこれだけ良いことがありますが、ここで疑問なのがなぜインストールすればすぐに使えるのにわざわざテーマを自作する必要があるのか?ということです。

ご安心ください。
自作することにはちゃんと下記のようなメリットがあります。

  • 自分の思い通りのデザイン、機能でWebサイトを作れる
  • 世界で最も使われているCMSであり、多くの人に親しみがある
  • ネットや書籍など情報がかなり豊富で開発の時に困らず安心できる
  • 意図したSEO対策の実装が可能
  • 自作なのでファイルの構造が把握でき、後々の修正作業がスムーズになる

また、WordPressはWeb制作の案件でよく利用されるCMSであり、スクラッチ開発より技術が簡単で安く早く開発ができるという面もあり、クライアントに喜ばれる大変便利なCMSです。

上記の事実から、WordPressでのテーマ作成に価値・メリットがあると僕は考えております。

WordPress本体ファイルを公式サイトからダウンロードする

WordPressでWebサイトを制作するには、WordPressの本体ファイルをダウンロードしサーバーにアップしなければテーマ作成ができません。

まずはじめにやることとして、WordPressの公式サイトからWordPress本体ファイルをダウンロードしましょう。

WordPress本体ファイルのダウンロードのやり方

WordPress.orgというWordPressの公式サイト(URL:https://ja.wordpress.org/)のページを開き、「WordPressを入手」というボタンをクリック

②「WordPress○.○.○をダウンロード」のボタンをクリック。

上記2ステップで本体ファイルをzip形式のデータでダウンロードできます。

ダウンロードした本体ファイルは、このあと後述するローカルサーバー(MAMPもしくはXAMPP)にアップします。

WordPressはPHPというプログラミング言語で作られているため、サーバーにアップしないとブラウザから管理画面などを表示し操作することができません

なのでサーバーにアップロードしてセットアップ(データベース接続などしてサイトの立ち上げ)をしなければなりません。

ただここでは一旦デスクトップに保存しておき、ファイルの中身をざっと見てどんなファイル構造になっているのかだけ確認してみましょう。

WordPressのファイル構成と独自のテンプレート一覧

WordPress本体ファイルの中身をご確認していただくと「wp-content」というファイルがあるかと思います。

そのファイルを開いた先の「themes」というファイル(wp-content/themes/の階層)に「sampleblog」というファイル(テンプレートの入れ物)をご自身で作成し、これからご説明するテーマを成り立たせるためのに必要なPHPファイルやCSSファイルなどを「sampleblog」ファイルに用意します

つまりこういう階層になります→wp-content/themes/sampleblog/

そして、当記事で作成するPHPファイルは下記の内容になります。
WordPressの仕様でテンプレートファイル名が決められているので、それに沿って作っていきます。

テンプレート名 テンプレート内容
archive.php 記事一覧のテンプレート。
category.php カテゴリーアーカイブのテンプレート。
footer.php フッターのテンプレート。
front-page.php トップページのテンプレート。
functions.php WordPressの機能をカスタマイズするためのテンプレート。
header.php ヘッダーのテンプレート。
index.php テーマに最低限必要な基本テンプレート。404もしくは該当するページがなければすべてindex.phpのページに遷移する。
page.php 固定ページのテンプレート。
search-list.php (※当記事オリジナルのテンプレートで、WPの方で特に決まりはありません)サイト内検索(search.php)をしたときに一覧のコンテンツを表示するためのテンプレート。
search.php サイト内検索の検索結果のテンプレート。
searchform.php サイト内検索の検索ボックスのテンプレート。
sidebar.php サイドバーのテンプレート。
single-sample.php カスタム投稿タイプのテンプレート。{sample}の部分はカスタム投稿タイプの名前になります。(当記事では「sample」)
single.php 投稿記事のテンプレート。
style.css(WP登録用CSS) WordPressにWordPressのテーマとして使えるようにするためのCSSファイル。
tag.php タグアーカイブのテンプレート。
reset.css(リセット用CSS) Webサイト制作でよく利用されるリセットCSS。ブラウザのデフォルトでかかってしまうCSSの対策をするためのもの。
sample.css(デザイン用CSS) 当記事で作成するテーマのCSS。こちらのCSSでサイトをデザインします。

上記のPHPファイルをWordPressではテンプレートと呼んでいます。

テンプレート」とは、WordPressの仕様で決められたファイル名のついたPHPファイルのことをいいます。

例えば、WordPressには決まりごととして、ヘッダーはheader.php、フッターはfooter.phpとそれぞれサイトの部品ごとにPHPファイルが割当てられます

もし仮にheader-sample.phpやfootertemplate.phpという適当なファイル名でヘッダーやフッターとしてテンプレートを作っても、それらは普通にPHPファイルとして読み込むことはできますが、WordPressにおいてのヘッダーやフッターとして専用のPHP関数(WordPress関数)では読み込まれません。

なので、header.phpとfooter.phpという仕様どおりのテンプレート名を割り当てていくわけです。

ですが必ずしもheader.phpやfooter.phpを作らなければいけないという決まりはありません。

詳しくは後述しますが、最低限index.phpとstyle.cssの2つのファイルがあればテーマは作れてしまいます。

ただその2つだけだと使い勝手が悪かったり、本格的なデモサイトを作ることをゴールにすると当記事でご紹介する制作のノウハウが必須になりますので、もう少し時間をかけて部品ごとにテンプレートを作るなどして開発することをおすすめします。

テンプレートについてはこれから作成手順の中で都度ご説明いたします。

WordPressのテンプレート階層とは

WordPressにはテンプレート階層という仕組みがあります。

テンプレート階層とは、テンプレートが読み込まれる優先順位のことをいいます。

最終的に行き着くのは「index.php」であり、「index.php」が最低限テーマを成り立たせる重要なテンプレートとなります。

下記の図で左から順に読み込まれるので、ご確認いただければと思います。

引用:WordPress Codex テンプレート階層 概観図
参照:テンプレート階層の解説ページをみる

WordPressを動かすために必須のサーバー環境構築方法

結論から申しますと、WordPressのテーマ作成しようと思ったら「XAMPP」もしくは「MAMP」のインストールが必要です。

「XAMPP」「MAMP」とは、PC内(ローカル)にサーバー環境を用意できるソフトウェアのことです。

ローカルサーバーの環境構築をする理由は、WordPressはPHPというプログラミング言語で作られているからです。

PHPはサーバー上で動く言語なので、必ずサーバーを用意しないと動きません

サーバーはローカルサーバーでも、本番公開するためのプロバイダが提供する有料のサーバー(共用サーバーやVPSなど)でもどちらでもPHPは動きますが、今回はWordPressのテーマ作成を作るまでが目的なので、ローカルサーバーを使います。

ローカルサーバーの種類

ローカルサーバーの種類は、

  • MAMP(主にMacで使われています)
  • XAMPP(主にWindowsで使われています)

の主に上記2種類です。

どちらも無料で、パソコンにインストールするだけで環境構築できてしまいます。

当記事では、
Macを使われている方は→「MAMP
Windowsを使われている方は→「XAMPP
をおすすめします。

ローカルサーバーの使う場面

ローカルサーバーはPCの中でサーバ環境が用意できる大変便利なツールですが、その使いどころは様々です。
例えば、

本番環境にアップする前にテストサーバーで作業したい場合
PHPやJavaScriptのAjaxなどのサーバー環境が必要なプログラムを使う場合

上記などのような場面でローカルサーバーは必要になります。

当記事ではMAMP・XAMMPの使い方に触れてしまうととんでもない文量になってしまいますので、
「MAMPもくはXAMPPの使い方やインストール方法がよくわからない…」という方はぜひ下記の記事をご覧ください

テーマ作成の流れ

実際にテーマ作成に入る前に、テーマ作成の実装の流れを確認しておきましょう。
筆者的には下記の流れで進めるのが良いかと思っております。

ステップ①HTMLとCSSで静的なサイト(見た目)を作成する
ステップ②HTMLのファイル名をindex.phpに書き換える
ステップ③index.phpの内容をヘッダー、サイドバー、フッターなどコンテンツごとに分割する
ステップ④プログラムの内容をPHP(WordPress関数など)で書き直す
ステップ⑤プラグインなどで必要な機能を追加してカスタマイズする

ざっくりと上記の流れに沿って制作していきます。
また、下記のサイトが完成イメージです。

まずはHTMLでコーディングする

それではまず初めに、HTMLとCSSでWebサイトの見た目を作っていきましょう。
先に作るメリットは、

・先にHTMLとCSSで作ってしまえば後から自動化すべきところだけPHPで書き換えれば済む
・HTMLとCSSの状態でバックアップでき、見た目の部分は保証される
・HTMLとCSSでのコーディングはPHPをサーバーでコーディングするよりキャッシュがない分早い

上記の理由から、当記事ではまずはHTMLをコーディングします。
ここで作成するファイルは「index.html」と「sample.css」の2つです。

下記の図のような構成で作成してください。

HTMLとCSSを作成

下記のコードをコピペしてindex.htmlとsample.cssを作成しましょう。

HTMLをテンプレート化する

次に、作成したHTMLをテンプレート化します。

HTMLをテンプレート化するとは

テンプレート化するとは下記の2ステップを行うことをいいます。

ステップ①HTMLの拡張子を「.html」から「.php」に変換する
ステップ②自動化すべきHTMLの箇所をPHPの記述に書き直す

それぞれ順番に解説します。

index.phpを作成する

作成したHTMLの拡張子を「.html」から「.php」に変換しましょう。

ここではただそれだけです。

自動化すべき部分は後ほどでPHPで書き換えます。

テーマに必ず必要なstyle.cssを作成する

style.cssを作成

次に先ほど作成したsample.cssとは別にstyle.cssを作成します。

style.cssには先頭にテーマの名前や説明、バージョンなどの情報を記載します。

style.cssを作成する理由は、style.cssは自作したテンプレートファイルがテーマであることをWordPressに認識させるためのCSSファイルだからです。

なので、style.cssの読み込みのlinkタグをheadタグ内に記述する必要はありませんし、逆にデザインのためのCSSを記述してheadタグ内で読み込ませてもどちらでも可能です。

下記の図のようなファイル構成でstyle.cssを追加しましょう。

MAMPもしくはXAMPPのhtdocsにWordPress本体ファイルをアップする

MAMPもしくはXAMPPの「htdocs」ファイルの階層にWordPress公式サイトからインストールしたWordPress本体ファイルを配置します。

そのあと下記の手順でテーマをサイトに反映させます。

1、WordPressの初期設定(セットアップ)を完了させる
2、「wp-content/themes/」の階層の中にここまでで作った「sampleblog」テーマファイルを配置させる。
3、WordPress管理画面左メニューの「外観」→「テーマ」で有効化します。

テーマの有効化に関しては次のコンテンツで解説します。

「WordPressをMAMPもしくはXAMPPで立ち上げる方法がよくわからない…」という方は下記の記事でご紹介しておりますので、よろしければご覧ください。

WordPressでテーマを有効化

テーマを有効化とは、インストールされているいくつかのテーマのどれかを選択してサイトの見た目として機能させるということです。

その前に、現時点ではそもそもサーバーにテーマとしてのファイルが存在しないので、有効化することができません。

なので、まずはここまでで作成した下記2つのファイルをアップロードします。

【テーマとして成り立たせる最低限必要なファイル】
・index.php
・style.css

アップする場所は下記の階層になります。
アップする場所:wp-content/themes/sampleblog/の階層

アップロードが完了したら、
WordPress管理画面の左のメニューから「外観」→「テーマ」をクリックします。

そしたらテーマの管理画面の一覧に「有効化」ボタンがあるのでクリックします。

サイトを表示したら自作したテーマが反映されているのが確認できるかと思います。

テンプレートを分割する

あとは、index.phpのプログラムを各部品(ヘッダー、フッター、サイドバー)ごとに分割します。

ヘッダーのテンプレートを作成

↓これがheader.phpの完成イメージです。

wp-content/themes/sampleblog/の階層に、header.phpを作成しましょう。

index.phpにある下記のコードをheader.phpへコピペしましょう。

そのあとコピペした分のソースコードは削除します。

↓header.php

そしてindex.phpには今ざっくり消した部分(header.phpに移動させた部分)をget_header()関数に書きかえましょう。

↓index.phpのヘッダーの抜き出しもとの場所

作成するテンプレートファイルの場所:wp-content/themes/sampleblog/の階層

するとindex.phpのヘッダー部分の記述がすっきりして、ヘッダーのレイアウトとそれ以外のコンテンツが分割されました。

この調子で他のフッターやサイドバーなども分割しましょう。

フッターのテンプレートを作成

↓こちらが完成イメージです。

footer.phpを作成しましょう。

下記のコードをindex.phpから切り離してfooter.phpへコピペしましょう。

↓footer.php

そしてindex.phpにはざっくり消した部分(footer.phpに移動させた部分)をget_footer()関数に書きかえましょう。

↓index.phpのフッターの抜きだしもとの場所

作成するテンプレートファイルの場所:wp-content/themes/sampleblog/の階層

サイドバーのテンプレートを作成

↓こちらが完成のイメージです。

sidebar.phpを作成しましょう。

下記のコードをindex.phpから切り離してsidebar.phpへコピペしましょう。

↓sidebar.php

そしてindex.phpにはざっくり消した部分(sidebar.phpに移動させた部分)をget_sidebar()関数に書きかえましょう。

↓index.phpのサイドバーの抜き出しもとの場所

作成するテンプレートファイルの場所:wp-content/themes/sampleblog/の階層

functions.phpを作成する

functions.phpはWordPressのテーマ作成には欠かせないテンプレートです。

後々使うことになるので、事前にfunctions.phpを作成しておきましょう。

作成するテンプレートファイルの場所:wp-content/themes/sampleblog/の階層

functions.phpとは

そもそもfunctions.phpとはなんだ?と疑問に思われている方も多くいらっしゃるのではないでしょうか。

functions.phpとは、WordPress内での様々な機能を実装するプログラムを書く場所です。

しばしば実装される機能としては、アイキャッチの機能やメニューを設定する機能、また、「アクションフック」や「フィルターフック」といったフックというプログラムを利用してWordPressを高度にカスタマイズすることができます。

ここまでで、以下のファイル構成になります。

進捗のご確認としてご活用ください。

「functions.phpについて詳しく知りたい!」という方は下記の記事でご確認いただければと思います。

テンプレートに機能を導入する

ここでテンプレートファイルの自動化すべき部分をPHPで書き直していきます

現状まだ静的なHTMLのコードのみとなっているはずなので、修正していきましょう。

(※作業を行う前に予めデータベースに記事データなどがあった方が機能導入後にサイト上の動きが確認しやすいので、予め記事を投稿するなどしておきましょう。)

(※下記のAll in One Migrationプラグインのデータをインポートすると、サイト内に記事データを反映することができます。その際はAll in One Migrationプラグインをインストールしてください。→インストール方法はこちら)

テンプレートタグとは

テンプレートタグ(WordPress関数)とは、WordPressの専用の関数です。

WordPressのテーマ作成やプラグインを作成する時に主に使用されます。

短いコードで高度な機能を簡単に実装できるので、テンプレートタグを使うことによってハイクオリティなテーマが作成できます。

逆にいうと、テンプレートタグがわからないとテーマ作成することができないともいえます。

ただ、決して難しいことではなく簡単に実装することができるのでご安心ください。

それでは下記で各部品のHTMLをPHPに書きかえます。

ヘッダーロゴの実装

まずはheader.phpにあるヘッダーロゴを自動化します。
自動化する部分は「リンク」と「画像読み込みのURL」です。

使用するテンプレートタグは以下の3つです。
esc_url() URLを無害化する
home_url() サイトのURLを返す
get_template_directory_uri() テーマのディレクトリのURLを取得する

それでは下記のようにコードを修正しましょう。
(Before)

(After)


見た目は変わりませんが、ロゴ画像をクリックするとトップページにリンクされているかと思います。

アイキャッチ画像表示機能の実装

そもそもアイキャッチ機能はデフォルト状態では機能しておらず使用できません。
なのでアイキャッチ画像を投稿画面で設定してサイトに表示させるには下記の手順が必要になります。

ステップ①functions.phpにadd_theme_support(‘post-thumbnails’’)を記述する
ステップ②記事編集画面にアイキャッチ画像の設定枠が追加されるので、そこでアイキャッチを設定する
ステップ③テンプレートファイルにthe_post_thumbnail()関数を記述する

ここでは、まずアイキャッチ画像の機能を有効化しましょう。
下記コードをfunctions.phpに記述します。

これでアイキャッチ画像を設定できるようになりました。
実装した結果、管理画面の投稿画面でアイキャッチ画像を設定でき、またWordPress関数でアイキャッチ画像を読み込み表示させることができるようになりました。


実際に投稿画面で設定することができるようになりました。

ヘッダーとフッターのメニューを自動化する

CMSであるWordPressの良いところは、サイト上にあるコンテンツを管理画面から設定・入力して反映させるなど更新や修正を自動化することができるところです。

メニューに限らず必要に応じてサイトのコンテンツを自動化することによって、HTMLの知識がないクライアントのためにサイト制作ができるなど多くのメリットがあります。

まずは下記のようにheader.phpとfooter.phpのコードを修正して実装していきましょう。

(修正前:header.phpの場合)

(修正後:header.phpの場合)

(修正前:footer.phpの場合)

(修正後:footer.phpの場合)

そしたら次にfunctions.phpに下記のようにコードを追加しましょう。

これで管理画面の左メニューにある「外観」→「メニュー」に移動してメニュー編集画面で設定していただけるとサイトのグローバルナビゲーションとフッターナビゲーションの両方を更新することができます。

HTMLの知識がなくてもカスタマイズできるようになりました。

サイドバーのカテゴリーを自動化する

カテゴリーの機能はデフォルトで備わっていますが、テンプレートタグを使用しなければサイトに表示されません。

下記のようにsidebar.phpのコードを修正しましょう。
(Before)

(After)


サイドバーのカテゴリー一覧が設定した項目通りに表示されていることと思います。
これで自動化されたので、後からカテゴリーの項目を増やした時に追加されることになります。

サイドバーのタグを自動化する

次に、サイドバーにタグの一覧も自動化して表示させましょう。
下記のようにsidebar.phpのコードを修正しましょう。
(Before)

(After)


サイドバーのタグ一覧が設定した項目通りに表示されていることと思います。

記事一覧機能の実装

記事一覧表示の実装はWordPressでのサイト制作ではかなり重要です。
一覧機能はWordPressループというプログラムを書いて実装します。

WordPressループには「メインループ」と「サブループ」の2種類がありますが、ここでは「メインループ」を使います。

使用するテンプレートタグは以下の2つです。

have_posts() ループできる投稿データがあるかどうかをチェックする
the_post() ループの処理を次に進める

それでは下記のようにindex.phpのコードを修正しましょう。

(Before)