WordPress:カテゴリー周りをカスタマイズする際の備忘録

  • Posted on
  • Category : WordPress
WordPress:カテゴリー周りをカスタマイズする際の備忘録

記事でいうアイキャッチのようなカテゴリーイメージを設定できるようにしたり、説明文を自由に装飾できるようエディタを実装したりなど、WordPressのカテゴリー周りのカスタマイズでよく利用するコードやプラグインの備忘録です。カテゴリーのカスタマイズと言っても表示カテゴリーのID指定とか特定のカテゴリーの記事を出したいとかそういう系の内容ではなく、主に管理画面の入力周りを変更といったもの中心です。

※紹介している内容やキャプチャなどは、WordPress Ver 4.5.2で検証・使用した際のものになります。

WordPress:カテゴリー周りをカスタマイズする際の備忘録 目次

  1. カテゴリー説明を表示する際に付加される<p>を消去する
  2. カテゴリー説明の入力欄でHTMLを使用可能にする
  3. カテゴリーページの「説明」部分をエディタに変更する
  4. カテゴリーページに画像を追加する
  5. 「Advanced Custom Fields」ですべてを実装する
    1. インストール・有効化
    2. カテゴリーイメージを設定
    3. カテゴリーイメージを表示させる
    4. カテゴリー説明を設定
    5. カテゴリー説明を表示させる
    6. もともとある「説明」を非表示にする
    7. カテゴリーイメージとカテゴリー説明の表示をまとめる

1. カテゴリー説明を表示する際に付加される<p>を消去する

カテゴリー説明はそのまま項目名にもあるように「説明」という部分へ表示したい文字を入力するのですが、デフォルトでは入力したものがp要素で括られた状態で表示されます。
これが嫌な場合はfunctions.phpに以下を記述することでp要素に括られるのを無効にできます。

functions.php

remove_filter( 'term_description', 'wpautop' );

目次へ

2. カテゴリー説明の入力欄でHTMLを使用可能にする

カテゴリー説明の部分はデフォルトではHTMLを使用することはできませんが、functions.phpに以下を記述することでHTMLを使用できるようになります。

functions.php

remove_filter( 'pre_term_description', 'wp_filter_kses' );

目次へ

3. カテゴリーページの「説明」部分をエディタに変更する

カテゴリー説明の入力部分はデフォルで普通のテキストエリアとなっていますが、これを投稿などと同じようにエディタに変更したい場合はプラグインを使って実装できます。
同じようにエディタを実装できるプラグインは幾つかあるのですが、今回はその中から「Visual Term Description Editor」というプラグインを紹介します。
紹介といっても特に設定などもなく、管理画面のプラグインから「Visual Term Description Editor」を検索してインストール、もしくは「Visual Term Description Editor」から必要なファイルをダウンロードするなどして自身の環境にアップロード後にプラグインを有効化するだけで実装することができます。

カテゴリーページの「説明」部分をエディタに変更

プラグインを有効化後にカテゴリー編集ページを見ると、上のイメージのような感じで「説明」の部分がエディタに変更されているのを確認でき、編集ページだけでなく一覧ページの方でもエディタが変更されているのを確認できます。
ちなみに、ここではカテゴリーということで説明はしていますが、タグの「説明」部分もこのプラグインを有効化するだけでエディタにすることができます。

今回は「Visual Term Description Editor」を紹介していますが、同じようにカテゴリーの説明部分をエディタに変更するプラグインは他にもあり、例えば他で有名なものだと「Rich Text Tags」もあります。
こちらも現時点の最新である4.5.2との互換性もあって基本的な動きも一緒なのですが、興味ある方はそちらも試してみてください。

目次へ

4. カテゴリーページに画像を追加する

カテゴリー数が少ないとか今後変更することがほぼない場合はテンプレート側で条件分岐等を使用してカテゴリー毎に違う画像が表示されるよう指定することもありますが、それを管理画面で行いたいという時に便利なプラグインです。
また、画像というと記事でいうアイキャッチのようなものがパッと思いついきますが、そうではなく各カテゴリーで使うアイコンなどをこのプラグインを使って設定するといった使い方もできると思います。
こちらもエディタ変更同様他にも幾つかありますが、今回はその中から「Categories Images」というプラグインを紹介します。

使い方は管理画面のプラグインから「Categories Images」を検索してインストール、もしくは「Categories Images」から必要なファイルをダウンロードするなどして自身の環境にアップロード後にプラグインを有効化するだけで、特に設定なども必要なく実装することができます。

カテゴリーページに画像を追加

上のイメージはプラグイン有効後のカテゴリー編集画面をキャプチャしたもので、一番下に「Image」という項目が追加されるので、そこからカテゴリー用の画像を登録することができます。
ここで「Upload/Add image」ボタンを押下すればメディアアップローダが表示されるので、投稿などと同じように画像をアップすれば設定できます。
画像を削除したいときは、その横にある「Remove image」ボタンで削除することができます。

