カテゴリーごとに表示するためのページを作成する

サイドバーなどに表示されたカテゴリをクリックしたときに、
そのカテゴリーがつけられた記事を一覧で表示する場合のページを作成していきます。

現在完成しているサイトでも、カテゴリーをクリックすれば、
その記事が表示されるようになっていますが、古い記事を見るためのリンクがないなど、
そのままでは不便な個所がありますので、使い勝手がよくなるよう、コードを追加していきます。

まずは、index.phpファイル(メインインデックスのテンプレート)の、
コンテンツブロック内に、下記のソースを追加して、カテゴリー名を表示させます。

---------------------
<!– カテゴリーページタイトル –>
<?php if(is_category()): ?>
<p id="pagetitle"><?php single_cat_title(‘カテゴリー:’); ?></p>
<?php endif; ?>
<!– カテゴリーページタイトル閉じ –>

---------------------
 

 
次に、コンテンツブロックの一番下に、下記のソースを追加して、
カテゴリーページの新旧記事に行けるよう、リンクを作成します。

---------------------
<!– カテゴリーページの新旧記事へのリンク –>
<?php if(is_archive()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link(‘&laquo; 古い記事’); ?></span>
<span class="newpage"><?php previous_posts_link(‘新しい記事 &raquo;’); ?></span>
</p>
<?php endif; ?>
<!– カテゴリーページの新旧記事へのリンク閉じ –>

---------------------
 

 
同時に、style.cssファイル(スタイルシート)に、以下のCSSタグを追加して、
表示させるカテゴリー名の見た目を整えていきます。

---------------------
/* カテゴリーページタイトル */
p#pagetitle { font-weight: bold; color: #FFFFFF; background-color: #4682B4; text-align: center; letter-spacing: 0.3em; padding: 10px 0px; margin-top: 0px; }

---------------------

リンクの見た目は、以前に作成したCSSをそのまま使いまわしますので、
今回はスタイルシートの追加修正はありません。

この作業で完成した画面が↓こちらです。

 

 
これで、WordPress レッスンブック 3.x対応のSTEP4-4が完了しました。
 

コメントを残す