Snow Monkey v9

ヘッダーの設計の見直し、全幅設定・コンテンツ左右余白（.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つの位置設定を持っています。つまり、

が存在します。全部 CSS だけで完結できれば理想なのですが、例えば上部固定ヘッダーだとヘッダーを position: fixed にして、コンテンツがヘッダーにめり込まないようにヘッダーの高さ分のマージンをコンテンツエリア上部に追加しなければいけません。ヘッダーの高さは可変なので、これは CSS だけでは実現できず JS を使う必要があります。という感じで他にもいろいろあって、アップデートのたびに CSS/JS/PHP が複雑に絡み合った状態になってしまっていました。

だましだましやっていたのですが、「お知らせバー」と「オーバーレイヘッダー」の組み合わせをなんとかしようとしたときに「ちょっとこれはもうどうにかせんといかん」というレベルになってきたので、なるべく CSS で頑張って、どうしようもない部分だけ JS/PHP でやるように大作り直しをおこなうことにしました。

メンテナンス性の問題からおこなった変更だったのですが、結果的には JS の分量も減り、動的に切り替えなどの処理をおこなっていた部分（の一部）を CSS でおこなうようにできたので表示時、切替時のガタツキ感が軽減され、表示がシュッとした印象になったのではないかと思います。

PC 用ヘッダー位置設定を追加

「【PC】ヘッダー位置設定をノーマルにする」を廃止して、ノーマル以外にも全てのヘッダー位置を設定できるようにしました。つまり、スマホ・タブレットと PC で別々のヘッダー位置設定を使用できます。例えばスマホ・タブレットでは「上部固定」、PC では「オーバーレイ」みたいな。

「カスタマイザー > デザイン > 固定ページレイアウト」の追加

現在ページのレイアウト設定は投稿と固定ページで共通となっていますが、投稿のページレイアウトと固定ページレイアウトの設定に分割しようと思います。これで投稿と固定ページで別々のページレイアウトを適用することが簡単にできるようになります。固定ページレイアウトの設定を特に触らない場合は投稿のページレイアウトが固定ページにも適用されます。

最初期の Snow Monkey は投稿と固定ページそれぞれにレイアウト設定があったのですが設定をシンプル化するために統合をおこないました。が、昨今の現場事情をみてみるとページはワンカラム、ブログの場合はサイドバーを使いたいという需要があるのかな…ということで再度分割することにしました。

カスタマイザーの「デザイン」と「レイアウト」の統合

アップデートを重ねるにつれ、「デザイン」と「レイアウト」の境界が曖昧になってきていたので、v9 で統合することにしました。「レイアウト」に入っていた項目は「デザイン」の中に混ざる形になります。

カスタマイザーの「SEO/SNS」を「SEO」と「SNS」に分割

「いいね！ボックス」「シェアボタン」の設定を「SNS」に、それ以外を「SEO」に振り分けました。

全幅設定の見直し

例えば。

• 通常幅のグループブロックの中に全幅の画像

を入れたとき、どのように表示されるべきでしょうか（これは @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 フィルターフック、アクションフックを削除