このプラグインは編集画面だけでなくカテゴリー一覧のある新規カテゴリー作成欄にも追加されるので、新しくカテゴリーを追加する際に同時に画像設定もできるようになります。
また、カテゴリー名や説明などを一覧表示しているテーブル部分にもサムネイルを表示してくれるようになるので、それぞれどの画像が設定されているのかもわかりやすいです。

テンプレートで表示させる

設定した画像を表示させる方法についてもひと通り揃っていて、例えば以下のような形で呼び出すことができます。

☆画像を表示するURLのみを表示

<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>

☆imgタグで表示

<?php if (function_exists('z_taxonomy_image')) z_taxonomy_image(); ?>

☆サムネイルサイズのURLを表示

<?php echo z_taxonomy_image_url(NULL, 'thumbnail'); ?>

☆いろいろと任意の設定で表示

<?php
	$attr = array(
		'class' => 'foo',
		'alt' => 'bar',
		'title' => 'baz'
	);
	z_taxonomy_image(NULL, 'full', $attr);
?>

その他の方法や具体的な詳細については以下エントリーでまとめられているので、こちらで確認してください。

プラグインのダウンロードや詳細については以下より確認できます。

ちなみに、同じようなプラグインで「Category Featured Images」というものもあります。
今回は「Categories Images」の方が個人的に良かったのでここでは詳しく紹介しませんが、こちらも簡単にカテゴリーに画像設定できるので、興味ある方は試してみてください。

目次へ

5. 「Advanced Custom Fields」ですべてを実装する

上記で「カテゴリー説明部分をエディタにする」「カテゴリーで画像を登録できるようにする」といったことをそれぞれ別のプラグインを使って実装できると紹介しましたが、これらをひとつのプラグインですべて実装してみる方法です。
同じようにカスタムフィールドを手軽に扱えるようにしてくれるプラグインは他にもあるので、それらでも実装することはできると思いますが、以下は個人的に一番利用している「Advanced Custom Fields」を使用した場合になります。

インストール・有効化

Advanced Custom Fields

管理画面のプラグインから「Advanced Custom Fields」を検索してインストール、もしくは「Advanced Custom Fields」から必要なファイルをダウンロードするなどして自身の環境にアップロード後にプラグインを有効化します。
プラグインを有効化するとメニューに「カスタムフィールド」という項目が追加されるので、そこで各種設定を行うことができます。

カテゴリーイメージを設定

フィールドの追加は「+ フィールドを追加」から行うことができ、入力欄などが表示されたらまずは「フィールドラベル」と「フィールド名」を任意で入力します。
今回はフィールドラベルが「カテゴリーイメージ」、フィールド名が「cat_image」とします。

次に「フィールドタイプ」を選択します。
今回はイメージをアップできるようにしたいのでプルダウンから「画像」を選択します。

その下にある「フィールド記入のヒント」と「必須か?」についてはデフォルトのままでも問題ないですが、登録忘れがないようにしたい時や更新する人へのヘルプ的な内容を出したい時などはこれらの内容を変更してください。
また、「返り値」に関しても表示方法によって任意のものを選択すればいいですが、今回は扱いやすい「画像ID」を用いることにします。
「返り値」以降の項目もそれぞれ任意のものに変更(今回はデフォルト)にしてフィールドの設定は完了になり、上記内容で入力・選択していくと下のイメージのような感じになっていると思います。

ACF - カテゴリーイメージを設定

最後に「位置 > ルール」の項目でこのフィールドを表示させる場所を選択します。
プルダウンが3つ表示されているので、左からそれぞれ「Taxonomy Term」「等しい」「カテゴリー」を選択して内容を保存すれば、Advanced Custom Fieldsでの設定は終わりで、カテゴリー一覧・編集ページにいくと「カテゴリーイメージ」という項目が新たに追加されているのを確認できます。

カテゴリーイメージを表示させる

実際に上記で設定した内容を表示させてみます。
今回はcategory.phpに表示させる想定で、表示させたい箇所に以下のように記述します。

category.php

<?php
	$queried_object = get_queried_object();
	$taxonomy = $queried_object->taxonomy;
	$term_id = $queried_object->term_id;
	$cat_image = get_field('cat_image', $taxonomy . '_' . $term_id);
	$size = 'full';
	$image = wp_get_attachment_image_src($cat_image, $size)[0];

	if( $image ) {
		echo '<div class="category-image"><img src="' . $image . '" alt="' . single_cat_title('', false) . '"></div>';
	}
?>

上記をcategory.phpに記述後に実際の表示を確認すると、画像が登録されている場合はそのカテゴリーに設定した画像が表示され、altにはカテゴリー名が設定されます。
ここではsrcaltだけにしていますが、他の属性も表示させたいときは同じような感じで出力すれば任意の内容を表示させることができます。

カテゴリー説明を設定

