Cocoonのカテゴリページの説明欄を修正してメタディスクリプションを出力しよう

Cocoon
SponserLink

Cocoonではカテゴリページを自由にカスタマイズすることが可能なので、カテゴリページをユーザにとって価値の高いページにすることができます。

 

ただし、Cocoonのデフォルト機能のままだと、カテゴリページの説明文が編集できません

 

All in one SEO PACKなどの別プラグインを使ってSEO対策している場合、カテゴリページの説明文が編集できないと、カテゴリページのメタディスクリプションが出力できないということになります。

 

カテゴリページをindex登録していると、メタディスクリプションが出力できないことによって、SEO対策が不十分と判断されて、検索順位やクリック率などに影響が出る可能性があります

 

そこで、今回はAll in one SEO PACKなどの別プラグインを使っている方にむけて、「Cocoonでもカテゴリページの説明文を修正する方法」についてご紹介いたします。

 

ちなみに、これはCocoonのフォーラムで質問させて頂いて「かうたっくさん」に回答頂いたものです。ありがとうございました。

 

完全に自分の備忘用なのですが、記事としてまとめておきたいと思います。

SponserLink

Cocoonのカテゴリページについて

Cocoonでは、カテゴリページごとにアイキャッチ画像の設定やカテゴリの色を決めるなど、詳細なカテゴリページを作成できるようになっています。(詳細は公式サイトをご覧下さい)

 

Cocoonのカテゴリページの問題点

問題というと少し語弊がありますが、Cocoonのカテゴリページでは”説明”が修正できません

 

カテゴリページの”説明”とは、カテゴリ一覧に表示されているカテゴリを説明している文章のことです。

wordpressのカテゴリ

 

カテゴリを選択すると一覧が表示されて、カテゴリの”説明”を確認することができます。

wordpressのカテゴリ説明

 

ただし、このカテゴリ一覧からカテゴリの詳細ページに遷移しても、”説明”を修正する箇所が表示されていないのです。

Cocoonのカテゴリ詳細ページで説明が修正できない画像

正確に言うと、Cocoonのカテゴリ詳細ページでは”説明”の項目がないのではなく、あえて”非表示”にしているそうです。

 

ところで、カテゴリの”説明”が修正できないと、何が問題になるのでしょうか?

 

それは、All in one SEO PACKなどの別プラグインを使ってSEO対策している場合、カテゴリページの説明文が編集できないと、カテゴリページのメタディスクリプションが出力できないということになります。

 

カテゴリページをindex登録していると、メタディスクリプションが出力できないことによって、SEO対策が不十分と判断されて、検索順位やクリック率などに影響が出る可能性があります

 

ただし、Cocoonの機能を使ってSEO対策している場合は”説明”に記載する文章を使用せず、カテゴリ詳細ページの「メタディスクリプション」を使用するので、問題ありません。

 

カテゴリページのメタディスクリプションとは

カテゴリページのメタディスクリプションとは何かというと、検索エンジンで自分のサイトのカテゴリを検索した時に出てくる”サイトの説明文です”。

カテゴリのメタディスクリプション

これだけでクリック率が大きく変わるとか、検査順位が大きく変動するかは分かりませんが、ちゃんと設定しておいて、損はないと思います。

 

カテゴリページの説明を修正する方法

それではカテゴリページの説明を修正する方法についてご紹介します。

 

1.開発者ツールでcssを修正する

最初の方法は開発者ツールでcssを修正する方法です。cssファイルを修正してアップロードしたり、何かプラグインを入れたりする必要がなく、一番手軽な方法です。

ここではChromeを例にしてご紹介します。

 

まず、はじめに開発者ツールを開いて「Elements」を選択し、検索フォームを表示させてください。検索フォームはMacなら「Command」+「F」で表示できます。

開発者ツールでcocoonの説明を表示する方法

 

続いて、検索フォームで「term-description-wrap」を検索してください。テーブル構造を示す<tr>タグの行が見つかれば、その行を選択してください。

すると、その行のstyleが画面右横に表示されます。

開発者ツールでcocoonの説明を表示する方法

 

styleの欄で「display:none」のチェックを外すと、画面上に”説明”の欄が表示されます。あとは、説明欄の中を修正して、更新ボタンを押せばOKです。

開発者ツールでcocoonの説明を表示する方法

 

2.プラグイン「Theme Test Drive」を使う

次はプラグイン「Theme Test Drive」を使う方法です。

 

「Theme Test Drive」を使うと、管理者だけ別のテーマを表示することが可能となります。プラグインを使って、「Simplicity」や「Twenty fifteen」などのテーマでカテゴリページを見ると、説明欄が表示されますので、そこで説明文を修正してください。

 

Theme Test Driveの使い方は「 WordPressのテーマ移行に便利な「Theme Test Drive」の使い方と注意点」をご覧下さい。

 

3.親テーマのadmin.cssを修正する

次はadmin.cssを修正する方法です。

 

親テーマのadmin.cssに以下のcssを追加します。

.term-description-wrap {
	display: table-row !important;
}

すると、カテゴリの詳細ページに説明が表示されますので、説明の内容を修正して下さい。非常に簡単ですね。

admin.cssは「外観」→「テーマの編集」→編集するテーマで「Cocoon」を選択すると、cssの下にあります。

cocoonでカテゴリの説明欄を表示する方法

 

なお、この方法を使った場合、Cocoonのバージョンアップで親テーマをアップデートすると、この設定が消えてしまいますのでご注意ください

 

4.子テーマのadmin.cssを修正する

常時表示させたい場合は、子テーマのadmin.cssに先ほどのcssを追記してください。

 

子テーマのadmin.cssを作る方法は、以下のかうたっくさんの記事を参考にしてください。

参考 Coccon管理画面スタイル変更に!CSSを子テーマに導入コピペで簡単、実装方法

 

まとめ

Cocoonのテーマでカテゴリページの”説明”を修正する方法についてご紹介しました。

 

All in one SEO PACKを使ってメタディスクリプションを出力している方は、本記事の手段でしっかり説明を修正して、メタディスクリプションの出力を行ってくださいね。

 

参考になれば幸いです。

Cocoon

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント