Cocoonではカテゴリページを自由にカスタマイズすることが可能なので、カテゴリページをユーザにとって価値の高いページにすることができます。
ただし、Cocoonのデフォルト機能のままだと、カテゴリページの説明文が編集できません。
All in one SEO PACKなどの別プラグインを使ってSEO対策している場合、カテゴリページの説明文が編集できないと、カテゴリページのメタディスクリプションが出力できないということになります。
カテゴリページをindex登録していると、メタディスクリプションが出力できないことによって、SEO対策が不十分と判断されて、検索順位やクリック率などに影響が出る可能性があります。
そこで、今回はAll in one SEO PACKなどの別プラグインを使っている方にむけて、「Cocoonでもカテゴリページの説明文を修正する方法」についてご紹介いたします。
ちなみに、これはCocoonのフォーラムで質問させて頂いて「かうたっくさん」に回答頂いたものです。ありがとうございました。
完全に自分の備忘用なのですが、記事としてまとめておきたいと思います。
Cocoonのカテゴリページについて
Cocoonでは、カテゴリページごとにアイキャッチ画像の設定やカテゴリの色を決めるなど、詳細なカテゴリページを作成できるようになっています。（詳細は公式サイトをご覧下さい）
Cocoonのカテゴリページの問題点
問題というと少し語弊がありますが、Cocoonのカテゴリページでは”説明”が修正できません。
カテゴリページの”説明”とは、カテゴリ一覧に表示されているカテゴリを説明している文章のことです。
カテゴリを選択すると一覧が表示されて、カテゴリの”説明”を確認することができます。
ただし、このカテゴリ一覧からカテゴリの詳細ページに遷移しても、”説明”を修正する箇所が表示されていないのです。
ところで、カテゴリの”説明”が修正できないと、何が問題になるのでしょうか？
それは、All in one SEO PACKなどの別プラグインを使ってSEO対策している場合、カテゴリページの説明文が編集できないと、カテゴリページのメタディスクリプションが出力できないということになります。
カテゴリページをindex登録していると、メタディスクリプションが出力できないことによって、SEO対策が不十分と判断されて、検索順位やクリック率などに影響が出る可能性があります。
ただし、Cocoonの機能を使ってSEO対策している場合は”説明”に記載する文章を使用せず、カテゴリ詳細ページの「メタディスクリプション」を使用するので、問題ありません。
カテゴリページのメタディスクリプションとは
カテゴリページのメタディスクリプションとは何かというと、検索エンジンで自分のサイトのカテゴリを検索した時に出てくる”サイトの説明文です”。
これだけでクリック率が大きく変わるとか、検査順位が大きく変動するかは分かりませんが、ちゃんと設定しておいて、損はないと思います。
カテゴリページの説明を修正する方法
それではカテゴリページの説明を修正する方法についてご紹介します。
1.開発者ツールでcssを修正する
最初の方法は開発者ツールでcssを修正する方法です。cssファイルを修正してアップロードしたり、何かプラグインを入れたりする必要がなく、一番手軽な方法です。
ここではChromeを例にしてご紹介します。
まず、はじめに開発者ツールを開いて「Elements」を選択し、検索フォームを表示させてください。検索フォームはMacなら「Command」+「F」で表示できます。
続いて、検索フォームで「term-description-wrap」を検索してください。テーブル構造を示す＜tr＞タグの行が見つかれば、その行を選択してください。
すると、その行のstyleが画面右横に表示されます。
styleの欄で「display:none」のチェックを外すと、画面上に”説明”の欄が表示されます。あとは、説明欄の中を修正して、更新ボタンを押せばOKです。
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のバージョンアップで親テーマをアップデートすると、この設定が消えてしまいますのでご注意ください。
4.子テーマのadmin.cssを修正する
常時表示させたい場合は、子テーマのadmin.cssに先ほどのcssを追記してください。
子テーマのadmin.cssを作る方法は、以下のかうたっくさんの記事を参考にしてください。
参考 Coccon管理画面スタイル変更に！CSSを子テーマに導入コピペで簡単、実装方法
まとめ
Cocoonのテーマでカテゴリページの”説明”を修正する方法についてご紹介しました。
All in one SEO PACKを使ってメタディスクリプションを出力している方は、本記事の手段でしっかり説明を修正して、メタディスクリプションの出力を行ってくださいね。
参考になれば幸いです。
コメント