Astra ThemeでWooCommerceサイトを構築するチュートリアル

Astraは、軽量で高度にカスタマイズ可能なWordPressテーマであり、外国貿易ユーザーが様々な業種の企業サイトやEコマースサイトを迅速に構築するのに役立ちます。この記事では、NaibaがAstraを使用してWooCommerceサイトをインストールする方法。

ステップ1：WordPressサイトを構築・インストールする。

自分でサイトを構築する方法についてのチュートリアルは、Naibaサイト構築ノートで多く共有しています。外国貿易ユーザーの方は、直接SiteGroundチュートリアルに従ってサービスを購入した後、WordPressサイトをインストールできます。この記事では、この部分の内容は繰り返し説明しません。

ステップ2：Astra Themeをインストールする

Astra Themeには無料版とPro版の2つのバージョンがあります。無料版は必要不可欠なカスタマイズオプションを提供していますが、Astra Proはさらに豊富な機能を提供し、同時にWooCommerce向けに多くの特性を追加しています。以下のボタンをクリックして、AstraのウェブサイトでWooCommerce向けの特性について詳しく知ることができます。Astra WooCommerce特性について詳しく知るAstra Proを購入すると、AstraのインストールパッケージとProプラグインが入手できます。それぞれをウェブサイトのテーマとプラグインにアップロードしてインストールします。 2.1 テーマのインストール管理画面から直接Astraを検索してテーマをインストールするか、手動でテーマパッケージをアップロードしてインストールできます。Proを購入すると子テーマも付属しており、子テーマを有効化すると、子テーマ上のコンテンツを変更してもAstraの将来のバージョンアップデートに影響しません。2.2 プラグインのインストールテーマをインストールしただけではProバージョンにはなりません。対応するProプラグインと高度なデモインポートプラグインもインストールする必要があります。

• astra-addon-plugin-2.3.3.zip
• astra-premium-sites-2.0.0.zip

インストール方法：管理画面のプラグインページからプラグインをアップロードしてインストールし、有効化後に購入したシリアル番号を入力してアクティベートします。

ステップ2：デモデータをインポートする

両方のプラグインをアクティベートしたら、Starter Templatesに進むと、ページビルダーを選択するよう求められます。デフォルトのAstraは4つの人気ページビルダーをサポートしています。ユーザー数が最も多いのはElementorです。長期的に見ると、Gutenbergを選択するのも良い選択です。結局、WordPressのデフォルトはGutenbergエディタですから。NaibaではデモンストレーションとしてElementorを選択し、選択後は多くのデモが表示されます。eCommerceカテゴリのウェブサイトデモを選択します。注意すべき点は、これらのeCommerceデモは、Astraがデフォルトでいくつかのスタイルをデザインしているというだけで、自分でCSSコードやAstraのカスタム機能を設定できるなら、任意のデモを使用してWooCommerceサイトをインストールできます。気に入ったデモをクリックしてインポートできます。デモの右上にAGENCYと表示されているデモは、代理店プランを購入したユーザーのみがインポートできます。インポートボタンを選択した後、表示される画面で直接importをクリックすると、Astraは自動的にテーマに付属するカスタムデータ、ウィジェット、必要なプラグイン、コンテンツをインポートします。以前に他のデモデータをインポートしたことがある場合は、Delete Previously Imported Siteにチェックを入れて以前インポートしたデータを削除できます。

ステップ3：サイトのコンテンツとレイアウトを修正する

インポートが完了すると、ウェブサイトのフロントエンドにアクセスして、Astra公式デモテンプレートをインポートしたウェブサイトインターフェースを確認できます。次に、自分が望む形に変更を開始できます。上部のElementorで編集。 Elementorはビジュアルページビルダープラグインなので、変更したい場所をクリックします。変更が完了したら、更新ボタンをクリックすると、ウェブサイトの変更後の効果を確認できます。上部のカスタマイズボタンをクリックすると、Astraのページレイアウトスタイルの変更に加えて、WooCommerceページを個別に設定および調整できます。例えば、商品カタログに表示する商品数や、1列に表示する商品数を設定できます。商品に表示するタグを設定し、目のアイコンをクリックしてオン/オフを切り替えます。Astraオプションに入り、WooCommerce機能をアクティベートしたら、再度カスタマイズインターフェースを表示して確認します。例えば、プロモーション表示の設定が追加され、プロモーションボタンとして表示するか、具体的にどれだけプロモーションされているかを表示するかを設定できます。表示スタイルも変更できます。また、カート金額を表示するかどうかも設定できます。商品カタログの設定には、レイアウトとスタイルの設定オプションも追加されています。具体的な商品ページも表示設定をサポートしています。これらの機能はコードの知識がなくても、直接設定操作が可能です。

まとめ

上記のチュートリアルから、Astraを使用することでWooCommerceオンラインショップサイトを迅速に構築できることがわかります。同時に、AstraはGoogle SEOにフレンドリーで、構造化データが組み込まれており、検索エンジンがあなたのサイトをより明確に理解できるため、最終的により良いサイトランキング効果を得るのに役立ちます。さらに、Astraには多くのカスタムオプションがあり、コードを変更せずにテーマの機能や効果を実現できます。Astraには無料版がありますが、技術に詳しくない外国貿易向けのユーザーは、より多くの機能を提供し、1対1のカスタマーサービスサポートがある有料のProバージョンを選択することをお勧めします。Astra Proを今すぐ購入さらに表示Astraチュートリアル表示WooCommerce設定チュートリアル