WordPress制作入門③WordPressテーマを自作する方法 - はじめてのWebデザイン【図解たっぷり】 | SkillhubAI（スキルハブエーアイ）

WordPress制作入門③WordPressテーマを自作する方法 - はじめてのWebデザイン【図解たっぷり】

by 吉田光利

｜ 1264 PV ｜ 2026.04.22

favorite_border

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、4月26日まで）


» 今すぐ億を稼ぐマニュアルをゲットする

前回、WordPressのテーマを使ってサイトの見た目を変更しました。 今回はhtmlで作ったサイトを元に、WordPressテーマをイチから自分で作成する方法を解説します。

好みに合うテーマを探し回らず、想像した通りのWordPressサイトを作る第一歩を踏み出してみましょう！

WordPresの自作テーマとは?

WordPressではインストール時から入っているテーマ、俗にデフォルトテーマと呼ばれるもの以外でも、様々なテーマを使用することが出来ます。

無料で公開・配布されているテーマもあれば、数万円～数十万円で販売されている有償テーマまで様々。たくさんのテーマが作られ、多くの人が利用できる形で提供されています。

外部リンク

WordPress テーマ | WordPress.org 日本語

ですが、既存のテーマでは掲載内容やデザインなどの調整が限られます。

そんな時には、テーマをイチから自分で作って使うことも可能！ この完全オリジナルのテーマを、自作テーマや独自テーマなどと呼びます。テーマを自作することで、作りたいサイトやクライアントの要望に沿ったサイトをWordPressで構築することができるのです。

自作WordPressテーマ、はじめの一歩

HTMLで作成したしたサイトを、WordPressで使用する事もできます。HTMLページをベースして、WordPressテーマを作る形です。 WordPress化、WordPressテーマ化、なんて言い方をします。

制作するWordPressサイトの構想

はじめてのWebデザイン【図解たっぷり】シリーズで作ってきた、株式会社エドベースのWebサイトをWordPressテーマ化していきます。

せっかくWordPressで使える形にするので、ブログ機能も搭載しましょう。 file

エドベースのHTMLサイトを素材としてご用意しています。
下記からダウンロードしてご利用ください。
HTML編から作成されている方は、ご自身で作ったedbaseフォルダをコピーして使用しても構いません。

素材ダウンロードはこちら

1.WordPresテーマの置き場所を確認

早速、WordPressに自作テーマを追加してみましょう。
Local by Flywheelを起動し、管理画面にログインしておいてください。

Local by Flywheelのウィンドウで、URLの横に表示されている矢印をクリックします。 file

WordPressで使っているデータが入ったフォルダが開きます。
表示されているフォルダの中から、
app > public > wp-content > themes と進んでください。
file 　↓
file

管理画面 > 外観 > テーマを見てみてください。
テーマ画面に表示されているものと、themesの中に入っているフォルダ名が同じはずです。
file

つまり、themesフォルダの中にあるフォルダが、WordPressで使用可能なテーマというわけです。
これから作る自作テーマも、このthemes内にフォルダを作って進めていきます。

2.edbaseのファイルをコピーする

早速、HTMLで作ったedbaseサイトをWordPressに移し替えてみましょう。

素材のedwp_sozaiフォルダを、WordPressのthemes内にコピー＆ペーストします。 file 　↓ file

フォルダ名は後々わかりやすいように「wpedbase」変えておきます。
そのまま利用しても構いません。
file

3.WordPressにテーマと認識させる

themesフォルダ内に、新しくフォルダを加えました。
ですが、残念ながら、このままではWordPressにテーマと認識してもらえません。

管理画面からテーマを見てみると、「足りない部分があります」と言われています。
file

WordPressがテーマと認識するためには、下記２つのファイルが必要です。

  • index.php
  • style.css

必要なファイルを作成しましょう。
テキストエディタで空のファイルを新規作成。
index.phpと名前をつけて、wpedbaseの中に保存します。
file

style.cssには、テンプレートヘッダーを記述します。
これは、どんなテーマか分かるように説明を付けるイメージです。
一番上に、下記のコードを追加してください。 

/*
Theme Name: テーマの名前
Description: このテーマの説明
Author: 作者の名前
*/

:の後は、テーマや製作者の名前を入れます。 今回のテーマだと、下図のような感じですね。 Author:にはご自分の名前を入れてください。 file

style.cssを上書きして、WordPress管理画面からテーマ設定ページを再読み込みしてください。Edbaseというテーマが、選択肢に加わっています。 カーソルを重ねて「テーマの詳細」をクリック。 file file 有効化をクリックして、自作テーマを適用させてください。

表示画面のほうが真っ白になりますが大丈夫です。 file

4.index.phpを編集

index.phpを開いてください。 まだ空ファイル、画面表示も真っ白です。
本当にWordPressに反映されるのか、少しだけindex.hphに中身を入れてチェックしてみましょう。 file

