【ワードプレス】テーマの作り方①：まずは簡単なテーマを作ってページを表示する

このページにはプロモーションが含まれています

まずはゼロの状態から簡単なテーマを作ってみて、テーマをどのように作っていくか、どのようにテーマが動作してウェブページが作られていくのかを理解していきましょう！

テーマ開発の前準備については下のページで解説していますので、まだ開発するための環境が整っていない方は読んでみてください。

【ワードプレス】テーマの作り方⓪：テーマ作りの準備を行う

Contents

テーマを追加する
ページを表示する
まとめ

テーマを追加する

まずはテーマを作り、ワードプレスにテーマとして認識させてみましょう。

テーマフォルダを作成する

ワードプレスにテーマを認識させるために必要なのは、ワードプレスのテーマフォルダ以下にフォルダを作ることです。コレだけです。

ワードプレスのテーマフォルダとは下記のフォルダのことです。

wp-content/themes

フォルダ・ファイルのパスについて

このページではフォルダ・ファイルのパスを書いて説明していますが、全て、ワードプレスのインストールフォルダからの相対パスとして記述しています。

例えばワードプレスをインストールしているフォルダが「/Applications/MAMP/htdocs/」であれば、上記のテーマフォルダは「/Applications/MAMP/htdocs/wp-content/themes」となります。

このテーマフォルダにてきとうな名前のフォルダを作成してみましょう。例えばこのページでは「TestTheme」というフォルダにしたいと思います。

コレにより、ワードプレスが「TestThemeフォルダ」を「TestThemeという名前のテーマ」として認識してくれます。

ワードプレスのダッシュボードから「外観」→「テーマ」を選択し、インストール済みテーマの一覧を表示してみてください。一覧には載っていませんが、下の図のように表示され一応テーマとして認識されていることが確認できると思います。

ただし、壊れているテーマとして扱われてしまっています。

これは、テーマとして必要なファイルが足りていないためです。この状態だとテーマの有効化をすることができません。ここから必要なファイルを追加して有効化できるテーマとして成長させていきます。

style.css を作成する

上の画像に「スタイルシートが見つかりません。」と記載されている通り、有効化可能なテーマにするためにはスタイルシートが必要です。なので、追加したフォルダの中に style.css を設置します。まずは空のファイルで良いですが、名前は必ず style.css にしてください。

またテーマ一覧画面を表示してみましょう。まだ壊れているテーマとして認識されていますね…。

index.php を作成する

index.php が必要と表示されていますので、言われるままに index.php を追加しましょう。コレもまずは空のファイルで良いです。

コレにより追加したテーマがワードプレスのテーマ一覧に表示されるようになります。

style.css と index.php が空のファイルであっても有効化することが可能です。早速有効化してみましょう！この状態でページを表示してみると….

真っ白！！

そりゃそうです。ウェブページを生成する PHP に何も書いてませんから…。ただし、あなたが作成したテーマが有効化されたことは確認できました。

ここからウェブページがしっかり表示されるテーマにしていきます。

ここまでのまとめ

テーマフォルダにフォルダを作るだけで（壊れた）テーマとして認識される
作成したフォルダ内に style.css と index.php を置くだけでテーマとして有効化することができるようになる

ページを表示する

今度はPHPファイルを編集して、ページを表示できるようにしていきましょう！

ワードプレスでのページ表示の仕組み

まずはコンテンツ表示の仕組みについて解説したいと思います。

ワードプレスの仕組みを「構成」と「PHPの動き」から解説でも説明していますが、ユーザーがページ表示を要求すると、ワードプレスは下記のように動作し、ページ表示が行われます。

ワードプレスインストールフォルダの index.php が実行される
wp-blog-header.php が実行される
template-loader.phpが実行される
この中で、要求されたページの種類（トップページ・投稿・固定ページなど）に応じてテーマ内のPHPファイル（index.php・single.php・page.phpなど）が読み込まれる
読み込まれたPHPファイルが必要なデータ（コンテンツ）を取得してHTMLを作成する
作成したHTMLをユーザーのウェブブラウザに届ける

3. では、下の図のような感じに、表示を要求されたページの種類に応じてどのPHPファイルを読み込むかが template-loader.php により決定されます。

ただし、現状だと作成テーマに存在するのは index.php のみです。しかし、template-loader.php は投稿ページ表示時に single.php が存在しない場合や、固定ページ表示時に page.php が存在しない場合等は代わりに index.php を読み込むように作られています。

なので現状の index.php しかない状態でもテーマの作成・表示確認をすることが可能です。簡単のため、このページではまず index.php しかない状態でテーマ作成を進めます。

次は index.php を編集してページの表示を目指したいと思います。

index.php に HTML を記述

まずは index.php に下記の簡単なHTMLを書いてみて、動きを確かめてみます。

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>index.php</title>
    </head>
    <body>
        <p>コレは index.php です</p>
    </body>
</html>

この状態で、作成済みのページを表示してみてください。表示結果は下のようになると思います（ここではワードプレスをインストールと同時に作成されるサンプルページを表示しています）。

ページの表示

現状、ページへのリンク等が表示できない状態ですので、ページは直接URLをウェブブラウザに打ち込んで表示する、もしくはダッシュボードから投稿編集画面に移り、「投稿を表示」や「プレビュー」等から表示してください

一応中身のあるページが表示されていますね。

しかし、まずは分かりやすさを優先して HTML を index.php に直書きしているだけなので、全てのページで同じ表示になってしまっています。

次は index.php からそのページのコンテンツ（記事の内容）を読み込んでそれを表示することを目指します。

index.php に PHPを記述

ここからは index.php にPHPを記述し、ページごとに異なる表示が行えるようにします。

index.php を変更してタイトルとコンテンツを表示する

index.php を下記のように変更してみましょう。

index.php

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title><TestTheme></title>
	</head>
	<body>
		<?php
		if ( have_posts() ) {
			while ( have_posts() ) {
				the_post();
				the_title();
				the_content();
			}
		} else {
			printf( "表示する投稿はありません！\n" );
		}
		?>
	</body>
</html>

もう一度作成済みのページを表示してみてください。ここでは、先ほどと同様にサンプルページを表示してみます。表示結果は下のようになりました。