【WordPress自作テーマ】index.phpでトップページ表示をするところまで解説 #1
これはむかーしむかし、2021年のお話
ある男は言った
「超軽量なWordPressサイトを構築したい！」と。
とまあ、
今回はWordPressでテーマを自作する方法を説明していくわけなんですけども。
ここでは作ったテーマでトップページと記事ページを表示できるようにするところまでを解説していきます。
トップページはindex.phpで出力される
トップページを作っていきます。
テーマを作るときはまず
/{WordPressがインストールされたサーバーのルートディレクトリ}/wp-content/themes/
にテーマフォルダを作成する必要があります。
このフォルダにテーマのphpファイルやcss、javascript、その他のリソースを格納します。
今回はXserverのWeb FTPで作業を行って行きますが、それぞれのサーバーのFTPの使い方はここでは説明しないので各自調べてください。
机上の空論ブログで使うテーマなのでkijounokuronと命名します。
お好きな名前をつけてください。
そうしたら最初にindex.phpという名前でファイルを作成してください。
index.phpはWordPressではトップページを表示させるのに使われます。
この机上の空論サイトではblog.sumahotektek.comがトップページリンクなのでこのページの表示に使われることになります。
このテーマで使うCSSファイル、「style.css」を追加したら
これがWordPressテーマの最小構成です。
最低限この2つがあればテーマが動作します。
そうしたら管理画面の外観から今作ったkijounokuronを有効化しましょう！
これでまずはトップページが表示できるようになります。
とはいえ、index.phpに何も記述していないのでこのままでは何も表示されません
こんな感じで真っ白の画面が表示されます。
そして次にこのページがちゃんとブログのトップページとしての機能を果たすように
編集します。
とりあえず
<html>
<head>
</head>
<body>
<p>最小構成です。<p>
</body>
</html>
を入力してみましょう。
保存するときは必ず文字コードを「UTF-8」に設定しましょう
(そうしないと文字化けしたりエラーを起こす原因になります。)
そうするとindex.phpの内容がトップページに反映されます
次にこの状態では流石に寂しいので
ヘッダーとフッターを追加していきます。
header.php、footer.phpを記述して、headerとfooterを追加する
テーマにフッターとヘッダーのテンプレートを作成します。
ヘッダーのテンプレートは「header.php」、
フッターのテンプレートは「footer.php」です。
この名前にすると、PHPで
//ヘッダーの呼び出し
get_header();
//フッターの呼び出し
get_footer();
でこのテンプレートが使えるようになります。
先程のテンプレートフォルダに
header.phpとfooter.phpを追加します。
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>
に変更します。
記事データを表示しよう！メインループを作成
ヘッダーとフッターが表示されるようになってので次に
トップページであれば記事一覧、記事一覧のリンクから記事ページへ飛び記事ページを表示できるようにします。
まずは、トップページで記事一覧を表示します
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>
のように編集します。
こうして記事一覧ページが
表示されました。
といった感じで
have_posts();で記事があるかを調べて記事データがあるうちは
while文のループ内でthe_content();で記事を表示する形になります
こんな感じです。ちゃんと表示されているかと思います。
ということで、WordPressのテーマの最小構成ですね。
index.phpを作っていきました。
次回は404ページを作成します！