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

ワードプレステーマの作り方①のアイキャッチ

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

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

ワードプレスでのテーマ開発0アイキャッチ【ワードプレス】テーマの作り方⓪:テーマ作りの準備を行う

テーマを追加する

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

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

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

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

wp-content/themes
フォルダ・ファイルのパスについて

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

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

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

テーマフォルダの作成

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

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

壊れているテーマの表示1

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

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

style.css を作成する

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

作成テーマフォルダへのstyle.cssの追加

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

壊れているテーマの表示2

index.php を作成する

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

作成テーマフォルダへのindex.phpの追加

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

作成したテーマがテーマ一覧に表示される様子

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

index.phpが空なので画面が真っ白

真っ白!!

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

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

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

ページを表示する

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

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

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

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

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

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

ワードプレスでページの種類ごとにPHPが振り分けられる様子

ただし、現状だと作成テーマに存在するのは index.php のみです。しかし、template-loader.php は 投稿ページ表示時に single.php が存在しない場合や、固定ページ表示時に page.php が存在しない場合等は代わりに index.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>

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

ndex.phpに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>

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

PHPからタイトルとコンテンツを読み込んだ時の表示例1

注目していただきたいのが、サンプルページのタイトルコンテンツ(本文)が表示されているところです。他のページも表示してみましょう。今度は私が簡単に作ってみたページです。

PHPからタイトルとコンテンツを読み込んだ時の表示例2

違うページを表示すると、タイトルやコンテンツも変わっていることが確認できると思います。今度は画像も表示されますね!

つまり、上記の index.php が表示しようとしているページのタイトルやコンテンツを取得してくれているのです(さらにはそのデータからHTMLを作成してくれている)。コレだけでブログの表示機能としては十分動作してくれていることが確認できると思います。

使用した関数の解説

簡単に説明すると下記のようになります。

  • have_posts関数:要求されたURLに対応する投稿が存在するかどうかを確認する関数
  • the_post関数:次の投稿を取得
  • the_title関数:取得中の投稿のタイトルを出力
  • the_content関数:取得中の投稿のコンテンツ(記事本文)を出力

have_posts と the_post のループが実際どういうことをやっているのかは下のページにまとめていますので、このループの動きについて知りたい方は是非読んでみてください。

have_posts・the_postループ解説のアイキャッチワードプレスの「have_posts・the_post ループ(メインループ)」について徹底的に解説

スポンサーリンク

まとめ

このページではテーマを作成し、ページが表示されるまでの方法・手順を解説してきました。

ワードプレスのテーマフォルダにフォルダを作成するだけでテーマとして認識されます。ただしフォルダの中身が空だと壊れたテーマとして認識されます。フォルダ内に style.css と index.php を追加すれば、有効化することが可能なテーマになります。

さらにその index.php を変更することでページが表示されるようになり、ワードプレスの関数を実行することでページのタイトルやコンテンツを表示することが可能になります。

次回のテーマの作り方ではページにヘッダー・フッター・サイドバーを表示する方法について解説します。

ワードプレステーマの作り方②のアイキャッチ【ワードプレス】テーマの作り方②:ヘッダー・フッター・サイドバーを追加する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.325 秒です