Snow Monkey v6 をリリースしました

主にテンプレート周りとデザイン周りの変更をおこないました。v5 のときよりはマシだと思いますが、後方互換性に影響があると思いますので、事前にテスト環境などでアップデートして試されることを推奨します。

テンプレートの仕組みや設計、デザインについてもだいぶこなれてきたかなと思いますので、もうあまり大きな変更は入れない方向でやっていきたい気持ち…。

Snow Monkey v6 の概要

変更（子テーマ等でカスタマイズをしているときに影響がでる可能性あり）

• template-parts/ 以下のテンプレートを、読み込む必要がないときは読み込まないように変更
• template-parts/ 以下のテンプレートを、外部から変数を渡して表示をカスタマイズして読み込ませることができるように変更
• header.php 、 footer.php 、 sidebar.php を追加
• このページの子ページの class を変更（ .c-page-summary → .c-entry-summary ）
• .c-entry（記事、記事一覧部分）のテンプレート構造を変更
• テンプレート読み込みまわりのリファクタリング（ほぼ全てのテンプレートが Helper::get_template_part() を経由するようになり、関連するフックでカスタマイズが可能になりました）
• マウスホバーで網や画像拡大するエフェクトの廃止
• パララックスエフェクトの廃止
• 記事一覧部分の余白サイズを、他の箇所の余白サイズと統一
• 記事内各要素の上下余白のサイズを変更
• 記事一覧（リッチメディア、シンプル）のデザインを調整
• 「ページタイトルの上」ウィジェットエリアはアイキャッチ画像の表示が「ページヘッダーの上にタイトルを表示」のときは表示しないように変更
• 記事下要素の並び順を変更
• 記事一覧のページャーの位置を .p-archive の直後に移動
• WooCommerce 商品ウィジェットのデザインを調整
• WooCommerce カートウィジェットのデザインを調整
• WooCommerce ギャラリーの余白を調整
• Slick を別ファイルに分離
• 引用のアイコンをリファクタリング（ケミさん）
• カスタマイザー > ページ速度最適化 > 画像非同期読み込み有効時の LazyLoad を廃止

不具合の修正

• 「Snow Monkey: 最近の投稿」ウィジェットを狭いウィジェットエリアに入れたときに1列にならない不具合の修正
• 「スマホでWPAW:アドセンス」ウィジェットの左右がきれる不具合の修正
• Facebook シェアボタンのカウントが動作していない不具合の修正（カスタマイザー > SEO/SNS > シェアボタンに Facebook App トークンの設定を追加）
• ドロワーが、ドロワーナビ、ドロワーサブナビの両方を割り当てないと表示されない不具合を修正
• 記事ページのメタ情報（日付など）が長い場合に画面からはみ出てしまう不具合の修正

追加

• プラグインからでもカスタムページテンプレートを追加可能に
• Snow Monkey で使用している FontAwesome アイコンだけを読み込むオプションを追加（カスタマイザー > ページ速度最適化 > 軽量な FontAwesome を使用する）
• ベトナム語翻訳を追加（KUMAI さん）
  カスタムウィジェットのフックで suppress_filters を変更可能に
• snow_monkey_social_nav_item フィルターフックを追加
• ページャーの矢印部分にクラスを追加（c-pagination__item-prev、c-pagination__item-next）
• snow_monkey_get_template_part_<slug>-<name> アクションフックを追加

テンプレートのリファクタリング

テンプレートパーツ全般のリファクタリング

テンプレートパーツとは Helper::get_template_part() で呼び出されている各テンプレートファイルのことです。これまでは、このテンプレートパーツはとりあえず一度読み込まれて、その読み込まれたテンプレートパーツの中で表示をするかしないかの判断をおこなっていました。

v6からは、この「とりあえず一度読み込む」というのをやめ、表示するものについては読み込む、という形に変更しました。この変更には下記の2つのメリットがあります。

• 不要なファイル読み込みの削減
• テンプレートパーツの使い回しが可能に

Helper::get_template_part() を使っているテンプレート全般に条件分岐の追加などの修正が入っているため、子テーマ等でテンプレートの上書きをおこなっている場合は表示の再確認をすることを推奨します。

記事、記事一覧部分のテンプレート構造の変更

