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

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

by 吉田光利

｜ 3 PV ｜ 2025.07.21

favorite_border

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

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

この２つがWordPressのデータベースに送っているリクエストです。 どちらもindex.phpで表示させていますが、リクエストに応じて表示内容を変えていることが分かりますね。

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や画像を読み込まないかというと、パスが違うから。 今の書き方では、同じ階層にあるstyle.cssを読み込むように指示しています。 file

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

WordPressでは「テーマフォルダの場所」を出力するタグが用意されています。 file

style.cssへのリンクに使ってみましょう WordPressタグの後にスラッシュが必要なので、注意してください。 <link rel="stylesheet" href="<?php echo get_template_directory_uri()?>/style.css"> file

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でデザインの異なる固定ページを作成する

会社概要とお問い合わせ、この２ページは固定ページを使って作ります。 file

会社概要とお問い合わせは、デザインが違いますよね。 固定ページはpage.phpを使って表示されると紹介しましたが、page.phpという１つのファイルでどちらのデザインも再現するのは大変です。 file そこで、WordPressでは、固定ページに応じて別のテンプレート（phpファイル）で表示させることができる仕組みも用意されています。 page-スラッグ.phpというファイル名を付けると、「スラッグ」の部分が一致する固定ページに割り当てられます。

スラッグというのは、URL（パーマリンク）の末尾の部分のこと。 スラッグの設定と合わせて、固定ページ部分の作成方法を見ていきましょう。

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

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

タイトル部分に「会社概要」と入力してください。 右側のメニューから、パーマリンクの項目をクリック。 file

URLスラッグを入力します。 会社概要のページなので「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

WordPressの管理画面に戻ります。 先程作った、会社概要のページを表示してみましょう。 file

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

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

お問い合わせページの作り方も、基本的には会社概要と同じです。

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

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

WordPressは「プラグイン」を追加することで、機能を拡張することが出来ます。プラグインを追加することで、今回の目的であるフォーム機能を付けるなど、WordPress本体にはない機能も使えるようになるのです。

プラグインを追加してみましょう。 WordPress管理画面、プラグインの新規追加を開きます。 file

右上に表示されている検索窓に「Contact form」と入力。 file

Contact form 7というプラグインが表示されます。 今すぐインストールをクリックしてください。 file インストールが完了すると、ボタンが「有効化」に変わります。 有効化をクリックしてください。 file

有効化が完了すると、左メニューに「お問い合わせ」という項目が増えています。 クリックしてみましょう。 file

新規追加をクリックするとフォーム作成画面が開きます。 file file

わかりやすいように、タイトルは「お問い合わせ」とでもしておきましょう。 デザイン上、メールアドレスと題名は不要のようなので削除します。 氏名→名前、メッセージ本文 (任意)→内容に打ち替えます。 file

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

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

ウィンドウが開くので、オプション欄に「男」「女」と入力。 file 右下にあるタグを挿入ボタンをクリックすると、コードが挿入されます。 file

ラジオボタンのみでは分かりにくいので「性別：」を追加しておきましょう。 file

右上に表示されている保存ボタンをクリック。 保存が完了すると、下図のようにショートコードが表示されます。 file 次の固定ページを作成時に、このショートコードを貼り付けます。 コピーしておいてください。

2.固定ページを作る

お問い合わせページを表示するために、固定ページを新規追加します。 タイトルを「お問い合わせ」と入力。 本文部分に、さきほどコピーしたショートコードを貼り付けます。 file

URLスラッグを「form」に変更し、公開します。 file

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

固定ページ（お問い合わせページ）を表示させるテンプレートファイルを作ります。

form.htmlをエディタで開き、名前をつけて保存を選択。 「page-form.php」という名前で保存してください。 file

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

固定ページを作成した時、本文部分にContact form 7で作ったフォームを表示するのショートコードを挿入しました。 お問い合わせページでプラグインのフォームを表示するために、直打ちしているフォーム部分を固定ページの本文と置き換える必要があります。 file

エディターを使って設定した本文を表示させるために、下記のコードを挿入します。 <?php while (have_posts()) : the_post(); ?> <?php the_content(); ?> <?php endwhile; ?>

page-form.phpの<form> ~ </form>タグまでを削除し、上記のコードを貼り付けてみてください。 file

貼り付けたコードで指示していることは、下図の内容です。 「while (haveposts()) : thepost();」はWordPress特有の書き方です。厳密に意味を捉えようとすると非常に難しいので、大体の意味が分かれば大丈夫。 WordPressでよく使う定型文の１つ、と思っても問題ないです。 file

ともあれ、page-form.phpを上書き保存して、お問い合わせページを見てみましょう。プラグインを使って作ったフォームが表示されているはずです。 file

ちなみに、このフォームはローカル環境だとうまく動きません。メールを送ろうとするとエラーになったり、作ってしばらくするとエラー表示が出ていたりします。 これは、ローカル環境でメールサーバーの用意ができていないためです。

