せっかくWordPressでサイトを作るなら、自分好みのサイトにしたいものです。自分のイメージに合ったテーマがなかなか見つからないことも多いですが、自分で作れば解決します。ここでは、WordPressのテーマをオリジナルで作成する方法や、手順について解説します。テーマの自作は、敷居が高いと思われがちです。しかし、この記事を読めば、簡単な手順で作成していける方法がわかるでしょう。

WordPressのテーマとは

WordPressのテーマとは、サイトデザインのテンプレートのことです。サイトの構成には、サイトデザインのためのコードや表示のためのコードなど、さまざまなコードが必要になります。このようなコードによって、いろいろなデザインや機能をサイト上で使うことができるようになるのです。これらのコードをまとめたものを、テーマと呼びます。

テーマを変更するだけで、サイトのデザインを変えたり機能を変更したりすることができます。複雑な処理は必要ありません。テーマには、WordPressの標準テーマと世界中のクリエイターが作成したテーマがあります。それらのテーマには、有料で購入しなければならないものもありますが、無料で公開されているものもたくさんあるのです。無料や有料で公開されているテーマは種類が多く、サイト全体の見た目や構成もさまざまなものがあります。あらかじめSEOの対策がされているテーマやSNSと連携しやすくなっているテーマなど、それぞれのテーマで機能も違ってくるのです。

テーマは公開されているものを使えばよいと思っている人も多いかもしれません。しかし、自作することもできるのです。

既存のテーマを利用せずテーマを自作することのメリット

WordPressでサイトを作成するときに、既存のテーマを使うことは簡単で便利です。とはいえ、既存のテーマを利用しているせいで似たようなサイトになってしまっている例も、見たことがあるのではないでしょうか。テーマを自分で作成すると、より自分の理想に近い、使いやすいサイトを作ることができます。しかも、どこにもない完全オリジナルのサイトです。

もちろん、既存のテーマの一部を書き換えて、自分好みにカスタマイズすることもできます。しかし、もとからあるテンプレートに改造を加えていくと、どうしても複雑化してしまいます。その結果スピードが遅くなってしまったり、アップデートの際に不具合が起きたりする可能性もあるのです。それに、既存のテーマを改造したのでは、結局はそのテーマに沿ったものになってしまいます。自分のイメージに合ったサイトを作りたいのであれば、自作したほうが近道です。そのほうが、納得できるサイトに近づけることができます。

また、既存のテーマにはもともと、自分には必要のない機能もたくさんついていて、そのせいでサイトが表示されるのが遅くなりがちです。しかし、テーマを自作するのであれば、わざわざ余計な機能を付ける必要はありません。必要な機能だけでテーマを作れば、動作や表示されるスピードも早いサイトを作ることができます。さらに、ひとつのテーマを自作することでWordPressをより理解できるようになり、より自由に、デザインや機能にこだわった自分のサイトを作れるようになるのです。

テーマを自作するために必要な基礎知識

WordPressのテーマを自作するためには、必要な知識があります。とはいえ、そこまで高度な知識が必要なわけではありません。プログラミングの基礎知識はもちろん必要ですが、仕組みそのものを理解しておけばよい程度です。PHPの変数や関数などの基礎的な知識は必要になります。WordPressには、特有の挙動や関数があるのですが、それらを扱えれば十分です。WordPressの標準の機能を動かす役割を持っている関数なので、理解しておく必要があります。他にも知っておくべき関数はあるのですが、その都度覚えればよいです。

サイトの表示に必要なHTMLや、サイトのデザインに必要なCSSの知識は身につけておきましょう。動きのあるサイトを作りたいなら、できればJavaScriptの知識もあったほうが便利です。また、サイトを公開するにあたっては、SEO対策の意味でタグやディスクリプションの設定もする必要があります。そのため、SEOの知識もあるとなおよいでしょう。

テーマを自作するために必要な準備

テーマを自作することに決めたら、まずは準備が必要です。ここでは、テーマを自作するための準備について紹介します。

WordPressをローカル環境にインストールしておく

