この記事では、Wordpressのカテゴリ一覧のページで、HTMLコンテンツを使えるようにする設定方法を紹介します。
WordPressのカテゴリ一覧のページは、新着リストが自動生成されるように作られていますが、カテゴリー編集ページでは自由に編集はできません。
カテゴリー編集ページの「説明」欄は、本来、単純に文字を入力するだけのメモとしての機能しか備わっていません。一部テーマではカテゴリーページへ表示させる説明文として機能しますが、通常はHTMLを使って装飾したり、ボックスや色分け強調なども一切できません。
カテゴリ一覧のページにもおすすめ記事へのリンクを配置したり、関連カテゴリへの誘導なども自由に配置してみたいと思いませんか？
WordPressメニュー テーマの編集からfunction.phpを編集することで、カテゴリ一覧の紹介文入力エリアを、HTML対応にすることができます。
もくじ
カテゴリ設定の説明欄をHTMにL対応させる設定方法
WordPressメニュー 投稿 カテゴリーの中にある「説明」欄を、カテゴリ一覧ページに説明文やおすすめなどを表示させるための投稿用入力欄にしていきます。
カテゴリーページの「説明」欄をHTMLに対応させて、カテゴリ一覧ページに表示させるには、２つのPHPファイルを編集します。
- category.php(親テーマフォルダから子テーマフォルダへコピーする)
- function.php
「説明」欄にわかりやすいHTML（ボックスやカラー表示など）で、記述して確認してください。
category.phpの編集
category.phpが子テーマのフォルダへ入っていない場合、安全のため親テーマから子テーマへコピーしておきます。
WordPressフォルダ wp-content themes 親テーマフォルダ から 子テーマのフォルダへコピーします。
編集は、子テーマへコピーしたファイルで行います。正常にコピーが完了すると子テーマの 外観 テーマの編集 テーマファイル の一覧に表示されるようになります。
category.phpファイルの表示させたい場所へ以下のコードを挿入します。
<?php
////////////////////////////
//カテゴリ説明文の挿入
////////////////////////////
if (is_category() && //カテゴリページの時
!is_paged() && //カテゴリページのトップページの時
category_description()) : //カテゴリの「説明」欄が空ではない時 ?>
<!-- カテゴリの「説明」欄の内容を表示 -->
<div class="category-description"><?php echo category_description(); ?></div>
<?php endif; ?>
<?php get_header(); ?> と <?php get_footer(); ?> のあいだに挿入すると、カテゴリ一覧リストの上部に表示されます。
カテゴリーページのトップページに、div要素で囲んで「説明」欄の内容を表示します。
function.phpにコードを追加
上記のcategory.phpの編集だけでは、HTMLに対応していません。文字のみが表示される状態です。
カテゴリー編集ページの「説明」欄をHTML対応にするには、function.phpに次のコードを追加します。
//カテゴリー説明文でHTMLタグを使う remove_filter( 'pre_term_description', 'wp_filter_kses' );
以上で、設定は完了です。
カテゴリー編集ページの「説明」欄が、投稿記事と同じようにHTML対応となりました。
CSSの設定に注意
HTML対応設定で、HTMLが使えるようになりましたが、適応されるCSSには注意が必要です。
HTMLをカテゴリー設定の説明欄に記述しただけでは、適応されないCSSがあります。category-descriptionクラスのdiv要素に対して、CSSを記述する必要があります。
投稿記事本文と同じCSSで良いのであれば、「.category-description」を追加するだけで、適用されるようになります。
まとめ
カテゴリー編集ページの「説明」欄をHTML対応にして、カテゴリ一覧ページに表示させる方法を紹介しました。
カテゴリ一覧のページもキーワードを配置すれば、検索に表示される可能性があります。カテゴリー内のおすすめ記事を紹介したり、サブカテゴリーへの案内など、使い方はたくさん考えられますね。
訪れた読者にサイト内をわかりやすく案内するために、ぜひ活用していきましょう。
