機能が満載された巨大なテーマの時代は終焉を迎えつつあるようですが、サードパーティのプラグインをサポートする無駄のないテーマが台頭しつつあります。それはあなたのテーマを使ってウェブサイトを構築することになります。それを検討している場合は、ページ ビルダーとして Beaver Builder を選択していただければ幸いです。

Beaver Builder は、箱から出してすぐに、ほぼすべてのテーマでうまく動作します。これまでのところ、実際に機能しないテーマについては聞いたことがないと思います。それでも、さらに効果的に機能させるためにできることはまだいくつかあります。核心的な詳細に入る前に、Beaver Builder が良い選択だと私が考える理由をいくつか説明します。

• wordpress.org には 1 ドルも費やすことなく起動して実行できるライト バージョンがあるため、ユーザーは簡単に使い始めることができます。
• カスタム モジュール ガイドを使用して、テーマ内にバンドルできるカスタム モジュールを作成できます。
• ここには膨らみはありません。 Beaver Builder は、特定のページに必要なスクリプトとスタイルのみを読み込みます。すべてを読み込むわけではありません。
• Beaver Builder は、作業を完了するのに十分なパワーを備えながらも使いやすいように構築されました。私たちはシンプルさを常に重視しているため、機能を過剰に追加することはありません。
• 問題が発生した場合でも、ユーザーは安心して対処できます。私たちは真剣に素晴らしいサポートを提供します。

テーマ内で Beaver Builder サポートを提供する他の企業の優れた例を探している場合は、私たちの仲間である WebMan Design と UpThemes 以外に探す必要はありません。彼らが私たちのページビルダーをサポートすることを選択したことを非常にうれしく思い、他の人が彼らの先例に倣うことを望んでいます。

いいですね？それを実現する方法は次のとおりです。

Beaver Builder ページのみの CSS を使用して要素をターゲットにする

この投稿全体で行う必要がある最も一般的なことの 1 つは、Beaver Builder ページの特定の要素のみをターゲットにすることです。ヘッダー、コンテンツ ラッパー、ボタンなどのいずれであっても、すべての Beaver Builder ページの本文にfl-builderという名前のクラスがあるため、これは簡単に実現できます (Beaver Builder の親会社の名前が「fl」であるため、すべての内容には接頭辞「fl」が付いています)ファストラインメディア）。このクラスが本文にあることを知っていると、Beaver Builder ページ用の特定の CSS を作成できます。

どうやって？テーマのコンテンツ ラッパーをターゲットにし、Beaver Builder ページ上のすべてのパディングを削除するとします。 fl-builder ボディ クラスを使用すると、それはとても簡単です…

 .fl-builder #my-content-wrapper { padding: 0; }

ブーム！終わり。 Beaver Builder ページにはパディングはありません。これについては後ほど説明する具体的な使用例がいくつかありますが、テーマの固有のニーズに合わせてこのテクニックを自由に適用してください。

デフォルトのページ見出しの無効化

Beaver Builder がアクティブな場合、ほとんどの場合、デフォルトのページ見出しは必要ありません。通常は邪魔になるだけです。ユーザーは、[ツール] > [グローバル設定の編集] > [デフォルトのページ見出し] に移動し、テーマのページ見出しの CSS セレクターを入力することで、自分でこれを無効にすることができますが、もっと簡単にできないでしょうか?

ちょっとした魔法を使えば、このコードを関数ファイルに追加することで、CSS セレクターを私たちのものではなく自分のテーマのデフォルトにすることができます。

 function my_form_defaults( $defaults, $form_type ) { if ( 'global' == $form_type ) { $defaults->default_heading_selector = '.my-heading-selector'; } return $defaults; // Must be returned! } add_filter( 'fl_builder_settings_form_defaults', 'my_form_defaults', 10, 2 );

この手法は、ページ見出しを視覚的に非表示にするのに最適ですが、マークアップからは削除されません。それが気になる場合は、コードをもう少し追加して、Beaver Builder ページのページ見出しを完全に削除する必要があります。まず、このヘルパー関数を関数ファイルに追加します。

 static public function my_theme_show_page_header() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_enabled() ) { $global_settings = FLBuilderModel::get_global_settings(); if ( ! $global_settings->show_default_heading ) { return false; } } return true; }

