ワードプレスオリジナルテーマ作り方⑦ カテゴリーぺージ作成
2023年05月25日
カテゴリーぺージ作成category.php
前回single.phpが完成したので関連でカテゴリー一覧を表示するcategory.phpを作成したいと思います。
こちらもワードプレスできめられたファイルとなります。メインループで対応できます。
サンプルはこちら
レイアウトはsingle.phpと同じで、左カラムに抜粋記事を5件表示して残りはページャーを出して次のページにって感じですね。
htmlはこんな感じ
<body>
<div class="bwrap">
<header>
<h1>サイトのタイトルを表示させます</h1>
<p class="logo">
<a href="index.html">
<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
</a>
</p>
</header>
<!--header終わり-->
<nav>
<ul>
<li><a href="hp.html">ホームぺージ制作</a></li>
<li><a href="works.html">制作実績</a></li>
<li><a href="price.html">料金</a></li>
<li><a href="flow.html">ご依頼の流れ</a></li>
<li><a href="feature.html">マリオ君の特徴</a></li>
<li><a href="question.html">よくある質問</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<!--nav終わり-->
<div class="contwrap">
<article class="leftbox">
<h2>ブログ一覧</h2>
<div class="cattitle">カテゴリー名：〇〇一覧</div>
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div>
5件以上はページャで次のページに
</div>
</article>
<!--leftbox終わり-->
<article class="rightbox">
<h4>カテゴリー</h4>
<ul>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
</ul>
</article>
<!--rightbox終わり-->
</div>
<!--contwrap終わり-->
<footer>
<nav>
<ul>
<li><a href="hp.html">ホームぺージ制作</a></li>
<li><a href="works.html">制作実績</a></li>
<li><a href="price.html">料金</a></li>
<li><a href="flow.html">ご依頼の流れ</a></li>
<li><a href="feature.html">マリオ君の特徴</a></li>
<li><a href="question.html">よくある質問</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<!--nav終わり-->
</footer>
<!--foote終わりr-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
</body>
こちらも、single.同様共通のぺージいれていきます。
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
ここにそれぞれのページの情報をかくよ！上下は共通
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>共通のもににhtmlをいれたのがこちら
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<div class="contwrap">
<article class="leftbox">
<h2>ブログ一覧</h2>
<div class="cattitle">カテゴリー名：〇〇一覧</div>
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div class="blogall">
<h3><a href="記事のぺーにリンク">ブログ記事のタイトル</a></h3>
<p class="day">投稿日時</p>
<ul class="kate">
<li>カテゴリー</li>
</ul>
<div class="blogmain">
抜粋
</div>
<p class="btn"><a href="記事のぺーにリンク">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<div>
5件以上はページャで次のページに
</div>
</article>
<!--leftbox終わり-->
<article class="rightbox">
<h4>カテゴリー</h4>
<ul>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
<li><a href="カテゴリーへのリンク">カテゴリ名</a></li>
</ul>
</article>
<!--rightbox終わり-->
</div>
<!--contwrap終わり-->
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>
でこれをワードプレスのタグで置き換えたのがこちら
<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<div class="contwrap">
<article class="leftbox">
<h2>ブログ一覧</h2>
<div class="cattitle">カテゴリー名：<?PHP single_cat_title();//カテゴリー名を表示ループ外で使用?>一覧</div>
<!--ループスタート文章-->
<?PHP if(have_posts()):while(have_posts()):the_post();?>
<!--ループスタート文章-->
<div class="blogall">
<h3><a href="<?PHP the_permalink();//個別ページへのURLを出力?>"><?PHP the_title();//記事のタイトルを出力?></a></h3>
<p class="day"><?PHP echo get_the_date();//投稿日を出力?></p>
<?php the_category();//対象カテゴリーul表示 ?>
<div class="blogmain">
<?PHP the_excerpt();//抜粋を表示?>
</div>
<p class="btn"><a href="<?PHP the_permalink();//個別ページへのURLを出力?>">詳しくはこちら→→</a></p>
</div>
<!--blogall終わり-->
<!--ループ終わり文章-->
<?PHP endwhile;endif;?>
<!--ループ終わり文章-->
<div>
<?php the_posts_pagination(
array(
'mid_size' => 2, // 現在ページの左右に表示するページ番号の数
'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
'prev_text' => __( '前へ'), // 「前へ」リンクのテキスト
'next_text' => __( '次へ'), // 「次へ」リンクのテキスト
'type' => 'list', // 戻り値の指定 (plain/list)
)
); ?>
</div>
</article>
<!--leftbox終わり-->
<article class="rightbox">
<h4>カテゴリー</h4>
<ul>
<?php wp_list_categories('title_li'); //すべてのカテゴリーをリンク付きで出力?>
</ul>
</article>
<!--rightbox終わり-->
</div>
<!--contwrap終わり-->
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>
簡単に説明していきます。
9行目は初登場です。カテゴリーをリンクなしで出力するタグです。ループの外で使用できます。
12行目でループが始まり
27行目でループが終わっています。この間に記述したものがループして出力されます。
残りのタグの説明は前回させていただきましたので気になる方は下記をご覧ください。
そして31行目から39行目がページャーを出力するタグです。
こちらをいれるだけで、自動的にクラスが指定されたHTMLタグが出力されるので自動的に出力されたクラスにCSSを指定しておしゃれにすればOKです。
こまかな説明はこちらのサイト様が掲載されているので要チェック！！
前へとか次は文字をかえるだけで表示が変わります。
※注意点としてこちらのページャーのタグはcategory.phpやsingle.phpなどワードプレスで意味をもっているテーマファイルのみで使用できます。
固定ページなどでは動きません。
※いつもはプラグインのWP-PageNaviをつかっていますが今回は練習のため使用しておりません。
WP-PageNaviならどのページでもページャーをつけることができます。WP-PageNaviが気になる方は下記をご覧ください。
以上です。
一番初めに5件表示して残りはページャーで次のページにすると記載していて
いますが、現状どこにも5件表示の指示は書いていません。
home.phpで使用したサブループではposts_per_pageで表示数で指示しましたが今回のメインでは記載がありません。
どうしているかというと、ワードプレスの管理画面の設定の中にある表示設定の1ページに表示する最大投投稿数を5件にするだけです。
ほかにも、いろいろやり方はありますが、一番簡単なのは表示設定を変えるのが簡単です。
以上がカテゴリーぺージの作り方の説明でした。
それではまた。