index.htmlの１行目から<body>タグまでをコピーして貼り付けます。 bodyの中身は中身はコピーせずに、</body></html>で閉じましょう。

<body>と</body>の間に、「index.phpのテストです」という文字を入れます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>エドべース株式会社</title>
  <meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
    index.phpのテストです
</body>

</html>

上書き保存して、WordPressの表示画面をリロード。 入力した文字が表示されていたら、テーマがWordPressで使われています。 file

こんなんで大丈夫？と思った方もいらっしゃるかもしれません。 これからファイルを編集していくと、HTMLで作成したedbaseサイトがWordPress上に復元されていきますのでご安心を。WordPressの機能も取り入れて、より便利にグレードアップさせていきましょう！

WordPressのテーマの仕組みを知ろう

WordPressのテーマと認識させるために、index.phpを作成しました。 これは、index.phpが「テンプレートファイル」と呼ばれる、WordPressサイトを表示させるために必要なファイルのためです。WordPressのテーマを作成するには、index.php以外にもサイトを構成するための「テンプレートファイル」を作っていく必要があります。

WordPressの仕組みとテンプレートファイルの役割を把握しましょう。

HTMLページとWordPressの違い

HTMLファイルでWebページを作った時は、1ファイルがそのまま1つのWebページとして表示されていました。 3ページ作りたければ、3つのhtmlファイルが必要でしたね。

file

このように、書かれていることがそのまま表示されている＝いつアクセスしても毎回同じ情報が表示されるページを静的ページと言います。

対してWordPressは、存在するページの数と同じだけhtmlやphpファイルを用意する必要はありません。
1つのファイルを使って、条件に応じた情報を出力して表示させることが出来ます。
file

テンプレートファイルがあれば、リクエストに応じてデータベースにある情報を取り出し、それをページに表示させることが出来ます。
このようにアクセス時の条件によって表示される情報が異なるページを動的ページと呼びます。

◆ index.phpを使って確認してみよう

リクエストに応じてデータベースにある情報を取り出し…と聞いても、馴染みがないとピンと来ないのではないでしょうか？ どういうことか、index.phpを使って実験してみましょう。

index.phpを開いてください。
「index.phpのテストです」の下に、下記コードを貼り付けてください。

これは、投稿のタイトルを取得・表示せよというWordPressのタグです。 

<h1><?php the_title(); ?></h1>

↓貼り付けイメージ
file

貼り付けたら上書き保存。 WordPressの管理画面から、投稿一覧を開きます。
file

テストです、という記事を表示してみましょう。 投稿のタイトル「テストです」が表示されているはずです。
file

次に、Hello world!の記事を表示させてみます。 こちらも投稿のタイトル「Hello world!」が表示されました。
file

どちらもindex.phpを使って表示されていますが、WordPressのデータベースに下記の２つを指示（リクエスト）しています。

  • どのページの情報を表示するか（投稿を選ぶ）
  • 投稿のタイトルを取得・表示せよ（ php the_title(); ）

タイトルの表示が変わる＝リクエストに応じて表示内容が変わっていることが分かりやすいのではないでしょうか。

WordPressテンプレートファイルの考え方

WordPressでは、同じファイルを使って別々のページを表示することが出来ます。 ですが、サイトのトップページ、新着記事一覧、投稿ページなど、それぞれ表示させたいものも、レイアウトも異なります。index.phpで全てを表示させるのは難しいですよね。

そこで、WordPressにはindex.php以外にもテンプレートファイルが設定されています。 テンプレートファイルは、それぞれ役割ごとにファイル名が決められています。
投稿のページではsingle.phpなど、決められたファイル名のテンプレートがあれば、自動的にそれを使って表示してくれる仕様になっています。

使用できるテンプレートファイルの一覧図も公開されています。

外部リンク

wp-template-hierarchy.jpg

とはいえ、図にあるもの全てを揃える必要はありません。
この中から必要なファイルだけを用意すれば良いので、覚えなくて大丈夫です。

まずは、今回のエドベースサイトをwordPress化するために使うテンプレートを覚えましょう。
この４つのテンプレートは、ほぼ確実にどんなWordPressテーマでも必要となります。 file

トップページがindex.phpで無いことに、違和感を覚えた方もいらっしゃるかもしれません。 WordPressテーマでindex.phpは「なんでも屋」のポジション。 ピッタリ当てはまるテンプレートファイルが無い時は、とりあえずindex.phpを使ってWebページとして表示させる仕様になっています。だからこそ、テーマにindex.phpが必須となっているわけです。

トップページをWordPress化

いよいよ、本格的にhtmlページをWordPressテンプレートファイルに置き換えていきましょう。
まずはトップページです。 file

index.htmlをエディタで開きます。
別名で保存（名前をつけて保存）から、front-page.phpという名前で保存してください。 file

