カテゴリ一覧ページにHTML対応コンテンツを表示する方法

 

この記事では、Wordpressのカテゴリ一覧のページで、HTMLコンテンツを使えるようにする設定方法を紹介します。

WordPressのカテゴリ一覧のページは、新着リストが自動生成されるように作られていますが、カテゴリー編集ページでは自由に編集はできません。

カテゴリー編集ページの「説明」欄は、本来、単純に文字を入力するだけのメモとしての機能しかそなわっていません。一部テーマではカテゴリーページへ表示させる説明文として機能しますが、通常はHTMLを使って装飾そうしょくしたり、ボックスや色分け強調なども一切できません。

カテゴリ一覧のページにもおすすめ記事へのリンクを配置したり、関連カテゴリへの誘導なども自由に配置してみたいと思いませんか?

WordPressメニュー テーマの編集からfunction.phpを編集することで、カテゴリ一覧の紹介文入力エリアを、HTML対応にすることができます。

カテゴリ設定の説明欄をHTMにL対応させる設定方法

WordPressメニュー 投稿 カテゴリーの中にある「説明」欄を、カテゴリ一覧ページに説明文やおすすめなどを表示させるための投稿用入力欄にしていきます。

カテゴリー編集ページの説明欄

カテゴリーページの「説明」欄をHTMLに対応させて、カテゴリ一覧ページに表示させるには、2つの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対応にして、カテゴリ一覧ページに表示させる方法を紹介しました。

カテゴリ一覧のページもキーワードを配置すれば、検索に表示される可能性があります。カテゴリー内のおすすめ記事を紹介したり、サブカテゴリーへの案内など、使い方はたくさん考えられますね。

訪れた読者にサイト内をわかりやすく案内するために、ぜひ活用していきましょう。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする