WordPressによるサイト運営[7] [WordPress]
「投稿ページのテンプレート化」
single.phpによる投稿ページをテンプレート化することで、現在以下のような表示になっている投稿を、コメントを含めて全文が見られるようにする。
1.タイトルや公開日などをテンプレートタグにする
①ループを設置
投稿を表示しているarticleタグをループで括る。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="hentry">
<header class="entry-header">
<h1 class="entry-title">「谷川俊太郎の庭」展</h1>中略
</div><!-- #respond -->
<!--/* ▼ #comments 終了 */-->
</section>
<!--/* ### comments.php 終了 ### */-->
<?php endwhile; endif; ?>
②post_classタグ
post_classテンプレートタグでCSSで投稿の表示ができるようにする。
<article <?php post_class(); ?>>
③タイトル、投稿日、投稿者をテンプレートタグで置き換える
the_title, the_time, the_author を使う。
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1><div class="entry-meta">
<span class="sep">投稿日:<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<time class="entry-date" datetime="<?php the_time( 'Y-m-d' ); ?>" pubdate="<?php the_time( 'Y-m-d' ); ?>">
<?php the_time( get_option( 'date_format' ) ); ?>
</time>
</a></span>
<span class="author vcard">投稿者:<a title="<?php the_author(); ?>" href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" class="url fn n">
<?php the_author(); ?>
</a></span>
</div>
</header>
2.全文を表示
the_contentを使い全文を表示する。
<section class="entry-content">
<?php the_content(); ?>
</section>
3.カテゴリー、タグの表示をテンプレート化
投稿が属するカテゴリー、タグの表示をテンプレートタグに置き換える。
<footer class="page-footer">
<div class="entry-meta">
<span class="cat-links">カテゴリー:<?php the_category( ', ' ); ?></span>
<span class="tag-links"><?php the_tags( 'タグ:' ); ?></span>
</div>
</footer>
4.複数ページ構成に対するページリンクの設置
wp_link_pagesテンプレートタグで分割されたページ間を移動するページナビゲーションを表示する。
<?php wp_link_pages( 'before=<nav class="pages-link">&after=</nav>&link_before=<span>&link_after=</span>' ); ?>
5.前後記事へのリンクを表示
previous_post_link, next_post_linkテンプレートタグで表示中の記事の前後記事へのリンクを表示する。
<nav class="navigation" id="nav-below">
<ul>
<?php previous_post_link( '<li class="nav-previous">%link</li>', '%title', true ); ?>
<?php next_post_link( '<li class="nav-next">%link</li>', '%title', true ); ?>
</ul>
</nav>
6.コメント表示をモジュールテンプレート(comments.php)として切り出す
①コメント表示部分を置き換える
記事に対するコメントの表示部分をモジュールテンプレートファイルcomments.phpとしcomments_templateテンプレートタグで呼び出す。
<?php comments_template( null, true ); ?>
②パスワード保護された投稿への対応
投稿がパスワード保護されている場合、表示しないようにpost_password_requiredのパスわーワード保護有無の判定結果により分岐処理を行う。
<section id="comments">
<!--/* ▲ #comments 開始 */-->
<?php if ( post_password_required() ) : ?>
<p class="nopassword">このページはパスワード認証が必要です。パスワードを入力してご覧ください。</p>
</section><!-- #comments -->
<?php
return;
endif;?>
③コメントがない場合は非表示
have_commentsでコメントの有無を判別し分岐処理を行う。
<?php if ( have_comments() ) : ?>
中略
<?php endif; ?>
④コメントの件数を表示
get_comments_numberテンプレートタグでコメント数を取得する。
<h1 id="comments-title">"<em><?php the_title(); ?></em>" に<?php echo number_format_i18n( get_comments_number() ); ?>件のコメント</h1>
⑤複数ページになる場合のナビゲーションを設定
previous_comments_link, next_comments_linkテンプレートタグで「古い」コメントページと「新しい」コメントページのリンクを表示する。
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
<nav class="navigation">
<ul>
<li class="nav-previous"><?php previous_comments_link( '古いコメント' ); ?></li>
<li class="nav-next"><?php next_comments_link( '新しいコメント ' ); ?></li>
</ul>
</nav><!-- .navigation -->
<?php endif; ?>
⑥コメントを表示
wp_list_commentsテンプレートタグでコメントを表示する。
<ol class="commentlist">
<?php wp_list_comments( array( 'callback' => 'miraggio_comment' ) ); ?>
</ol>
⑦コメント入力フォームの表示
comment_formテンプレートタグで状況に応じたコメントフォームを表示させる。
<?php comment_form(); ?>
⑧comments.phpの完成
参考資料