オリジナルのtheme(テーマ)を作る10:記事の個別ページ用のテンプレートタグ

記事それぞれの個別のページもindex.phpから生成されるので
index.phpに記事の個別ページ用のテンプレートタグを追加します。

個別ページのタイトルを出力

  1. <?php wp_title(); ?>

投稿した記事のタイトルが個別ページのタイトルになります。
head内のtitleタグに書きます。
※titleに記述した個別ページのタイトル用のテンプレートタグは、トップページには出力されません。

  1. <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

このように書くと、記事の個別ページのタイトルが下の画像のように表示されます。
タイトルタグ
<?php wp_title(); ?>を入れると、「»」が勝手に入ります。。

個人的には・・「個別ページのタイトル | サイト名」という表示にしたいのでパラメーターを指定します。

  1. <title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>

記事の個別ページにも前へ次へのpagerを出力

  1. <?php if(is_single()): ?>
  2. <nav>
  3. <ul class="pager">
  4. <li class="previous"><?php next_post_link(); ?></li>
  5. <li class="next"><?php previous_post_link(); ?></li>
  6. </ul>
  7. <!--//pager -->
  8. </nav>
  9. <!--//nav -->
  10. <?php endif; ?>
  1. <?php if(is_single()): ?><?php endif; ?>

個別ページだけに出力したいものをこの中に書きます。
※トップページには出力されません。

  1. <?php if(is_single()): ?>
  2. <nav>
  3. <ul class="pager">
  4. <li class="previous"><?php previous_post_link('%link'); ?></li>
  5. <li class="next"><?php next_post_link('%link'); ?></li>
  6. </ul>
  7. <!--//pager -->
  8. </nav>
  9. <!--//nav -->
  10. <?php endif; ?>

トップページ用に入れたものにそっくりですが、よーく見ると微妙な違いがあるので注意!
prev・nextを逆にしたのは、記事の順番の兼ね合いからです(~_~;)

パラメーター%link
「» «」が表示されていて邪魔だったのでリンクだけ。

01-10までのおさらい。

  1. <main id="main" role="main">
  2. <div class="container">
  3. <section>
  4. <div class="row">
  5. <div class="col-xs-12">
  6. <?php if(have_posts()): while(have_posts()): the_post(); ?>
  7. <article>
  8. <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  9. <time><?php the_date('Y/m/d (D)'); ?><?php the_time(); ?></time>
  10. <div class="well well-lg">
  11. <div class="categorybtn">
  12. <?php the_category(); ?>
  13. </div>
  14. <!--//categorybtn -->
  15. <?php the_content(); ?>
  16. </div>
  17. <!--//well well-lg -->
  18. </article>
  19. <!--//article -->
  20. <?php if(is_single()): ?>
  21. <nav>
  22. <ul class="pager">
  23. <li class="previous"><?php previous_post_link('%link'); ?></li>
  24. <li class="next"><?php next_post_link('%link'); ?></li>
  25. </ul>
  26. <!--//pager -->
  27. </nav>
  28. <!--//nav -->
  29. <?php endif; ?>
  30. <?php endwhile; endif; ?>
  31. <?php if(is_home()): ?>
  32. <nav>
  33. <ul class="pager">
  34. <li class="previous"><?php next_posts_link('<i class="fa fa-angle-left"></i> Older'); ?></li>
  35. <li class="next"><?php previous_posts_link('Newer <i class="fa fa-angle-right"></i>'); ?></li>
  36. </ul>
  37. <!--//pager -->
  38. </nav>
  39. <!--//nav -->
  40. <?php endif; ?>
  41. </div>
  42. <!--//col -->
  43. </div>
  44. <!--//row -->
  45. </section>
  46. </div>
  47. <!--//container -->
  48. </main>
  49. <!--//#main -->

コメントは受け付けていません。