次に、ページ見出しを含むファイル (おそらく page.php) で、次のようにページ見出しをこのコードで囲みます。

 <?php if ( my_theme_show_page_header() ) : ?> <h1><?php the_title(); ?></h1> <?php endif; ?>

このコードを使用すると、Beaver Builder を使用してページを作成するときにマークアップにページ見出しの痕跡がまったく残りません。

マージンとパディングの削除または調整

スタイルに関しては、Beaver Builder がテーマに任せる部分がたくさんありますが、Beaver Builder が自ら処理しなければならない部分もいくつかあります。それらの 1 つは、行とモジュールのパディングとマージンです。 Beaver Builder がこれを処理するため、テーマのコンテンツ ラッパー上のパディングやマージンは必要なくなり、端から端までの行の背景などの特定の要素の邪魔になることさえあります。

たとえば、Twenty Twelve テーマを使用すると、ビルダー レイアウトの周囲に余分なスペースがあり、背景写真が端から端まで移動するのを防ぐことができます。

上で述べたfl-builderクラスを使用して CSS をいくつか調整すると、次のようになります。

残念ながら、テーマごとにマージンとパディングの処理方法が異なります。ここであらゆる状況で機能する解決策を提供することはできませんが、CSS をよく理解している場合は、次のコードは実装したい内容に沿ったものになります。

 .fl-builder #my-content-wrapper { margin: 0; padding: 0; }

全幅の行

テーマでサポートしたいと思われる Beaver Builder のもう 1 つの人気機能は、全幅の行です。全幅の行は、コンテンツ ラッパーの端に到達するだけでなく、ブラウザの端にも到達します。すごい！

デフォルトでは、Beaver Builder のすべての行には、グローバル設定で調整できる最大幅があり、小型デバイスに合わせて適切に拡大縮小されます。コンテンツ ラッパーが全幅の場合でも、行とそのコンテンツは、以下のスクリーンショットのようにボックス化されたレイアウト内に含まれます。

ユーザーが行設定で行を全幅にすることを選択すると、最大幅が削除され、その行は次のように端から端までスペース全体を埋めます。

これは素晴らしいテクニックですが、テーマのコンテンツ ラッパーがブラウザの端にも到達する場合にのみ機能します。

マージンやパディングと同様に、テーマごとにコンテンツ ラッパーの幅の処理方法が異なります。繰り返しになりますが、ここであらゆる状況で機能する解決策を提供することはできませんが、CSS をよく理解していれば、次のコードは実装したい内容に沿ったものになります。

 .fl-builder #my-content-wrapper { max-width: none; width: auto; }

デフォルトのボタンの色

