カテゴリーページの雛型 -アイキャッチ画像やMoreタグなど- : WordPress

Tweet

Pocket

アイキャッチ画像とmoreタグを組み合わせたカテゴリーページの雛型の覚書。

前提

• 投稿画面でアイキャッチ画像^[1]を設定 ⇒ カテゴリーページに表示、未設定 ⇒ 非表示
• 投稿画面でmoreタグを挿入 ⇒ moreタグの前までを表示、未挿入 ⇒ 全文を表示^[2]
• 投稿画面でmoreタグを挿入 ⇒ 単一記事へのリンク(例:詳細はこちら)を表示、未挿入 ⇒ 単一記事へのリンクを非表示
• 投稿画面でmoreタグを挿入 ⇒ 記事見出し(例:h2タグ)に単一記事へのリンクを設定, 未挿入 ⇒ 単一記事へのリンクを設定しない

アイキャッチ画像には画像のアップロードに関するまとめ : WordPressに記載している。
moreタグについては「続きを読む」のカスタマイズ – WordPress Codex 日本語版に説明がある。

category.php

<?php
 * アイキャッチ付きアーカイブページの雛型
 * ■ 詳細ページへのリンク処理
 * Moreタグ
 * 有 - Moreタグの前までを表示
 *    - リンク「詳細はこちら」のリンクを表示
 *    - 見出し(h2)にパーマリンクを設定
 * 無 - 全文を表示
 *    - リンク「詳細はこちら」のリンクは非表示
 *    - 見出し(h2)にパーマリンクを設定しない。
 * ■ アイキャッチ(サムネイル)画像
 * 有 - アイキャッチを表示
 * 無 - 表示しない。
?>
<?php if(have_posts()):while(have_posts()):the_post() ?>
<div class="post">
        <?php if (false !== strpos($post->post_content, '<!--more')) : ?>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php else : ?>
            <h2><?php the_title(); ?></h2>
        <?php endif; ?>
        <?php if (has_post_thumbnail()) : ?>
            <p><?php the_post_thumbnail(); ?></p>
        <?php endif; ?>
        <p><?php the_content('詳細はこちら'); ?></p>
</div><!-- /post -->
<?php endwhile;endif; ?>

moreタグの挿入を判別するコードは下記の記事を参考にした。
» the_excerpt で抜粋有無・本文長短・moreタグを考慮して「続きを読む」を付ける  |  wpxtreme

アイキャッチ画像の設定を判別するhas_post_thumbnail関数があることを知った。
» テンプレートタグ/has post thumbnail – WordPress Codex 日本語版

[1] いわゆるサムネイル。
[2] WordPressの抜粋は投稿画面のmoreタグとthe_contentタグで実現する他にも専用のthe_excerptタグを使う方法もある。the_excerptではHTMLタグと画像は取り除かれる。
» 「続きを読む」のカスタマイズ – WordPress Codex 日本語版
» テンプレートタグ/the excerpt – WordPress Codex 日本語版