WordPressでeコマースサイトを構(gòu)築する場合、テーマの互換性と拡張性は非常に重要です。アストラ を完璧にサポートする軽量でパワフルな無料テーマです。 WooCommerce Astra Free Editionは、統(tǒng)一されたスタイルのオンラインショップを素早く構(gòu)築するのに適しています。この記事では、Astra Free EditionとWooCommerceの連攜方法、ページ設(shè)定オプションについてご紹介します。
![畫像 [1]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102614181-image.png)
自動スタイル継承による迅速な統(tǒng)合
アストラは自動的に適応する WooCommerce プラグインを使用すると、eコマースページの配色、フォント、ボタン、その他のスタイルが、サイト全體のテーマ設(shè)定と同期されます。複雑な設(shè)定は必要なく、全體的なスタイルは一貫したままなので、これからサイト構(gòu)築を始める方に適しています。
![畫像 [2]-Astra Free Theme WooCommerce Integration Tutorial: 統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102634733-image.png)
アストラ また、このテーマはレスポンシブデザインに対応しており、デスクトップ、モバイル、タブレット端末に適応し、全體的なレイアウトパフォーマンスを向上させます。
注意を引くより柔軟なスタイルコントロールが必要な場合、例えば、商品カードのレイアウト、チェックアウトページの構(gòu)造の最適化などです。 アストラ?プロ
プラグインを追加しました。
WooCommerceセットアップオプションの概要 (Astra 3.0+)
インストールと有効化 WooCommerce プラグインを?qū)毪筏酷帷⑼庥Q > カスタマイズ > WooCommerceのサブパネルに分割されたフルセットアップオプションを見ることができます。
![畫像 [3]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102650883-image.png)
カタログ設(shè)定
メインショップページに適用され、以下のオプションが含まれます:
- コンテンツ幅:デフォルト値またはカスタム値を使用して表示領(lǐng)域を調(diào)整します。
- 商品列の數(shù):各列に表示される商品の數(shù)を設(shè)定します。
- ページあたりの商品數(shù):単一ページの表示數(shù)を制御し、ページングロジックに影響を與えます。
- 商品構(gòu)造:タイトル、価格、ボタンなどの配置や非表示狀態(tài)を調(diào)整できる。
![畫像 [4]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102711691-image.png)
単一商品ページ設(shè)定
パンくずナビゲーションを有効または無効にすることで、ページ內(nèi)の明確な経路を提供することができます。
![畫像 [5]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102718848-image.png)
ショッピングカートページの設(shè)定
場所:外観 > カスタマイズ > WooCommerce > カート
![畫像 [6]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102726579-image.png)
ショッピングカートページの全體的な構(gòu)成とレイアウトを提供し、商品の露出を高めるための「クロスセリング商品」の表示をサポートする。
![畫像 [7]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102733409-image.png)
商品畫像設(shè)定
メイン畫像とサムネイルのサイズは変更でき、畫像のトリミングは WooCommerce コントロール畫像の読み込み速度と比率は、ページの要件に応じて柔軟に調(diào)整できます。
メニュー ショッピングカートアイコン
パス: 外観 > カスタマイズ > ヘッダー > メインメニュー
![畫像 [8]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102739810-image.png)
最後のWooCommerceの設(shè)定を有効にすることで、メインナビゲーションバーの右側(cè)にショッピングカートのアイコンを表示することができ、訪問者はいつでも注文內(nèi)容を見ることができます。
ページレイアウトとサイドバーのコントロール
アストラ eコマース関連ページのコンテナ幅とサイドバーレイアウトを個別にサポート。
ページコンテナ幅の設(shè)定
パス:外観 > カスタマイズ > グローバル > コンテナ
![畫像 [9]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102820617-image.png)
ショップページ、商品ページ、カートページ、チェックアウトページのコンテナ幅を個別に設(shè)定できます。デフォルト値は、ページ下部のメタ設(shè)定を使って上書きすることもできます。
サイドバー管理
パス: 外観 > カスタマイズ > サイドバー
![畫像[10]-Astra Free Theme WooCommerce Integration Tutorial: 統(tǒng)一された美しいEコマースサイトを作りましょう!](http://gqxi.cn/wp-content/uploads/2025/04/20250421102826936-image.png)
ショップ、カート、チェックアウトページに個別のサイドバーを設(shè)定できます。個別のサイドバーは商品詳細(xì)ページにも対応しており、広告、おすすめ商品、ナビゲーションモジュールを表示することができます。カスタムウィジェットはすべてのサイドバーエリアに追加できます。
![畫像 [11]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102839394-image.png)
フォントと配色の統(tǒng)一設(shè)定
アストラは WooCommerce このページはサイト全體のスタイルと同期しており、フォント、ボタン、色、その他の要素が統(tǒng)一されているため、繰り返しの設(shè)定作業(yè)が軽減される。
![畫像 [12]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102850915-image.png)
フォントとカラーを統(tǒng)一するパス:外観 > カスタマイズ > グローバル > タイポグラフィ/カラー
![畫像 [13]-Astra Free Theme WooCommerce Integration Tutorial: Creating Unified and Beautiful E-commerce Site(アストラ無料テーマWooCommerce統(tǒng)合チュートリアル:統(tǒng)一された美しいEコマースサイトの作成](http://gqxi.cn/wp-content/uploads/2025/04/20250421102907414-image.png)
サイト全體を有効にするためには、一度だけ設(shè)定する必要がある。
概要
アストラ サポート中の無料テーマ WooCommerce インターフェイスのシンプルさ、設(shè)定のわかりやすさなど、安定した性能。中小規(guī)模のネットショップには十分な機(jī)能を備えており、スピーディなサイト構(gòu)築と統(tǒng)一感のあるスタイルを追求するサイトユーザーに適しています。より細(xì)かいレイアウト制御や複雑な商品表示が必要な場合は、Astra Proプラグインにアップグレードすることができます。
お問い合わせ | |
---|---|
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話:020-2206-9892 | |
② QQ咨詢:1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務(wù)時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/50944この記事は著作権で保護(hù)されており、必ず帰屬表示を付けて複製してください。
コメントなし