【WordPress自作テーマ】index.phpでトップページ表示をするところまで解説 #1

【WordPress自作テーマ】index.phpでトップページ表示をするところまで解説 #1

これはむかーしむかし、2021年のお話
ある男は言った

「超軽量なWordPressサイトを構築したい!」と。

とまあ、
今回はWordPressでテーマを自作する方法を説明していくわけなんですけども。

ここでは作ったテーマでトップページと記事ページを表示できるようにするところまでを解説していきます。

トップページはindex.phpで出力される

トップページを作っていきます。
テーマを作るときはまず

/{WordPressがインストールされたサーバーのルートディレクトリ}/wp-content/themes/

にテーマフォルダを作成する必要があります。

このフォルダにテーマのphpファイルやcss、javascript、その他のリソースを格納します。

今回はXserverのWeb FTPで作業を行って行きますが、それぞれのサーバーのFTPの使い方はここでは説明しないので各自調べてください。

WordPress自作テーマ作成-ファイル階層

机上の空論ブログで使うテーマなのでkijounokuronと命名します。
お好きな名前をつけてください。

そうしたら最初にindex.phpという名前でファイルを作成してください。
index.phpはWordPressではトップページを表示させるのに使われます。

この机上の空論サイトではblog.sumahotektek.comがトップページリンクなのでこのページの表示に使われることになります。

WordPress自作テーマ-index.phpを作成

このテーマで使うCSSファイル、「style.css」を追加したら
これがWordPressテーマの最小構成です。
最低限この2つがあればテーマが動作します。

そうしたら管理画面の外観から今作ったkijounokuronを有効化しましょう!

WordPress自作テーマーテーマ有効化

これでまずはトップページが表示できるようになります。

とはいえ、index.phpに何も記述していないのでこのままでは何も表示されません

WordPress自作テーマ-index.phpを表示してみる

こんな感じで真っ白の画面が表示されます。

そして次にこのページがちゃんとブログのトップページとしての機能を果たすように

編集します。

とりあえず

<html>
    <head>
    </head>
    <body>
        <p>最小構成です。<p>
    </body>
</html>

を入力してみましょう。
保存するときは必ず文字コードを「UTF-8」に設定しましょう
(そうしないと文字化けしたりエラーを起こす原因になります。)

WordPress自作テーマ-最小構成のindex.php

そうするとindex.phpの内容がトップページに反映されます

WordPress自作テーマ-index.phpの表示

次にこの状態では流石に寂しいので
ヘッダーとフッターを追加していきます。

header.php、footer.phpを記述して、headerとfooterを追加する

テーマにフッターとヘッダーのテンプレートを作成します。
ヘッダーのテンプレートは「header.php」、
フッターのテンプレートは「footer.php」です。
この名前にすると、PHPで

//ヘッダーの呼び出し
get_header();
//フッターの呼び出し
get_footer();

でこのテンプレートが使えるようになります。

先程のテンプレートフォルダに

header.phpとfooter.phpを追加します。

WordPress自作テーマ-footerとheaderの表示

header.phpにはヘッダーを出力するようにコードを記述します。
好きなデザインのヘッダーを作ってください。今回は簡単に

<header style=”display:flex;height:60px;background:gray;”>
ここはヘッダー
</header>
同じくfooter.phpには
<footer style=”display:flex;height:60px;background:gray;”>
ここはフッター
</footer>
と記述します。
そしてindex.phpではそれぞれ今作ったヘッダーとフッターを表示できるように
<html>
    <head>
    </head>
    <body>
        <?get_header()?>
        <p>最小構成です。<p>
         <?get_footer()?>
    </body>
</html>

に変更します。

WordPress自作テーマ-ヘッダーとフッターをテスト表示

記事データを表示しよう!メインループを作成

ヘッダーとフッターが表示されるようになってので次に
トップページであれば記事一覧、記事一覧のリンクから記事ページへ飛び記事ページを表示できるようにします。
まずは、トップページで記事一覧を表示します
index.phpを

<html>
    <head>
    </head>
    <body>
        <?get_header()?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <article class="entry">
                <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-body">
                  <?php the_content(); ?>
                </div>
              </article>
              <?php endwhile; endif; ?>
         <?get_footer()?>
    </body>
</html>

のように編集します。

こうして記事一覧ページが

WordPress自作テーマ-記事を表示-ホームページ

表示されました。
といった感じで
have_posts();で記事があるかを調べて記事データがあるうちは
while文のループ内でthe_content();で記事を表示する形になります

WordPress自作テーマ-個別ページの表示

こんな感じです。ちゃんと表示されているかと思います。
ということで、WordPressのテーマの最小構成ですね。
index.phpを作っていきました。
次回は404ページを作成します!

テーマ

現在使用中テーマは最新版

v.1.0v.2.0v.3.0v.3.1v.3.2v.3.3v.3.4v.3.5v.3.6v.3.7v.3.8v.shaneron選択しない(安定版)