Cocoonサイトで記事内にあるカテゴリーの表示順を変える方法

Cocoonのテーマを使ったサイトで記事内に表示されるカテゴリーですが、複数のカテゴリーを設定している場合は、その表示される順番が意図しないものになっていることがあります。

特にカテゴリーに親子関係がある場合は、子にあたるカテゴリーが先に表示されることがあり、困ってしまいます。

例えば、ためセル！の場合だと「エクセルをためセル！」というカテゴリーの中に「基本ワザ」というカテゴリーがあり、さらにその中に「初級（基本ワザ）」というカテゴリーがあるのですが、先に「基本ワザ」から表示されていて、親子関係がわからなくなっています。

ということで、このページでは、Cocoonサイトで記事内にあるカテゴリーの表示順を変える方法についてご紹介します。

スグにためセル！ – ここを読めばすぐ使える

※　より詳しい解説はここから下に続きます。

カテゴリーを任意の順番で表示させたい

テーマ「Cocoon」で作成したサイトで、記事の内にカテゴリーを表示する機能があります。

当サイト「ためセル！」だと、各ページの下の方に表示されています。

そんなカテゴリー表示ですが、カテゴリーが複数設定されている場合、その順番を変更したい場合があります。

例えば、下の図では「初級（小ワザ）」「初級（困った）」とありますが、これらはそれぞれ「意外と知らない小ワザ」「エクセルの困った」のサブカテゴリー（子カテゴリー）となっています。
しかし、下のような表示だとその関係性がわからなくなっています。

実は、カテゴリーの表示順は、Cocoonの設定画面では変更できないのです。
しかし、CSSを編集することで、変更することができますので、ご紹介します。

カテゴリーの表示順を変更する方法

それでは、ここからカテゴリーの表示順を変更する方法についてご紹介していきましょう。

ここからは、テーマファイルやHTMLファイルなどを直接編集します。この編集を間違えると、最悪サイトが表示されなくなる場合もありますで、編集するファイルは必ずバックアップを取り、自己責任の上で作業を行ってください。

CSSファイルの編集

カテゴリーの表示順を変更するには、下記のコードを「style.css」ファイルに追記します。

.entry-categories-tags>div.entry-categories{
	display:flex;
	flex-wrap: wrap;
	margin-bottom: -2px;
}
.entry-categories-tags>div.entry-categories>a{
	margin-bottom: 5px;
}
a.cat-link.cat-link-77{ /* エクセルをためセル！ */
	order:1
}
a.cat-link.cat-link-5{ /* 基本ワザ */
	order:2
}

１～８行目は、カテゴリーを表示しているエリア全体に対するスタイルです。

９行目から各カテゴリーの表示順をorderで指定しています。数字が小さいほど先に表示されるようになります。

各カテゴリーのクラス名は「cat-link-77」や「cat-link-5」のように「cat-link-○」という形で表します。
この番号は、カテゴリーのIDとなっており、下の図のようにカテゴリー一覧画面から確認することができます。

全てのカテゴリーについて、IDと表示したい順番をorderで指定すれば設定完了です。

とはいえ、カテゴリーがたくさんある場合は、IDを確認してそれぞれにCSSを記述するのはめんどくさいですよね・・・。

Excelを使ってCSSを作成する

そこで、エクセルを使って、すべてのカテゴリーのスタイルを一気に作成したいと思います。

まずは、WordPress管理の「投稿」から「カテゴリー」を選択し、カテゴリー一覧画面を開きます。

カテゴリー一覧画面では、すべてのカテゴリーを選択して、コピーします。

次に、エクセルを開いて、Ａ１セルで右クリックします。
その中から「貼り付け先の書式に合わせる」（下の画像）をクリックします。

すると、下の図のようにカテゴリー一覧が貼り付けられました。

しかし、この表は、「編集 | クイック編集 | 削除 | 表示」と書かれた不要な行が含まれています。

この行は邪魔なので、削除しておきましょう。

複数の行を一気に削除するには、Ctrキーを押しながら、行をクリックしていきます。
全ての行を選択できたら、Ctrと‐キーを同時に押して削除できます。

不要な行を削除すると、下の図のようになります。

次に、G1セルに次の数式を入力します。

入力したら、

a.cat-link.cat-link-77{ /* エクセルをためセル！
order:1
}

と表示されるはずです。

この数式で１つのカテゴリーのCSSが作れるので、あとは、これを下にコピーしていけば、一気にすべてのカテゴリーのCSSが作れるということです。

あるセルを一気に下までコピーするには、そのセルの右下にある四角の部分（「フィルハンドル」と言います。）をダブルクリックします。

エクセルでセルを下にコピーするときダブルクリックが最も簡単

エクセルでは、セルの右下（フィルハンドルといいます）をドラッグしてコピーすることができます。 しかし、もっと簡単に、フィルハンドルをダブルクリックするだけでコピーすることができるのです。

スマホで読む

ＱＲコードを読み込んでスマホへ送る

▲

tamecell.net

これで、すべてのカテゴリーのCSSができたので、コピーしておきましょう。

次に、WordPressに戻り、「style.css」ファイルに今コピーしたコードを貼り付けます。

これで記事内のカテゴリーを任意の順番で表示することができているはずです。

まとめ

Cocoonのサイトでは、投稿記事内のカテゴリーが変な順番で表示されることがあります。

しかし、CSSファイルを編集することで好きな順番で表示することができます。

カテゴリーがたくさんあると、CSSのコードを記述するのがめんどくさいですが、ためセル！のサイトらしくエクセルを活用して、簡単にコードを作成することができました。ぜひお試しください。

以上、このページでは、Cocoonサイトで記事内にあるカテゴリーの表示順を変える方法についてご紹介しました。