WordPressではテーマ（デザインテンプレート）を自分で作ることも可能です。
テーマを自作することで、自分好みのデザインにしたり、サイトに新機能を追加したりできるようになります。
しかしながら、テーマの作り方が分からないという方は多いでしょう。
本記事ではWordPressのテーマを自作する手順について、初心者でも分かるように解説していきます。
また、テーマ作成の際に使える便利なツールについても紹介していきます。
WordPressのテーマを自作する手順
WordPressのテーマを自作する手順は次の通りです。
- STEP1：バックアップを取る
- STEP2：開発環境を構築する
- STEP3：フォルダとファイルを作成する
- STEP4：themesフォルダに格納する
- STEP5：テーマを有効化してみる
この手順に従うことで、WordPress上に自分が作ったテーマを表示させることまでは可能です。
1つ1つの手順について詳しく解説していきます。
STEP1：バックアップを取る
まず行うべきなのは、WordPress全体のバックアップを取ることです。
WordPressのカスタマイズやテーマ作成を行う場合、すぐに元の状態に戻せるようにした方が良いです。
なぜなら、WordPressのファイルの中には変更したり削除したりしてしまうと、WordPress全体が見えなくなってしまうものもあるからです。
特に初心者のうちはよく分からず関係ないファイルを変更してしまうこともあるため、バックアップは必ず取りましょう。
WordPressには「BackWPup」というプラグインがあり、こちらを使えばすべてのファイルのバックアップを一括で取ることができて便利です。
BackWPup – WordPress Backup Plugin
STEP2：開発環境を構築する
続いて、開発環境を構築します。
テーマ作成を行う場合はパソコンがまず必要になります。
テーマ作成を行うだけなら、パソコンのスペックはそこまで要求はされません。
また、PHPを実行するためには実行環境が必要になります。
くわえて、ソースコードを記述するためのエディタや実行結果を確認するためのWebブラウザ、ファイルをサーバーにアップするためのFTPソフト、なども必要です。
STEP3：フォルダとファイルを作成する
続いて、WordPressのテーマのフォルダとファイルを作成していきます。
テーマを作成するには最低でも次の5つのファイルが必要です。
- style.css
- index.php
- functions.php
- header.php
- footer.php
具体的に各ファイルの中身をどう記述するかは、後ほど詳しく解説します。
STEP4：themesフォルダに格納する
WordPressでは「wp-content/themes」にテーマのフォルダを配置することになっています。
ここに「testtheme」というフォルダを新規作成します。
そして「testtheme」に作成したファイルを格納します。
これで、WordPress上に新しく「testtheme」という名前のテーマが作成されたことになります。
STEP5：テーマを有効化してみる
テーマを作成したら、WordPressの管理画面から有効化してみましょう。
WordPressのダッシュボードから「テーマ」を選択します。
テーマ一覧の中に「new theme」があることを確認します。
「testtheme」が見つかったら「有効化」を選択します。
これで自分が作ったテーマを使えるようになります。
WordPressのテーマに必ず必要なファイル
WordPressのテーマを作成する際は、ソースコードファイルに挙動を記述する必要があります。
WordPressのテーマに必ず必要なファイルは次の5つです。
- style.css
- index.php
- functions.php
- header.php
- footer.php
実際に販売されているテーマなどは、もっと多くのファイルが使われていますが、ひとまずこの5つファイルを用意するだけで、必要最低限の機能が備わっているテーマは作成することができます。
初心者の方はまずこの5つの作り方を覚えて、それから他の機能を追加していくようにすると、テーマ作成に途中で挫折せずに済むでしょう。
1つ1つのファイルの作り方について詳しく解説していきます。
1) style.css
style.cssはテーマで使われるCSSファイルです。
CSSの役割は主にWebサイトのレイアウトを調整することです。
HTMLだけでもレイアウト調整は可能ですが、CSSの方がより効率的に行うことができるため、WordPressのテーマでもCSSファイルが用いられます。
style.cssにはテーマの詳細などの情報をまとめておく必要があります。
最低でもテーマ名を書いておかないと、管理画面にテーマ名が表示されません。
style.cssは次のような感じで作成しましょう。（あくまで例です）
●コード例
/*
Theme Name: new theme
*/
@charset "utf-8";
body {
font-size: 14px;
}
2) index.php
index.phpはテーマの基盤となるHTMLテンプレートです。
まず最初にindex.phpを読み込み、それから他のファイルが読み込まれていくイメージです。
ここではもっともシンプルにheader.phpとfooter.phpを呼び出すindex.phpを作成しましょう。
●コード例
<?php get_header(); ?>
<p>Hello World!</p>
<?php get_footer(); ?>
index.phpが正常稼働していることを確かめるために、「Hello World!」と表示するようにしています。
3) functions.php
functions.phpはWordPressの機能を拡張するための関数を書くファイルです。
今後テーマにさまざまな機能を付与していくうえで必要なファイルです。
ひとまずfunctions.phpは空の状態で用意しておきましょう。
●コード例
<?php
// 関数名を記述する
?>
4) header.php
header.phpはWordPressの上部の表示を記述するためのファイルです。
WordPressの上部にはタイトルやロゴ、メニューなどを表示するのが一般的です。
header.phpはindex.phpからget_headerという関数によって呼び出されます。
header.phpはひとまず次のように書いておくと良いでしょう。
●コード例
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
5) footer.php
footer.phpはWordPressの下部の表示を記述するためのファイルです。
下部にはコピーライト表記やお問い合わせ先、電話番号などを表示するのが一般的です。
footer.phpはindex.phpからget_footerという関数によって呼び出されます。
footer.phpはひとまず次のように書いておくと良いでしょう。
●コード例
<?php wp_footer(); ?>
</body>
</html>
その他WordPressのテーマで多く使われるファイルの例
WordPressのテーマ作成に必須というわけではないものの、多くのテーマで使われているファイルを紹介します。
- sidebar.php ⇒サイドメニュー
- single.php ⇒投稿
- home.php ⇒トップページ
- archive.php ⇒カテゴリー一覧
- 404.php ⇒404エラー
これらのファイルを用意することで、テーマにさまざまな機能やページを追加することができ、本格的なテーマに近づくことができます。
1つ1つのファイルの役割について詳しく解説していきます。
sidebar.php
sidebar.phpはページのサイドエリアを表示するためのファイルです。
サイドエリアにおすすめページなどのリンクを設置することで、ユーザーがサイトを巡回しやすくなります。
sidebar.phpはindex.phpからget_sidebarという関数によって呼び出されます。
single.php
single.phpは投稿ページを表示するためのファイルです。
投稿ページは記事の投稿やカテゴリ分け、アイキャッチ画像の設定などを行うのに必要です。
home.php
home.phpはトップページを表示するためのファイルです。
トップページには投稿した記事が順番に表示されます。
また、トップページには特定のコンテンツを表示し、ユーザーをそちらに誘導しやすくすることも可能です。
archive.php
archive.phpはアーカイブを表示するためのファイルです。
投稿アーカイブやカテゴリーアーカイブを表示させるために使います。
アーカイブページは過去にどの記事を投稿したのか確認したい場合に便利です。
404.php
404.phpは入力されたページがない場合に表示する「404ページ」を表示するためのファイルです。
404ページはユーザーに探しているページがない、もしくは削除されてしまったことを伝えるために必要です。
404ページでは記事の検索フォームを表示するなどして、次に何をすべきなのか、ユーザーに分かりやすく示してあげることが大切です。
WordPressのテーマ自作に必要な知識
続いて、WordPressのテーマ自作に必要な知識について解説します。
テーマ自作に必要な知識は次の3つです。
- HTML・CSS
- PHP
- SQL
これらの基礎知識を備えていると、WordPressの自作をスムーズに行えるようになるでしょう。
1つ1つの必要な知識について詳しく解説していきます。
1) HTML・CSS
HTMLとCSSはWebサイトの文書を作成するのに使う言語です。
テーマを自作するには最低限度のHTML・CSSの知識が必要になります。
HTMLではタグというものを使ってWebサイトを表現しています。
主要なタグの使い方は覚えてしまった方が、スムーズにテーマを作ることができるでしょう。
HTML・CSSはタグさえ覚えてしまえば、後はそこまで難しくはありません。
CSSの使い方について無料の学習コンテンツがありますのでご参考に見てみてください。
2) PHP
PHPはWordPressの機能を制御するためのプログラミング言語です。
テーマの見た目部分はHTML・CSSで作りますが、自動でメールが送れるようにしたり、投稿した内容をチェックしたり、さまざまな機能を追加するには、PHPの知識が必要になってきます。
PHPはHTML・CSSに比べると若干難しめであり、ある程度の学習期間を確保する必要があります。
PHPの使い方についても無料の学習コンテンツがありますのでご参考に見てみてください。
3) SQL
SQLはデータベースを操作するためのプログラミング言語です。
データベースとは順序良くまとめられたデータ群のことです。
WordPressでは投稿された記事やコメント、メタデータなどを格納するためにデータベースが使われています。
データベースを操作するには、SQL文を覚えておく必要がありますが、データベースの知識があればSQL文を書けなくてもテーマは作成することができます。知っておいた方が良いというレベルでお考えください。
SQLの使い方について無料の学習コンテンツがありますのでご参考に見てみてください。
WordPressのテーマ作成に便利なツール
最後に、WordPressのテーマ作成に便利なツールについてまとめました。
これら3つのツールがあることで、効率的にテーマを作成することが可能です。
- FTPソフト
- 開発環境パッケージ
- テキストエディタ
いわゆるプログラマーと呼ばれる人達も、これらのツールを使ってプログラミングを行っています。
すべて無料で手に入れられるものなので、ぜひ試しに使ってみてください。
1つ1つのツールについて詳しく解説していきます。
1) FTPソフト
FTPソフトとはファイルをサーバーにアップロードしたり、サーバーからファイルをダウンロードしたりするのに使うツールのことです。
FTPソフトを使わなくてもアップロードは可能ですが、コマンドの知識などが必要なため、FTPソフトを使った方が簡単でしょう。
FTPソフトの中でも代表的なのがFileZillaです。
FileZillaは無料で使えるうえに、WindowsでもMacでも使用可能で利用者も多いため、ネット上に情報も多く分からない操作について調べやすいです。
2) 開発環境パッケージ
WordPressのテーマを自作するには開発環境を整える必要があります。
PHPやMySQLなどをローカルでも動かせるようにしなくてはいけません。
しかし、開発環境を整えるのは初心者には難しいことも多いです。
そこで活用をおすすめするのが、XAMPPという開発環境パッケージです。
XAMPP Installers and Downloads for Apache Friends
XAMPPをインストールするだけで、WordPressのテーマ作成に必要な開発環境をすぐに揃えることができ、PHPもMySQLも実行することができます。
XAMPPをインストールしたら、後はWordPressをダウンロードし、XAMPPのフォルダに格納することで、ローカル環境でWordPressを起動することが可能です。
詳しくは以下の記事をご覧ください。
3) テキストエディタ
PHPやHTMLなどのソースコードを記述する際にテキストエディタが必要です。
エディタはWindowsに標準で入っているメモ帳でも良いですが、もっと機能性に優れたものをインストールすることをおすすめします。
具体的にはnotepad++などのエディタが良いでしょう。
こういったエディタには、入力補完機能というものがあります。
HTMLのタグ名までを途中まで入力すると、タグ名の候補で表示してくれ、そこから選択することでタグ名を入力できるというものです。
タグ名を最後まで入力しなくて良くなり、開発効率が高まります。
他にも、ソースコードを色分けして見やすくしてくれる機能や、ファイルの分割表示機能などが備わっています。
機能性に優れたエディタは他にもあるので、自分好みのものを探してみましょう。
まとめ
本記事ではWordPressのテーマの自作方法について解説しました。
WordPressのテーマを作ること自体はそこまで難しくはありません。
本記事で解説した通りにファイルの枠組みを作り、サーバーにアップロードすれば良いです。
ただ、その後のテーマを自分好みに組み立てていく作業は大変ですし、HTMLやPHPなどの知識が必要になります。
テーマ作成に興味がある方は、まずはHTMLやPHPの基礎知識を抑えましょう。
HTMLやPHPの学習コンテンツは本サイトにもあるので、ぜひ参考にしてください。会員登録も必要なく、すべて無料でご覧いただけます。
