今回はWordPressオリジナルテーマの「カテゴリーページ」の制作手順を解説します。
これまでに以下の作業を行いました。
カテゴリーページは以下の四角で囲った、カテゴリーの一覧が表示されているページです。
※この場合はWEB制作・マーケティング
カテゴリーページと他の投稿系ページとの違いを以下にまとめました。
- 個別記事ページ⇒1つの記事だけが表示される
- 記事一覧ページ⇒全てのカテゴリーが一覧で表示される
- カテゴリーページ⇒特定のカテゴリーだけが一覧で表示される
カテゴリーページの具体的な制作手順はこの後解説します。
カテゴリーページはcategory.phpファイルを使う
カテゴリーページが表示できるテンプレートは以下の5つです。
- category-スラッグ名.php
- category-ID番号.php
- archive.php
- index.php
- category.php
カテゴリーページは「category.php」ファイルを使って実装していきます。
カテゴリーページの構成はindex.phpと同じです。
category.phpが実装されると、特定のカテゴリー記事一覧がブログなどの本文内に表示されます。
category.phpファイルの作成
category.phpはテーマディレクトリの直下に作成します。作成のルートは以下の通りです。
C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\category.php
指定した場所にcategory.phpが作成できたら、コーディングを始めます。
category.php
<?php get_header(); ?>
<div id=”container” class=”wrapper”>
<main>
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
?>
<h1 class=”page-title”><?php echo $catname; ?>一覧</h1>
<?php if(have_posts()): ?>
<?php while(have_posts()):the_post(); ?>
<article>
<h2 class=”article-title”>
<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
</h2>
<ul class=”meta”>
<li><?php the_time(‘Y/m/d’); ?></li>
</ul>
<a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a>
<div class=”text”>
<?php
if (mb_strlen(strip_tags(get_the_content()), ‘UTF-8’) > 80) {
$content = mb_substr(strip_tags(get_the_content()), 0, 80, ‘UTF-8’);
echo $content . ‘…’;
} else {
echo strip_tags(get_the_content());
}
?>
</div>
<div class=”readmore”><a href=”<?php the_permalink(); ?>”>READ MORE</a></div>
</article>
<?php endwhile; ?>
<?php
if (function_exists(“pagination”)) {
pagination($wp_query->max_num_pages);
}
?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>基本的な記述コードは「index.php」と同じです。
カテゴリ一覧はページのタイトルにカテゴリー名を表示し、記事一覧部分のカテゴリー名は必要ないので削除しておきましょう。
CSSのコーディング
上記のコーディングが終了したら、カテゴリタイトル部分のCSSに「style.css」を追記しておきましょう。
style.css
main .page-title {
border-bottom: solid 1px #777;
font-size: 1.75rem;
padding-bottom: 10px;
margin-bottom: 60px;
}上記のコーディングが終了したらカテゴリーページが完成します。
まとめ
今回はWordPressオリジナルテーマのカテゴリーページの制作手順を解説しました。
カテゴリーページは、特定したカテゴリーだけを一覧表示できる便利な機能です。
「このカテゴリーは絶対見て欲しい」など、思い入れがあるカテゴリーがある場合には、カテゴリーページ制作をお勧めします。
次回は、Wordpressオリジナルテーマの「カスタム投稿」の制作手順を解説します。