.c-entry で囲まれている部分のテンプレートの構造を変更しました。具体的には、ビューファイル（/templates/view 以下のファイル）や記事一覧の各項目のファイル（/template-parts/loop 以下のファイル）をもっと細かく分割し、/template-parts/content/entry と /template-parts/archive/entry の2つのディレクトリを追加しました。

そして、その配下のファイルは投稿タイプごとに別々のファイルを読み込むことが可能になっています。

例えば、記事のエントリーヘッダーを表示するファイルは /template-parts/content/entry/header/header.php ですが、子テーマに /template-parts/content/entry-header/header-news.php というファイルをつくれば、投稿タイプ news のときに独自のエントリーヘッダーテンプレートを使う、のようなことが可能になります。

プラグインでのカスタムページテンプレートの追加が可能に

snow_monkey_template_part_root_hierarchy で追加したルートの直下に /page-templates/ ディレクトリを配置し、その中にカスタムページテンプレートを追加すると、投稿・固定ページで選択可能なカスタムページテンプレートとして認識されるようになりました。

デザイン面の変更

マウスオーバーエフェクトの変更

記事一覧や記事下の前後ナビの部分で、マウスオーバーすると画像が拡大して網模様のマスクや「More」の文字が表示される、というエフェクトを採用していましたが、v6 からはそれらのエフェクトを全て廃止して、単に画像が暗くなるだけにしました。

対象範囲は .c-entry-summary 、 .c-prev-next-nav 、 .wpaw-caroucel 、 .wpaw-posts-list になります。

このデザインの変更は影響が大きそうなのでやるかどうか迷ったのですが、カスタマイズ性を高める方向を目指している Snow Monkey の現在の方向性からすると、デザインの個性が強くですぎているし、CSS の上書きもやりにくい状況だったため、デザインの変更に踏み切りました。もしもとのデザインに戻したいという方がいれば、追加 CSS に貼り付ければもとのデザインにもどせるように CSS を用意しようと思いますので、サポートフォーラムから要望を出していただければと思います。

パララックスエフェクトの廃止

ページヘッダー（.c-page-header）とショーケースウィジェット（.wpaw-showcase）で背景画像を設定すると、スクロール速度よりちょっと遅く背景画像が動くパララックスエフェクトを採用していましたが、これを廃止しました。

こちらも、もしパララックスエフェクトに戻したいという方がいれば、もどすためのコードを用意しようと思いますので、サポートフォーラムから要望を出していただければと思います。

このページの子ページの class を変更

このページの子ページの class（.c-page-summary）を、記事一覧と同じ .c-entry-summary に変更しました。これにより、このページの子ページと記事一覧部分はほぼ同じデザインで表示される形になりました。

追加 CSS や子テーマ等で .c-page-summary をカスタマイズしている場合はデザインの崩れが発生する可能性が高いのでご注意ください。

記事一覧部分のデザインの変更

記事一覧（リッチメディア）は、各項目間の余白が、他の箇所の余白に比べて広めに設定していました。その部分だけの見た目でいえば広めの余白のほうがきれいに見えていたと思うのですが、他の要素の並んだときに違和感がありました。そこでオンラインコミュニティでアンケートを取ったところ、10対0で統一したほうが良いという結果になりましたので、他の箇所と統一することにしました。

また、項目間の余白を調整したことで、既存のデザインだとちょっと詰まった感じがあったので、タイトルの文字サイズや抜粋の文字色を調整しました。

記事内各要素の上下余白のサイズを変更

これまで記事内の段落や見出しなど各要素の上下余白のバランスは、他の箇所の余白サイズより若干大きめに設定していたのですが、こちらも他の箇所と同じバランスに変更しました。

記事下の要素の並び順を変更

デザインの変更をおこないやすくしたり、余白のバランスを整えやすくするために、.c-entry__footer のシェアボタン、アドセンス、タグ一覧、プロフィールボックスを .c-entry__body に移動、前後ナビ、関連記事を .c-entry__footer に移動しました。

コメント欄・吹き出しのデザインの変更

コメント欄の各コメント、HTML コンポーネント挿入機能で挿入可能な吹き出しコンポーネントのデザインは、これまで枠線で囲まれたデザインにしていましたが、デザインのカスタマイズ性を考えると罫線なしのほうが良いかなと思い、罫線なし + グレーベタ塗りのデザインに変更しました。

Snow Monkey Blocks の吹き出しブロックについても、最新版で同様のデザインに変更をいれています。

ベトナム語翻訳を追加

