カテゴリーの説明を利用してカテゴリーに画像やアイコンを設置

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約4年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : |

カテゴリーの説明を利用してカテゴリーに画像やアイコンを設置

過去に「カテゴリーにアイコンを設置する」という内容の記事を2回書きました。

これで3回目です。

そろそろ標準機能として搭載されないのでしょうかね。
(されたら当記事は誰も見てくれなくなりますけど)

今回は category_description を使ってみます。

過去のカテゴリーアイコン設置記事

プラグイン Advanced Custom Fields を使用した方法。

Advanced Custom Fields でカテゴリーにアイコンを設置

プラグイン Category Image(s) を使う方法。

カテゴリー毎に個別のアイコンを紐付けるプラグイン Category Image(s)

そして今回は、標準で搭載されている「カテゴリーの説明(category_description)」という機能を利用します。

category_descriptionでHTMLタグが使えるようにする

カテゴリーの説明(category_description)はHTMLタグは自動的に削除されるようになってます。

これをHTMLタグが使えるようにします。

方法としては functions.php に下記コードを加えます。

一行目は category_description でHTMLタグを使用できるようにして、二行目では出力時に勝手にpタグで挟むのを解除してます。

二行目は今回の記事を書くまで知りませんでした。そして下記サイト様に教えてもらいました。ありがたやありがたや。

WordPress:category_description関数の注意点

もう一つの方法として考えたのがプラグイン Allow HTML in Category Descriptions を使う方法。

WordPress › Allow HTML in Category Descriptions « WordPress Plugins

これを使ってもHTMLタグが使えるようになります。

が!

検証したところ出力するコードがpタグで挟まれてしまいます。

ということで、今回はこのプラグインは使わない事にしますが、使い方次第で便利なプラグインかなと。

アイコンや画像をカテゴリーの説明欄に設置

まず用意したアイコン等を メディア >> 新規追加 でアップロードします。

その後、アップロードしたものの編集画面に移ると「ファイルのURL」が表示されますので、そのURLをコピーしておきます。

次にカテゴリーの編集画面にある「説明」欄に移ります。

category-edit-ss

そこに次のようなコードを書いて保存。

width height で大きさを調整して下さい。

テーマやウィジェットで category_description を使ってアイコンを表示

カテゴリーページやシングルページで今回の技を使うのは簡単ですね。

もともとテーマに category_description が書いてあればそこに表示されます。

無ければ下記コードを表示した場所に挿入すればOK

ウィジェットに表示する場合は標準の「カテゴリー」部品を使っても表示されませんので、PHPをウィジェットで使用できるようにし、下記コードみたいなのを挿入

あとは css で調整すればイイんじゃないかなと。

css 苦手・・・ 真面目に学ぶかな・・・

注意点として、カテゴリーの説明欄にアイコンと説明文を設置したとして、アイコンだけ、説明文だけを表示するとかは出来ません。
(いや、やろうと思えば出来ますが、それなら別な方法でアイコン設置した方が良いかな、ということ)

あまり日の目を見ない category_description ですが、カテゴリーのページに画像を表示して華やかにするのも良いのではないかと思います。

コメントを残す

メールアドレスが公開されることはありません。

*