WordPressサイトを表示してみましょう。
file front-page.phpが表示されました！
ただ、画像が表示されていなかったり、CSSが効いていなかったりと、うまく表示されていないところがあります。

どうしてCSSや画像を読み込まないのでしょうか。
原因は、ファイルパス（開いているページから見た、cssや画像ファイルの場所）が違うからです。

今の書き方では、同じ階層にあるstyle.cssを読み込むように指示しています。
file

ですが、style.cssはテーマフォルダの中に入っています。
今開いているページとは、かなり離れた場所。
このため、style.cssを読み込めなくなってしまっているのですね。
file

WordPressでは「テーマフォルダの場所」を取得するテンプレートタグが用意されています。
file

style.cssへのリンクに使ってみましょう。
テーマディレクトリの「中の」とする場合には、PHPタグの後にスラッシュが必要なので、注意してください。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

front-page.phpを上書き保存。
WordPressのページを再読み込みしてください。

CSSが効いて、ヘッダーメニューやサイドが横並びに配置されました。
file

画像部分も、同じように <?php echo get_template_directory_uri(); ?> を使って、テーマフォルダ内にあるimagesフォルダに辿り着けるようにしてあげましょう。
トップ画像だと下記のようになります。

<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpg">

サイドのバナーも同じように設定します。
ブラウザを再読み込みして、２枚の画像が表示されていれば成功です。
file

見た目は完全に復元されました。

ヘッダーメニューのリンクは、他のページもWordPress化しないと繋げません。 一旦置いておいて、まずリンク先となるページを作りましょう。

WordPressでデザインの異なる固定ページを作成する

会社概要とお問い合わせは、デザインが違いますよね。
固定ページはpage.phpを使って表示されると紹介しましたが、page.phpという１つのファイルでどちらのデザインも再現するのは大変です。
file

そこで、WordPressでは、固定ページに応じて別のテンプレート（phpファイル）で表示させることができる仕組みも用意されています。

方法はいくつかありますが、簡単なのはスラッグを使う方法。
スラッグというのは、URL（パーマリンク）の末尾の部分のこと。
page-スラッグ.phpというファイル名を付けると、自動的に「スラッグ」が一致する固定ページを使ってページが表示されます。
file

スラッグの設定と合わせて、固定ページ部分の作成方法を見ていきましょう。

会社概要ページをWordPress化する

WordPress管理画面から、固定ページの新規追加を開きます。
file

タイトル部分に「会社概要」と入力してください。
右側のメニューから、スラッグをクリックして「company」に打ち換えます。
file
タイトルとスラッグ、２つを設定出来たら、固定ページを公開してください。

次に、WordPressのテーマ（テンプレートファイル）を作成しましょう。
company.htmlをエディタで開きます。

そのまま、名前をつけて保存/別名で保存を選択。
page-company.phpという名前にして保存してください。
file

page-company.phpを編集しましょう。
やることはfront-page.phpと同じく、パスの修正です。
<?php echo get_template_directory_uri()?> を使って、下記４箇所を直します。

  • style.cssの読み込み
  • 画像（company.png）
  • 画像（images/banner.png）
  • gacha.jsの読み込み

<?php echo get_template_directory_uri()?>の挿入イメージ↓
file

修正できたら、page-company.phpを上書き保存。
WordPressの管理画面に戻って、会社概要のページを表示してみましょう。
file

HTMLページと同じように表示され、格言ガチャも動いていれば成功です！
file

お問い合わせページをWordPress化する

お問い合わせページの作り方も、基本的には会社概要と同じです。
固定ページのスラッグをformなどに変更して、専用のテンプレート（page-form.php）を作れば割り当てられます。
file

ただ、お問い合わせページにはフォームがありますよね。
HTML作ったのは見た目だけ、実際には動かないフォームです。
ですが、WordPressならプログラミングの知識がなくても、本当に動くフォームが簡単に実装できてしまいます。
せっかくですから、プラグインの導入方法も学びつつ、フォーム機能も組み込んでみましょう。

1.プラグインの追加と設定

早速、プラグインを追加してみましょう。
WordPress管理画面から、プラグイン > プラグインを追加 を開きます。
file

右上に表示されている検索窓に Contact form と入力すると、プラグインの候補が表示されます。
Contact form 7の「今すぐインストール」をクリックしてください。
file

インストールが完了すると、ボタンが「有効化」に変わります。
有効化をクリックしてください。
file

2.フォームの作成

Contact form 7の有効化が完了すると、左メニューに「お問い合わせ」という項目が増えます。
これがContact form 7の設定画面になります。クリックして開いてみましょう。
file

上部にある、追加のボタンをクリックするとフォーム作成画面が開きます。
（お問い合わせの子メニューの「コンタクトフォームを追加」からも同じ画面が開きます）
file 　↓
フォームの作成画面が開きます。
file

