WordPressでSiteOriginページビルダーを使用する方法

他のWordPressページビルダーと同様に、SiteOriginは、CSSを使用し、コーディングの知識がまったくない、強力でレスポンシブなWebサイトの構築を支援します。 使用できるテーマ（無料とプレミアムの両方）と、無料のProページビルダープラグインがいくつかあります。

SiteOriginのProバージョンをテストし、ランディングページを作成しました。 ドラッグアンドドロップ機能が付属しており、任意のテーマで機能し、すべてのFree、Pro、およびWordPressウィジェットを同時に使用できます。 この記事を読んで、WordPressを使用したSiteOriginのインストールと構成について詳しく見ていきましょう。

SiteOriginページビルダーを選ぶ理由

サイトの構築は、ClassicとGutenbergの両方でよく知られているWordPressEditorのツールバーから始まります。 少量の出力コードを生成し、肥大化することはありませんが、出力コードのすべての行は、1ページのビルダー用に可能な限り最適化されています。

フロントエンドビルダーがないため、行ったすべての変更のライブプレビューがあります。

また、履歴を簡単に確認して、満足できない場合は以前のデザインに戻すこともできます。 また、他のページビルダーと同様に、通常どおり行とウィジェットを使用します。

SiteOriginページビルダーの機能

SiteOriginの無料バージョンには非常に限られたオプションの「ウィジェット」が付属していますが、Proバージョンでは、サイトを簡単に構築するための便利なアドオンウィジェットがたくさんあります。

カスタム投稿タイプビルダー

SiteOriginの最も人気があり便利な機能の1つは、再利用可能なページビルダーレイアウトとWooCommerceテンプレートを備えたカスタム投稿タイプビルダーです。 他のツールとは少し異なりますので、使い方についてもう少し詳しく説明します。

SiteOriginでカスタムポストタイプテンプレートを作成するには、従うべき重要な手順があります。

ステップ1

新しいカスタム投稿タイプを追加し、ページビルダーを使用して投稿タイプのレイアウトを作成し、投稿タイプの表示設定を選択する必要があります。

WordPressダッシュボードから、[ツール]→[投稿の種類]に移動し、[新しい追加]ボタンをクリックして、たとえばポートフォリオという名前を付けます。 次に、[テキスト]タブと[ビジュアル]タブの横にある[ページビルダー]タブをクリックし、[ページビルダー] [ウィジェットの追加]ボタンと[行の追加]ボタンを使用して、ポートフォリオのカスタム投稿タイプのレイアウトを作成します。

テンプレートに追加したコンテンツは、今後公開されるすべてのポートフォリオ投稿に表示されることに注意してください。 したがって、召喚状、ニュースレターの購読、自己紹介、証言など、これらの各ページに特定のコンテンツブロックを表示する場合に非常に便利です。

ステップ2

作成したカスタム投稿タイプにコンテンツを追加する方法を知る必要があります。

カスタム投稿タイプポートフォリオを作成すると、WordPressダッシュボードの左側のサイドバーにポートフォリオアイテムが表示されます。 それをクリックしてから、[新規追加]をクリックします。

ポートフォリオアイテムに名前を付けると、コンテンツを追加できるようになります。 編集できるのはグローバルテンプレートの一部ではないウィジェットのみであり、それらのウィジェットには「テキストを読んでください」というマークが付けられることを忘れないでください。 最後になりましたが、これらの投稿を投稿カルーセルまたは投稿ループウィジェットに追加する方法。

ポストループウィジェット

SiteOriginにはPostLoop Widgetが含まれていますが、アクティブなテーマ内のループテンプレートに依存しています。

ポストループウィジェットを挿入するには、表示するページまたは投稿に行を追加し、ブログまたはグリッドレイアウトを選択するだけで完了です。 次に、[投稿クエリの作成]ボタンをクリックして、表示するウィジェットを選択する必要があります。

最後のステップで、クエリビルダーウィジェットの上部にある[投稿の種類]ドロップダウンから[カスタム投稿の種類]をクリックします。

ポストカルーセルでこれを実行する場合、唯一の違いは、ポストループではなくポストカルーセルウィジェットを選択することです。残りの手順は同じです。

WooCommerceテンプレートビルダー

WooCommerceテンプレートを使用すると、美しいWooCommerce固有のページと単一の製品の外観を作成できます。 WooCommerce Template Builderインターフェースは、次の7つのタブに分かれています。

1. 製品
2. 製品アーカイブ
3. 店
4. カート
5. 空のカート
6. チェックアウト
7. マイアカウント

WooCommerceの場合、単一の製品を構築するために必要な実際の個々のアイテムはすべてウィジェットとして配布されるため、製品を簡単に作成できます。 レイアウトを作成し、価格、SKU、カートに追加、短い/長い説明、製品画像、タイトルなどのWooCommerceウィジェットを使用できます。

製品アップセル用の非常に便利なウィジェットも1つあります。これは、WooCommerceアップセル機能を自由に使用できるようにするものです。 ただし、これらのウィジェットとWooCommerceページのデザインはテーマCSSによって設定され、CSSを使用して編集できることに注意してください。

マップ、アコーディオン、CTA、タブ、ソーシャルウィジェット、カルーセルなどの他のウィジェットは一般的です。

Proサブスクリプションを使用すると、Pro Page Builderだけでなく、すべてのPro機能、プレミアムテーマ、CSS、およびウィジェットにアクセスできます。

SiteOriginページビルダーの価格とプラン

SiteOriginは、2つの価格設定モデルを提供しています。 最初で最も便利なのは、3つのパッケージで提供される年間サブスクリプションです。

• 29ドルの価格で1つのサイトにシングル
• 49ドルの価格で最大5つのサイトのビジネス
• 99ドルの価格で無制限のサイトの開発者

