【WordPressでオリジナルサイトを作ろう】⑫投稿ページ編

最終更新日2024.06.09

WordPress

投稿ページを作っていきます。

single.phpの作成

テーマディレクトリの直下に、投稿ページを表示するためのテンプレートファイル「single.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\single.php

single.phpのコーディング

「single.php」のコードは下記の通りです。

    single.php
    
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if(have_posts()):while(have_posts()):the_post(); ?>
      <?php
        $cat = get_the_category();
        $catname = $cat[0]->cat_name;
      ?>
      <article>
        <h1 class="article-title">
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h1>
        <ul class="meta">
          <li><?php the_time('Y/m/d'); ?></li>
          <li><?php echo $catname; ?></li>
        </ul>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
        <div class="text"><?php the_content(); ?></div>
      </article>
    <?php endwhile;endif; ?>

    <ul class="post-link">
      <li><?php previous_post_link('%link', '< 前の記事へ'); ?></li>
      <li><?php next_post_link('%link', '次の記事へ >'); ?></li>
    </ul>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

基本のコードは「index.php」と同じです。
異なる箇所は下記の点です。

本文の文字数をカットせずに全て表示
「READ MORE」のリンクを削除
ページネーションを削除
「次の記事へ」と「前の記事へ」のリンクを追加

前ページと次ページのリンクは、WordPressの下記の関数で簡単に作れます。

previous_post_link(‘%link’, ‘< 前の記事へ’);
next_post_link(‘%link’, ‘次の記事へ >’);

CSSのコーディング

続いて、CSSのコーディングです。
「style.css」に下記のコードを追記します。

    style.css
    
.post-link {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .post-link {
    width: 100%;
  }
}