Beaver Builder は、さまざまなボタン スタイルを強力にサポートしていますが、デフォルトでは、まあ、かなり退屈です。次の CSS をテーマに追加し、デザインに合わせて調整すると、Beaver Builder ボタンがスタイルに合わせたデフォルトの外観になります。

 a.fl-button, a.fl-button:visited, .fl-builder-content a.fl-button, .fl-builder-content a.fl-button:visited { background: #fafafa; color: #333; border: 1px solid #ccc; } a.fl-button *, a.fl-button:visited *, .fl-builder-content a.fl-button *, .fl-builder-content a.fl-button:visited * { color: #333; }

ボタンのデフォルト スタイルをオーバーライドしすぎないように注意してください。オーバーライドすると、ボタン モジュールの設定が破損する危険があります。

Z インデックスには注意してください

これまでに CSS を書いたことがある人なら、おそらく z-index の問題に遭遇したことがあるでしょう。具体的には何について話しているのでしょうか？他のものの上に何かが重なって、一部のものにアクセスできなくなるもの。えっ？

Beaver Builder のインターフェースはページ全体の最上部に配置されることになっており、その上には何も配置すべきではありません。そのため、Z インデックスをばかばかしく高く設定しましたが、同時に高すぎないように設定しました。長年の経験から、Z インデックスをできるだけ低く保つことをお勧めします。それが常に実現可能であるとは限らないことは承知していますが、少なくとも 100,000 未満に抑えるように努めれば問題ないはずです。

TGM プラグインを使用することをお勧めします

以前は、テーマ開発者は、ユーザーにサードパーティのプラグインを含めるために、テーマ内に直接サードパーティのプラグインをバンドルする必要がありました。当時はそれが素晴らしい解決策のように思えたと思いますし、今でも多くの人がそうしていますが、今ではなぜそれが素晴らしいアイデアではないのかを誰もが知っています。セキュリティとアップデート！

テーマにサードパーティのプラグインをバンドルしてセキュリティ ホールが見つかったらどうなりますか?何だと思う？アップデートをユーザー サイトにプッシュするのはあなたの責任です。プラグインはテーマ ディレクトリに存在するため、プラグイン開発者はそれを行うことができません。以前にもこのようなことが起きましたが、テーマ開発者がこの行為をやめない限り、再び同じことが起こるのではないかと私は推測しています。

それとは別に、最新のアップデートをユーザーにプッシュする責任も負います。忙しい生活の中で、考えなければならないことがもう 1 つあります。 Beaver Builder は初年度に 50 件のアップデートを実施しましたが、そこで止まるつもりはありません。本当にその責任を負いたいですか？

テーマにサードパーティのプラグインを埋め込むことについて神を恐れる気持ちを抱かせたところで、非常に人気が高まっている代替案についてお話したいと思います。

TGM プラグインのアクティベーション: WordPress テーマ (およびその他のプラグイン) のプラグインを要求および推奨する最良の方法。彼らのウェブサイトから…

TGM Plugin Activation は、WordPress テーマ (およびプラグイン) のプラグインを簡単に要求または推奨できるようにする PHP ライブラリです。これにより、ユーザーはネイティブ WordPress クラス、関数、インターフェイスを使用して、単独または一括でプラグインをインストールし、自動的にアクティブ化することもできます。事前にパッケージ化されたプラグイン、WordPress プラグイン リポジトリのプラグイン、またはインターネット上の他の場所でホストされているプラ​​グインを参照することができます。

つまり、サードパーティのプラグインをインストールするオプションをユーザーに提供する必要があります。彼らがそうすることにした場合は、あなたではなく、WordPress コアとプラグイン作成者に更新を任せることができます。

お金を稼ぐ

他の開発者が私たちの成果を賞賛し、さらには自社の製品内でサポートを提供してくれたのは非常に光栄です。私たちはこれをとても嬉しく思い、テーマに対して Beaver Builder サポートを提供してくださった方々に感謝の意を表しました。

この小さな感謝の気持ちは、ライト バージョンのアップグレード リンクをアフィリエイト リンクに置き換えることができるフィルターであり、テーマを使用しているユーザーが Beaver Builder の有料バージョンにアップグレードすることを決定するたびに、本質的にお金を稼ぐことができます。

どのように機能するのでしょうか?次のコードを関数ファイルに追加し、YOUR_LINK_HERE というテキストをアフィリエイト リンクに変更するだけです。あなたはビジネスをしています。

 function my_bb_upgrade_link() { return 'YOUR_LINK_HERE'; } add_filter( 'fl_builder_upgrade_url', 'my_bb_upgrade_link' );

まとめ

あちこちでいくつかの調整を行うだけで、すぐにテーマを立ち上げて、Beaver Builder の高度なサポートを利用して実行できるようになります。ご質問がございましたら、お気軽にお知らせください。テーマを Beaver Builder 用に最適化することに決めた場合、またはこの投稿に何かが足りないと感じた場合は、お気軽に共有してください。ぜひご参加ください。