また、サブスクリプションではなく1年間の更新とサポートを除いて、すべて同じである1年間のライセンスがあります。

• 38ドルの価格で1つのサイトにシングル
• 64ドルの価格で最大5つのサイトのビジネス
• 128ドルの価格で無制限のサイトの開発者

SiteOriginのシステム/ホスティング要件

SiteOriginのシステム要件を見つけるのは少し難しいですが。 いくつかのサポートフォーラムやオンラインのコメントから、少なくとも512MBのPHPメモリを搭載したPHP7.4でうまくいくようです。 ただし、テスト目的で2GBのPHPメモリを搭載したVultrHFを使用しました。

もちろん、最新のWordPressバージョンと最新の他のすべてのプラグインが必要になります。

SiteOrigin PageBuilderをインストールして構成する

インストールと構成に関しては、SiteOriginは、ほとんどのページビルダーが提供していない興味深いものを提供します。

WordPressのすべてについては、無料のSiteOriginをリポジトリから直接インストールし、その後、SiteOriginアカウントからダウンロードしたProバージョンをアップロードする必要があります。 インストールが完了したら、手順に従って、推奨プラグインをインストール/アクティブ化します。

プラグインのバンドルを正常にインストールしたら、必要なライセンスとウィジェットをアクティブ化する必要があります。 ライセンスについては、すぐにアクティブ化する必要があります。ウィジェットについては、ウィジェットの一部が必要になったときに、今すぐまたは後でアクティブ化できます。

SiteOriginの優れている点は、不要なウィジェットをアクティブ化する必要がないことです。これにより、リソースを節約し、必要なオプションのみを機能させることができます。 青いウィジェットはアクティブで、灰色のウィジェットは非アクティブなウィジェットです。

完了したら、SiteOriginページビルダーを使用してサイトの構築を開始できます。 [ページ]→[新規追加]に移動し、ドロップダウン矢印をクリックすると、SiteOriginページビルダーとブロックエディターを使用して[新しいページを追加]→[SiteOriginページビルダー]を選択するように求められます。

個人的には、フロントエンドビルダーの時代のバックエンドページビルダーの最大のファンではありません。 ただし、それはそれがより少ないリソースを消費し、あなたのサーバーにとってより軽いことを意味します。 一般的にビルダーほど空腹ではありません。

これは、ページビルダーが実際にライブ編集モードでどのように見えるかを示しています。これは便利なモードです。 行った変更を確認するには毎回プレビューをタップする必要があるため、バックエンドエディタは非常に困難で時間がかかります。

[編集]ページをクリックすると、バックエンドエディター内に移動します。そこから、ツールバーの[ライブエディター]をクリックするだけで、そのページに移動します。

左側にはカスタマイザーと同様のサイドバーがあり、そこから実際にサイトを構築しています。右側には、変更が加えられた後に変更を表示するためにビューが再読み込みされます。

サイト内での直接のドラッグアンドドロップはサポートされていませんが、すべては左側のサイドバーカスタマイザーを介して実行する必要があります。

左上隅に、4つの項目を含むツールバーが表示されます。 左から右に、彼らは次のことをします。

Gear Iconは、作成した行に挿入できる利用可能なウィジェットを開きます。 WordPressウィジェットとSiteOriginウィジェットの両方を同じ場所で見ることができます。 ただし、左側を選択して、WordPressのみまたはSiteOriginのみを表示することもできます。

次のアイコンはバーガーです。これは新しい行を追加し、行のレイアウトを選択する瞬間です。 レイアウトを変更する必要がある場合でも、後でいつでも変更できるので心配はいりません。

レイアウトアイコンをクリックすると、実際には既存のレイアウトをインポート/エクスポートするオプションが開きます。 私が気付いたのは、SiteOriginにはより多くのレイアウトとよりモダンなデザインが欠けているということです。 また、このツールから、作成済みの既存のページのクローンを作成したり、セクション/ブロックをミラーリングしたりできます。

最後のアイコンは履歴です。これは、結果が気に入らない場合や、単に間違いを犯した場合に、行ったことをロールバックできる場所です。

CloudwaysでのSiteOriginページビルダーのパフォーマンス

予想どおり、SiteOriginはコードの肥大化が少なく、非常にシンプルであるため、非常に優れたパフォーマンスを発揮します。これは、メリットとデメリットを同時に兼ね備えています。 言及する必要があります、私たちは画像の最適化をまったくしませんでした。

–GTMetrixでのSiteOriginの結果

–PingdomツールでのSiteOriginの結果

–WebPageTestでのSiteOriginの結果

SiteOriginページビルダーのユーザーレビュー

また、プラグインをインストールする前に常に確認する必要があるのは、WordPress.orgプラグインリポジトリのレビューと評価です。 SiteOriginの場合、これまでに922の5つ星評価があり、最近のレビューは素晴らしいです。

概要

シンプルなウェブサイトやランディングページを構築するための軽量ツールが必要な場合は、SiteOriginが最適です。 欠点は、ヘッダーとフッターのビルダーが提供されていないことです。そのため、サイトのヘッダーとフッターを編集できるテーマが必要です。

学習曲線は急勾配であり、WordPressの経験と、ウィジェットと要素の理解が必要です。 フロントエンドエディターの欠如も初心者にとっての制限要因であり、最終結果を素晴らしいものにするためには、CSSの知識とスキルが必要です。 ただし、開発者としては、初心者にはあまり直感的ではありませんが、ほとんどの機能は非常に便利です。

SiteOriginを取り巻くエコシステムは、他のページビルダーほど大きくはありませんが、無料バージョンで100万、ウィジェットバンドルで900.000のアクティブなインストールがあり、一部の外部アドオン作成者には30.000以上があることを考慮する必要があります。アクティブなインストール。