[Wordpress自作テーマ⑤]初心者の為のコーディング指南書「archive・category・pagination・headerオマケ」

今回はアーカイブ、カテゴリーページの書き方です。

これはリンクさせるURL（飛び先）の指定さえしっかりしておけば、ほぼindex.phpと同じ内容で問題ありません。

あとは、ページネーション方法もついでにご紹介しましょう。

archive・category例

この2種に関しては冒頭でも話した通り、ほぼ「index.php」と同じ書き方でも大丈夫です。

・アーカイブページ（archive.php）

これは「2020年5月の記事一覧」みたいな感じでの表示をさせる為のテンプレページです。

・カテゴリーページ（category.php）

こちらは「CODEカテゴリーの記事一覧」とか「COLUMNカテゴリーの記事一覧」とか、ジャンル毎での表示をさせる為のテンプレページです。

カテゴリー自体の設定に関してはWP管理画面より行います。

そしてサイドバーに既に2種のリンクは前回の記事で実装済みですので、飛び先の一覧表示させる側のページの記述例となります。

ただ、ページネーション無しの状態で全記事を一覧表示させてる書き方となりますので、記事の量が多いとちょっと長くなるかもですね。

なので今回はページネーションの書き方例も後述してます。

【archive.php（＆ category.php）】

<?php get_header(); // header.phpをここに読み込みます ?>
 
  <div class="c-wrapper">
    <main class="c-main-wrapper">
      <h2 class="">Archive（or Category）</h2>
 
      <?php // ここからループの記述になります
        $args = array(
          'post_type' => 'post', // 投稿（post）を指定
          'post_status' => 'publish' // 「公開」となっているもの
          'orderby' => 'post_date', // 並び順を「日付」に
          'order' => 'DESC', // 降順
          'posts_per_page' => -1, // 表示数は「-1」で「全て」に設定
        );
      ?>
      <?php $posts = new WP_Query($args);?>
      <?php if ($posts -> have_posts()):?>
        <?php while($posts -> have_posts()) : $posts -> the_post();?>
          <!-- 上記で設定されたループがここに出力されていきます -->
          <div class="">
            <a class="" href="<?php echo the_permalink($post->ID);?>">
 
              <?php $image_url = ''; // 投稿記事内の1枚目の画像を出力させる為の設定開始 ?>
              <?php if(preg_match( '/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/msi', $post->post_content, $matches)):?>
                <?php $image_url = $matches[1];?>
                  <?php else: ?>
                <?php $image_url = get_bloginfo( 'template_directory' ) . '/lib/images/【ノーイメージ用画像】.jpg';?>
              <?php endif;?>
              <img class="" src="<?php echo esc_attr($image_url); // 画像を出力 ?>" alt="<?php the_title();?>">
 
              <div class="">
                <?php $terms = get_the_terms($post->ID,'category');?>
                <?php foreach ($terms as $term) : ?>
                  <object>
                    <a class="" href="<?php echo get_category_link($term);?>">
                      <?php echo esc_html($term->name); // カテゴリの出力 ?>
                    </a>
                  </object>
                <?php endforeach;?>
              </div>
 
              <p class="">
                <?php the_time('Y/m/d'); // 投稿の公開された日時 ?>
              </p>
 
              <h3 class="">
                <?php the_title(); // 投稿のタイトル ?>
              </h3>
            </a>
          </div>
        <?php endwhile;?>
      <?php endif; wp_reset_postdata();?>
    </main>
 
    <aside class="c-sidebar-wrapper">
      <?php get_sidebar(); // sidebar.phpをここに読み込みます ?>
    </aside>
  </div>
<?php get_footer(); // footer.phpをここに読み込みます ?>

はい、タイトル意外はindex.phpの内容と同じとなってます。

pagination例

では次にページネーションの書き方例ですが、過去の記事にありますので参考にしてみてください。

WordPressに自作のページネーション（ページャー）を簡単に実装

手順としてはこんな感じです。

①「functions.php」に記述追加

②記事一覧をループさせてる箇所全てを変更

③スタイル（CSS）を適宜変更

・一覧の時

・シングルページの時

過去記事でも紹介してるように

ループの箇所に追記している

<?php $paged = get_query_var('paged') ? get_query_var('paged') : 1 ; ?>

の部分が、アーカイブとカテゴリーページのループでは

<?php $paged = (int) get_query_var('paged'); ?>

こういう形になってます。

【archive.php（＆ category.php）】

  <div class="c-wrapper">
    <main class="c-main-wrapper">
      <h2 class="">BLOG</h2>
 
      <?php $paged = (int) get_query_var('paged'); // 追記 ?>
      <?php // ここからループの記述になります
        $args = array(
          'post_type' => 'post', // 投稿（post）を指定
          'post_status' => 'publish' // 「公開」となっているもの
          'orderby' => 'post_date', // 並び順を「日付」に
          'order' => 'DESC', // 降順
          'paged' => $paged, // 追記
          'posts_per_page' => 6, // 表示数は「6」で、残りはページ送りさせる
        );
      ?>
      <?php $posts = new WP_Query($args);?>
      <?php if ($posts -> have_posts()):?>
        <?php while($posts -> have_posts()) : $posts -> the_post();?>
 
          【省略】
 
        <?php endwhile;?>
        <!-- ここにページ送りボタンの記述 -->
        <?php $max_num_pages = $posts->max_num_pages; ?>
        <div class="c-pagination">
          <?php if (function_exists('pagination')) { pagination($max_num_pages); } ;?>
        </div>
      <?php endif; wp_reset_postdata();?>
    </main>
 
    <aside class="">
      <?php get_sidebar(); // sidebar.phpをここに読み込みます ?>
    </aside>
  </div>

以上、こんな感じでページ送りは実装できます。

オマケ

「header.php」に追記してSNS等でリンクを貼った時の見栄えをよくする設定です。

・OGP設定

簡単に言うとLINEやFacebookやTwitterで自分のサイトのリンクを貼って、みんなに紹介したいという時に、サムネイルが表示されますよね。

あと、タイトルや文章の内容とかも。

これが設定されてるかされてないかで、見た目が断然変わります。

詳しくはググってみてください。

OGPシミュレーター : http://ogimage.tsmallfield.com/

では実装編です。

【header.php】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="copyright" content="">
  <meta name="robots" content="index,follow">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="theme-color" content="#fff">
  <meta name="format-detection" content="telephone=no">
  <?php if ( is_home() ) {
    $canonical_url=get_bloginfo('url')."/";
    } else if (is_category()) {
      $canonical_url=get_category_link(get_query_var('cat'));
    } else if (is_page()||is_single()) {
      $canonical_url=get_permalink();
    }
    if ( $paged >= 2 || $page >= 2) {
      $canonical_url=$canonical_url.'page/'.max( $paged, $page ).'/';
    }
    remove_action('wp_head', 'rel_canonical');
  ?>
  <?php if(!(is_404())):?>
    <link rel="canonical" href="<?php echo $canonical_url; ?>" />
  <?php endif;?>
  <!-- StyleSheet -->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/css/style.css">
 
  <!-- OGP -->
  <title><?php echo bloginfo('description'); ?> | <?php bloginfo('name'); ?></title>
  <meta name="keywords" content="keyword,keyword,keyword">
  <meta name="description" content="<?php echo bloginfo('description'); ?>">
  <meta name="twitter:title" content="<?php echo bloginfo('description'); ?> | <?php bloginfo('name'); ?>">
  <meta name="twitter:description" content="<?php echo bloginfo('description'); ?>">
  <meta name="twitter:url" content="<?php echo home_url(''); ?>">
  <meta name="twitter:image" content="<?php echo get_template_directory_uri(); ?>/lib/【任意設定】.jpg">
  <meta property="og:url" content="<?php echo home_url(''); ?>">
  <meta property="og:title" content="<?php echo bloginfo('description'); ?> | <?php bloginfo('name'); ?>">
  <meta property="og:image" content="<?php echo get_template_directory_uri(); ?>/lib/【任意設定】.jpg">
  <meta property="og:description" content="<?php echo bloginfo('description'); ?>">
  <meta name="twitter:site" content="【任意設定】">
  <meta name="twitter:creator" content="【任意設定】">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:locale" content="ja_JP">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
  <?php wp_head(); ?>
</head>
 
<body ontouchstart="">
 
  <header class="">
    【ここにヘッダーの記述を書いていく】
    <div class="">
      <a href="" class="">
        Home
      </a>
      <a href="" class="">
        About
      </a>
      <a href="" class="">
        Works
      </a>
      <a href="" class="">
        Blog
      </a>
      <a href="" class="">
        Contact
      </a>
    </div>
  </header>

取り合えずこんな感じです。

本来なら「トップページ」「個別ページ」「シングルページ」くらいは書き分けた方がいいのですが、取り合えずは大丈夫でしょう。

慣れた頃にまたググって調べてみてください。

今は取り合えずWPのファイル、コード、構成に慣れていく事が先決なので、あまり難しく考えずにどんどん手を動かしてみてもらえたらと思います。

では現場から以上です！