WordPressテーマで記事や固定ページを出力する

前回は記事一覧を出力するところまで実装しました。

今回は記事の詳細を出力するページ(single.php)、固定ページ(page.php)を実装します。

 

記事詳細ページ、固定ページ

実は前回記事一覧のところでさらった知識で記事詳細ページや固定ページを実装することができます。

記事詳細ページ(single.php)

動作するコードを示します。

<?php get_header(); ?>
  <div id="eyecatch">
<?php
if ( has_post_thumbnail() ) {
  the_post_thumbnail();
}
?>
  </div>
  <main id="main">
<?php
if ( have_posts() ) :
  the_post();
?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
      <time class="entry-time" datetime="<?php the_time('Y.m.d'); ?>"><?php the_time('Y.m.d'); ?></time>
<?php
  if (get_the_modified_time('Y.m.d') != get_the_time('Y.m.d')) :
?>
      <time class="entry-time">(最終更新日: <?php the_modified_time('Y.m.d'); ?>)</time>
<?php
  endif;
?>
<?php
  if ( has_category() ) :
    $categories = get_the_category();
?>
      <div class="entry-category">
<?php
    foreach($categories as $category) :
?>
        <a href="<?php echo get_category_link($category->term_id); ?>" rel="tag"><?php echo $category->cat_name ?></a>
<?php
    endforeach;
?>
      </div>
<?php
  endif;
?>
      <h1 class="entry-title"><?php echo get_the_title(); ?></h1>
      <div class="entry-content"><?php the_content(); ?></div>
    </article>
<?php
endif;
the_posts_pagination();
?>
  </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

前回の記事一覧の出力と大きく違うところは、while(have_posts())でループを回しているところをif文での判定に変更しているところです。single.phpが使用される時点で記事は一つしかないはずで、ループである必要はないためにこのような処理に変更しています。

上記のコードで記事の詳細ページが表示されることになります。

 

固定ページ

コードを示します。アイキャッチや投稿日やカテゴリを表示させる必要がないと判断して表示させていないところ以外は同じです。

<?php get_header(); ?>
  <main id="main">
<?php
if ( have_posts() ) :
  the_post();
?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
      <h1 class="entry-title"><?php echo get_the_title(); ?></h1>
      <div class="entry-content"><?php the_content(); ?></div>
    </article>
<?php
endif;
?>
  </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

パンくずリストを追加する

また記事を表示するページや固定ページなどではパンくずリストの出力があった方が良いようです(SEO的に)。そのため以下のページを参考にパンくずリストを実装するか、プラグインを使用すると良いでしょう。上のリンクはご丁寧に構造化マークアップに対応した実装も用意されています。構造化マークアップをすることで検索エンジン(クローラー)がパンくずリストを理解しやすくなります。

今回は上の方のサイトを参考に、普通のパンくずリストの関数をfunction.phpに追加して使用します。今回作成しているテーマでは<?php breadcrumb(); ?>をheader出力の直後に挿入しました。次のように出力されます。

 

まとめ

今回は記事詳細ページと固定ページを実装しました。ここまでで作成したテーマは次です。

test_theme_3

次はアーカイブページ(archive.php)を実装しようと思います。

return-top