カテゴリー一覧ページの作成 – WordPressテーマを自作する 第11回【テーマテンプレートの構築6】
こんにちは、ケイジです。
当ブログでWordPressテーマを自作するという連載をしています。
今回は第11回目。前回の記事はこちら↓。
今回はカテゴリー一覧ページを作成します。
まずカテゴリー一覧ページへのリンクを作成します。
まずは、header.phpに記載している次のグローバルナビゲーション記述箇所を削除します。
<li class="nav_list_item"><a href="#">WordPress</a></li>
<li class="nav_list_item"><a href="#">プログラミング</a></li>
<li class="nav_list_item"><a href="#">iPad</a></li>
<li class="nav_list_item"><a href="#">マーケティング</a></li>
<li class="nav_list_item"><a href="#">デザイン</a></li>
<li class="nav_list_item"><a href="#">ボルダリング</a></li>
<li class="nav_list_item"><a href="#">コラム</a></li>そして削除した箇所に次の関数を記述します。
<?php wp_list_categories('hide_empty=0&title_li='); ?>wp_list_categoriesはカテゴリー一覧へのリンク付きリストを表示するWordPressに組み込まれている関数になります。
引数の
hide_empty=0
は投稿のないカテゴリーも表示する、
title_li=
はデフォルトだと「カテゴリー」と表示される見出しを非表示にします。
<li class="cat-item cat-item-1 current-cat"><a aria-current="page" href="http://◯◯◯.com/category/uncategorized/">未分類</a>
</li>といったようにHTML表示されます。
とliタグにcat-itemが付随して変換されて表示されるので、CSSもそれに合わせて修正します。
style.cssの「.nav_item_list」を「.cat-item」に書き換えます。全部で５箇所。
/* style.css 115行目 */
.cat-item {
font-size: 1.2rem;
font-weight: bold;
white-space: nowrap;
padding-right: 12px;
}
.cat-item a {
color: #333;
text-decoration: none;
}
/* style.css 387行目 */
.cat-item {
font-size: 1.4rem;
display: inline-block;
position: relative;
padding: 0;
transition-duration: 0.3s;
}
.cat-item:hover::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background-color: #faa411;
bottom: 0;
left: 0;
}
.cat-item a {
display: block;
padding: 12px;
}次にカテゴリー一覧を表示させるファイル、
archive.php
を作成します。
内容は実は…
have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】で作成したfront-page.phpと全く同内容でOKです。
WordPressが自動で判断してカテゴリー一覧を表示してくれます。
手動でカテゴリーを２つ、記事を３つほど足してみましょう。
管理画面
投稿 > カテゴリー
をクリック。
「名前」にカテゴリー名を入力し、「スラッグ」にURLの一部となるスラッグ名（半角英数字推奨）を入力します。
スラッグについてはスラッグ（slug）の正しい設定方法【WordPress】をご覧ください。
今回は「ワードプレス」「プログラミング」というカテゴリーを追加しました。
記事は適当に「ワードプレス」カテゴリーに2つ、「プログラミング」カテゴリーに１つ追加します。
サイト表示して確認します。
トップページ。グローバルナビゲーションに「プログラミング」「ワードプレス」「未分類」が表示されていることをご確認ください。
それぞれのグローバルナビゲーションをクリックして、該当カテゴリーの記事一覧が表示されることをご確認ください。
プログラミング 
ワードプレス 
未分類
それでは今回はここまで！また次回！
よいWordPressライフを！！
関連記事
[PR] 当ブログ「cage.tokyo」はさくらのレンタルサーバ・スタンダードで運用しています。WordPressでのブログが運用しやすく、おすすめです。
