【WordPress】番号とサムネイルと要約で作るタグページ

タグページは標準には入っていたのだが，業者に作成してもらった場合には入っていないことも多い．
category.php をコピーして作ればいいと書いてあるサイトもあるが，category.php がない場合もある．

備忘録として置いておく．

タグページ

タグのページは tag.php を作れば表示される．

折角なので

• 番号
• サムネイル
• 要約

が表示されるものをサンプルとして使えるようにしておく．
次のページにいった場合も番号は元のページの分も加算されていく．

自分のサイトに合わせて変更・追加して使ってほしい．

なお，screen-reader-text は削除してしまっているが，アクセシビリティが気になる方は自分で変更して使ってください．

サンプルコード

<h2><?php single_tag_title(); ?>タグ記事(更新日順)</h2>
<?php
// 検索結果の記事一覧に連番で番号を振る 
$number = (max(1, $paged ) - 1) * $wp_query->query_vars['posts_per_page'];
?>
<style>
  .listRank {
    counter-reset: number <?php echo $number; ?>;
  }
  .listRank li .excerpt {
    margin-left: 50px;
  }
  .nodeco a {
    text-decoration: none;
  }
  .thumb {
    float: left;
    margin-right: 30px;
    margin-left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .thumb img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
  .listRank .thumb {
    width: 50px;
    height: 50px;
  }
</style>
<ol class="listRank">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
  <li>
    <a href="<?php the_permalink(); ?>"><div class="thumb"><?php the_post_thumbnail('thumbnail'); ?></div></a>
    <span class="nodeco"><?php the_tags(); ?></span><br>
    <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_modified_date('Y年m月d日'); ?></time> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
   <div class="excerpt">
     <?php echo get_the_excerpt(); ?>
   </div>
  </li>
<?php endwhile; ?>
</ol>
<?php	
  // Previous/next page navigation.
    $paginationhtml = get_the_posts_pagination( array(
    'prev_text'      => __( '前のページ' ),
    'next_text'      => __( '次のページ' ),
  ) );
  echo preg_replace('/<h2 class="screen-reader-text">[^<]*<\/h2>/ui', '', $paginationhtml);
endif; ?>