WordPressテーマ「ハミングバード」にカテゴリー一覧ページテンプレートを追加する

WordPressテーマ「ハミングバード」

WordPressテーマ「アルバトロス」であった「カテゴリー一覧ページテンプレート」が、WordPressテーマ「ハミングバード」にはなかったので、追加しました。

テンプレートファイルの作成

下記コードをコピー&ペーストし、「page-catlist.php」というファイル名で、子テーマを使用している場合は「子テーマのフォルダ」に、子テーマを使用せずにハミングバードをカスタマイズしている場合は「ハミングバードのフォルダ」に保存します。

<?php
/*
Template Name:カテゴリー一覧
*/
?>
<?php get_header(); ?>
<?php get_template_part( 'parts_homeheader' ); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
<?php get_template_part( 'parts_add_top' ); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<header class="article-header entry-header animated fadeInDown">
<h1 class="page-title entry-title" itemprop="headline"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() && !get_option( 'post_options_eyecatch' ) ) :?>
<figure class="eyecatch animated fadeInUp">
<?php the_post_thumbnail('single-thum'); ?>
</figure>
<?php endif; ?>
<?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?>
<?php get_template_part( 'parts_sns_short' ); ?>
<?php endif; ?>
</header>
<section class="entry-content cf">
<?php the_content(); ?>
<div class="cat-list cf">
<ul>
<?php $args = array(
'title_li' => '',
); ?>
<?php wp_list_categories($args); ?>
</ul>
</div>
</section>
<?php if ( !get_option( 'sns_options_hide' ) &&!is_home() && !is_front_page() && get_option( 'sns_options_page' )) : ?>
<footer class="article-footer">
<div class="sharewrap wow animated bounceIn" data-wow-delay="0.5s">
<?php if ( get_option( 'sns_options_text' ) ) : ?>
<h3><?php echo get_option( 'sns_options_text' ); ?></h3>
<?php endif; ?>
<?php get_template_part( 'parts_sns' ); ?>
</div>
</footer>
<?php endif; ?>
</article>
<?php endwhile; endif; ?>
<?php get_template_part( 'parts_add_bottom' ); ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

保存したファイルをサーバーにアップロードすると、固定ページのテンプレートに「カテゴリー一覧」が追加され、選択できるようになります。

CSSの追記

「アルバトロス」と同じレイアウトを適用する場合は、下記のCSSを追記します。

.cat-list {
  width: 102%;
  margin-bottom: 3em; }
  .cat-list ul li a {
    text-decoration: none;
    display: block; }
  .cat-list > ul > li {
    width: 47%;
    float: left;
    font-weight: bold;
    margin: 0.5em 3% 0.5em 0;
    padding-left: 0; }
    .cat-list > ul > li:before {
      content: none; }
    .cat-list > ul > li > a {
      border-bottom: 1px dotted; }

.cat-list > ul > li:before {
  content: none; }