カテゴリーの説明入力欄はもともと用意されているのになぜわざわざ作る必要があるのかと思うかもしれませんが、例えばこの説明入力周りにヒントを出したいとか投稿と同じようなエディタを導入したいという要望が幾つかあり、尚且つAdvanced Custom Fieldsを既に使用している状況などであれば、個人的にそれら要望をAdvanced Custom Fieldsですべて実装するということがあります。

まず、フィールドグループは先ほどのイメージと同様のものを使用し、「+ フィールドを追加」から新しいフィールドを作成しまず。
入力欄などが表示されたら「フィールドラベル」と「フィールド名」を任意で入力し、今回はフィールドラベルが「カテゴリー説明」、フィールド名が「cat_description」とします。

次に「フィールドタイプ」を選択しますが、ここでは「Wysiwygエディタ」を選択し、これを選択することでカテゴリーの登録や編集をする画面でも投稿などと同じエディタを表示させることができます。

残りの項目は、やはり更新する人へのヘルプ的な内容を出したい時などに「フィールド記入のヒント」「デフォルト値」辺りの項目を使ったり、画像をアップできないように見せたいときは「メディアアップロードボタンを表示するか?」で「いいえ」を選択するなど任意で設定しておきます。

上記内容で入力・選択していくと下のイメージのような感じになっていると思うので、先ほど設定した「位置 > ルール」などは同じものになるのでそのまま更新すれば設定完了となります。

ACF - カテゴリー説明を設定

カテゴリー説明を表示させる

実際に上記で設定した内容を表示させてみます。
イメージと同じくcategory.phpに表示させる想定で、表示させたい箇所に以下のように記述します。
category.phpに記述後に実際の表示を確認すると、カテゴリー説明が入力されている場合は内容が表示されているのが確認できます。

category.php

<?php
	$queried_object = get_queried_object();
	$taxonomy = $queried_object->taxonomy;
	$term_id = $queried_object->term_id;
	$cat_desc = get_field('cat_description', $taxonomy . '_' . $term_id);

	if( $cat_desc ) {
		echo '<div class="category-description">' . $cat_desc . '</div>';
	}
?>

もともとある「説明」を非表示にする

上記でエディタで入力することができるカテゴリー説明を実装しましたが、そうなるともともと用意されている「説明」の項目が不要になるので、更新者が戸惑わないようにこれを非表示にします。
もっとちゃんとした方法もあるとは思いますが、ここでは手っ取り早いのでCSSで非表示にしてしまう方法で、functions.phpに以下のように記述します。

functions.php

function remove_default_term_description() {
?>
<style type="text/css">
body.taxonomy-category .term-description-wrap {
	display: none !important;
}
</style>
<?php
}
add_action( 'admin_head', 'remove_default_term_description' );

カテゴリーイメージとカテゴリー説明の表示をまとめる

上でカテゴリーイメージとカテゴリー説明を表示させる記述例をそれぞれあげましたが、もちろんもう少しまとめて記述することもできます。
これらを一緒に表示させるのであれば、category.phpに以下のような記述で表示させることができます。

category.php

<?php
	$queried_object = get_queried_object();
	$cat_id = $queried_object->taxonomy . '_' . $queried_object->term_id;
	$cat_image = get_field('cat_image', $cat_id);
	$cat_desc = get_field('cat_description', $cat_id);
	$size = 'full';
	$image = wp_get_attachment_image_src($cat_image, $size)[0];
?>

<?php if( $image ): ?>
	<div class="category-image">
		<img src="<?php echo $image; ?>" alt="<?php single_cat_title(); ?>">
	</div>
<?php endif; ?>

<?php if( $cat_desc ): ?>
	<div class="category-description">
		<?php echo $cat_desc; ?>
	</div>
<?php endif; ?>

他にもいろいろできそう :)

今回は特に実装する機会が多い印象な2つを例にあげましたが、Advanced Custom Fieldsにはフィールドタイプが豊富に揃っているので他にもいろいろな機能を実装することができると思います。
例えばカテゴリーイメージと同じ感じでアイコン表示したりカテゴリー名・説明とは異なる別のテキストを表示などもちろんできますし、ラジオボタンやチェックボックスを利用してその条件によって出力内容を切り替えるなどもできそうですね。

また、後々何か新しい項目を追加する際もこのプラグインを使っておくと楽ですし、追加した際に項目の並び替えを行いたいという場合も容易に可能なので、カテゴリー表示のカスタマイズのために沢山プラグインを使用しているとか既に他の部分でこのプラグインを使用していて有効化しているという時などはこの方法を使った実装も試してみてください。

目次へ

以上、WordPressでカテゴリー周りをカスタマイズする際の備忘録でした。
カスタマイズといっても全体的に容易な内容ではありますが、個人的に比較的頼まれることが多いのではないかと思ったものになります。
サイトによっては今後変更が入らない等の理由でテンプレート側ですべて行ってしまうということもあるんですが、記事だけでなくこういった箇所も管理者・クライアントが自由に変更できるようにしたい時などに使えると思います。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。