投稿画面と連動してくるとちょっとCMS（Contents Management System）使ってる感じになって来ますよね。
では早速、前回ご説明したindex.phpに投稿を表示させる機能を追加させることを今回のゴールにしましょう。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>
<!-- 投稿記事反映 -->
<div class="blog_contents">
<ul>
<li class="blog_title">投稿記事のタイトル１</li>
<li class="blog_title">投稿記事のタイトル２</li>
<li class="blog_title">投稿記事のタイトル３</li>
</ul>
</div>
<?php wp_footer(); ?>
</body>
</html>こんな感じでしょうか。とりあえず最低限記事タイトルを並べています。
お知らせ一覧か何かだと思っていただければ良いかと。
投稿内容を反映させるには記事が投稿されている場合は記事の内容を反映させる。という機能が必要になります。
ここでは基本的なWordPressのメインループを使いたいと思います。
<?php if(have_posts()): ?>
// もし投稿があって一度のみ何かをしたいときはココ
<?php while(have_posts()): the_post(); ?>
// 投稿内容を繰り返し処理・表示
<?php endwhile; ?>
// 投稿内容の繰り返し処理が終わって一度のみ何かをしたいときはココ
<?php else: ?>
// 投稿がなかったら何をするか
<?php endif; ?>いきなりプログラムっぽくなって来ました（笑）
とりあえず上記を入れ込んでいきましょう。
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<?php wp_head(); ?>
</head>
<body>
<h1>サイトのタイトル</h1>
<!-- 投稿記事反映 -->
<div class="blog_contents">
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li class="blog_title"><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
</div>
<?php wp_footer(); ?>
</body>
</html>このようになります。
投稿がある時にはリストで記事のタイトルを表示して投稿がない時には段落で投稿はありませんの表示を出します。
記事のタイトルは<?php the_title(); ?>というWordPressのタグを使用しています。
これで記事がある時には記事のタイトルが表示されるようになります。
簡単なものでしたらこれで完結しますが、こうなると記事の個別ページを見たいとか、トップページには３件だけ表示して一覧ページを作りたいとか、クライアント様の要望は尽きませんよね。
そういった部分も叶えていくためにはもっと知っておく事があるかと思いますので、その辺りもご説明していきたいと思います。
