キタジマ タカシ ヘッダーの設計の見直し、全幅設定・コンテンツ左右余白（.c-container）の設計の見直し等をおこなった v9 をリリースしました。
後方互換性に影響がでる可能性があるメジャーアップデートとなりますので、テスト環境でアップデートして問題がないか確認してからの本番アップデート、アップデート後の設定の見直しをされることを推奨します。確認したほうが良い点については記事中に補足を入れていますので参考にしてください。
v9 の概要
機能追加
- PC 用ヘッダー位置設定を追加
- 「カスタマイザー > デザイン > 固定ページレイアウト」の追加
- 「カスタマイザー > ページ速度最適化 > 画像の非同期読み込み」を有効化したときに、
decoding="async"だけではなくloading="lazy"も追加するように変更
変更
- ヘッダーのリファクタリング
- カスタマイザーの「デザイン」と「レイアウト」の統合
- カスタマイザーの「SEO/SNS」を「SEO」と「SNS」に分割
- 全幅設定の見直し
.c-conatinerの設計を見直し- ヘッダー位置設定の「オーバーレイ」を「上部固定オーバーレイ」に名称変更
- 上部非固定のオーバーレイとして、ヘッダー位置設定に「オーバーレイ」を追加
- オーバーレイヘッダー時の上部固定/非固定のオプションは廃止
- CSS の head 埋め込み、JS の非同期読み込み処理部分の調整
- 記事一覧に表示されるサムネイル画像のサイズを
xlargeからmedium_largeに変更 - デフォルトアイキャッチ画像表示処理の高速化
- 見出し間余白の処理の簡素化
- 「Snow Monkey の JavaScript 読み込みを最適化する」が有効なとき、
asyncで読み込むようにしていたものをdeferでの読み込みに変更 - シェアボタン、ソーシャルナビゲーションから Google+ を削除
- WP Multibyte Patch の有無で文字長を変更していた部分を WP Multibyte Patch に依存しない形に変更
- 使わない機能を無効化しやすいように
appディレクトリを整理 mimizuku-coreの除去
不具合の修正
- 画像の非同期読み込み有効化時、デフォルトアイキャッチ画像が非同期読み込みにならない不具合を修正
- デフォルトアイキャッチ画像に
width、heightが設定されていない不具合を修正 - IE11 で JavaScript エラーがでる不具合を修正
- singular.php で PHP Notice エラーがでることがある不具合を修正
- 「CSS を head に出力する」のとき、一部の CSS が正しく反映されないことがある不具合を修正
- iOS Safari のとき、Snow Monkey Blocks のスライダーブロックで左に1pxの空きができることがある不具合を修正
ヘッダーのリファクタリング
これが v9 の最大の肝になります。
Snow Monkey はヘッダーレイアウトとして「中央ロゴ」「1行」「2行」「シンプル」の4種類のレイアウト、ヘッダー位置設定として「ノーマル」「上部固定」「上部固定オーバーレイ」「オーバーレイ」の4つの位置設定を持っています。つまり、
4レイアウト x 4位置設定 = 16パターンのヘッダーデザイン
が存在します。全部 CSS だけで完結できれば理想なのですが、例えば上部固定ヘッダーだとヘッダーを position: fixed にして、コンテンツがヘッダーにめり込まないようにヘッダーの高さ分のマージンをコンテンツエリア上部に追加しなければいけません。ヘッダーの高さは可変なので、これは CSS だけでは実現できず JS を使う必要があります。という感じで他にもいろいろあって、アップデートのたびに CSS/JS/PHP が複雑に絡み合った状態になってしまっていました。
だましだましやっていたのですが、「お知らせバー」と「オーバーレイヘッダー」の組み合わせをなんとかしようとしたときに「ちょっとこれはもうどうにかせんといかん」というレベルになってきたので、なるべく CSS で頑張って、どうしようもない部分だけ JS/PHP でやるように大作り直しをおこなうことにしました。
メンテナンス性の問題からおこなった変更だったのですが、結果的には JS の分量も減り、動的に切り替えなどの処理をおこなっていた部分（の一部）を CSS でおこなうようにできたので表示時、切替時のガタツキ感が軽減され、表示がシュッとした印象になったのではないかと思います。
ヘッダーの data 属性に対して CSS を適用している場合は、v9 にアップデートすると CSS が適用されなくなるのでご注意ください。なるべく .l-header に対して CSS をあてるように変更してください。また、多少 CSS の詳細度にも影響があると思いますので、強めに CSS をあてておくほうが安全だと思います。（ #body .l-header {} みたいな ）
PC 用ヘッダー位置設定を追加
「【PC】ヘッダー位置設定をノーマルにする」を廃止して、ノーマル以外にも全てのヘッダー位置を設定できるようにしました。つまり、スマホ・タブレットと PC で別々のヘッダー位置設定を使用できます。例えばスマホ・タブレットでは「上部固定」、PC では「オーバーレイ」みたいな。
なるべく後方互換性がないように注意したつもりですが、「【PC】ヘッダー位置設定をノーマルにする」廃止に伴い、設定されている内容によっては正しくレイアウトを維持できなくなる場合があるかもしれません。v9へのアップデート後は、ヘッダー位置設定が意図したものになっているか再確認・再設定されることを推奨します。
「カスタマイザー > デザイン > 固定ページレイアウト」の追加
現在ページのレイアウト設定は投稿と固定ページで共通となっていますが、投稿のページレイアウトと固定ページレイアウトの設定に分割しようと思います。これで投稿と固定ページで別々のページレイアウトを適用することが簡単にできるようになります。固定ページレイアウトの設定を特に触らない場合は投稿のページレイアウトが固定ページにも適用されます。
最初期の Snow Monkey は投稿と固定ページそれぞれにレイアウト設定があったのですが設定をシンプル化するために統合をおこないました。が、昨今の現場事情をみてみるとページはワンカラム、ブログの場合はサイドバーを使いたいという需要があるのかな…ということで再度分割することにしました。
カスタマイザーの「デザイン」と「レイアウト」の統合
アップデートを重ねるにつれ、「デザイン」と「レイアウト」の境界が曖昧になってきていたので、v9 で統合することにしました。「レイアウト」に入っていた項目は「デザイン」の中に混ざる形になります。
remove_section() や remove_panel() してカスタマイザーをカスタマイズしている方には影響がでる可能性がありますのでご注意ください。
カスタマイザーの「SEO/SNS」を「SEO」と「SNS」に分割
「いいね！ボックス」「シェアボタン」の設定を「SNS」に、それ以外を「SEO」に振り分けました。
remove_section() や remove_panel() してカスタマイザーをカスタマイズしている方には影響がでる可能性がありますのでご注意ください。
全幅設定の見直し
例えば。
- 通常幅のグループブロックの中に全幅の画像
を入れたとき、どのように表示されるべきでしょうか（これは @Toru さんのスライドで言及されていました。）。
表側については「そこは全幅で表示されるべきだ！」「通常幅でしょう！」とある程度自由にできるわけですが、エディター側は勝手に（？）コアの CSS が読み込まれまして、それが「通常幅」で画像表示するんですよね。ということは、やっぱり表側もそれに合わせるべきなんでしょう。
Snow Monkey は「とにかく全幅は全幅」としていたのですが、エディター上の表示に合わせて修正をいれました。とはいえ、ブロックの数も随分増えたし、入れ子の組み合わせも膨大だと思うので、多分まだおかしなところもあるのではと思います。もし気づいたときはサポートフォーラムなりオンラインコミュニティなりでご指摘ください。
ついでに、エディター上で Snow Monkey Blocks のセクションブロックを全幅にしたときにコンテンツ幅が他のブロックとずれていたのでその修正と、コンテナブロックの幅も他とずれていたのでその修正もおこないました。
.c-conatiner の設計を見直し
コンテンツの内容が画面端ぴったりになると読みにくいので、一定の左右余白を確保するために .c-container というクラスを使っています。この .c-container、例えば入れ子にしたときにどんどん余白が確保されちゃうとレイアウトが崩れてしまうので、入れ子になったときは内側の .c-container の余白は0にしないといけません。また、.c-container の内側に全幅要素がある場合、その全幅要素内のコンテンツの左右余白は確保されないといけないので、入れ子になっているからと言って常に余白0にすれば良いというものではありません。あとはサイドバーありレイアウトの場合、スマホだと1カラムになるので…とかとか。
そういういろいろな条件でもおおよそ破綻することがないように .c-container の設計を見直しました。
開発者向け情報
ヘッダー
data-l-header-type属性の廃止data-snow-monkey-default-header-position属性の廃止data-snow-monkey-header-position-fixed属性の廃止data-snow-monkey-scrolling-header-colored属性の廃止.l-header--sticky-smクラスの追加（スマホ/タブレット上部固定ヘッダー用）.l-header--sticky-lgクラスの追加（PC 上部固定ヘッダー用）.l-header--overlay-smクラスの追加（スマホ/タブレットオーバーレイヘッダー用）.l-header--overlay-lgクラスの追加（PC オーバーレイヘッダー用）.l-header--sticky-overlay-smクラスの追加（スマホ/タブレット上部固定オーバーレイヘッダー用）.l-header--sticky-overlay-lgクラスの追加（PC 上部固定オーバーレイヘッダー用）.l-header--sticky-overlay-sm--coloredクラスの追加（スマホ/タブレット上部固定オーバーレイヘッダー + スクロール背景色用）.l-header--sticky-overlay-lg-coloredクラスの追加（PC 上部固定オーバーレイヘッダー + スクロール背景色用）
カスタマイザー
layoutパネルを廃止base-layoutセクションを廃止design-archvieセクションを廃止archive-pageセクションを廃止singular-postセクションを廃止woocommerce-archive-pageセクションを廃止design-woocommerce-archive-pageセクションを追加woocommerce-singleセクションを廃止design-woocommerce-singleセクションを追加seo/snsパネルを廃止seoパネルを追加snsパネルを追加
フック
snow_monkey_debugフィルターフックを追加mimizuku_xxxフィルターフック、アクションフックを削除
