コードに触れることなく WordPress でカスタムレイアウトを作成する方法をお探しですか？わかります。ほとんどのガイドは、小説を読んでいるような気分になるか、あなたがコーディングの専門家であることを前提としています。
経験豊富なWordPressユーザーの中には、Beaver Builderのようなページビルダーを使うと、扱いにくいデザインになったり、サイトが遅くなったりするのではないかと心配して、敬遠する人もいます。
しかし、何千人もの初心者の方々を支援してきた経験から学んだことは、適切なページビルダーがあれば、プロフェッショナルな結果を提供しながら、ウェブサイト作成を劇的に簡素化できるということです。
このステップバイステップガイドでは、Beaver Builderを使用してカスタムWordPressレイアウトを作成する方法を説明します。ゼロから始める場合でも、既製のテンプレートを使用する場合でも、コーディングなしで必要なものを正確に構築する方法を学びます。
なぜ Beaver Builder を使ってカスタム WordPress レイアウトを作成するのか 👀
多くのプレミアムWordPressテーマには、ウェブサイトのさまざまなセクション用のすぐに使えるページレイアウトが付属しています。しかし、組み込みのレイアウトがニーズに合わない場合があります。
WordPressでは、カスタムページテンプレートを作成し、子テーマを作成して独自のページテンプレートを追加することで作成できます。ただし、これにはPHP、HTML、CSSの知識が必要です。
ここで、Beaver Builder のようなツールが登場します。これは、WordPress 用のドラッグ＆ドロップ ページビルダープラグインです。コードを書かずに独自のカスタムページレイアウトを作成するのに役立ちます。
Beaver Builderは非常に使いやすく、初心者にも優しいです。同時に、プロフェッショナルな見た目のページを作成するための素晴らしい機能が満載されています。
すべての WordPress テーマと連携し、ページにドラッグ＆ドロップできる豊富なモジュールを備えています。好きなようにあらゆる種類のレイアウトを作成し、思い描いたとおりに設定できます。
この Beaver Builder チュートリアルでは、Beaver Builder を使用して WordPress でカスタムページレイアウトを作成する方法を説明します。以下のクイックリンクを使用して、この記事をナビゲートできます。
- ステップ1：Beaver Builderプラグインの設定
- ステップ2：Beaver Builderで最初のカスタムページレイアウトを作成する
- How to Manage Page Layout Templates in Beaver Builder
ステップ1：Beaver Builderプラグインの設定
まず、Beaver Builder プラグインを購入する必要があります。これは有料プラグインで、無制限のサイトで 99 ドルから利用できます。
次に、Beaver Builder プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化後、ライセンスキーを入力するには、設定 » Beaver Builder ページにアクセスする必要があります。
ライセンスキーを入力すると、美しいページレイアウトを作成する準備が整いました。
ステップ2：Beaver Builderで最初のカスタムページレイアウトを作成する
まず、Pages » Add New Page にアクセスして、WordPress で新しいページを新規作成します。
Beaver Builder を開く前に、新しいページにタイトルを付け、下書きとして保存してください。
私たちの経験では、これを最初に行わないと、ページビルダーは開きませんでした。
それが完了したら、「Beaver Builderを起動」ボタンをクリックして開始します。
これにより、Beaver Builderインターフェースでページのフロントエンドが開きます。
Beaver Builder を初めて使用する場合、ガイド付きツアーを提供するウェルカムポップアップが表示されます。
その後、トップメニューの「+」ボタンをクリックする必要があります。このボタンは「x」アイコンに変わります。次に、「テンプレート」タブに切り替えます。
Beaver Builderには、すぐに始められるように、プロがデザインしたテンプレートがいくつか付属しています。
心配しないでください。テンプレートは好きなようにカスタマイズできます。レイアウトですぐに始められるようにするための簡単な方法にすぎません。
レイアウトを選択すると、Beaver Builder はそれをプレビューウィンドウに読み込みます。アイテムにマウスを移動すると、Beaver Builder がそれをハイライト表示します。
ハイライトされたアイテムのレンチアイコンをクリックするだけで編集できます。
Beaver Builder は、編集できるさまざまな設定が表示されるポップアップを表示します。
フォント、色、背景、フォント、パディング、マージンなどを変更できます。
Beaver Builderのレイアウトは行に基づいています。行をドラッグアンドドロップして並べ替えることができます。新しい行を追加したり削除したりすることもできます。
先ほどの「+」ボタンをもう一度クリックし、「行」セクションに移動してください。ここから、提示された行と列のいずれかを選択できます。
Beaver Builder は、サイトのライブプレビューに行を追加します。
基本または高度なモジュールとウィジェットを使用して、行にアイテムを追加できます。これらのモジュールを使用すると、ボタン、見出し、テキスト、画像、スライドショー、オーディオ、ビデオなど、最も一般的に使用される要素を追加できます。
単に「+」ボタンをクリックして「モジュール」セクションに移動します。次に、追加した行に要素をドラッグします。
WordPressのデザイン要素をクリックして、そのプロパティを編集してください。
行またはモジュールを保存して、後で他のページで再利用することもできます。行またはモジュールを編集中に「名前を付けて保存」ボタンをクリックしてください。
ページの編集が完了したら、右上隅にある「完了」ボタンをクリックしてください。
Beaver Builder には、ページを公開または下書きとして保存するためのボタンがいくつか表示されます。
ページレイアウト全体をWordPressサイトの他のページで再利用することもできます。単にページビルダーでページを開き、上部バーの「ツール」にアクセスするには下向き矢印ボタンをクリックしてください。
Beaver Builder はポップアップを表示します。ページをテンプレートとして保存するか、同じレイアウトで重複ページをすばやく作成できます。
Beaver Builder でページレイアウトテンプレートを管理する方法
Beaver Builder » Templatesで作成したすべてのテンプレートを確認できます。ここで、既存のテンプレートを管理、プレビュー、編集できます。
Beaver Builderのテンプレートの優れた点の1つは、それらがカスタム投稿タイプであることです。これは、WordPressの組み込みのエクスポート機能を使用して、Beaver Builderのテンプレートを簡単にエクスポートできることを意味します。
Tools » Export ページにアクセスし、Templates を選択します。「Download Export File」ボタンをクリックすると、WordPress がダウンロード用の XML ファイルを送信します。
次に、テンプレートをインポートしたい WordPress サイトにログインします。設定 » インポート ページにアクセスし、WordPress をクリックします。
WordPressインポータープラグインのダウンロードとインストールを求められます。その後、テンプレートのXMLファイルをアップロードしてインポートできるようになります。
代替案：SeedProd を使用してカスタムテーマを作成する
Beaver Builderは素晴らしいですが、すべての人に完璧に合うわけではないかもしれません。それは大丈夫です！SeedProdのような、他にも優れた選択肢があります。
SeedProd は、私たちがよく推奨するもう一つのユーザーフレンドリーなページビルダーです。ランディングページを作成するだけでなく、WordPress テーマ全体を作成することさえできます。私たちは、OptinMonster のランディングページ作成など、多くのプロジェクトでこれを有効活用してきました。
SeedProdが際立っているのは、その豊富なカスタマイズオプションです。これにより、回転するお客様の声、目を引くアニメーション、プロフェッショナルな価格表、機能ボックスなど、クールな機能をページに簡単に追加できます。
さらに、SeedProdにはAIツールがあり、質の高いテキストや画像をサイト用に素早く生成できます。ページを作成する際に、これは本当に時間を節約できます。
もっと知りたいですか？これらのレビューをチェックして、SeedProd が他の人気のページビルダーと比較してどのように優れているかを確認してください。
この記事が、Beaver Builder を使用して WordPress でカスタムページレイアウトを作成するのに役立ったことを願っています。また、モバイルフレンドリーな WordPress サイトを作成する方法に関するガイドや、最高の WordPress テーマビルダーの専門家によるおすすめもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
corey
これはとても助かります。
AstraとBeaverを使用しています。まもなくGrowthプランにアップグレードする必要があります。
Guttenbergとは異なり、まだ理解できていません。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
ロドニー・ハリアー
ブログを構築するためにElementorを使い始めました。Beaver Builderに切り替えた場合、これまでに完了したことは失われますか？
WPBeginnerサポート
プラグインを変更すると、最初のプラグインでのカスタマイズは失われます。
管理者
Pius Anthony
拝啓
新年あけましておめでとうございます。あなたのwpbeginnerのビデオをずっと見ていますが、本当に感動的です。半年以内には他の人に教えることができると信じています。
敬具
ピウス・アンソニー
WPBeginnerサポート
Glad our guides can help you start helping other people too
管理者
Krayl
Beaver Builder を使用する場合、子テーマのみで使用していますか？そうでない場合、テーマの更新にはどのように対応しますか？
WPbeginnerチームの皆さん、ありがとうございます！
Lisa Theriault
本当に助けが必要です。これは簡単なはずなのに、モジュールや行をクリックしても何も起こりません。ドラッグ＆ドロップ、保存などを試しましたが、何も起こりませんでした。設定が正しいこと、プラグインがアクティブであることを確認しました。Beaver Builder は編集のためにページに表示されますが、私は明らかにバカです。イライラしていますが、きっと些細なことだと思います。誰か提案してもらえませんか？初心者向けチュートリアルに従いましたが、それは本当に簡単でした。ライブモードで試すと…何も起こりません。助けてください。よろしくお願いします。
WPBeginnerサポート
こんにちは、Lisaさん。
新しいページを編集してみてください。それでもうまくいかない場合は、Twenty SeventeenのようなデフォルトのWordPressテーマに切り替えてから、Beaver Builderで編集してみてください。それでもうまくいけば、テーマがページビルダーとの互換性に問題がある可能性があります。
管理者
David Sharp
Lisaと同じ問題を抱えています。数年前にBeaver Builderを使用してランディングページを作成しましたが、非常によく機能しました。実際、その同じランディングページは現在も問題なく使用しています。しかし今日、Beaver Builderを使用して新しいランディングページを作成しようとしましたが、今回はBeaver Builderが機能しませんでした。
何が起こったかというと、新しいページを作成しました。「Beaver Builder」タブをクリックしました。しかし、「Launch Beaver Builder」というボタンが表示される代わりに、「Drop a row layout or module to get started.」という画面が表示されました。残念ながら、Beaver BuilderはBeaver Builderツールバーや、ページを作成するためのモジュールや行などの他のツールを生成できませんでした。
成功しなかった、問題を解決するために試したことは次のとおりです。
1. 他のプラグインを無効にしました。
2. Twenty Sixteen テーマに切り替えました。
3. すべての最新バージョン（Wordpress、Beaver Builderなど）を使用していることを確認しました。
4. ページに何かを入力してからBeaver Builderタブをクリックするとツールが表示されることに気づきました。しかし、それらをクリックすると、回転する円が表示されるだけでした。
5. オンラインのウェブサイトとローカルホストのテストサイトの両方でBeaver Builderを試しましたが、どちらのサイトでもBeaver Builderは機能しませんでした。
6. 別のブラウザ（普段使っているChromeではなくSafari）を使ってみましたが、うまくいきませんでした。
何が間違っている可能性があるか、そしてそれをどのように修正できるか、何か考えはありますか？
ありがとうございます！
WPBeginnerサポート
Davidさん、こんにちは
Beaver Builderのサポートに連絡すれば、彼らがあなたを助けてくれるでしょう。
Krayl
私も同じことが起こりました、リサ。私のテーマがBBと互換性がないのだと思います。完全な互換性を得るためにテーマを変更することを検討しています。
Yeremi Akpan
Chromeで同様の問題が発生しましたが、Microsoft Edgeに切り替えたら解決しました。
Jesse
すべての wpbeginner の「ハウツー」記事にとても感謝しています。それらは明確で直接的で、私の人生をずっと楽にしてくれます。eコマースから Beaver Builder への流れをたどることができたので、OptInMonster を利用できるようになりました。Syed & チームに感謝します。
Gabrielle
こんにちは、通常の編集画面に戻ったとき、BBは[ショートコード]を出力しますか、それともHTMLコンテンツを出力しますか？
WooCommerceで商品ページを作成する際に、これがうまく機能するかどうか疑問に思っています。
ピーター・H・マーケステイン博士
アップデートがあった際にBeaverBuilderで行ったすべての変更を保持するために、子テーマ（20-17）を作成する必要がありますか？
Anthony
このプラグインは素晴らしいですが、自分でカスタマイズする方法を教えていただけますか？ポートフォリオを構築したいと考えており、自分でやり方を知ることができれば素晴らしいと思います！
イアン・ゴードン
Beaver Builderプラグインを使用すると、既存のテーマを使用して、既存のテンプレートファイルを編集せずに完全に新しいヘッダーとフッターを作成できますか？
サム
Beaver Builder は他のプラグインとどの程度連携しますか？
WPBeginnerサポート
ほとんどのプラグインと連携します。あまり使用されないランダムなプラグインで問題が発生する可能性はありますが、彼らは迅速にそのような問題を解決します。
管理者
Rk bhardwaj
どんなブログでも見栄えを良くできる素晴らしいプラグインです
オリバー
Beaver Builder is the best page builder plugin by the best team!
Robby
Hey, Oliver! Thanks for the kind words.
アンドリュー・ピーターズ
Beaver Builderが大好きです。秋に切り替えてから、十数サイトで使用しました。実際に、クライアントの一部をVCからBBに移行しています。最高です！
Shaiful
こんにちは。
条件付きコンテキストを持つショートコードをサポートできますか？例えば、次のようなものです。
[if user_loggedin]
こんにちは、ユーザーさん。
(Beaver Builderで作成されたログインユーザー向けコンテンツを表示)
[else]
こんにちは、ゲストさん。
(Beaver Builderで作成された公開コンテンツを表示)
[/if]
WPBeginnerサポート
はい、ショートコードをサポートしています。テキストを挿入できる任意のフィールドに貼り付けると、自動的にレンダリングされます。ページにショートコードを配置する場合、テキストエディタモジュールよりもHTMLモジュールを使用するのが最善です。後者は追加のpタグを追加する傾向があり、レイアウトを壊すことがあります。
管理者