コードに触れることなく 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プラグインの設定
まず、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は、私たちがよく推奨するもう1つのユーザーフレンドリーなページビルダーです。ランディングページを作成するためだけではありません。それを使用して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サポート
プラグインを変更すると、最初のプラグインでのカスタマイズは失われます。
管理者
ピウス・アンソニー
拝啓
新年あけましておめでとうございます。あなたのwpbeginnerのビデオをずっと見ていますが、本当に感動的です。半年以内には他の人に教えることができると信じています。
敬具
ピウス・アンソニー
WPBeginnerサポート
Glad our guides can help you start helping other people too
管理者
クレイル
Beaver Builder を使用する場合、子テーマのみで使用していますか？そうでない場合、テーマの更新にはどのように対応しますか？
WPbeginnerチームの皆さん、ありがとうございます！
リサ・テュロー
本当に助けが必要です。これは簡単なはずなのに、モジュールや行をクリックしても何も起こりません。ドラッグ＆ドロップ、保存などを試しましたが、何も起こりませんでした。設定が正しいこと、プラグインがアクティブであることを確認しました。Beaver Builder は編集のためにページに表示されますが、私は明らかにバカです。イライラしていますが、きっと些細なことだと思います。誰か提案してもらえませんか？初心者向けチュートリアルに従いましたが、それは本当に簡単でした。ライブモードで試すと…何も起こりません。助けてください。よろしくお願いします。
WPBeginnerサポート
こんにちは、Lisaさん。
新しいページを編集してみてください。それでもうまくいかない場合は、Twenty SeventeenのようなデフォルトのWordPressテーマに切り替えてから、Beaver Builderで編集してみてください。それでもうまくいけば、テーマがページビルダーとの互換性に問題がある可能性があります。
管理者
デビッド・シャープ
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のサポートに連絡すれば、彼らがあなたを助けてくれるでしょう。
クレイル
私も同じことが起こりました、リサ。私のテーマがBBと互換性がないのだと思います。完全な互換性を得るためにテーマを変更することを検討しています。
イェレミ・アクパン
Chromeで同様の問題が発生しましたが、Microsoft Edgeに切り替えたら解決しました。
ジェシー
すべての wpbeginner の「ハウツー」記事にとても感謝しています。それらは明確で直接的で、私の人生をずっと楽にしてくれます。eコマースから Beaver Builder への流れをたどることができたので、OptInMonster を利用できるようになりました。Syed & チームに感謝します。
ガブリエル
こんにちは、通常の編集画面に戻ったとき、BBは[ショートコード]を出力しますか、それともHTMLコンテンツを出力しますか？
WooCommerceで商品ページを作成する際に、これがうまく機能するかどうか疑問に思っています。
ピーター・H・マーケステイン博士
アップデートがあった際にBeaverBuilderで行ったすべての変更を保持するために、子テーマ（20-17）を作成する必要がありますか？
アンソニー
このプラグインは素晴らしいですが、自分でカスタマイズする方法を教えていただけますか？ポートフォリオを構築したいと考えており、自分でやり方を知ることができれば素晴らしいと思います！
イアン・ゴードン
Beaver Builderプラグインを使用すると、既存のテーマを使用して、既存のテンプレートファイルを編集せずに完全に新しいヘッダーとフッターを作成できますか？
サム
Beaver Builder は他のプラグインとどの程度連携しますか？
WPBeginnerサポート
ほとんどのプラグインと連携します。あまり使用されないランダムなプラグインで問題が発生する可能性はありますが、彼らは迅速にそのような問題を解決します。
管理者
Rk bhardwaj
どんなブログでも見栄えを良くできる素晴らしいプラグインです
オリバー
Beaver Builder is the best page builder plugin by the best team!
ロビー
Hey, Oliver! Thanks for the kind words.
アンドリュー・ピーターズ
Beaver Builderが大好きです。秋に切り替えてから、十数サイトで使用しました。実際に、クライアントの一部をVCからBBに移行しています。最高です！
シャイフル
こんにちは。
条件付きコンテキストを持つショートコードをサポートできますか？例えば、次のようなものです。
[if user_loggedin]
こんにちは、ユーザーさん。
(Beaver Builderで作成されたログインユーザー向けコンテンツを表示)
[else]
こんにちは、ゲストさん。
(Beaver Builderで作成された公開コンテンツを表示)
[/if]
WPBeginnerサポート
はい、ショートコードをサポートしています。テキストを挿入できる任意のフィールドに貼り付けると、自動的にレンダリングされます。ページにショートコードを配置する場合、テキストエディタモジュールよりもHTMLモジュールを使用するのが最善です。後者は追加のpタグを追加する傾向があり、レイアウトを壊すことがあります。
管理者