デイトラでプログラミング始めました

投稿、投稿一覧を表示

single.phpを作成して投稿ページを表示

//single.php
<?php
if (have_posts()):
  while (have_posts()):
    the_post();
    get_template_part('includes/content-single');
  endwhile;
endif;
?>

//共通部分はcontent-single.phpに切り離しておきます。
<div class="news">
  <time class="time"><?php the_time('y,m,d') ?></time>
  <p class='title'><?php the_title(); ?></p>
  <div class="news-body">
    <p>
      <?php the_content(); ?>
    </p>
  </div>
</div>
<div class="more-news">
  <div class="next">
    <a class="another-link" href="#">NEXT</a>
  </div>
  <div class="prev">
    <a class="another-link" href="#">PREV</a>
  </div>
</div>
//single.phpのHEROの部分はカテゴリー名を表示します
//functions.phpを書き換えます

function get_main_title()
{
  if (is_singular('post')):
    $category_ogj = get_the_category();
    return $category_ogj[0]->name;
  elseif (is_page()):
    return get_the_title();
  endif;

}

//ヒーローのタイトルを書き換え
  <h2 class="page-title">
    <?php echo get_main_title(); ?>
  </h2>
重要ソースコード

is_singular(‘post’)

get_the_category()

archive.phpを作成して投稿一覧を表示

wordpress編集用フォルダ内からarchive.phpを作成します。wordpress管理画面からカテゴリーを表示してarchive.phpが表示されていることを確認します。

//archive.php
//コンテンツはcontent-archive.phpへ切り離し
<?php
if (have_post()):
  while (have_post()):
    the_post();
    ?>
    <?php get_template_part('includes/content-archive'); ?>
  <?php
  endwhile;
endif;
?>
//content-archive.php
<a class="news-link" href="<?php the_permalink(); ?>">
  <div class="news-body">
    <time class="release"><?php the_time('Y/m/d'); ?></time>
    <p class="title"><?php get_main_title();
    ; ?></p>
  </div>
</a>

get_main_title()はアカーブページ選択しているカテゴリー名を取得して表示します。

function get_main_title()
{
  if (is_singular('post')):
    $category_ogj = get_the_category();
    return $category_ogj[0]->name;
  elseif (is_page()):
    return get_the_title();
  elseif (is_archive()):
    //現在のカテゴリー名を返す
    return single_cat_title();
  endif;

}
使用したソースコード

single_cat_title();

ページネイションを追加

前後のページネイション

single.phpは前後に記事があるので、前後の記事に飛べるページネイションを作成

//single.php
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
<?php if ($prev_post): ?>
  <a class="prev btn" href="<?php echo get_permalink($prev_post->ID); ?>">< 前の記事へ</a>
<?php endif ?>
<?php if ($next_post): ?>
  <a class="next btn" href="<?php echo get_permalink($next_post->ID); ?>">次の記事へ ></a>
<?php endif ?>

コードの解説

  1. $prev_post = get_previous_post();
    • get_previous_post() 関数は、現在の投稿の前の記事の情報を取得します。
    • 取得した情報は $prev_post 変数に格納されます。
  2. $next_post = get_next_post();
    • get_next_post() 関数は、現在の投稿の次の記事の情報を取得します。
    • 取得した情報は $next_post 変数に格納されます。
  3. if ($prev_post):
    • 前の記事が存在する場合($prev_posttrue の場合)に、以下のコードブロックが実行されます。
  4. <a class="prev btn" href="<?php echo get_permalink($prev_post->ID); ?>">&lt; 前の記事へ</a>
    • a タグでリンクを作成します。
      • href="<?php echo get_permalink($prev_post->ID); ?>": リンク先のURLを指定します。get_permalink($prev_post->ID) で、前の記事のパーマリンクを取得しています。
      • “&lt; 前の記事へ”: リンクのテキストです。
  5. if ($next_post):
    • 次の記事が存在する場合($next_posttrue の場合)に、以下のコードブロックが実行されます。
  6. <a class="next btn" href="<?php echo get_permalink($next_post->ID); ?>">次の記事へ &gt;</a>
    • 前の記事の場合と同様に、次の記事へのリンクを作成します。

アーカイブのページネイション

//手動で書くとき
//archive.php
<?php if(paginate_links()) : //ページが1ページ以上あれば以下を表示 ?>
<!-- pagination -->
<div class="pagination">
  <?php
  echo paginate_links(
    array(
      'end_size' => 1,
      'mid_size' => 1,
      'prev_next' => true,
      'prev_text' => '<i class="fas fa-angle-left"></i>',
      'next_text' => '<i class="fas fa-angle-right"></i>',
    )
  );
  ?>
</div><!-- /pagination -->
<?php endif; ?>

コードの解説

  1. if(paginate_links()) :
    • paginate_links() 関数は、ページネーションリンクを生成する関数です。
    • この関数の戻り値が真(つまり、ページが1ページ以上ある場合)に、以下のコードブロックが実行されます。
  2. echo paginate_links(...);
    • paginate_links() 関数に、ページネーションリンクの表示に関する様々なオプションを配列で渡しています。
      • end_size:両端に表示するページ番号の数
      • mid_size:現在のページの左右に表示するページ番号の数
      • prev_next:前へ・次のリンクを表示するかどうか
      • prev_text:前のページへのリンクのテキスト(今回はFontAwesomeの左矢印アイコン)
      • next_text:次のページへのリンクのテキスト(今回はFontAwesomeの右矢印アイコン)