この画面で入力・設定した項目がフォームとして表示されます。
わかりやすいように、タイトルは「お問い合わせ」とでもしておきましょう。

  • 氏名→名前
  • メッセージ本文 (任意)→内容

と、HTMLで使われていたのテキストに打ち替えてください。
メールアドレスと題名は削除しても、そのまま残しても良いです。
file

元の form.html には性別を選択するラジオボタンがありました。 これを追加してみましょう。
file

ラジオボタン、と書かれているところをクリック。
file

ウィンドウが開くので、オプション欄に「男」「女」と入力します。
file

右下にあるタグを挿入ボタンをクリックすると、コードが挿入されます。
file

この状態で表示されるのはラジオボタン（選択肢）の部分だけです。
それでは分かりにくいので「性別：」と追加しておきましょう。
file

右上に表示されている、保存ボタンをクリックして保存してください。
作成されました、というメッセージが表示されたら、問題なくフォーム設定が出来ています。
file

3.固定ページを作る

お問い合わせページを表示するために、固定ページを新規追加します。 固定ページの追加画面を開いてください。

タイトル部分に「お問い合わせ」と入力して、その下にあるブロックを追加ボタン（ + のアイコン）をクリック。
Contact form 7を選択してください。
ブロックを選択するウィンドウの上部にある、検索を使うと見つけやすいです。
file

Contact form 7のブロックを追加すると、プルダウンでフォームの選択ができます。
先ほど作成したフォームを選んでください。
file

右側のメニュー、固定ページのタブでスラッグを「form」に変更して、公開してください。
file

3.テンプレートファイルを作る

form.htmlをエディタで開き、そのまま名前をつけて保存します。
ファイル名は page-form.php にしてください。
file

style.cssと画像パスに<?php echo get_template_directory_uri()?>を挿入してファイルを読み込めるようにします。
file

先程、WordPress側でお問い合わせページ用の固定ページを作成しました。
その時、本文にContact form 7で作ったフォームを挿入しましたよね。

現在の page-form.php はHTMLでフォームを直書きしています。
固定ページで設定したフォームを表示するために、フォーム部分を固定ページの本文と置き換えましょう。
file

下記のコードを使用します。

<?php while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?>

page-form.phpの<form> ~ </form>タグまでを削除。
削除した部分に、上記のコードを記述します。
上手くいかない方は上記のコードをコピーアンドペーストしてみてください。
file

貼り付けたコードで指示していることは、下図の内容です。
<?php the_content(); ?> でエディタの本文部分を出力しています。
file
while (have_posts()) : the_post(); はWordPress特有の書き方です。
最初はWordPressでよく使う定型の１つ、くらいの認識で問題ありません。

page-form.phpを上書き保存して、お問い合わせページの表示を確認しましょう。
フォーム部分の見た目が変わっていたら、成功です。
file

ちなみに、このフォームはローカル環境だとうまく動きません。 フォーム管理画面や送信時にエラーが出ることがありますが、プラグインの設定を間違えているなどではないのでご安心を。
ローカル環境ではメールサーバーの用意ができていないので、上手く動かないんですね。

ですが、*Localでは、手軽にメールテストが出来る方法も用意されています。 * 試してみたい方は、下記の設定を行ってみてください。

■Localでのフォーム動作確認方法

※動作確認は任意です。スキップしても構いません。
※Localやプラグインの設定が絡むため、お問い合わせ頂いても解決できない場合もございます。

Local by FlywheelのTOOLSから、OPEN MAILHOGをクリックします。
file

ブラウザでMailHogという、メールボックスのような画面が開きました。
この画面はそのまま置いておきましょう。

WordPressでお問い合わせページを開きます。
フォームに適当に入力して、送信ボタンをクリック。
file

送信出来たら、MailHogのページを再読み込み。
すると、お問い合わせの通知メールが表示されます。
フォームはばっちり機能していますね。
file

共通部分を一括で管理する

ここまでで、htmlで作成した３ページがWordPressでも表示されるようになりました。
それぞれのページへのリンクを作り直したいところですが、このあとブログのページも作ります。

毎回全ファイルを開いて、リンクを修正したり追加したりは、面倒ですよね。
実は、WordPressでは、データベースにある情報を書き出すだけではなく、テンプレートファイル（phpファイル）の中に、別のphpファイルの中身を書き出すことも出来ます。
file

例えば、header.phpファイルに「ここはヘッダーです」とテキストを入力します。
すると、header.phpの中身を書き出すよう指示されているファイルには、そのテキストが表示されます。
file

header.phpのテキストを「エドベース株式会社」と打ち替えると、全ページの表示が一気に切り替わります。
もちろん、divタグやクラスなども記述できます。
1つ修正すれば全ページに適用されるのです。便利ですね。
file

