キタジマ タカシ 4月の WordBench 東京がページビルダー特集で、僕は参加してなかったのですが、Twitter をみてたら偶然 WordBench 東京のツイートが実況みたいに流れてきてて、ネット越しながらなんかその熱狂ぶりが伝わってくるような気がしたんですよね。で、僕はページビルダー系プラグインを使ったことは無かったのですが、これは Snow Monkey を対応させるしかないだろうと。すぐにオンラインコミュニティにも投稿したらユーザーさんからも反応が良かったので、開発をすすめて、本日リリースしました。
Snow Monkey で Elementor 試してみてるけど、こんな感じのページがものの数分でつくれる。やばすぎる。現状の Snow Monkey ではページビルダーが使いにくい部分があるので、次回リリースで Elementor に対応させる！ #wpsnowmonkey pic.twitter.com/rN1HGlv62v
— キタジマタカシ (@inc2734) May 16, 2018
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 で動作しなかったので動作するように変更をおこないました。
ちなみに…
ページビルダー系プラグインは、Elementor、Beaver 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 にはカテゴリーごとにアクセントカラーとヘッダー画像を設定できる機能がありますが、これは「そのカテゴリーにだけ」適用されるようになっていました。子カテゴリーをたくさん使っていると全ての子カテゴリーに設定するのが大変というお声をいただきましたので、親に適用した設定が子孫にも反映されるように変更いたしました。子カテゴリーでアクセントカラー・ヘッダー画像を設定した場合は、その設定がそのカテゴリーと更にその子孫に適用されます。
