カテゴリーページの本文を一部だけ表示

Date: 2010.03.07 | Category: WordPressの設定 | Tags:

カテゴリーページは、そのカテゴリーに所属する記事が掲載されますが、私が使用しているテーマのJs O4w 1.1.5は、タイトルや日付以外に、記事全文が表示されてしまいます。
これは、WordPressデフォルトのテーマも同じで、カテゴリー内にたくさんのページが存在すると、どんな記事がそのカテゴリーの中にあるのか、わかりづらくなっています。

そこで、カテゴリートップページを改良して、「記事のタイトル」と「日付」、そして「本文の一部を抜粋した記事」を表示させるようにしてみました。

カテゴリーページとは、各カテゴリーのインデックスページです。例）WordPressのインストール

実は、この記事を書いたときはWordPressに触れてから数日後だったということもあり、強引にPHPで記事の一部を抜粋させるようにしてたんですけれど、よくよく調べてみたら「the_excerpt()」という関数を使って本文の一部を抜粋して表示させてみました。

カテゴリーページのデザインは

各テーマのデザインテンプレートは、「wp-content」の「themes」というフォルダにはいっています。
たとえば、私が使用しているテーマJsO4wは、「js-o4w」にしまってあります。
また、WordPressの初期のテーマは、「classic」や「default」というフォルダにしまってあります。

この各テーマのフォルダの中にある「category.php」がカテゴリーページのテンプレートになるわけですが、Js-O4wやclassicには「category.php」が存在しません。
WordPressは、カテゴリーページを表示させるときに「category.php」がないと、最終的に「index.php」というファイルを取り込んで表示させるようです。

ただ、この「index.php」は、ブログのトップページにも使用されているので、このindex.phpをいじってしまうと、トップページも変更されてしまいます。
そこで、「category.php」を作成して、カテゴリーページはトップページとは異なるデザインにしてみましょう。
※ すでにcategory.phpがあるテーマを使用している場合は、それを使用します。

category.phpがあるテーマを使用している場合

すでに「category.php」がある場合は、管理画面の「外観」の「編集」を開き、左側のテンプレートの中から「カテゴリーテンプレート」をクリックし、抜粋をを表示させたい部分を改良します。

category.phpが無い場合

category.phpを0からつくると大変なので、「idnex.php」を元に作成してみます。
index.phpを秀丸などのエディタで開き、category.phpの名前で同じサーバー上のフォルダに保存します。

改良してみる

<div id=”tab-content-post”>
<div class=”home-post”>
<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class=”post”>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h2>
<p>
<span class=”index-meta”><?php _e(‘Date: ‘, ‘js-o4w’); ?><?php the_time(‘Y.m.d’) ?> | <?php _e(‘Category: ‘, ‘js-o4w’); ?><?php the_category(‘, ‘) ?> | <?php _e(‘Response: ‘, ‘js-o4w’); ?><?php comments_number(‘0′,’1′,’%’); ?></span>
</p>
<?php the_content(__(‘Read the rest of this entry &raquo;’, ‘js-o4w’)); ?>
</li> <!– end #post –>

この部分を、

<div id=”tab-content-post”>
<!– カテゴリーのタイトルをH2タグで囲んで表示させる –>
<h2><?php print get_catname(get_query_var(‘cat’));?></h2>
<div class=”home-post”>
<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li class=”post”>
<h3><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></h3>
<p>
<!– 日付とコメント数を表示させる –>
<span class=”index-meta”><?php _e(‘Date: ‘, ‘js-o4w’); ?><?php the_time(‘Y.m.d’) ?>  | <?php _e(‘Response: ‘, ‘js-o4w’); ?><?php comments_number(‘0′,’1′,’%’); ?></span>
</p>
<?php //the_content(__(‘Read the rest of this entry &raquo;’, ‘js-o4w’)); ?>
<!– 記事本文を抜粋して表示 –>
<?php the_excerpt(); ?>
</li> <!– end #post –>

このように変更しました。

<h2><?php print get_catname(get_query_var(‘cat’));?></h2>

ここは、記事リストの上の方にそのカテゴリーの名前を取得し、H2タグで囲んでいます。
↓こんな感じ。■色で囲まれた部分。

<?php the_excerpt(); ?>

抜粋の部分のソースは上のようになりました。
ちゃんとPタグで囲んで出力してくれるみたいです。
CSSもちょっといじって、各記事の区切りに点線を入れてみました。
これで、カテゴリートップページに訪問したときに、カテゴリー内にどういった記事があるのか一目でわかるようになったと思います。

もし、お気に入りのテーマが見つかったんだけれど、カテゴリーページに本文全部が表示されてしまう・・・なんて場合は、参考にしてみてください。