WordPressのページは、色々なテンプレートファイルとデータベースの情報を１枚にまとめたものと言えます。
共通部分は切り出して１つのファイルにすることで、管理が楽になりますよ。
file

ヘッダー部分をテンプレート化

早速、ヘッダーを分離してテンプレートファイル化してみましょう。

  • front-page.php
  • page-company.php
  • page-form.php

ここまでに作った、３つのテンプレートファイルを見比べてみましょう。 それぞれtitleとdescriptionは違いますが、</header>タグまではほぼ同じ構成ですよね。
この共通部分を「header.php」として分離しましょう。
file

空の新規ファイルを作成します。
front-page.phpを開いて、1行目から</header>タグまでをカット＆ペースト。
file

header.phpという名前で保存してください。
file

ヘッダー部分をカットしたfront-page.php。
こちらは、1行目に「header.phpを出力せよ」というWordPressのタグを挿入します。

<?php get_header(); ?>

file

上図のようになったら、front-page.phpを上書き保存。
ブラウザでサイトのトップページを確認してみましょう。
file

今まで通り表示されていれば、うまく出来ています。

page-company.php と page-form.phpも同様に設定しましょう。
</header>タグまでを削除し、<?php get_header(); ?> に置き換えます。

file

これで、header.phpを編集すると全てのページのヘッダー部分が変更されるようになりました。
header.phpをよりWordPressに適した形に調整していきましょう。

header.phpを編集する

今のままだと、ページのタイトルやmeta descriptionも一緒になってしまいまいます。
file

これらを細かく設定するには難しい設定、もしくはプラグインの使用が必要です。
今回はちょっと簡単に作ってしまいましょう。

ページのタイトルを書き出してくれるように、以下３つのWordPressタグを使います。

<?php the_title(); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>

file
この３つのタグを組み合わせて使用します。

header.php

<title><?php the_title(); ?>｜<?php bloginfo('name'); ?></title>
<meta name="description" content="<?php the_title(); ?>｜<?php bloginfo('description'); ?>">

実際に出力されるテキストは、赤い文字部分のようになります。
file

header.phpを上書き保存して、ブラウザで表示を確認してみましょう。

サイトのトップページ（front-page）だけは、タブに表示されるページタイトルが変になっているかと思います。
ここは、そのままでOK。
「会社概要」と「お問い合わせ」が正しく表示されていれば次に進んでください。
file

wp_head(); を挿入する

WordPressテーマのheadに必要なのが、<?php wp_head(); ?>というタグです。
このタグは、WordPress側がhead内に出力したいものがある時に、書き出せる場所を確保してあげる為のものです。

例えば、プラグインを使ってmetaタグを出力する、SNSへのリンクを作るとき。
<?php wp_head(); ?>が入っていないと動かなかったり、CSSが読み込まれずに見た目が汚くなったりしてしまいます。

今後プラグインを追加しても動くように入れておきましょう。
挿入場所は</head>タグの直上です。

header.php

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php the_title(); ?>｜<?php bloginfo('name'); ?></title>
  <meta name="description" content="<?php the_title(); ?>｜<?php bloginfo('description'); ?>">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
～以下略～

前回のレッスンで追加したお問い合わせのフォームには、上部に四角が表示されていました。
あれもContact form 7が使うCSSを読み込めていなかったことが原因です。

上記のようにwp_head();を挿入してリロードすると、プラグイン側のCSSが効いて、フォームの不要な四角も消えます。
file

WordPressを使ってメニューを作る

ヘッダーメニューのリンクを各ページに繋がるように直しましょう。
修正が楽になるよう、管理画面からメニューを追加・変更できるようにます。

管理画面からメニューの設定を行う

管理画面からメニューを作るためには、functions.phpというファイルを使います。
functions.phpは、WordPressの管理画面の設定、機能の使用不使用の決定、そのほか関数のカスタマイズ等などを行うことができるファイルです。

エディタで新規ファイルを作成してください。
下記のコードをコピーして貼り付けます。
張り付けたら、functions.phpという名前で保存してください。

functions.php

<?php 
    add_theme_support('menus');
    register_nav_menus( );

?>

file

WordPressの管理画面を開きます。
（開いている方は再読み込みしてください）

外観にカーソルを重ねると「メニュー」という項目が増えています。
開いてみましょう。
file

メニュー名を入力して、メニューを作成ボタンをクリック。
file

メニューが作成され、項目（リンク先）が追加できるようになります。
左側にあるメニュー項目を追加で、会社概要とお問い合わせにチェックを入れます。その状態で「メニューに追加」ボタンをクリック。

file

チェックを入れた項目が、右側のメニュー構造の中に表示されます。
ドラックで順番を変えられるので、表示させたい順に並べましょう。

順番を揃えたら「メニューを保存」ボタンをクリックして保存してください。
file

header.phpからメニューを呼び出す

