if文と出力したい処理の内容を組み合わせる
①テンプレート
index.php
<?php
if ( have_posts() ) :
①投稿データがあるかの条件分岐。
while ( have_posts() ) :
②繰り返し処理開始
the_post();
③ループ処理に必要なカウント処理等
4.「ここに出力したい処理などを記述」
①の箇所に取得でした情報を出力する処理を記述
endwhile;
⑤繰り返し処理ここまで。
else :
⑥投稿データがなければ
?><p>表示する記事がありません</p><?php
⑦ない時の処理
endif; ?>
⑧条件分岐終了
?>
②処理したい内容
index.php
<div id="post class="post">
<h2 class="post__ttl"><a href="single.html">記事タイトル</a></h2>
<ul class="post__meta">
<li class="post__meta__item">
<date class="post__meta__date">2023.6.10</date>
</li>
<li class="post__meta__item"><i class="fa fa-folder" aria-hidden="true">
<a class="post__meta__link" href="#">カテゴリ名</a></i></li>
<li class="post__meta__item">
<i class="fa fa-tag" aria-hidden="true">
<a class="post__meta__link" href="#">タグ名</a></i></li>
</ul>
<img class="post__eyecatch" src="images/eyecatch/001.png" alt="アイキャッチ">
<p>本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。</p>
<a class="post__morelink" href="single.html">続きを読む</a>
</div>
ループ処理内部に入れる
index.php＋index.php
index.php
<?php
if ( have_posts() ) :
①投稿データがあるかの条件分岐。
while ( have_posts() ) :
②繰り返し処理開始
the_post();
③ループ処理に必要なカウント処理等
4.「ここに出力したい処理などを記述」
<div id="post class="post">
<h2 class="post__ttl"><a href="single.html">記事タイトル</a></h2>
<ul class="post__meta">
<li class="post__meta__item">
<date class="post__meta__date">2023.6.10</date>
</li>
<li class="post__meta__item"><i class="fa fa-folder" aria-hidden="true">
<a class="post__meta__link" href="#">カテゴリ名</a></i></li>
<li class="post__meta__item">
<i class="fa fa-tag" aria-hidden="true">
<a class="post__meta__link" href="#">タグ名</a></i></li>
</ul>
<img class="post__eyecatch" src="images/eyecatch/001.png" alt="アイキャッチ">
<p>本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。</p>
<a class="post__morelink" href="single.html">続きを読む</a>
</div>
endwhile;
⑤繰り返し処理ここまで。
else :
⑥投稿データがなければ
?><p>表示する記事がありません</p><?php
⑦ない時の処理
endif; ?>
⑧条件分岐終了
?>
さらに、テンプレートタグを当てはめる
---------使用したテンプレートタグ--------------------------
■投稿に対するIDを取得
the_ID
ループの中でのみ利用可
WordPressの場合投稿ごとにIDが発行される
特定の記事に処理を入れたい場合などに利用できる
■ページごとにclassを付与
post_class
WordPressページによって自動的にclassを付与される
生成するページによって付与されるクラスが変わるので、
ページによってスタイルを変えたり
JavaScriptで制御を変えたりする場合に利用できる
■ 投稿のパーマリンクを取得
the_permalink
ループの中でのみ利用可
パーマリンク＝WordPressが吐き出すURL
※URLの構造は管理画面から変更可…管理画面＞設定＞パーマリンク設定
サイトの運用開始後変更すると、変更前のリンクが使えなくなってしまう
∴最初に設定する必要がある
■投稿のタイトルを取得
the_title
ループの中でのみ利用可
■現在の投稿が書かれた日付を取得（今回は①get_the_date を使用）
※日付のフォーマットは管理画面から変更可…設定 ＞ 一般 ＞日付のフォーマット
①get_the_date
出力機能なし。出力する場合は echo が必要
全投稿で投稿日を出力する場合などに向いている
②the_date
出力機能あり
同じ日に書かれた投稿がある場合、最初の投稿に対してしか出力が行なえない
投稿日のアーカイブを作るなどに向いている
■現在の投稿が所属するカテゴリリンクを取得し表示
the_category
ループの中でのみ利用可
デフォルトだと ul タグを利用したフォーマットに沿って出力
(‘, ‘)とすると、フォーマットなしの状態で出力。
■投稿に紐付いているアイキャッチ画像を取得し、表示
the_post_thumbnail
ループの中でのみ利用可
■投稿の本文を取得して表示
the_content
ループの中でのみ利用可
①index.php のようなアーカイブページであれば、
「続きを読む」タグで挿入した more タグまでの文章を表示し
( ‘続きを読む’ ) で指定したリンクテキストを出力
②投稿を表示する single.php などであれば全文が表示
index.php
<?php
<?php
if( have_posts() ) :
if ( have_posts() ) : ①投稿データがあるかの条件分岐。
while( have_posts() ) :
while ( have_posts() ) : ②繰り返し処理開始
the_post(); ?>
the_post(); ③ループ処理に必要なカウント処理等
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
自動的にclassを付与 投稿に対するIDを取得
<div id="post class="post">
<h2 class="post__ttl"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
投稿のパーマリンクURLを取得 投稿のタイトルを取得
<h2 class="post__ttl"><a href="single.html">記事タイトル </a>
</h2>
</h2>
<ul class="post__meta">
<ul class="post__meta">
<li class="post__meta__item">
<li class="post__meta__item">
<date class="post__meta__date"><?php echo get_the_date(); ?></date>
現在の投稿が書かれた日付を取得
<date class="post__meta__date">2023.6.10</date>
</li>
</li>
<li class="post__meta__item"><i class="fa fa-folder" aria-hidden="true">
<li class="post__meta__item"><i class="fa fa-folder" aria-hidden="true">
<?php the_category( ', ' ); ?></i></li>
現在の投稿が所属するカテゴリリンクを取得し表示
<a class="post__meta__link" href="#">カテゴリ名</a></i></li>
<li class="post__meta__item">
<li class="post__meta__item">
<i class="fa fa-tag" aria-hidden="true">
<i class="fa fa-tag" aria-hidden="true">
<?php the_tags( '' ); ?></i></li>
現在の投稿が所属するタグリンクを取得して表示
<a class="post__meta__link" href="#">タグ名</a></i></li>
</ul>
</ul>
<?php the_post_thumbnail(); ?>
投稿に紐付いているアイキャッチ画像を取得
<img class="post__eyecatch" src="images/eyecatch/001.png" alt="アイキャッチ">
<?php the_content( '続きを読む' ); ?>
・投稿の本文を取得して表示
・「続きを読む」タグで挿入した more タグまでの文章を表示し
( ‘続きを読む’ ) で指定したリンクテキストを出力
<p>本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。本文の抜粋が入ります。 本文の抜粋が入ります。本文の抜粋が入ります。</p>
<a class="post__morelink" href="single.html">続きを読む</a>
</div>
</div>
<?php endwhile;
endwhile; ⑤繰り返し処理ここまで。
else :
else : ⑥投稿データがなければ
?><p>表示する記事がありません</p><?php
?><p>表示する記事がありません</p><?php ⑦ない時の処理
endif;
endif; ⑧条件分岐終了
?>
?>