WordPressのテーマを作成するには、ローカル環境での作業が必要になります。なぜなら、WordPressのエディタにはメモ帳程度の機能だけしかないため、直接コードを記述するとミスが起きやすいからです。そのため、まずはWordPressのデータベースを、ローカル環境にインストールしておかなくてはいけません。なお、本体のファイルは、WordPressの公式サイトから最新版をダウンロードしましょう。

WordPressは、PHPファイルでできています。そのため、ブラウザで開いただけでは表示させることはできません。PHPを動かすためには、ApacheやMySQLなどのローカル環境を整えておく必要があるのです。さらに、PHPファイルをブラウザで観るための環境は、MAMPというソフトを利用して整えるとよいでしょう。他にも方法はありますが、初心者がローカル環境を整えるには、MAMPなどを使用したほうが手軽でおすすめです。

サンプル記事の用意と必要なテンプレートファイルを確認しておく

サンプル記事を用意しておくと、テーマの作成をスムーズに行うことができます。テーマの作成そのものは、記事がなくても可能です。しかし、記事がない状態では動作確認などを簡単に行えないので、テーマを作るのが難しくなります。ダミー記事と並んで必要なのが、テンプレートファイルです。WordPressには、デザインを指定するためのstyle.cssファイルや記事ページのsingle.phpなど、それぞれのテーマで必要なテンプレートファイルが複数あります。基本的なテンプレートファイルはWordPressをインストールしたファイルの中にあるはずなので、確認しておきましょう。

テンプレートファイルをうまく使えば、より自分の理想に近いテーマを作ることができます。テンプレートファイルの使い方は、理解しておきたい知識のひとつです。

エラーの詳細を表示させるデバッグモードをオンにしておく

WordPressのテーマを作成していくうえで、エラーが出ることは当然あります。エラーが出たときに役に立つのがデバックモードです。デバックモードがオフになっていると、エラーの場所を探すだけでも大変な作業になってしまいます。しかし、オンにすることで、コードのエラーなどをブラウザ上で確認できるようになるのです。デバックモードは、テーマを作成する前に忘れずにオンにしておきましょう。

デバックモードの設定は、WordPressをインストールした際の「wp-config.php」というディレクトリで行います。wp-config.phpの80行目あたりを探してみましょう。そこにデバックモードに関する記載があります。「define('WP_DEBUG', false);」という部分の「false」を「true」に変更するとデバックモードがオンになります。エラーがあったときにはブラウザ上で確認できてテーマ作成が楽です。ただし、テーマ作成が終わったらfalseに戻すのを忘れないようにします。

オリジナルテーマ作成の流れ

オリジナルテーマを作成する際の流れを説明します。まず、どのようなサイトにしたいか、サイト全体のイメージを考えましょう。イメージが決まったら、HTMLとCSSで表示できるようにコーディングをします。コーディングが完成したら、次はWordPressの形式に書き換えるのです。WordPressのテーマはPHPを使用するため、サイトのパーツ別にそれぞれファイルを作ります。さらに、一部のタグをPHPの関数に置換すれば完成です。慣れてくれば、HTMLとCSSのコーディングの作業とWordPressの開式に書き換える作業を同時に進めることもできます。しかし、初心者のうちは順番に行ったほうが間違える可能性が少なくてよいでしょう。

完成したテーマをサーバーにアップロードすれば、オリジナルテーマは出来上がります。あとは、スマートフォン向けの画面の対応など、必要な機能をカスタマイズしていき、少しずつ自分が理想とするサイトに近づけていくのです。

オリジナルテーマ作成に必要なファイルの内容を理解しておく

ここでは、自作テーマ作成に必要な、WordPressで使用するファイルについて紹介します。

ヘッダー、フッターとサイドバーのファイル

head要素や、全ページに共通するヘッダーを作成するファイルが、header.phpです。header.phpには、index.htmlの冒頭部分からbodyの始まりまでを記載します。同じように、footer.phpには、フッター部分を記載します。つまり、index.htmlでいう

トップ画面の表示に必要なindex.php