ヘッダーナビゲーション部分を、作成したWordPressの「メニュー」を表示させるコードに置きまえます。

メニューを呼び出すWordPressタグはこちら。

<?php wp_nav_menu( ); ?>

今回の場合は、<nav>の中に上記コードを入れると良いです。

header.php(完成!) 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title><?php the_title(); ?>｜<?php bloginfo('name'); ?></title>
  <meta name="description" content="<?php the_title(); ?>｜<?php bloginfo('description'); ?>">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>

<body>
  <div class="container">
    <header>
      <h1>エドベース株式会社</h1>
      <nav>
        <?php wp_nav_menu( ); ?>
      </nav>
    </header>

上書き保存して、ブラウザで確認してみましょう。 ヘッダーナビゲーションが変わっていれば完成です。
file
「ホーム」は後ほど、ブログ一覧ページの作成と合わせて追加します。
これでheader.phpは完成です。

footer.phpを作成

footerも株式会社エドベースのサイトは共通したデザインです。 footer.phpというファイルを作って共通化しましょう。

page-company.phpを開いてください。
<footer>タグから下を全て切り取り、新規ファイルに張り付けます。

新規ファイルは「footer.php」という名前で保存。
file

page-company.phpの最下部に、footer.phpを出力するためのタグを挿入します。
headerがfooterになっただけですね。

<?php get_footer(); ?>

frontpage.phpとpage-form.phpも同じく、<footer>から下を全て削除。
<?php get_footer(); ?>を挿入します。
file

上書き保存して、ブラウザで各ページを確認してください。 見た目に変化がなければ、footerのテンプレート化は成功です。

wp_footer; を挿入する

WordPressのfooter.phpには<?php wp_footer(); ?>というタグを挿入します。 このタグもheader.phpに挿入した<?php wp_head(); ?>と同じく、WordPress側が出力したファイルを書き出せるようにするものです。

挿入する場所は</body>タグの直前。 footer.phpに書いてみましょう。

footer.php(完成!) 

    <footer>
      <p>エドベース株式会社</p>
    </footer>
  </div>

  <script src="<?php echo get_template_directory_uri()?>/gacha.js"></script>
  <?php wp_footer(); ?>
</body>

</html>

上書き保存して、WordPressサイト（表示画面）を確認してください。
消えていた管理バーが復活していれば成功です。
file
file
右端にあるユーザー名がはみ出していますが、これは後でCSSを調整すると直ります。とりあえずそのまま進めてください。

WordPressでブログの一覧ページを作る

サイトをWordPress化するにあたって追加予定の、ブログ部分を作っていきましょう。
最初に記事一覧のページをつくります。 file

固定ページを２つ作成し、役割を決める

ブログ記事（投稿）の一覧を表示するためのページを作ります。

サイトのトップページと、記事一覧を分けたい時には少し工夫が必要です。 WordPressは元々、ブログの考え方が基本。 そのまま使うとトップページ＝記事一覧という考え方をしてしまいます。

そのため、今回のようなサイトを作る場合は「トップページと記事一覧ページは分けますよ」という設定をしてあげる必要があるのです。

その設定は、WordPress管理画面の設定 > 表示設定で行えます。
下図のように、ホ―ムページと投稿ページ（投稿一覧ページ）を分けたい場合は、固定ページを割り当てる仕組みになっています。
それぞれの欄に入れられるように、固定ページを追加しましょう！
file

固定ページの新規作成

固定ページの追加画面を開きます。

タイトル：ブログ
スラッグ：blog
と入力して、公開してください。
file

もう一度、固定ページの新規追加。
タイトルに「ホーム」と入力して、公開します。
file

管理画面左メニューの設定 > 表示設定を開いてください。
ホームページの表示を、下図のように変更します。
file
ページ下部にある「変更を保存」ボタンで保存してください。

メニューに「ホーム」と「ブログ」を追加

ヘッダーナビゲーションのリンクを完成させましょう。

管理画面メニューから 外観 > メニュー設定を開きます。
メニュー項目から、追加したページ２つを選択して追加します。
file

必要に応じて並び替えて、メニューを保存してください。
file

これで最初の構想通りのメニューが表示されるようになりました。
固定ページを割り当てたので、トップページのタイトル（タブに表示される文字）部分も「ホーム」になりましたね。
file

index.phpを作成（編集）する

下準備は整いました。 index.phpを編集して、記事の一覧が表示されるようにしましょう。

1. ベースを作る

今のindex.phpは確認のために、適当な記述をしていますね。
page-form.phpの中身を丸ごと張り付けてしまいましょう。
file

mainタグに付いているクラス、トップ画像は要らないので削除します。
h2の文言は「エドベースブログ」などに変えておいてください。

index.php

<?php get_header(); ?>

    <main>
      <section>
        <h2>エドベースブログ</h2>
          <?php while (have_posts()) : the_post(); ?>
            <?php the_content(); ?>
          <?php endwhile; ?>
      </section>
    </main>

