デイトラweb制作（Word Press化その7）

公開日 2026/9/21 最終更新日 2026/9/21

デイトラの卒業課題を1日（1〜2時間）行なっています。

カテゴリーの詳細ページ（single.php）を作成する

・仕様を確認します。

投稿記事のブロックエディターに内容を入力する

記事内容を表示させる

・記事内容の部分に下記を入力する

<article class="single__content">
   <?php the_content(); ?>
</article>

各項目にCSSを読み込ませる

・静的に作成したクラスを割り当てます。

・リストビュー→高度な設定→追加CSSクラス

「次の記事」と「前の記事」ボタンを配置する

・静的に作成したhtmlを動的にする。

<article class="single__content">
 <div class="p-single__post-links">
    <div class="p-single__post-link">
      <a href="#" class="c-btn c-btn--outline">< 前の記事へ</a>
    </div>

    <div class="p-single__post-link p-single__post-link--next">
      <a href="#" class="c-btn c-btn--outline">次の記事へ ></a>
    </div>
 </div>
</article>

・下記に変更する。

<article class="single__content">
 <?php the_content(); ?>

   <!-- ▼ ここから「前の記事へ」「次の記事へ」のPHPコードに置き換え ▼ -->
   <div class="p-single__post-links">
        <?php
        　// 前の記事を取得
           $prev_post = get_previous_post();
           if ( ! empty( $prev_post ) ) :
        ?>
        　<div class="p-single__post-link">
           <a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>" class="c-btn c-btn--outline">< 前の記事へ</a>
        　</div>
        <?php endif; ?>

        <?php
          // 次の記事を取得
           $next_post = get_next_post();
           if ( ! empty( $next_post ) ) :
        ?>
           <div class="p-single__post-link p-single__post-link--next">
             <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" class="c-btn c-btn--outline">次の記事へ ></a>
           </div>
        <?php endif; ?>
   </div>
   <!-- ▲ ここまで ▲ -->
</article>

・表示を確認する。（最後と最初のページで片方のボタンが消える事）