【意外と簡単】WordPressで自作テーマを作る手順を解説

皆さんは「サイトのこの部分をこう変えれないかな」など思ったことはありませんか？

これWordPressで作ったサイトを運用しているとよくある悩みだと思います。

というのもWordPressサイトの場合、大抵は無料や有料のテーマをインストールしてサイトを作られていますよね。

無料や有料のテーマは大半の方に好まれるデザインになっており、個別の要望に応えられるようになっていません。

最初は既にあるテーマで運用しつつ、次第にWordPressの仕組みが分かってきた段階で既存テーマから自作テーマに切り替える方が細かな点も修正がしやすか便利です。

今回はWordPressで既存テーマではなく、自分でテーマをカスタマイズする自作テーマを作成し、WordPressに反映させる手順を解説していきます。

WordPressで自作テーマを作るのは簡単？難しい？

自作テーマ作りが難しいと思ってしまいそうですが、意外と簡単に作ることができます。

HTML・CSSを使ってコーディングできる方であれば、問題なくできると思います。

HTML・CSSを知らない方であっても、WordPressの特有の仕組みやルールさえ覚えればできないことはありません。

WordPressで自作テーマを作るメリット

WordPressサイトを自分の好きなデザインにできる

WordPressあるあるだと思いますが、一般的に販売されている有料・無料のテーマだとどうしても他の方とデザインが被ってしまうことがあります。

他の人とは違うデザインで差別化したいなら間違いなく自分でテーマを作ることをおすすめします。

また既存テーマではちょっとしたデザイン的な調整ができないことがあるのでこだわりたい人は自作テーマに挑戦してみても良いでしょう。

表示速度の改善につながるかも

既存の有料・無料テーマには不要な機能が付いていることが多くあります。

そのため、不要な機能が付いていない自作テーマであれば無駄な処理がないことでWordPressサイトの速度向上につながることがあります。

特に最近バージョンアップが行われていないテーマはGoogleが推奨するSEO内部施策が行われていない構造になっていることもあるので避けた方が無難です。

WordPressで自作テーマを作るデメリット

WordPressに対する最低限の専門知識が必要

自作テーマを作ってWordPressサイトを運用する場合、最低限のWordPressに関する知識が必要です。

WordPressは通常のHTMLとCSSを使ったWebサイトとは構造的に違う部分があります。

WordPressは共通パーツを作って1箇所変えれば、同じ共通パーツの箇所の部分が変わるように作られています。

そのため、何を変えたらWebサイトのどこに反映されるのかということを知っておくことで管理がしやすく運用しやすくなります。

サイトのメンテナンスは自分で行わないといけない

販売されている有料テーマであればプランによってサポートがあったりしますが、自作テーマはオリジナルになるので、自分でメンテナンスを行う必要があります。

特にWordPressのメジャーアップデートなどや複数のプラグインのバージョンなどが合わずに何かしらの不具合が発生するリスクがあります。

WordPressとHTMLの違い

通常のHTMLで作ったページはCSSやjavascriptで書いたソースファイルをリンクとして読み込んでページを作っています。

WordPressはヘッダーやフッターさらにはコンテンツ部分などをPHPで記述しています。

そのため、ユーザーからブラウザでアクセスがあった場合、該当箇所をPHPでデータベースにアクセスしたソースコードをHTMLを出力してページを作っています。

WordPressで自作テーマを作る手順

ここからは具体的にどうやって自作テーマを作るのか説明していきます。手順としては下記になります。

• WordPressの基本的な構成を覚える
• 自作テーマに必要なファイルを覚える
• 自作テーマのファイルを準備する
• パソコンに開発環境を作る
• デバッグモードでエラーを分かりやすくする
• 本番環境にFTPでファイルをアップロードする
• WordPressの管理画面で自作テーマを有効化する
• プラグインをインストールする
• 公開後にカスタマイズする

WordPressの基本的な構成を覚える

WordPressの公式サイトから最新のファイルをダウンロードしてzipファイルを解凍すると、WordPressを構成する多くのフォルダ・ファイルがあります。

その中でも特に大事かつよく使うフォルダ・ファイルを説明します。

自作テーマを作るという点でいうと、「wp-content」の中だけ編集することになります。

wp-content	テーマ・プラグイン・メディアなどサイトの主なデータが入ったフォルダ
wp-include	システム全般のファイルが入ったフォルダ
wp-admin	管理画面に関するファイルが入ったフォルダ
wp-login.php	ログイン画面に関するファイル
wp-config.php	システム設定に関するファイル
wp-load.php	サイト上のプログラムを処理するファイル

自作テーマに必要なファイルを覚える