<?php get_footer(); ?>

一旦、上書き保存して、ブログのページを見てみましょう。
下図のように、前回作ったテスト投稿が表示されます。
file

index.phpに戻ります。
今書かれている指示は<?php the_content(); ?>。
投稿の本文部分を出力せよ、です。
ここを変更すれば、記事一覧を作れそうですね。

2. アイキャッチを有効にする

作成中のテーマ、実はまだアイキャッチ機能が使えません。
投稿の追加/編集画面を開いても、アイキャッチの欄が消えてしまっているはずです。
file

アイキャッチの機能も「メニュー」と同じく、functions.phpに記述しなくては使用できない機能です。
functions.phpに下記の２行を追加すると有効化できます。
file

メニューの時に書いた記述の下に入れましょう。
functions.php全体は、下記のコードになります。

functions.php（完成!）

<?php 
  add_theme_support('menus');
  register_nav_menus( );

  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(200, 200 );
?>

functions.phpを上書き保存。
投稿エディタを開き直すと、アイキャッチの項目が表示されます。
file
次のループでアイキャッチを出力しますので、未設定の方はお好きな画像を入れておいてください。

3. ループを書く

固定ページを作る時、<?php while ~> という記述をしました。
この whileで囲う書き方を“繰り返し処理”や“ループ処理”、whileタグに挟まれた部分をループ内などと言い表します。

ループ内を書き換え、アイキャッチ画像+投稿タイトルが表示されるようにしましょう。
使用するWordPressタグは、下記の３つです。

投稿のアイキャッチ画像を表示する

<?php the_post_thumbnail( ); ?>

投稿のURLを（文字列として）出力する

<?php the_permalink(); ?>

投稿のタイトルを表示する

<?php the_title(); ?>

とりあえずループ内に入れてみましょう。 ただし<?php the_permalink(); ?>はそのまま書くと、http://edbase.local/%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99/のように、URLがそのまま文字として表示されてしまいます。

リンクとして機能するように、aタグの中に入れてあげましょう。

index.php

<?php get_header(); ?>

  <main>
    <section>
      <h2>エドベースブログ</h2>
        <?php while (have_posts()) : the_post(); ?>
          <?php the_post_thumbnail( ); ?>
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
          </a>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

上書き保存して、表示画面で確認してみましょう。
レイアウトを作るのに必要なパーツが出力できていれば成功です。
file

ただ、見た目的には、別の投稿である「Hello world」と文字がくっついてしまったり…あと一歩というところ。
HTMLとCSSのコーディングを工夫して、見た目を整えましょう。

4. HTML&CSSで調整する

まず、一番の問題の、記事のタイトルがくっついている部分。
これは記事１つ１つをsectionタグ、もしくは独立したコンテンツや記事を示すarticleなどのタグで囲うと良さそうです。
横並びにするdisplay: flex;なども指定したいので、CSSクラスを指定しておきましょう。 file

更に、内側も画像部分とテキスト部分をそれぞれdivタグで囲ってクラス名を付けます。 テキスト部分が寂しいので、ついでにWordPressの抜粋も表示させてみましょう。

<?php the_excerpt(); ?>を使うと、抜粋の出力ができます。
抜粋はWordPressが自動で作ってくれるほか、自分で概要などを入力することも可能です。
file

上図の構造に合うように、HTML部分を作ります。

index.php（完成!）

<?php get_header(); ?>

  <main>
    <section>
      <h2>エドベースブログ</h2>
        <?php while (have_posts()) : the_post(); ?>
          <article class="postcard">
            <div class="img">
              <?php the_post_thumbnail( ); ?>
            </div>
            <div class="desc">
              <a href="<?php the_permalink(); ?>">
                <h3><?php the_title(); ?></h3>
                <?php the_excerpt(); ?>
              </a>
            </div>
          </article>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

左右横並びにするためにstyle.cssにスタイル指定も加えます。
PC幅でのスタイルは、メディアクエリよりも上に書いてください。

style.css

/* ブログ部分 */
.postcard {
  display: flex;
}

.postcard .img {
  flex: 1;
}

.postcard .desc {
  flex: 3;
  padding-left: 1rem;
}

もう一度、ブラウザで表示を確認します。
イメージした形になりました。
file

折角style.cssを開いているので、管理バーのところも直しましょう。
ulタグに対して「display:flex」と指定している部分、セレクタを<header>タグの中にある<ul>タグという書き方に変えます。
file

そうすると、管理バーの右側が黒い部分に収まります。
file

cssを更新したのに反映されない時はキャッシュクリア

WordPressの制作を行っていると、style.cssを上書き保存してリロードしたのに表示画面が変わらない…ということが起こります。