index.phpは、TOPページを表示するのに必要なファイルです。WordPressのテーマ作成では、必須のファイルになります。TOPページを表示させるだけなら、home.phpで作ることもできるでしょう。しかし、home.phpがTOPページ専用のファイルであるのに対し、index.phpは該当するファイルが見つからなかった場合に表示されるファイルなので意味が違います。index.phpのほうが汎用性は高いのです。index.phpには、header.phpやfooter.php、さらに、sideber.phpなどを読み込むためのPHPを記載します。メイン部分で記事ページを一覧で表示させるためのループ設定を記載するのも、このファイルです。

固定ページや記事ごとの特定ページのファイル

更新頻度は高くなくても、SEOも意識したデザインや内容でページを作成することがあります。そのような場合に作成するページが、固定ページです。固定ページのテンプレートファイルは、page.phpで作成します。また、記事ページのテンプレートファイルは、single.phpです。single.phpは、記事の本文やアイキャッチ、投稿日の情報などを読み込んで、表示させるページを作成します。その他、月別やカテゴリ別、タグ別の記事を検索した際の一覧ページを、まとめて作成できるファイルはarchive.phpです。404ページは、リクエストされたページが存在しなかった場合に自動で読み込まれます。404ページを作成するファイルは、404.phpです。

デザイン指定するファイルとショートコードの指定をするファイル

WordPressでのテーマ作成に限らず、サイトを作成する際のデザインを記載するために欠かせないファイルがstyle.cssです。style.cssは、テーマのスタイルを直接htmlに書き込むと見づらくなったり修正に手間がかかったりするので、外部フォルダとして作成されます。しかしWordPressにおいては、テーマ名や作者名を指定する役割も持っています。

functions.phpは、テーマ内で汎用的に使われるコードや関数を記載するファイルです。カスタマイズを誤るとテーマ全体でエラーが出てしまう可能性もあるほど重要なファイルなので、編集時にはバックアップを取る必要があります。

オリジナルテーマを使ってサイトを公開する手順

ローカル環境でオリジナルテーマが完成したら、いよいよ公開です。ここでは、完成したオリジナルテーマを公開する手順について紹介します。

サーバーを借りてドメインを取得して公開する

作成したオリジナルテーマをWordPressで動作させるには、対応しているサーバーをレンタルする必要があります。サーバーのレンタルはさまざまな会社から提供されていて、申込みの際にドメインも無料でプレゼントしてくれる会社も多いです。セキュリティ面やデータ容量など、自分が作成したいサイトに合ったサーバーを選ぶことが大事ですが、料金や、好みのドメインがあるかなどで決めるのもよいでしょう。せっかくオリジナルテーマを作成したのなら、ドメインも独自のものを取得するのがおすすめです。サーバーとドメインが用意できたら、ファイルをアップロードして公開できるようになります。

サイトを公開する際に便利な機能を導入しておく

サイトを公開する際に、検索エンジンにサイトの構成を理解させるためのサイトマップを設置しておきましょう。サイトマップを設置すると、最新記事のインデックスが早くなったりアクセスアップにつながったります。また、Google Search Consoleの登録をしておくと、サイトマップの送信をしてくれるだけでなく、サイトがどのような検索ワードで表示されているのかなどの状況もわかって便利です。

サイトのアクセスをアップさせたいなら、Googleアナリティクスの利用は必須です。まずはGoogleアナリティクスに登録をしましょう。使用するためには、登録後にトラッキングコードをサイトに挿入する必要があります。きちんと反映されているかも、チェックしておかなくてはいけません。

便利なプラグインは活用しておく

WordPressには、さまざまな機能を簡単に実装させることができるプラグインというものがあります。プラグインは、必要に応じて利用するとよいでしょう。記事ページで目次を表示させたり、入れておくだけでコンタクトフォームを生成してくれたり、SNSでのシェア数がカウントできるなど、いろいろなプラグインがあります。気に入ったプラグインを利用するなら、利用できるようにCSSも整えなくてはいけません。プラグインは便利な機能ですが、インストールしすぎるとサイトの表示が遅くなることもあります。また、プラグイン同士の相性が悪くてバグが出ることもあるため、インストールするプラグインには注意が必要です。