Elementor と AMP に対応させた Snow Monkey v3.4.0 をリリースしました。

4月の WordBench 東京がページビルダー特集で、僕は参加してなかったのですが、Twitter をみてたら偶然 WordBench 東京のツイートが実況みたいに流れてきてて、ネット越しながらなんかその熱狂ぶりが伝わってくるような気がしたんですよね。で、僕はページビルダー系プラグインを使ったことは無かったのですが、これは Snow Monkey を対応させるしかないだろうと。すぐにオンラインコミュニティにも投稿したらユーザーさんからも反応が良かったので、開発をすすめて、本日リリースしました。

v3.4.0 の概要

機能追加

  • ページビルダープラグイン Elementor に対応
  • AMP プラグイン利用時に、コンテンツ部分に Snow Monkey のスタイルが適用されるように
  • カテゴリーのアクセントカラー設定を子孫カテゴリーにも反映

ページビルダープラグイン Elementor に対応

フル幅のテンプレートを追加

ページビルダー系のプラグインの本領が発揮されるのは、やはりシングルカラムのときだと思います。Snow Monkey にはシングルカラムのページテンプレートが「1カラム」「1カラム(fluid)」「1カラム(slim)」と3種類既にあったのですが、フル幅のものはなく、フル幅で更にページタイトルの表示も無いほうがページビルダーと相性が良さそうだったので、「1カラム(full)」というページテンプレートを追加しました。

オリジナルウィジェットの Elementor 対応

Snow Monkey には「ショーケース」「PR ボックス」「スライダー」などの超絶便利なオリジナルウィジェットがあります。これらのオリジナルウィジェットのおかげでトップページを効率的にそれなりの見た目で作成することができるのですが、ウィジェットエリアが無いところにはおけないということが玉に瑕でした。

しかし、Elementor は、なんとウィジェットを普通のページに設置することができるんです!これはビビりました…。Snow Monkey のオリジナルウィジェットは JavaScript で設定パネルを制御しているのですが、それが普通のままだと Elementor では動作しなかったので、Elementor でも動作するように変更をおこないました。

Elementor の機能だけでも充分それなりのページができますが、Snow Monkey のオリジナルウィジェットを使えるようにしたことで更に効率的に素早くページ作成ができるようになったと思います!

HTML コンポーネント挿入機能の Elementor 対応

HTML コンポーネント挿入機能もそのままでは Elementor で動作しなかったので動作するように変更をおこないました。

ちなみに…

ページビルダー系プラグインは、ElementorBeaver Builder が2大巨頭です。本当はどちらにも対応させようと思っていたのですが、Beaver Builder はオリジナルウィジェットや HTML コンポーネント挿入機能をどうやって動くようにすれば良いのかがちょっとわからなかったので、とりあえず Elementor だけ対応させました。やり方わかるよーという方がいらっしゃいましたら、ぜひ教えてください!

AMP プラグイン利用時に、コンテンツ部分に Snow Monkey のスタイルが適用されるように

AMP for WordPress を使うと WordPress を簡単に AMP 対応できますが、AMP の仕様の都合でテーマが持つ CSS や JavaScript はそのままでは適用されないようになっています。

そこで、Capital P の記事「いまさら聞けない? WordPressでのAMP対応」を参考に、AMP 利用時に HTML コンポーネント及びブログカードのスタイルがコンテンツ部分に適用されるようにしました。

本当はヘッダーやフッター、Snow Monkey のベース CSS フレームワークである Basis のスタイルも適用されるようにできれば良かったのですが、AMP の CSS は容量制限がシビアだったので、とりあえずこのような形にしました。

カテゴリーのアクセントカラー、ヘッダー画像設定を子孫カテゴリーにも反映

Snow Monkey にはカテゴリーごとにアクセントカラーとヘッダー画像を設定できる機能がありますが、これは「そのカテゴリーにだけ」適用されるようになっていました。子カテゴリーをたくさん使っていると全ての子カテゴリーに設定するのが大変というお声をいただきましたので、親に適用した設定が子孫にも反映されるように変更いたしました。子カテゴリーでアクセントカラー・ヘッダー画像を設定した場合は、その設定がそのカテゴリーと更にその子孫に適用されます。

v3.4.0 のコントリビューター

Katsushi Kawamori さん、黒石譲さん、高橋文樹さんろくぜうどんさん

この記事を書いた人

キタジマ タカシ

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

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

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