loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【WordPress】カテゴリー一覧ページの先頭に説明文を表示させよう
この記事は約4分で読めます。

【Wordpress】カテゴリー一覧ページの先頭に説明文を表示させよう

投稿日:2016.9.29

サイトのサイドメニューには必ずと言っていいほど「カテゴリー」一覧がありますでしょ。

でもカテゴリー名だけではいったいどんなジャンルの記事群なのかさっぱりわからないって時もあるんじゃないでしょうか?

そこでカテゴリー一覧ページの先頭にカテゴリーの説明を表示させて、
訪問者に優しいページ作りのやり方をご紹介します。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

必須じゃないけどあった方がいいってものよ

カテゴリー名って割と大ざっぱな名称のものが多いことと思います。

そのカテゴリー名で中味がすんなりわかればいいんですが、
サイトによってはカテゴリー名が抽象過ぎてわかりにくいとか、
はたして自分が探している記事はこのカテゴリーの中にあるのか?
といった疑問を持たせてしまうカテゴリーもあったりするでしょう。

当サイトのカテゴリーも、
あらためて見返してみるとかなりざっくりしてますね。

たとえば「ウェブデザイン」というカテゴリー……
今更ながらですが、抽象的すぎてわかりにくいです。(笑)

カテゴリー一覧ページもどんな内容の記事があるのか、
すぐにはわかりませんね。

キャプチャ画像

作った当初は”かっこいい”という理由だけでこの名称にしたんですが、
大ざっぱすぎました。

かといってあんまり長い説明調のカテゴリー名に変えるのもどうかと思って
今日までそのままにしてあります(^^;)

こんな風に疑問を持ちながら記事を探してもらうんだったら、
カテゴリーページを開いたときに先頭にそのカテゴリーの簡単な説明が載っていた方が
訪問者に優しいサイトになるってもんじゃないでしょうか。

 

スポンサーリンク

実装

カスタマイズの注意点として、失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておきましょう。

プラグインもあることはあるんですが、
今回はプラグインに頼らないやり方で進んでいきます。

プラグインの数は少ないにこしたことはないですから。

 

説明文はどこに書く?

ワードプレス管理画面の「カテゴリー」をクリックすると、
見慣れたこんな画面が出てくると思います。

キャプチャ画像

赤枠で囲んだ「説明」って欄、ここに何か記入したことのある人いますか?

実は今回のカテゴリー一覧ページの先頭に表示させる説明文は
ここに記入したものが表示される仕組みになってます。

ただそのままだとすんなり表示させてはくれないんですよね。

 

”説明”表示用のファイルを特定する

次にカテゴリー一覧を表示するphpファイルを探します。

一般的には「category.php」か「archive.php」のはずです。

これはあなたが使っているテーマによって異なりますが、
2つとも存在する場合の優先順位は「category.php」になります。

「category.php」がない場合は「archive.php」になります。

 

表示用コードを書き込む

見つかったカテゴリー表示用phpファイルを開きます。

説明文を表示させたい位置に表示用のコードを差し込みます。

もしも場所がわからないという場合は『if ( have_posts() ) : while ( have_posts() ) :~』といったコードを探しましょう。

これがカテゴリー一覧を出力するコードなのでその直前あたりに差し込んで様子をみてください。(元に戻せるようバックアップコピーは必ずとってくださいね)

差し込むコードは以下になります。

ただしこのままだと記事数が多い場合には2ページ、3ページ…と
すべてのページの先頭にカテゴリー説明文が表示されてしまいます。

それが嫌だという方は次のように条件分岐で書き込めば
2ページ目以降は非表示になります。

これでとりあえず先ほどの『説明』に書いた内容は表示されます。

ただしこのままでは”img”や”class”といったHTMLタグが使えないんです。

画像を放りこんだり太字にすることができないんです。

もしもタグを書いたとしても更新すると自動的に消されちゃいます。

それを可能にするためにfunctions.phpに以下を追記する必要があります。

これでHTMLタグが使える説明文の表示が可能になります。

ですがこのままだとCSS(デザイン)を当てにくいので、
説明文表示用の部分を”div”で囲っちゃいましょう。

そうすればマージンなども当てやすくなります。

ということで差し込みコードは最終的にはこんな感じになります。

(クラス名”cat_desc”はサンプルなので適当に変えてください)

ちなみに当サイトの「ウェブデザイン」というカテゴリーの『説明』欄には
以下のような感じでタグを打って、CSSで簡易装飾してます。

<p>ここでは<br /><span class=”f_bold”>ウェブサイト作成時におけるテクニック全般、HTML、CSS</span>に関する記事をご紹介してます。</p>
<p>ごゆっくりどうぞ。</p>

結果、こんな感じになりました。

(ご覧になる時期によっては実際の表示と異なっている場合もあります)

キャプチャ画像

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LAW (TCD031)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