WordPress オリジナルテーマを作ってみよう：⑤ index.php の作成

⑤では、index.php の仕組みを理解しつつ、header.php・sidebar.php・footer.php の読み込み方法と、main 部分のコードを記述していきます。

今回作成する index.php は、下図のような仕組みになっています。

header.php を読み込む

index.php の1行目に追記します。

<?php get_header(); ?>
<div class="main">
 main
</div>

sidebar.php を読み込む

<?php get_header(); ?> のあとに記述します。

<?php get_header(); ?>
<?php get_template_part('sidebar'); ?>
<div class="main">
 main
</div>

main 部分にコードを記述する

main を消して、ループ処理をするコードを記述します。

<div class="main">
 main
</div>

↓

<div class="main">
 <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
   <!-- ①処理を書く -->
  <?php endwhile; ?>
 <?php else : ?>
   <!-- ② ①で当てはまらなかったときの処理 -->
 <?php endif; ?>
</div>

いきなりこんなコードを書かれても意味不明だと思いますが・・・
何回か作っているうちになんとなくわかってきます。

私がそうだったので (;'∀')

簡単に説明をするとこんな感じでしょうか。

if 文 は条件分岐の際に使います。
もし〇〇なら△△ 、そうでないなら××　というように処理を分けます。

今後も使用するので、形を覚えておきましょう。

main 処理の部分にコードを書く

<!-- ①処理を書く --> を消して、下記を追記。
投稿があったらタイトルと本文を表示するようにします。

<div>
 <h2><?php the_title(); ?></h2>
 <?php the_excerpt(); ?>
</div>

さらに、記事へ飛ぶように<a>タグでリンクを張ります。

<div>
 <a href="<?php the_permalink() ?>">
 <h2><?php the_title(); ?></h2>
 <?php the_excerpt(); ?>
 </a>
</div>

<!-- ② ①で当てはまらなかったときの処理 --> を消して、下記を追記。
投稿がないときは「記事はみつかりませんでした」を表示する。

<p>記事は見つかりませんでした。</p>

ページングを追加する

<?php endif; ?> の後に追加する

<div>
 <?php the_posts_pagination(); ?>
</div>

footer.php を読み込む

一番最後の行に記述します。

<?php get_footer();

※ 最終行にあるPHPプログラムには、誤作動を防ぐため「?>」を記述しません。

プレビューで確認してみる

ヘッダー、サイドバー、フッターが読み込まれ、メインの部分では タイトルと記事が繰り返し読み込まれています。

まとめ

以上で、index.php の作成は終わりです。
うまく表示されない場合は、コードのミスがないか確認してください。

• ヘッダーの読み込み
• サイドバーの読み込み
• メインのループ
• フッターの読み込み

メインの部分がちょっと難しいかなと思いますが、コードはコピペで完璧にしてください。
最初はわからなくて当たり前なので、「作りはなんとなくこんな感じ」程度で理解していれば大丈夫です。

尚、次はCSSで見た目を整えていきます。