WordPressのプラグイン「Beaver Builder－ WordPressページビルダー」が個人的に熱い
WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。
しかし、記事をレイアウトしようとすると、途端に難易度が上がります。
コンテンツを２カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。
テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。
じゃあconcrete5で良いじゃないか！と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。
そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。
［Beaver Builder-WordPressページビルダー］のプラグインページはこちら
Beaver Builderで何ができるのか？
どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。
要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。
まじで簡単だから感動した。そしてサクサク動くのも素敵。
WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。
という私はまだ無料版しか使っていない(^_^;)
実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。
ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。（翻訳してくださった方ありがとうございますm(_ _)m）
Beaver Builderで困ったこと
無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ？」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。
該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。
beaver-builder-lite-version\includes\ui-js-config.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> <?php echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array( 'ajaxNonce' => wp_create_nonce( 'fl_ajax_update' ), 'colorPresets' => FLBuilderModel::get_color_presets(), 'customImageSizeTitles' => apply_filters( 'image_size_names_choose', array() ), 'debug' => ( defined( 'WP_DEBUG' ) && WP_DEBUG ), 'enabledTemplates' => 'core', 'help' => FLBuilderModel::get_help_button_settings(), 'homeUrl' => home_url(), 'isRtl' => is_rtl(), 'isUserTemplate' => false, 'lite' => true === FL_BUILDER_LITE, 'modSecFix' => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ), 'newUser' => FLBuilderModel::is_new_user(), 'postId' => $post_id, 'postStatus' => get_post_status(), 'postType' => get_post_type(), 'simpleUi' => $simple_ui ? true : false, 'upgradeUrl' => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ), 'userCanEditGlobalTemplates' => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ), 'userCanPublish' => current_user_can('publish_posts'), 'userTemplateType' => FLBuilderModel::get_user_template_type(), 'googleFontsUrl' => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family=' ) ) ) . ';'; |
なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。
丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。
1 2 3 4 5 6 7 8 9 10 | // テンプレート選択画面を非表示にする add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting'); function onocom_set_pagebuilder_setting($settings) { if( isset($settings["enabledTemplates"]) ) { $settings["enabledTemplates"] = "disabled"; } return $settings; } |
ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。
お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。
1 2 3 4 5 6 7 8 | /* ツールバーのボタン等を非表示にするCSS(多分動く) */ .fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */ .fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */ .fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */ .fl-builder-blocks .fl-builder-modules-cta /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */ { display: none; } |
まとめ
まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。
