Snow Monkey v13.0.0 をリリースしました

メジャーアップデートとなる v13.0.0 をリリースしました。後方互換性に大きな影響がでる可能性があるアップデートになりますので本番環境のアップデート前にテスト環境で検証することを強く推奨します。

Snow Monkey v13.0.0 の概要

機能追加

  • テンプレート引数($args)にテンプレートパーツの $name を追加
  • WooCommerce の商品一覧ページにページヘッダー画像の設定機能を追加(カスタマイザー → デザイン → WooCommerce 商品一覧ページ設定)

変更

  • テンプレート構造の見直し
  • すべてのテンプレートで$args['_context'] にデフォルト値(null)を持たせるように変更
  • ドロップナビゲーション内のグローバルナビゲーションに $args['_context']snow-monkey/nav/drop)を追加
  • WooCommerce の商品一覧ページ・商品詳細ページのパンくず構造を変更
  • .l-contents .c-container を囲む .l-contents__body を追加
  • .l-contents__inner.c-entry まわりの上下余白の CSS をリファクタリング

不具合の修正

  • デバッグコメントの End〜 の出力が正しくない不具合を修正
  • カスタマイザー → カスタム投稿アーカイブの設定 → ビューテンプレートで「投稿のビューテンプレート」を選択しても Snow Monkey Blocks の「任意のタクソノミーの投稿」「最近の投稿」ブロックにカテゴリーラベルが表示されない不具合を修正
  • 記事一覧部分でレイアウトがリッチメディア・パネルのとき、画像位置が横にずれている不具合を修正
  • カスタマイザー → デザインに表示される設定パネルが正しくない場合がある不具合を修正
  • コンテナブロックが中央揃えで表示されない不具合を修正
  • 任意のタクソノミーウィジェット、任意のタクソノミーブロックに先頭固定表示が反映されていない不具合を修正
  • オーバーレイウィジェットエリアが想定より細い幅で表示されてしまうことがある不具合を修正

テンプレート引数($args)にテンプレートパーツの $name を追加

テンプレート内で $args['_name'] でアクセスできます。$args['_context'] と同じで予約語となりますので既に使用されている方はご注意ください。

Snow Monkey 側の処理で使うために追加したのでユーザー側ではあまり使い所がないかもしれませんが、例えば独自のテンプレートをつくったとして、それが呼びだされたときに処理を $name で分岐させたいときに使ったりできます。全く役に立たない例ですがこんな感じ。

// my-post-type-name.php という独自のテンプレートパーツを呼びだす
get_template_part(
  'my-post-type-name',
  get_post_type() // ここで指定したものが、テンプレートパーツ内の $args['_name'] でとれます
);

// 投稿タイプ名を表示するテンプレートパーツ my-post-type-name.php
<?
if ( 'post' === $args['_name'] ) {
  echo '投稿だぜ';
} elseif ( 'page' === $args['_name'] ) {
  echo '固定ページだよ';
}

この変更に伴い、$args['_post_type'] は廃止されました。snow_monkey_get_template_part_argssnow_monkey_template_part_render フックで _post_type を使われている方はご注意ください。

テンプレート構造の見直し

テンプレートの階層構造がまちまちだったり、$name が扱う値がマチマチだったりしていたのを統一させるための変更をおこないました。ファイル名やファイル階層の変更が多々あるので影響が大きいかもしれません…。もし下記のテンプレートや関連するテンプレートについて上書きやフックでの書き換えをおこなわれている場合はご注意ください。

  • templates/view/content-full
    → templates/view/full
  • template-parts/archive/entry/content/content-no-match
    → template-parts/archive/entry/content/no-match
  • template-parts/archive/entry/content/content-no-keywords
    → template-parts/archive/entry/content/no-keywords
  • template-parts/archive/entry/content/content-none
    → template-parts/archive/entry/content/none
  • templates/view/woocommerce-content-product
    → templates/view/woocommerce-single-product
  • template-parts/archive/entry/content/content-woocommerce-product.php
    → template-parts/archive/entry/content/woocommerce-archive-product
  • template-parts/content/entry/content/content-404
    → template-parts/content/entry/content/404
  • templates/view/archive-search
    → templates/view/search
  • template-parts/archive/entry/content/content-search.php
    → template-parts/archive/entry/content/search
  • template-parts/common/entries
    → template-parts/common/entries/entries
  • template-parts/common/entries-rss
    → template-parts/common/entries/rss
  • template-parts/loop/entry-summary-rss
    → template-parts/loop/rss
  • template-parts/loop/entry-summary/title/title-rss
    → template-parts/loop/entry-summary/title/rss
  • template-parts/loop/entry-summary/meta/meta-rss
    → template-parts/loop/entry-summary/meta/rss
  • template-parts/loop/entry-summary/figure/figure-rss
    → template-parts/loop/entry-summary/figure/rss
  • template-parts/loop/entry-summary/content/content-rss
    → template-parts/loop/entry-summary/content/rss
  • template-parts/archive/entry/no-keywords を追加
  • template-parts/archive/entry/no-match を追加
  • template-parts/archive/entry/none を追加
  • template-parts/archive/entry/search を追加
  • template-parts/archive/entry/woocommerce-archive-product を追加
  • template-parts/content/entry/woocommerce-single-product を追加
  • template-parts/content/entry/front-page を追加
  • template-parts/archive/entry/home を追加

.l-contents .c-container を囲む .l-contents__body を追加

これまで

<div class="l-contents" role="document">
  〜ページヘッダーとかいろいろ〜
  <div class="c-container">

となっていたのを

<div class="l-contents" role="document">
  〜ページヘッダーとかいろいろ〜
  <div class="l-contents__body">
    <div class="l-contents__container c-container">

となるように変更をいれました。

.l-contents__inner、.c-entry まわりの上下余白の CSS をリファクタリング

(見た目上の)ヘッダー ↔ コンテンツ ↔ フッター間の余白のとり方が結構複雑化していたので、後方互換性的に影響がかなり大きくでそうで迷ったのですがここできれいに整理しておいたほうが今後問題が起きることが少なくなりそうだと思ったので一気にやってしまいました。

CSS でヘッダー ↔ コンテンツ ↔ フッター間の余白についてカスタマイズをしている方、アクションフックで .l-contents__inner.c-entry の前後にコンテンツを追加している方には影響がでてしまう可能性が高いので本番環境のアップデート前にテスト環境で事前検証されることを強く推奨します。すみません><

主に

  • .l-contents__inner.c-entry のどちらかで上下余白を確保していたのを .l-contents__inner だけに統一
  • 基本は .l-contents__innerpadding-toppadding-bottom で上下余白を確保するけど、前後に要素が追加されている場合は margin-topmargin-bottom で上下余白を確保する

などの変更をおこなっています。

具体的な変更点はコミットログをみるのが確実だと思います↓↓

この変更で各種条件(ウィジェットエリアのありなしやパンくずの位置、アクションフックで要素を追加したとき等)による CSS の複雑さが減ってわかりやすくなっていると思います…!

この記事を書いた人

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!