クマイさんに提供していただいたベトナム語翻訳をとりこみました。全ての箇所ではありませんが、表側で目に見える部分は結構カバーされているのではないかと思います。提供ありがとうございました！

軽量な FontAwesome を使用する設定を追加

Snow Monkey はアイコンに FontAwesome を利用しているのですが、FontAwesome は全部で1MB超の容量があるため、ページの表示速度やモバイルでの通信量に結構な影響を与えてしまっていました。そこで、カスタマイザーに「軽量な FontAwesome を使用する」という設定を追加しました（カスタマイザー > ページ速度最適化 > 軽量な FontAwesome を使用する）。

これを有効化すると、Snow Monkey テーマで使用している FontAwesome アイコンのデータだけをロードするようになるため、読み込むファイルサイズが83KBと超軽量になります。反面、自由に全てのアイコンを使用することはできなくなるため、フッター固定ナビゲーションなどにアイコンを入れている方はご注意ください。

Facebook App トークンの設定を追加

Facebook シェアボタンのカウント取得に Facebook のアクセストークンが必須になったため、カスタマイザーに設定箇所を追加しましたカスタマイザー > SEO/SNS > シェアボタンに Facebook App トークンの設定）。

変更ファイル一覧

• /Framework/Contract/Helper/Page_Header.php
• /Framework/Helper.php
• /app/constructor/compatibility.php
• /app/constructor/deprecated/template-tags.php
• /app/constructor/view-controller.php
• /app/customizer/design/sections/post/controls/related-posts.php
• /app/customizer/infobar/controls/content.php
• /app/customizer/layout/sections/base-layout/controls/overlay-widget-area-max-width.php
• /app/customizer/layout/sections/footer/controls/footer-layout.php
• /app/customizer/layout/sections/header/controls/header-content.php
• /app/customizer/page-speed-optimization/controls/use-lightweight-fontawesome.php
• /app/customizer/seo-sns/sections/share-buttons/controls/facebook-app-token.php
• /app/customizer/seo-sns/sections/share-buttons/controls/twitter-settings.php
• /app/customizer/seo-sns/sections/share-buttons/section.php
• /app/customizer/title-tagline/controls/copyright.php
• /app/setup/assets.php
• /app/setup/entry-summary.php
• /app/setup/hash-nav.php
• /app/setup/page-speed-optimization.php
• /app/setup/share-buttons.php
• /app/setup/sidebar.php
• /app/setup/social-nav.php
• /app/setup/widget-area.php
• /app/setup/widgets.php
• /app/widget/snow-monkey-recent-posts/_widget.php
• /app/widget/snow-monkey-taxonomy-posts/_widget.php
• /comments.php
• /footer.php
• /header.php
• /languages/ja.mo
• /languages/ja.po
• /languages/vi.mo
• /languages/vi.po
• /sidebar.php
• /src/css/core/variable/_variable.scss
• /src/css/dependency/woocommerce/woocommerce.scss
• /src/css/foundation/_element/_element.scss
• /src/css/foundation/_foundation.scss
• /src/css/foundation/_packages/_packages.scss
• /src/css/layout/_footer-widget-area/_footer-widget-area.scss
• /src/css/object/component/_comment/_comment.scss
• /src/css/object/component/_component.scss
• /src/css/object/component/_entries/_entries.scss
• /src/css/object/component/_entry-summary/_entry-summary.php
• /src/css/object/component/_entry-summary/_entry-summary.scss
• /src/css/object/component/_entry/_entry.scss
• /src/css/object/component/_meta/_meta.scss
• /src/css/object/component/_page-header/_page-header.scss
• /src/css/object/component/_page-summary/_page-summary.php
• /src/css/object/component/_page-summary/_page-summary.scss
• /src/css/object/component/_pagination/_pagination.scss
• /src/css/object/component/_prev-next-nav/_prev-next-nav.php
• /src/css/object/component/_prev-next-nav/_prev-next-nav.scss
• /src/css/object/component/_widget/_snow-monkey-posts.scss
• /src/css/object/component/_widget/_wpaw-carousel.scss
• /src/css/object/component/_widget/_wpaw-posts-list.scss
• /src/css/object/component/_widget/_wpaw-term.scss
• /src/css/object/component/_wp-profile-box/_wp-profile-box.scss
• /src/css/object/component/_wp-share-buttons/_wp-share-buttons.scss
• /src/css/object/component/_wpac/_wpac.scss
• /src/css/object/component/_wpco/_wpco.scss
• /src/css/object/project/_related-posts/_related-posts.scss
• /src/css/object/project/_social-nav/_social-nav.scss
• /src/img/blockquote/bottom.svg
• /src/img/blockquote/icon.svg
• /src/img/blockquote/top.svg
• /src/js/app.js
• /src/js/background-parallax-scroll.js
• /src/js/customize-preview.js
• /src/js/dependency/elementor/preview.js
• /src/js/fontawesome.js
• /style.css
• /template-parts/archive/entry/content/content-no-match.php
• /template-parts/archive/entry/content/content-post.php
• /template-parts/archive/entry/content/content-search.php
• /template-parts/archive/entry/content/content.php
• /template-parts/archive/entry/content/woocommerce.php
• /template-parts/archive/entry/header/header.php
• /template-parts/archive/pagination.php
• /template-parts/common/breadcrumbs.php
• /template-parts/common/google-adsense.php
• /template-parts/common/infobar.php
• /template-parts/common/like-me-box.php
• /template-parts/common/overlay-search-box.php
• /template-parts/common/page-header.php
• /template-parts/common/page-top.php
• /template-parts/content/child-pages.php
• /template-parts/content/contents-outline.php
• /template-parts/content/entry-tags.php
• /template-parts/content/entry/content/content-404.php
• /template-parts/content/entry/content/content.php
• /template-parts/content/entry/content/woocommerce.php
• /template-parts/content/entry/footer/footer.php
• /template-parts/content/entry/header/header-page.php
• /template-parts/content/entry/header/header-post.php
• /template-parts/content/entry/header/header.php
• /template-parts/content/page-summary.php
• /template-parts/content/prev-next-nav.php
• /template-parts/content/related-posts.php
• /template-parts/content/share-buttons.php
• /template-parts/discussion/comments.php
• /template-parts/discussion/pagination.php
• /template-parts/discussion/pings.php
• /template-parts/discussion/trackback.php
• /template-parts/footer/copyright.php
• /template-parts/header/1row.php
• /template-parts/header/2row.php
• /template-parts/header/center.php
• /template-parts/header/content-lg.php
• /template-parts/header/content-sm.php
• /template-parts/header/content.php
• /template-parts/header/simple.php
• /template-parts/loop/entry-summary-post.php
• /template-parts/loop/entry-summary.php
• /template-parts/loop/entry-summary/content/content.php
• /template-parts/loop/entry-summary/figure/figure-post.php
• /template-parts/loop/entry-summary/figure/figure.php
• /template-parts/loop/entry-summary/meta/meta.php
• /template-parts/loop/entry-summary/title/title.php
• /template-parts/widget-area/archive-sidebar.php
• /template-parts/widget-area/archive-top.php
• /template-parts/widget-area/article-bottom.php
• /template-parts/widget-area/article-top.php
• /template-parts/widget-area/contents-bottom.php
• /template-parts/widget-area/footer.php
• /template-parts/widget-area/front-page-bottom.php
• /template-parts/widget-area/front-page-top.php
• /template-parts/widget-area/overlay.php
• /template-parts/widget-area/posts-page-bottom.php
• /template-parts/widget-area/posts-page-top.php
• /template-parts/widget-area/sidebar-sticky.php
• /template-parts/widget-area/sidebar.php
• /template-parts/widget-area/title-top.php
• /template-parts/widget-area/woocommerce-sidebar.php
• /template-parts/widget/snow-monkey-posts.php
• /templates/layout/footer/footer.php
• /templates/layout/header/header.php
• /templates/layout/wrapper/left-sidebar.php
• /templates/layout/wrapper/one-column-full.php
• /templates/layout/wrapper/one-column-slim.php
• /templates/layout/wrapper/one-column.php
• /templates/layout/wrapper/right-sidebar.php
• /templates/layout/wrapper/wrapper.php
• /templates/view/404.php
• /templates/view/archive-post.php
• /templates/view/archive-search.php
• /templates/view/archive.php
• /templates/view/content-full.php
• /templates/view/content-page.php
• /templates/view/content-post.php
• /templates/view/content.php
• /templates/view/front-page.php
• /templates/view/home.php
• /templates/view/no-match.php
• /templates/view/woocommerce-archive-product.php
• /templates/view/woocommerce-content-product.php
• /templates/view/woocommerce-content.php