これは、ブラウザの“キャッシュ”という機能によるもの。 ブラウザはページを早く読み込むために、同じサイトで使われているjsやcssファイルの情報を一時的に保存しています。毎回、全ファイルを読み込まずに記憶しているものを再利用しているのです。

このため、style.cssを更新しても、ブラウザは自分が保存している情報を使ってしまい、更新内容が反映されないという状態になることがあります。

Google Chromeには、キャッシュ分も更新して再読み込みをする（スーパーリロード）ショートカットが用意されています。 * Mac：Command + Shift + R * Windows：CTRL + Shift + R

cssを上書きしたのに反映されない、という場合は、上記のショートカットを使ってリロードしてみてください。

WordPressでブログの記事ページを作る

いよいよ最後！ ブログの記事を読めるように、single.phpを作成しましょう。 file

新規ファイルを作成し、page-form.phpの中身を全て張り付けます。
「single.php」と名前をつけて保存してください。

mainタグのクラス、その下の画像（imgタグ）を削除します。
file

h2タグの中身を、投稿のタイトルを呼び出すWordPressタグ <?php the_title(); ?> に変更します。
タイトル部分もループ内に入れましょう。

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
          <?php the_content(); ?>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、ブラウザで投稿のページを見てみましょう。
投稿（ブログの記事）ページが表示されるようになっています。
file

ただ、タイトルとcontent（本文）以外にも、投稿の作成時には色々な設定をしましたよね。 アイキャッチ画像と、サイトを見ている人がわかりやすいようにカテゴリーとタグの表示ができるようにしましょう。
投稿に設定しているカテゴリーとタグは、下記のWordPressタグで呼び出せます。

投稿に設定されているカテゴリーを表示する

<?php the_category(); ?>

投稿に設定されているタグを表示する

 <?php the_tags(); ?>

single.php

<?php get_header(); ?>

  <main>
    <section>
        <?php while (have_posts()) : the_post(); ?>
          <h2><?php the_title(); ?></h2>
                    <?php the_post_thumbnail('full'); ?>
          <?php the_content(); ?>
          <p><?php the_category(); ?></p>
          <p><?php the_tags(); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、表示を見てみましょう。 file

投稿のアイキャッチが小さいですね。 カテゴリーは縦並び、タグは「タグ：」という文字付きの横並で、ちょっと違和感があります。

もう少し、統一感のある表示を目指して改良してみましょう。
こういう時は ()の中に、引数と呼ばれる指示を追加することで、出力する内容を調整することができます。
file

single.php（完成!）

<?php get_header(); ?>

  <main>
    <section>
      <?php while (have_posts()):the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_post_thumbnail('full'); ?>
        <?php the_content(); ?>
        <p>カテゴリー: <?php the_category(' / '); ?></p>
        <p><?php the_tags(); ?></p>
      <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

上書き保存して、表示ページを再読み込みしてみます。
少し見やすくなったのではないでしょうか。
file
それぞれをpタグやdivタグで囲い、この囲った要素にクラス名を付ければ、Style.cssでスタイル指定を追加することもできます。
このあたりはお好みに合わせて設定してみてください。

これで株式会社エドベースサイトのWordPress化は完成です。 お疲れさまでした。

まとめ

WordPressのテーマは、WordPressの機能を使ってサイトを作るためのファイル一式をまとめたもの。テーマの中には、ページを表示するためのテンプレート（php）ファイルが含まれており、WordPressはファイル名をみて「どのページを表示する時に使うか」を判定しています。 file

テンプレートファイルはテータベースの情報を取り出して表示します。
また、別のphpファイルを読み込むことも出来ます。重複する部分は１つのファイルとして作成して、色々なページから呼びだすことが可能です。

データベースの情報や、他のphpファイルの情報を書き出すためには、phpやWordPressで定義されているタグを使用します。

ループ（繰り返し）処理を行うことで、データベースから情報を取り出ます。一覧ページを表示することも可能ですし、single.phpやpage.phpなどもループの中でデータベースから情報を取り出して表示させています。
条件に当てはまる情報が１つしかなければ繰り返されません。

ループなどをより詳しく設定することで、様々なサイトの構築が可能になります。
WordPressはプラグインを追加することでも、便利な機能が手軽に追加できます。

今回はシンプルに、最低限のテーマを作成しました。
慣れてきたら、必要に応じて使える機能を増やしていきましょう！

まずは無料で7講座から始めましょう！

ハイクオリティな7講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
4月26日まで
募集 人数
100名 （残りわずか）

こちらもオススメ

WordPressのインストール

611 PV ｜ 2026.04.22

favorite_border

3ヶ月でプログラミングをマスターする具体的な方法（初心者向け）

1544 PV ｜ 2026.04.23

favorite_border

Windows10にRuby on Railsをインストール方法をやさしく解説

796 PV ｜ 2026.04.22

favorite_border
expand_less