[WordPress]カテゴリーページで、カテゴリーごとに任意の文章を表示する

  • 更新日:
  • 公開日:

例えばショッピングサイト等での話です。商品のカテゴリー一覧ページで、カテゴリーごとに任意の文字列を表示したい場合。いくつか方法があると思いますが、スマートなやり方をメモってみます。

2013年09月08日追記:

もっと良い方法がありました。プラグインを使って簡単に出来ますのでリンクを貼っておきます。

カテゴリーごとに任意の文章を表示する方法2つ

方法は他にもあると思いますが、とりあえず2つ挙げてみます。

カテゴリーの説明欄を表示する

画像を表示する予定が無いならコレが一番です。

<?php echo category_description(); ?>

この記述でカテゴリーの説明欄を表示することが出来ます。

カテゴリーごとにカスタムフィールドを用意し、それを表示する

画像も文章も表示するならこれが本当にスマート。カテゴリーにカスタムフィールドを実装する方法は既に公開しているサイト様があるのですが、そこに書かれているソースを少々弄らせて頂きましたので記述します。

カテゴリーにカスタムフィールドを実装

まず、こちらを見ながらソースを記述していきます。とても分かりやすく解説されております。

こちらを参考に、自分なりに修正したソースのみ記述します。

カテゴリー編集に項目を追加

add_action ( 'edit_category_form_fields', 'extra_category_fields');
function extra_category_fields( $tag ) {
$t_id = $tag->term_id;
$cat_meta = get_option( "cat_$t_id");
?>
<tr class="form-field">
<th><label for="extra_text">その他テキスト</label></th>
<td><textarea name="Cat_meta[extra_text]" id="extra_text">
<?php if(isset ( $cat_meta['extra_text'])) echo esc_html($cat_meta['extra_text']) ?>
</textarea></td>
</tr>
<tr class="form-field">
<th><label for="upload_image">画像URL</label></th>
<td>
<input id="upload_image" type="text" size="36" name="Cat_meta[img]" value="<?php if(isset ( $cat_meta['img'])) echo esc_html($cat_meta['img']) ?>" /><br />
画像を追加: <img src="images/media-button-other.gif" alt="画像を追加" id="upload_image_button" value="Upload Image" style="cursor:pointer;" />
</td>
</tr>
<?php
}

修正した箇所は8,9,10行目。単純に<input>タグから<textarea>に変えました。複数行に渡って文章を入力するためです。

テンプレートファイルでの表示

上記のサイトではリストで全てのカテゴリーを表示していたので、現在のカテゴリー情報のみ表示させます。

<ul class="clearfix">
<?php
$categoryname = single_cat_title('',false);
$categoryid = get_cat_ID($categoryname);
$args = array (
'fields' => 'all',
'include' => $categoryid
);
$tag_all = get_terms("category", $args);
foreach($tag_all as $value):
$cat_data = get_option('cat_'.intval($value->term_id));
?>
<li>
<?php echo esc_html($value->name) ?>
<img src="<?php echo esc_html($cat_data['img']) ?>" width="110" height="110" />
<?php echo wpautop($cat_data['extra_text']); ?>
</li>
<?php endforeach; ?>
</ul>

修正した箇所は3~8行と16行目。

3~8行で現在のカテゴリーのみ取得し、16行目で文章を表示してます。

投稿のように改行や<p>タグを自動的に入れたいのでwpautop()を通してます。

これでカテゴリーごとに任意の文章、画像を表示することが出来ます。

ただし、予めレイアウトをHTMLで決めてしまうので画像の位置を変えることは出来ません。投稿の様に編集して表示したい場合は、カテゴリーごとに固定ページを用意し固定ページの中身を表示する必要があると思います。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone