WordPress（ワードプレス）のオリジナルテーマを作るメリットや流れを解説！

2023 7/09

ワードプレスには様々なテーマがあって、好きなテーマを選んで使っている人が多いと思います。

使っていると、自分の好きなようにカスタマイズしてみたい！と思うようになってくる人もいるはずです。

実は、ワードプレスのテーマは自作することもできるんです。

オリジナルテーマを作れば、自分の理想的なワードプレスのサイトを作れるようになりますよ！

オリジナルテーマを作るなんて難しそう…という方のために、今回は、ワードプレスでオリジナルテーマを作るメリットや基本的な流れについて見ていきましょう。

WordPress（ワードプレス）のオリジナルテーマを作るメリット

ワードプレスには、色々なテーマがありますが、自分でオリジナルテーマを作ると何がいいの？と思いますよね。

オリジナルテーマを作れば、必要な機能やデザインが備わった自分の理想的なサイトが作れることがメリットです。

作成後も、自分の好きな機能やデザインに変更することができます。

既存のテーマは、決められた変更しかできず、自分の思うようにカスタマイズすることはできませんよね。

不要な機能も最初から入れなければいいだけなのでサイトの読み込み速度もアップしますよ。

WordPress（ワードプレス）の仕組みを理解しよう

ワードプレスの構成は次のようになっています。

プラグラム：Webサイトを表示させるためのもの
データベース：生地の内容や画像を保存するためのもの

プログラム部分には「PHP」という言語が使われていて、データベース部分には「MySQL」というシステムが使われています。

ユーザーがWebサイトにアクセスするとPHPがデータベースの内容を取得し、決められたデザインに当てはめて表示するシステムになっています。

システム部分で使用されているPHPファイルを書き換えれば、自由に表示を変えることができるんです。

オリジナルテーマを作成する場合は、ワードプレスを構成する複数のPHPファイルを作成していきます。

WordPress（ワードプレス）でオリジナルテーマを作るときに必要な知識

ワードプレスでオリジナルテーマを作りたいなら、次のような知識を身に着けておくといいでしょう。

HTML：コンテンツをブラウザに表示させるベースの言語
CSS：文字や背景の装飾・デザインを行うための言語
PHPの変数や関数：ワードプレスで使用されるプログラミング言語
WordPressの基本構造：テーマがもつ役割を理解するために必要な知識

基本的なことは理解しておくとオリジナルテーマが作りやすくなります。

WordPress（ワードプレス）のオリジナルテーマを作成する流れ

ワードプレスでオリジナルテーマを作成する流れを見ていきましょう。

ローカル環境を構築する
HTMLとCSSでWebサイトをデザインする
作成したデザインをPHPファイルに落とし込む
PHPコードの追記
テスト
本番環境へ移行

ローカル環境を準備する

ワードプレスでオリジナルテーマを作成する場合は、自分のパソコンの中でローカル環境を構築する必要があります。

ローカル環境のMAMP上にワードプレスをインストールした状態で進めましょう。

HTML・CSS・画像ファイルを準備する

事前に、サンプルページやHTMLファイルなどを準備しておきましょう。

項目	内容
webst8	htmlファイル類を格納しているフォルダ。あとでワードプレスのthemesフォルダに移動します。
index.html	今回ワードプレス化するウェブページ
mystyle.css	index.htmlを整形するスタイルシート
images	画像を格納しているフォルダ

準備した「webst8」フォルダをワードプレスのthemesフォルダにコピーします。

そして、webst8フォルダの中にstyle.cssを新規作成し、ワードプレスに格納したwebst8フォルダにstyle.cssを追加しましょう。

style.cssには、テーマの名前などを入力します。

index.phpを作成する

トップページとして用意していたindex.htmlのファイル名を「index.php」に変更しましょう。

テーマを適用する

テーマが適用できるようになるので、ワードプレスの外観⇒テーマから「webst8」を有効化しましょう。

テーマを適用した後にトップページを表示し、テーマが表示されていれば完了です。

相対パスを修正する

これでいったんテーマの適用ができるようになりましたが、この状態ではまだＣＳＳファイルのスタイルが適用されない、画像が表示されないなど不完全な状態です。

ここから修正していきましょう。

画像が表示されない理由

ワードプレスのインストールフォルダが「localhost/wpkm/webst8/images/xxx.jpg」となっていてファイルが見つからないと画像が表示されない。

ワードプレス独自の関数を入れて修正します。

■修正前<link rel=”stylesheet” href=”mystyles.css”>

↓
■修正後<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/mystyle.css”>

画像ファイルのパスも修正しましょう。

■修正前<img src=”images/top.jpeg” alt=”トップページ画像”>

↓

■修正後<img src=”<?php echo get_template_directory_uri(); ?>/images/top.jpeg” alt=”トップページ画像”>

画像がたくさんある場合は、エディタ上で「コントロール＋F」を押すと一括置換可能です。

ワードプレス関数(wp_head()とwp_footer())を追加する

次に、ヘッダーとフッターの関数を追加しましょう。

<?php wp_head(); ?>：</head>タグの直前
<?php wp_footer(); ?>：</body>タグの直前

<?php wp_head(); ?>
</head><body>
…
<?php wp_footer(); ?>
</body>
</html>

このように入力します。

設定後にログインし、トップページを表示すると管理バーが表示されるようになります。

これで基本的な設定ができるようになりました。

そのほかのテンプレート

ファイル名	概要
index.php	ワードプレス必須のテンプレート。
single.php	投稿用のテンプレート
page.php	固定ページ用のテンプレート
archive.php	アーカイブ用のテンプレート
category.php	カテゴリーページのテンプレート
404.php	ページが見つからないエラー(404エラー)用のテンプレート
search.php	検索結果用のテンプレート