「wp-content」の「themes」の中に入っているフォルダがWordPressで選択できるテーマになります。

そのため、自作テーマを使う場合、「themes」の中に任意の名前でフォルダを作り、必要なファイルをアップロードすることになります。

WordPressとHTMLの違いについて説明した通り、WordPressは共通部分から投稿・固定ページのコンテンツなどあらゆる部分を共通パーツ化して更新しやすくできます。

ここでは具体的に、必要最低限の上でどういう共通パーツがあるのかを説明して、基本的な構成を理解してください。

style.css	テーマに使用するスタイルのファイル
functions.php	テーマに使用する関数等のファイル
header.php	ヘッダーのテンプレートファイル
footer.php	フッターのテンプレートファイル
sidebar.php	サイドナビゲーションのテンプレートファイル
index.php	トップページのテンプレートファイル
page.php	固定ページのテンプレートファイル
single.php	投稿ページのテンプレートファイル
archive.php	カテゴリー・タグ等のテンプレートファイル
search.php	検索結果ページのテンプレートファイル
404.php	404ページのテンプレートファイル
screenshot.png	テーマ一覧のサムネイル画像

自作テーマのファイルを準備する

基本的な構成を理解したら、次にWebサイトを実際にHTMLとCSSでコーディングします。

コーディングが終わったら、先程のWordPressの仕組みに合わせて共通パーツ化していきます。

共通パーツ化する際は、まず共通パーツ化する分だけファイルを作ります。その後、コーディングしたHTMLのタグをPHPの関数に置換していきます。

慣れてくるとHTML・CSSのコーディングの作業とWordPressのPHP関数への置換作業を同時に進めることもできますが、慣れていないうちは混乱してしまいがちなので一つずつやっていく方が無難です。

パソコンに開発環境を作る

初心者がつまづきやすい開発環境の構築が必要になります。

HTMLで作ったページはそのままの状態でもブラウザで表示確認することができますが、PHPで書いたページはApacheやMySQLなどの開発環境を準備しないと動作しないので表示確認ができません。

そのため、WordPressの公式サイトから最新版のファイルをダウンロードし、開発環境にWordPressのデータベースをインストールする作業が必要です。

またPHPで書いたファイルをブラウザで確認するために、MAMPというソフトが便利です。

デバッグモードでエラーを分かりやすくする

デバッグモードとは、エラーの原因と発生箇所が表示されるようになる閲覧モードです。

WordPressはPHPというプログラミング言語で作られていますが、PHPなどで書いたコードの中でエラーが発生している箇所を探すのはとても大変です。デバッグモードがあるのとないのとでは開発時間が変わってくるので有効に使っていきましょう。

デバックモードの設定は、WordPressをインストールした際の「wp-config.php」で行います。

「wp-config.php」の80行目あたりにある「define(‘WP_DEBUG’, false);」という部分の「false」を「true」に変更するとデバックモードがオンになります。

ブラウザ上でエラーの原因と具体的な発生箇所が確認できるのでとても便利ですが、開発が終わったタイミングで「true」を「false」に戻しておきましょう。

本番環境にFTPでファイルをアップロードする

「wp-content」→「themes」の中に任意の名前でフォルダを作成し、準備したファイルをアップロードします。

この時にファイルのアップロードし忘れることがよくあるので気をつけましょう。

WordPressの管理画面で自作テーマを有効化する

ファイルのアップロードが完了したら、管理画面の「外観」→「テーマ」で自作テーマを有効化しましょう。

ここで「screenshot.png」をアップロードしておくと、サムネイル画像が表示されるのでそれっぽくなります。

便利なプラグインをインストールする

WordPressには簡単に色んな機能を追加できるプラグインという拡張機能が付いています。

プラグインの入れ過ぎは、サイトが真っ白になるなど不具合の原因になるので注意も必要ですが、10〜15個ぐらいを目安にしましょう。

またプラグインの更新がされていないものはWordPressのバージョンに合わないなどありますが、直近1年ぐらいで更新されていたら基本的に問題ないです。

おすすめのプラグインは下記の記事を参考にしてみてください。

WordPressブログ向け！WordPressの目的別のおすすめプラグイン30選

公開後にカスタマイズする

サイトを公開してからカスタマイズする時ですが、以下には注意しましょう。

• 「function.php」を触る
• リンク先は絶対パスで記述する
• プラグイン追加の時は更新日を確認する

特に「function.php」は変な改行を入れるだけでサイトが表示されなくなるなど、致命的な不具合になる可能性が高いので取り扱いは気をつけてください。

あと必ず作業前にバックアップを取って、何かあった時に元に戻せるようにしておきましょう。

必ず作業前にバックアップを取る