Astraは、軽量で高度にカスタマイズ可能なWordPressテーマであり、外国貿易ユーザーが様々な業種の企業サイトやEコマースサイトを迅速に構築するのに役立ちます。この記事では、NaibaがAstraを使用してWooCommerceサイトをインストールする方法。
ステップ1：WordPressサイトを構築・インストールする。
自分でサイトを構築する方法についてのチュートリアルは、Naibaサイト構築ノートで多く共有しています。外国貿易ユーザーの方は、直接SiteGroundチュートリアルサービスを購入してからWordPressサイトをインストールしてください。
この記事では、この部分の内容を繰り返し説明しません。
ステップ2：Astra Themeをインストールする
Astraテーマには無料版とPro版の2つのバージョンがあります。無料版は必要なカスタマイズオプションを提供しますが、Astra Proはより豊富な機能を提供し、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 SEOSEOに優しく、構造化データが組み込まれているため、検索エンジンがサイトをより明確に理解し、最終的に良いランキング効果を得るのに役立ちます。
さらに、Astraには多くのカスタマイズオプションがあり、コードを変更せずにテーマの機能や効果を実現できます。
Astraには無料版がありますが、技術に詳しくない海外取引を行う方には有料のPro版をお勧めします。より多くの機能と一对一のカスタマーサポートが提供されるからです。
さらに表示Astraチュートリアル