例えばショッピングサイト等での話です。商品のカテゴリー一覧ページで、カテゴリーごとに任意の文字列を表示したい場合。いくつか方法があると思いますが、スマートなやり方をメモってみます。
2013年09月08日追記:
もっと良い方法がありました。プラグインを使って簡単に出来ますのでリンクを貼っておきます。
目次
カテゴリーごとに任意の文章を表示する方法2つ
方法は他にもあると思いますが、とりあえず2つ挙げてみます。
カテゴリーの説明欄を表示する
画像を表示する予定が無いならコレが一番です。
<?php echo category_description(); ?>
この記述でカテゴリーの説明欄を表示することが出来ます。
カテゴリーごとにカスタムフィールドを用意し、それを表示する
画像も文章も表示するならこれが本当にスマート。カテゴリーにカスタムフィールドを実装する方法は既に公開しているサイト様があるのですが、そこに書かれているソースを少々弄らせて頂きましたので記述します。
カテゴリーにカスタムフィールドを実装
WordPressのカテゴリーにカスタムフィールドを追加する | webOpixel
カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテン...
まず、こちらを見ながらソースを記述していきます。とても分かりやすく解説されております。
こちらを参考に、自分なりに修正したソースのみ記述します。
カテゴリー編集に項目を追加
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で決めてしまうので画像の位置を変えることは出来ません。投稿の様に編集して表示したい場合は、カテゴリーごとに固定ページを用意し固定ページの中身を表示する必要があると思います。