kwmaster 追加CSSクラスを使う理由
Snow Monkeyでサイトを制作する際に、個人的に以下の理由で追加CSSを多用しています。
- 影響範囲を限定したい為に、セクションごとに追加CSSクラスをまず設定したい。
- Snow Monkey Blocks由来のCSSを直接上書きしてしまうと、後で見返した際にどのような部品にCSSをあてたか、ひと目で分かりにくい。CSSのリライトの時の読み解きの時間を減らすために、CSSをあてる部分ごとに、ひと目でどこにあてたか分かりやすいクラス名をつけたい。
- 画像と文字を横並び、または例として画像として挿入したSNSのアイコンを横並びにしたい → 複数選んでグループ化 、生成されるwp-block-group__inner-containerに、display:flexなどをあてて並びを制御したり
- ブロック単体にはCSSがあてづらい場合でも、グループ化することで生成されるhtmlには、背景色、margin、padding、borderなど手作業のコーディングに近い感覚であてやすい。
- 最強のブロックと思っている項目ブロックを使う時。項目ブロックの中身を項目スタンダードではなく、自由入力ブロックにして、各ブロックを詰め込むと自由なレイアウトで作れる。その際、項目ブロックや、詰め込んだ各ブロックに追加CSSクラスを設定しています。グループ化も組み合わせればかなり自在な表現ができます。ある程度1つ目の自由入力ブロックの中身の型ができたら、自由入力ブロックの部分を選択して、複製して中身を変えて使っています。
(余談ですが、項目ブロックはデバイスサイズごとに列数を変更できるのでかなり使い勝手がいいです。）
固定ページに限定してですが、Snow Monkeyを考慮していないデザインデータがあるときはかなり多用しています。またデザインデータがない場合でも細かい修正をいれたくなるのと、クラス名を見ただけで影響範囲を特定したいという願望が強く（笑）、追加CSSクラスを多用していると思います。
（CSSはMy Snow MonkeyにSCSSで書いて、Visual Studio Codeで保存する際に自動でCSSを出力させています。)
Snow Monkeyはテーマですが、テーマと言うよりいいとこ取りのフレームワークとして便利に使わせてもらっているのかもしれません。
なぜ追加CSSクラスを上にやりたくなったのか
CSSを当てていく時は、デベロッパーツールであらかじめ数値を決めたり、挙動を確認してSCSSに書いていたのですが、最近になって、追加CSSクラスの入力欄で、どのような追加CSSクラスが書かれているか確認したり、入力することに時間がかかっていることに気づきました。
ブロックを選択するのは矢印キーや、カーソルで選択すれば一瞬なのですが、高度な設定は一番下にあり、スクロールが都度必要です。トグルをクリックして、開く作業もあります。
なんとか、この部分の時間を減らせないかと技術がない中で考えたのが以下の内容です。
あまり技術がないので、時間がかかったのですが、後で時間を節約できるなら有意義な時間（刃を研ぐ的な発想）かと思いチャレンジしました。
実際のコード
管理画面にCSSをあてるために、下記のサイトを参考にさせていただきました。
My Snow Monkeyのfunction.phpに下記を記載します。
function my_admin_style() {
echo '<style>
.block-editor-block-inspector {
display: flex;
flex-direction: column;
}
.block-editor-block-inspector > div:last-of-type {
order:-1;
background-color:#afffa8;
}
.block-editor-block-inspector > div:last-of-type > .components-panel__body > div:first-of-type {
display: flex;
flex-direction: column-reverse;
}
.block-editor-block-inspector > div:last-of-type >.components-panel__body > div >div:last-of-type {
background-color:#afffa8;
}
</style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');高度な設定の部分をCSSで上に並び替えているだけ、高度な設定の中の並びを上下入れ替えているだけ、少しクリックしやすいように色をつけているだけのコードになります。
本当は最初から開いた状態にしたかったのですが、自分の読解力等ではWordPressの仕組みやコードを把握できず、カスタマイズもできませんでした。上記のコードは修正したほうがいいよという方や、最初からトグルが押された状態にできる猛者の方がいらっしゃったら、ぜひ情報共有お願い致します。