SSブログ

WordPressによるサイト運営[7] [WordPress]

「投稿ページのテンプレート化」

 

single.phpによる投稿ページをテンプレート化することで、現在以下のような表示になっている投稿を、コメントを含めて全文が見られるようにする。

image

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の完成

image

参考資料


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。