韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り6(shingle.phpを作成)

single.phpは、記事の詳細ページ用のテンプレートです。
ちなみに「カスタム投稿タイプ」を使った場合は single-[posttype].php([posttype]は任意の名前)が最優先のテンプレートになります。

1、home.phpを元にsingle.phpを作成

前回作ったhome.phpをコピーして、single.phpという名前のファイルを新規作成します。
WordPressループ内の、記事の抜粋分、「the_excerpt()」を、「the_content()」に書き換えると、記事の全文を表示することができます。

スポンサーリンク

2、記事を表示する部分のソースコードを切り分けて別ファイルにする

ループの中身は、新しく「content.php」というファイルを作り、そこに書きます。
そして、single.phpに呼び出す形で使います。
なぜそのようにするかというと、もし別のテンプレートファイルで同じものを流用する場合、のちにデザインを変えたい時、content.phpのみ変更すれば、流用しているファイル全てに反映され、管理がラクになるからです。また、single.phpのソースコードも短くなり、見やすいです。
呼び出しは、「get_template_part(‘content’)」です。
なので、single.phpに書くソースコードは、以下のようになります。

<?php
 if (have_posts()) :  //もしも該当する記事があれば、
 while (have_posts()) :  //記事があるだけ
  the_post(); //記事を表示する
  //★ここに記事を表示する部分のソースを書く
  get_template_part('content');
 endwhile; //whileを終了
 else:
  echo "<p>記事が見つかりません。</p>";//ここに投稿がない場合の表示ソースを書く
 endif; //ループを終了
?>

3、隣接記事へのリンクを作成

投稿記事の一番下に、「次の記事へ」、「前の記事へ」のようなリンクを設置します。
使うのは、以下のテンプレートタグです。(必ずループの中で使う)
「previous_post_link()」・・・前の記事(時系列的に1つ過去の記事)へリンク。
「next_post_link()」・・・次の記事(時系列的に1つ未来の記事)へ リンク。
()の中身は、(‘%link’, ‘%title’)と書くと、リンク先と、該当記事のタイトルを出力することができます。

ただし、一番最新の記事や、一番古い記事など、次の記事や前の記事がない場合は、何も表示したくないので、if文で分岐を書きます。
まず、前後に記事があるかどうかをチェックします。
前後の記事の情報は、「get_next_post() 」、「get_previous_post()」で取得します。

結果的に、以下のようなソースコードになりました。

<nav class="adjacent-post-links clearfix">
<?php 
 $prev_post = get_previous_post();
 $next_post = get_next_post(); 
 if( $next_post || $prev_post ) : 
?>
<div class="adjacent-post-links__previous">
 <?php if( $prev_post) : ?><i class="fa fa-angle-double-left"></i> 前の記事:<?php previous_post_link('%link', '%title'); ?> 
 <?php else : ?> 
 <?php endif; ?>
</div>
<div class="adjacent-post-links__next">
 <?php if( $next_post ) : ?> 
  <i class="fa fa-angle-double-right"></i> 次の記事:<?php next_post_link('%link', '%title'); ?>
 <?php else : ?> 
 <?php endif; ?>
</div>
</nav>

まず、「get_next_post() 」、「get_previous_post()」で取得で前後の記事情報を取得します。
そして、前の記事と、次の記事のリンクを設置する場所に、「if( $prev_post) : 」という分岐で、記事があった場合に、テンプレートタグを書きます。「else :」は記事がなかった時なので、特に何も書きません。

【参考サイト】
前後の記事へのナビゲーションカスタマイズメモ

4、関連記事を表示させる

関連記事というのは、このブログでは、同じタグが付いた記事ということにします。

ソースコードが長くなるので、新しく、「single_related.php」というファイルを作成します。
single.phpの、関連記事を表示する場所に、以下のコードを記述して、single_related.phpを読み込みます。

<?php get_template_part('single_related'); ?>

single_related.phpに、以下のソースコードを記述します。

<?php
$original_post = $post;
  $tags = wp_get_post_tags($post->ID);
  $tagIDs = array();
  if ($tags) {
      $tagcount = count($tags);
      for ($i = 0; $i < $tagcount; $i++) {
          $tagIDs[$i] = $tags[$i]->term_id;
      }
  $args=array(
  'tag__in' => $tagIDs,
  'post__not_in' => array($post->ID),
  'showposts'=>4,
  'ignore_sticky_posts'=>1
  );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) { ?>
<aside class="kanren">
  <h1 class="kanren__title">関連記事</h1>
  <ul>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li>
      <a href="<?php the_permalink(); ?>">
        <?php
        if (has_post_thumbnail()):
          the_post_thumbnail('thumbnail');
        else:
        ?>
          <img src="<?php echo get_template_directory_uri(); ?>/images/noimage150x150.gif" alt="">
        <?php endif; ?>
        <div class="kanren__text"><?php the_title(); ?></div>
      </a>
    </li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
<?php } } ?>

これは、WP_Queryというものです。
「get_the_tags($post->ID)」 で現在の記事のタグを取得しています。

‘tag__in’ => $tagIDs,
‘post__not_in’ => array($post->ID),
‘showposts’=>4,
‘ignore_sticky_posts’=>1
このあたりが、WP_Queryのパラメータです。
「’post__not_in’ => array($post->ID),」で、今見ている記事は除外します。
「’showposts’=>4,」で表示する記事の数を設定します。これで4つ記事を表示しています。
ちなみに、「’orderby’ => ‘rand’,」と書くと、記事の順番がランダムで表示になります。デフォルトはdateで、日付順です。
あとは、「$my_query = new WP_Query($args);」で宣言をしてから、ループを書きます。
サムネイル部分は、記事にサムネイルがない場合、前もって用意しておいた「No Image」用の画像を表示するようにしています。

最後に、WP_Queryを使ったから、必ずwp_reset_postdata()でリセットします。

追記:
このあとの工程で、SNSシェアボタンと、コメント欄を表示させました。
SNSシェアボタンの設置については、
「WordPressでブログ作り12(SNSシェアボタン)」を、
コメント欄については、
「WordPressでブログ作り14(コメント欄)」の記事をご覧ください。

スポンサーリンク