記事一覧ページと個別ページをつくる

single.phpをつくる
archive.phpをつくる
1. サムネイルが未設定のときデフォルトで任意のサムネイルを設定する

single.phpをつくる

記事本文を表示するページをつくります。

<?php get_header(); ?>　//ヘッダーを呼び出す

<div class="lower">
  <div class="common_wrap">
  <main>
  <div class="single entry_content">
　<?php if(have_posts()): while(have_posts()):the_post(); ?>
  　<time><?php the_time('Y.m.d'); ?></time>　//投稿日を表示
  　<p class="category"><?php the_category(', '); ?></p> //カテゴリーを表示
  　<h1><?php the_title(); ?></h1>　//記事タイトルを表示
　　 <?php the_post_thumbnail(); ?> //サムネイルを表示
  　<?php the_content(); ?>　//本文

　<?php endwhile; endif; ?>

　<div class="pn_btn">
  　<?php previous_post_link('%link', '前の記事へ', true); ?>　//前の記事へ
  　<?php next_post_link('%link', '次の記事へ', true); ?>　//次の記事へ
　</div>

  </div>
</main>

<?php get_sidebar(); ?>　//サイドバーを呼び出す
</div>
</div>

<?php get_footer(); ?>　//フッターを呼び出す

<?php get_header(); ?>　//ヘッダーを呼び出す

<main>

　<?php if(have_posts()): while(have_posts()):the_post(); ?>

　<time><?php the_time('Y.m.d'); ?></time>　//投稿日を表示

　<p class="category"><?php the_category(', '); ?></p> //カテゴリーを表示

　<h1><?php the_title(); ?></h1>　//記事タイトルを表示

　　 <?php the_post_thumbnail(); ?> //サムネイルを表示

　<?php the_content(); ?>　//本文

　<?php endwhile; endif; ?>

　<?php previous_post_link('%link', '前の記事へ', true); ?>　//前の記事へ

　<?php next_post_link('%link', '次の記事へ', true); ?>　//次の記事へ

　</div>

</main>

<?php get_sidebar(); ?>　//サイドバーを呼び出す

</div>

<?php get_footer(); ?>　//フッターを呼び出す

archive.phpをつくる

記事一覧を表示するページをつくります。

<?php get_header(); ?>
<div class="lower archive_page">

<div class="common_wrap">
<main>
<div class="archive_cnt">
  <?php if(have_posts()): while(have_posts()):the_post(); ?>
    <a href="<?php the_permalink(); ?>" class="post">　//記事のURL
      <div class="post_thum">
        <?php if (has_post_thumbnail()) : ?>　
          <?php the_post_thumbnail('thumbnail'); ?> //サムネイルを表示
        <?php else : ?>
          <img src="<?php echo get_template_directory_uri(); ?>/image/default.jpg">
        <?php endif ; ?>
        </div>
      <div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div> //日付
      <h2><?php the_title(); ?></h2>　//タイトル
      <div class="post_body"><p><?php echo mb_substr(strip_tags($post-> post_content),0,25).'...'; ?></p></div>　//本文抜粋（25文字)
    </a>
  <?php endwhile;?>
  <?php else : ?>
  <p>記事が見つかりません</p>
<?php endif; ?>
</div>
  //ページネーション
    <?php
    the_posts_pagination (array(
      'prev_text' => 'PREV',
      'next_text' => 'NEXT',
      'mid_size' => 1,
      'screen_reader_text' => __( '' )
    ));
    ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<main>

<?php if(have_posts()): while(have_posts()):the_post(); ?>

<a href="<?php the_permalink(); ?>" class="post">　//記事のURL

<?php if (has_post_thumbnail()) : ?>　

<?php the_post_thumbnail('thumbnail'); ?> //サムネイルを表示

<?php else : ?>

<img src="<?php echo get_template_directory_uri(); ?>/image/default.jpg">

<?php endif ; ?>

</div>

<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div> //日付

<h2><?php the_title(); ?></h2>　//タイトル

<div class="post_body"><p><?php echo mb_substr(strip_tags($post-> post_content),0,25).'...'; ?></p></div>　//本文抜粋（25文字)

</a>

<?php endwhile;?>

<?php else : ?>

<p>記事が見つかりません</p>

<?php endif; ?>

</div>

//ページネーション

<?php

the_posts_pagination (array(

'prev_text' => 'PREV',

'next_text' => 'NEXT',

'mid_size' => 1,

'screen_reader_text' => __( '' )

));

</main>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

サムネイルが未設定のときデフォルトで任意のサムネイルを設定する

このアーカイブページでは、サムネイルを設定しないときに任意の画像default.jpが自動で設定されるようにしています。
サムネがないときに「noimage」という画像を表示したいときなどに使いますね。

<div class="post_thum">
        <?php if (has_post_thumbnail()) : ?>
          <?php the_post_thumbnail('thumbnail'); ?>
        <?php else : ?>
          <img src="<?php echo get_template_directory_uri(); ?>/image/default.jpg">
        <?php endif ; ?>
        </div>

<?php if (has_post_thumbnail()) : ?>

<?php the_post_thumbnail('thumbnail'); ?>

<?php else : ?>

<img src="<?php echo get_template_directory_uri(); ?>/image/default.jpg">

<?php endif ; ?>

</div>