WordPress のテーマ THE THOR に標準で装備されている機能 カテゴリ最新記事 の並び順を自由に変更するカスタマイズを行います。
「サイトで推しているカテゴリー、人気のカテゴリーを上位に表示したい」
そうした要望に応えるカスタマイズとなります。
THE THOR カテゴリ最新記事の順番 を変更するカスタマイズ
CSSを使用して順番を変更します。
外観 → カスタマイズ → 追加CSS
基本のCSSコードは以下のようになります。
カテゴリ最新記事の項目が多いと頭がこんがらがるので作業前に書き出して整理しておくと良いですね。
基本のコード
ul.categoryBox__list li:nth-child(n){order:X;}
カテゴリ最新記事に表示するカテゴリーが4個だとすると、上記コードが4つ必要になります。
コードの解説
:nth-child(n)で順番を変更する記事を指定します。
nの部分がもともと表示されている記事の順番です。
例えば、現在4番目に表示されている記事の順番を変更するには :nth-child(4)とします。
order:Xで変更後の順番を指定します。
例えば、2番目に表示する場合はorder:2とします。
上記のように4番目に表示されている記事を2番目に変更する場合は、
ul.categoryBox__list li:nth-child(4){ order:2; }
となります。
サンプル
カスタマイズ前
「1234」と並んでいるカテゴリ最新記事を「3412」と並び変える場合のサンプルコードです。
/* サンプル */
ul.categoryBox__list li:nth-child(1){order:3;}
ul.categoryBox__list li:nth-child(2){order:4;}
ul.categoryBox__list li:nth-child(3){order:1;}
ul.categoryBox__list li:nth-child(4){order:2;}
カスタマイズ後
補足事項
このカスタマイズではorderで並び順を指定しています。では指定しない場合はどうなるのでしょうか？
orderで順番を指定していない場合は0番が設定されています。
順番の指定には-1や-2などを指定することもできます。
たとえばカテゴリ最新記事の1つの項目を選択してorder:-1を設定すると先頭に表示させることができます。
10個のカテゴリーの中で2つだけ先頭にして他の項目はそのままで良いといった場合は、-1と-2を使用して2行のコードのみで対応が可能ですので状況により使い分けてください。
当サイト「からあげ棒、ありったけ」は THE THOR というワードプレステーマを使用しています。 どうせブログをやるなら人とは違ったデザインのサイトを構築したい。 そんな風に思う人は多いと思います。 […]
あとがき
記事数順に並んでいると似たカテゴリーでも離れ離れで表示されてしまうことがあります。そういった場合にも有効なカスタマイズです。
閲覧数に大きく影響するようなことは無いと思いますが、見た目を整えるといった意味では大事な部分だと思いますので是非お試しください。
＼CSSを書籍で学ぶ／
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チート...