Local by Flywheelだと簡単にメールテストも出来るようになります。試してみたい方は、下記サイトを参考に設定してみてください。

外部リンク

【WordPress】ローカル環境でお問い合わせフォームの送信テストをする方法

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

ここまでで、htmlで作成した３ページがWordPressでも表示されるようになりました。それぞれのページへのリンクを作り直したいところですが、このあとブログのページも作ります。 毎回全ファイルを開いて、リンクを修正したり追加したりは、面倒ですよね。

実は、WordPress化すると「共通部分を使い回せる」ようになります。 データベースにある情報を書き出すだけではなく、phpファイル内で、別のphpファイルの中身を書き出すことも出来るのです。 file WordPressのページは、色々なテンプレートファイルとデータベースの情報を１枚にまとめたものと言えますね。 file

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

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

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

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

新規ファイルを作成します。 front-page.phpの</header>タグまでをカット＆ペースト。 file

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

ヘッダー部分をカットしたfront-page.phpには、一行目に「header.phpを出力せよ」というWordPressのタグを挿入します。 <?php get_header(); ?>

file 上図のようになったら、front-page.phpを上書き保存。 ブラウザでサイトのトップページを確認してみましょう。 file 今まで通り表示されていれば、うまく出来ています。

page-company.php と page-form.phpも<?php get_header(); ?> に置き換えます。 file

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

header.phpを編集する

header.phpを共通化しました。 今のままだと、ページのタイトルやmeta descriptionも一緒になってしまいまいます。 file

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

ページのタイトルを書き出してくれるように、以下３つのWordPressタグを使います。 <?php echo get_the_title(); ?> <?php bloginfo('title'); ?> <?php bloginfo('description'); ?> file file file

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

header.php

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

実際に出力されるページには、赤い文字が入ります。 file

サイトのトップページ（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 echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_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>
～以下略～

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

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

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

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

functions.php

```php <?php addthemesupport('menus'); registernavmenus( );

?> ``` 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 echo get_the_title(); ?>｜<?php bloginfo('title'); ?></title>
  <meta name="description" content="<?php echo get_the_title(); ?>｜EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
  <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

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 wpfooter(); ?>というタグを挿入します。 このタグもheader.phpに挿入した`<?php wphead(); ?>`と同じく、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 ですので、それぞれの欄に入れられるように、固定ページを追加しましょう！

固定ページの新規追加画面を開きます。 タイトルを「ブログ」 URLスラッグに「blog」 と入力して、公開してください。 file

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

管理画面左メニューの設定 > 表示設定を開いてください。 ホームページの表示を、下図のように変更します。 file

ページ下部にある「変更を保存」ボタンで保存してください。

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

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

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

必要に応じて並び替えて、メニューを保存します。 file

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

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

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

今の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(); ?>。 投稿の本文部分を出力せよ、です。 ここを変更すれば、記事一覧を作れそうですね。

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

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

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

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

functions.php（完成!）

``` <?php addthemesupport('menus'); registernavmenus( );

addthemesupport('post-thumbnails'); setpostthumbnail_size(200, 200 ); ?> ```

上書き保存。 投稿エディタを開き直すと、アイキャッチの項目が表示されます。 file

ループを書く

index.phpで表示させたいのは、記事の一覧。

<?php while ~~> から</endwhile;?>までの繰り返しを「ループ処理」と呼び、このタグに挟まれた部分を「ループ内」などと言い表します。 アイキャッチ画像+投稿タイトルが表示されるように、ループ内を書き換えましょう。

使用する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

うーん…。 あと一歩、というところですね。

記事１つ１つをsectionタグで囲いたいので、ループ内のHTML部分を少し作り込んでみましょう。 file

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

index.php（完成!）

``` <?php get_header(); ?>

エドベースブログ

<?php while (haveposts()) : thepost(); ?>
<?php thepostthumbnail( ); ?>

style.css ```css .section{ display: flex; }

.image{ flex: 1; }

.desc{ flex: 3; } ```

スマホ幅では縦並びになるようにしましょう。 file

もう一度、ブラウザで表示を確認します。 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

サイトを見ている人がわかりやすいように、カテゴリーとタグも表示しましょう。投稿に設定しているカテゴリーとタグは、下記の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_content(); ?>
          <p><?php the_category( ); ?></p>
          <p><?php the_tags( ); ?></p>
        <?php endwhile; ?>
    </section>
  </main>

<?php get_footer(); ?>

保存して、表示を見てみましょう。 file カテゴリーは縦並び、タグは「タグ：」という文字付きの横並び。 ちょっと変ですね。

カテゴリーもタグと同じように表示させてみます。 file file

single.php（完成!）

<?php get_header(); ?>

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

<?php get_footer(); ?>

上書き保存して、表示ページを再読み込み。 たいぶ分かりやすくなりましたね。 file

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

まとめ

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

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

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

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

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

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

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

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

こちらもオススメ

expand_less
ブログ記事を探す

検索

カテゴリーから探す