WooCommerceストアフロントテーマのホームページのカスタマイズ[究極のガイド]

公開: 2020-09-22

WooCommercerストアフロントホームページカスタマイズガイドストアフロントテーマのホームページのカスタマイズは、ストアフロントWooCommerceテーマで構築されたオンラインストアにとって重要です。優れたデザインは訪問者をあなたの店に引き付け、あなたのブランドに対する顧客の信頼を築き、彼らを忠実な顧客に変えるので、カスタマイズが必要です。

このチュートリアルでは、ストアフロントのテーマホームページに実装できる簡単なホームページのカスタマイズをいくつか紹介します。これにより、ホームページをより魅力的にし、検索エンジン最適化の改善にも同様に役立つ一般的なユーザーエクスペリエンスを向上させることができます。

Storefrontテーマのカスタマイズを作成する前に、親テーマが更新されたときに変更が失われないように、最初にStorefrontの子テーマを作成することをお勧めします。 Storefrontテーマをさらにカスタマイズしたい場合は、以前の投稿で共有したこのStorefrontカスタマイズガイドを確認してください。

ストアフロントテーマのホームページのカスタマイズ

ホームページ

WooCommerce Storefrontテーマには、WordPressコミュニティに200,000を超えるアクティブなインストールがあります。テーマのホームページには6つのセクションがあります。

ページコンテンツ
製品カテゴリセクション
注目の製品セクション
最近の製品セクション
最高評価の製品セクション
セール商品セクション
ベストセラー商品セクション

ただし、カスタマイズに進む前に、ホームページを設定する必要があります。ホームページにホームページセクションを表示するには、ホームページテンプレートをページに割り当てる必要があります。

Storefrontテーマは、デフォルトのWooCommerceページに加えて、2つの追加ページテンプレートを自動的に作成します。ホームページと全幅です。ここでは、ホームページテンプレートを設定する方法について説明します。

ホームページテンプレート

ホームページテンプレートは、すべての製品を表示するための優れた方法を提供し、製品と製品カテゴリの概要を示します。

あなたの店の訪問者はあなたの店に入るとき最初にこのページに着陸します。ホームページの外観は、魅力的であれば訪問者を購入者に変えることができるため、非常に重要です。

次のことを行うだけで、セットアップは簡単です。

管理者としてサイトの管理パネルにログインします。
新しいページを作成し、表示するコンテンツを追加します。
次に、以下に示すように、[ページ属性]メタボックスの[テンプレート]ドロップダウンから[ホームページ]を選択する必要があります。
このページを公開した後、 [設定] 、[閲覧]の順に移動して、ホームページとして設定できます。
次に、[静的ページ]をオンにして、[ホームページ]ドロップダウンから作成したホームページを選択します。
変更を保存すると、変更はフロントエンドに自動的に反映されます。

構成が完了すると、ホームページには次のように複数のセクションが表示されます。

ホームページ

ホームページには、おすすめ商品、ファンのお気に入り、セール中の商品、ベストセラーなど、さまざまなクラスターが表示されます。これらの要素の表示方法は、バックエンドの順序と同じです。

ホームページが設定されると、カスタマイズに取り掛かることができます。

1.ホームページから製品カテゴリの画像を削除します

WooCommerceを使用すると、ホームページに商品とその画像を含む商品カテゴリを表示できます。ただし、カテゴリをテキストのみで表示する場合は、この行を子テーマのfunctions.phpファイルに追加する必要があります。 function.phpファイルの最後に追加するだけです。

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

結果は次のとおりです。ホームページから製品カテゴリの画像を削除する

2.ロゴのURLリンクを変更します

一般的に、WordPressのテーマはロゴでサイトのホームページをリンクします。これはほとんどのWebサイトの標準機能であり、ユーザーはロゴをクリックするたびにホームページに戻ることができることを期待しています。

ただし、ホームページが別の場所にある場合はどうなりますか？これは、カスタムリンクが必要な場合は、URLを構成する必要があることを意味します。これを変更するには、子テーマのfunctions.phpファイルに次のコードを追加する必要があります。

 add_action（ 'storefront_header'、 'custom_storefront_header'、1）;

関数custom_storefront_header（）{

    remove_action（ 'storefront_header'、 'storefront_site_branding'、20）;

    add_action（ 'storefront_header'、 'custom_site_branding'、20）;

    関数custom_site_branding（）{

        //ここにロゴまたはサイトタイトルのリンクを設定します

        $ link = home_url（ '/ my-custom-link /'）;

        ？>

        <div class = "site-branding">

            <？php

                if（function_exists（ 'the_custom_logo'）&& has_custom_logo（））{

                    $ custom_logo_id = get_theme_mod（ 'custom_logo'）;

                    if（$ custom_logo_id）{

                        $ custom_logo_attr = array（ 'class' => 'custom-logo'、 'itemprop' => 'logo'）;

                        $ image_alt = get_post_meta（$ custom_logo_id、 '_ wp_attachment_image_alt'、true）;

                        if（empty（$ image_alt））{

                            $ custom_logo_attr ['alt'] = get_bloginfo（ 'name'、 'display'）;

                        }

                        $ logo = sprintf（ '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">％2 $ s </a>'、

                            esc_url（$ link）、

                            wp_get_attachment_image（$ custom_logo_id、 'full'、false、$ custom_logo_attr）

                        ）;

                    }

                    elseif（is_customize_preview（））{

                        $ logo = sprintf（ '<a href="%1$s" class="custom-logo-link" style="display:none;"> <img class = "custom-logo" /> </a>' 、esc_url（$ link））;

                    }

                    $ html = is_front_page（）？ '<h1 class = "logo">'。 $ logo。 '</ h1>'：$ logo;

                } elseif（function_exists（ 'jetpack_has_site_logo'）&& jetpack_has_site_logo（））{

                    $ logo = site_logo（）-> logo;

                    $ logo_id = get_theme_mod（ 'custom_logo'）;

                    $ logo_id = $ logo_id？ $ logo_id：$ logo ['id'];

                    $ size = site_logo（）-> theme_size（）;

                    $ html = sprintf（ '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">％2 $ s </a>'、

                        esc_url（$ link）、

                        wp_get_attachment_image（$ logo_id、$ size、false、array（

                            'class' => 'site-logo attachment-'。 $ size、

                            'データサイズ' => $ size、

                            'itemprop' => 'ロゴ'

                        ）））

                    ）;

                    $ html = apply_filters（ 'jetpack_the_site_logo'、$ html、$ logo、$ size）;

                } それ以外 {

                    $ tag = is_front_page（）？ 'h1'： 'div';




                    $ html = '<'。 esc_attr（$ tag）。 'class = "beta site-title"> <a href="' .esc_url($link）。'"rel="home">'。 esc_html（get_bloginfo（ 'name'））。 '</a> </'。 esc_attr（$ tag）。 '>';




                    if（ ''！== get_bloginfo（ 'description'））{

                        $ html。= '<p class = "site-description">'。 esc_html（get_bloginfo（ 'description'、 'display'））。 '</ p>';

                    }

                }

                エコー$ html;

            ？>

        </ div>

        <？php

    }

}

カスタムリンクは7行目にあります'（' / my-custom-link / '）;' 、「 my-custom-link 」に置き換えてカスタムリンクを追加します。

3.ストアのホームページからカテゴリを完全に削除します

ホームページのカテゴリを完全に削除することをお勧めします。この機能は、単にカテゴリを削除します。あなたがする必要があるのは、functions.phpファイルに次の行を追加することです：

 function storefront_child_reorder_homepage_contant（）{

remove_action（ 'ホームページ'、 'storefront_product_categories'、20）;

}

add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。ストアのホームページからカテゴリを完全に削除する

4.ショップのホームページから最近の商品を削除する

新製品を追加した直後に、フロントページの「新規」セクションに追加されます。これは、ストアフロントテーマのデフォルト設定です。ただし、常に商品をリストに追加すると、ショップページが乱雑になる可能性があります。さらに、このセクションに追加情報を表示することもできます。

このセクションを削除するには、子テーマのfunction.phpファイルに次のコードを追加するだけです。

 function storefront_child_reorder_homepage_contant（）{

remove_action（ 'ホームページ'、 'storefront_recent_products'、30）;

}

add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。ショップのホームページから最近の商品を削除する

5.ストアのホームページからベストセラー商品を削除します

一部の店舗所有者にとって、ベストセラー商品は望ましい機能ではない場合があります。ベストセラーセクションを削除するには、子テーマのfunction.phpファイルに次のコードを追加するだけです。

 function storefront_child_reorder_homepage_contant（）{

remove_action（ 'ホームページ'、 'storefront_best_selling_products'、70）;

}

add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。ストアのホームページからベストセラー商品を削除する

6.注目の製品を削除する

同様に、ストアの所有者は、注目の製品セクションを無効にすることをお勧めします。これは、子テーマのfunctions.phpファイルに次のコードスニペットを追加することで実行できます。

 function storefront_child_reorder_homepage_contant（）{

remove_action（ 'ホームページ'、 'storefront_featured_products'、40）;

}

add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。注目の製品を削除する

7.ストアフロントホームページの横線の色を変更する方法

子テーマのcustom.cssファイルに次のコードを追加するだけです。

 .page-template-template-homepage .hentry .entry-header、

.page-template-template-homepage .hentry、

.page-template-template-homepage .storefront-product-section {

ボーダーカラー：赤;

}

8.特定のホームページセクションのストアフロントに背景画像を追加する

デフォルトのストアフロントテーマには、製品カテゴリ、最近の製品、注目の製品、人気のある製品、セール中の製品、ベストセラーの製品の6つのセクションがあります。次のコードをstyle.cssファイルに追加するだけです。

 .storefront-featured-products {

background-image：url（ここにURLを追加）;

背景位置：中央中央;

background-repeat：no-repeat;

背景サイズ：カバー;

-o-background-size：カバー;

}

結果は次のとおりです。

9.ストアフロントのホームページセクションに背景色を追加する

ホームページセクションに背景色を追加することをお勧めします。これを行うには、最初に色を追加するセクションを特定する必要があります。これは、 style.cssファイルに次のコードを追加することで簡単に実行できます。

 .storefront-featured-products {

背景色：＃FFEB3B;

}

結果は次のとおりです。ストアフロントのホームページセクションに背景色を追加する

10.ホームページのセクションタイトルを削除または非表示にする方法

これを行うには、最初に削除または非表示にするセクションを特定する必要があります。これは、 style.cssファイルに次のコードを追加することで実行できます。

 .storefront-recent-products .section-title {display：none;}

.storefront-product-categories .section-title {display：none;}

.storefront-featured-products .section-title {display：none;}

.storefront-popular-products .section-title {display：none;}

.storefront-on-sale-products .section-title {display：none;}

.storefront-best-selling-products .section-title {display：none;}

結果は次のとおりです。ホームページのセクションタイトルを削除または非表示にする方法

11.ホームページのセクションタイトルを変更する方法

これを行うには、最初にタイトルを削除するセクションを特定する必要があります。このリストは、ストアフロントホームページセクションのフィルターを識別するのに役立ちます。

storefront_product_categories_args
storefront_recent_products_args
storefront_featured_products_args
storefront_popular_products_args
storefront_on_sale_products_args
storefront_best_selling_products_args

子テーマのfunction.phpファイルに次のコードを追加するだけです。

 add_filter（ 'storefront_featured_products_args'、 'custom_storefront_product_featured_title'）;

//フロントページの注目製品タイトル

function custom_storefront_product_featured_title（$ args）{

$ args ['title'] = __（ '新注目商品のタイトルはこちら'、 'ストアフロント'）;

$ argsを返します。

}

結果は次のとおりです。ホームページのセクションタイトルを変更する方法

12.ホームページセクションの製品列グリッド/列を増やす方法

次のコード行を子テーマのfunction.phpファイルに追加するだけです。

 add_filter（ 'storefront_featured_products_shortcode_args'、 'custom_storefront_featured_product_per_row'）;




//注目の注目製品列

function custom_storefront_featured_product_per_row（$ args）{

$ args ['columns'] = 2;

$ argsを返します。

}

結果は次のとおりです。ホームページセクションの製品列グリッド/列を増やす方法

13.ホームページにさらにカテゴリを表示する方法

次のコード行を子テーマのfunction.phpファイルに追加するだけです。

 add_filter（ 'storefront_product_categories_shortcode_args'、 'custom_storefront_category_per_page'）;




//カテゴリ製品

function custom_storefront_category_per_page（$ args）{

$ args ['number'] = 4;

$ argsを返します。

}

結果は次のとおりです。ホームページにさらにカテゴリを表示する方法

14.ホームページセクションタイトルの下に説明を追加する方法

このコードを子テーマのfunction.phpファイルに追加するだけです。

 add_action（ 'storefront_homepage_after_featured_products_title'、 'custom_storefront_product_featured_description'）;




関数custom_storefront_product_featured_description（）{？>

<p class = "element-title--sub">

<？php echo "セクションの説明はこちら";？>

</ p>

<？php}

結果は次のとおりです。ホームページのセクションタイトルの下に説明を追加する方法

15.ストアフロントホームページから評価の高い商品セクションを削除する方法

これを行うには2つの方法があります。 1つは、このセクションを削除するのに役立つプラグインをインストールすることです。あなたはホームページコントロールプラグインを見ることができます。コードを介してこれを行う簡単な方法を見ていきます。

ただし、フックを使用してセクションを簡単に削除できます。これは、子テーマのfunction.phpファイルに次の行を追加するだけで実行できます。

remove_action( 'homepage', 'storefront_popular_products', 50 );

さらに、 style.cssファイルまたは追加のCSSセクションに次のコードを追加することで削除できます。

.storefront-popular-products .section-title {display:none;}

結果は次のとおりです。ストアフロントホームページからトップクラスの商品セクションを削除する方法

16.最高評価の製品セクションタイトルを変更する方法

このコードを子テーマのfunction.phpファイルに追加するだけです。

 add_filter（ 'storefront_popular_products_args'、 'custom_storefront_product_popular_title'）;

//フロントページの注目製品タイトル

function custom_storefront_product_popular_title（$ args）{

$ args ['title'] = __（ 'トップ製品'、 'ストアフロント'）;

$ argsを返します。

}

結果は次のとおりです。最高評価の製品セクションタイトルを変更する方法：ストアフロントテーマのホームページのカスタマイズ

17.最高評価のセクションにさらに多くの製品を表示する方法

Storefrontのデフォルトでは、[トップレート]セクションに4つの製品が表示されます。この例では、12個の製品に増やします。このコードを子テーマのfunction.phpファイルに追加するだけです。

 add_filter（ 'storefront_popular_products_shortcode_args'、 'custom_storefront_top_product_per_page'）;




//ページごとの注目の注目製品

function custom_storefront_top_product_per_page（$ args）{

$ args ['per_page'] = 12;

$ argsを返します。

}

結果は次のとおりです。

最高評価のセクションにさらに多くの製品を表示する方法：ストアフロントテーマのホームページのカスタマイズ

18.ストアフロントホームページからセール商品セクションを削除する方法

これを行うには2つの方法があります。 1つは、このセクションを削除するのに役立つプラグインをインストールすることです。あなたはホームページコントロールプラグインを見ることができます。この例では、1行のコードを使用します。

フックを使用してセクションを簡単に削除できます。これは、子テーマのfunction.phpファイルに次の行を追加するだけで実行できます。

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

結果は次のとおりです。ストアフロントホームページからセール商品セクションを削除する方法ストアフロントテーマのホームページのカスタマイズ

19.ストアフロントテーマのホームページのカスタマイズアクションフックの参照

これらはすべて、ストアフロントテーマで使用される使用可能なadd_action（）関数です。 do_actionで定義されているように関数をフックにアタッチします

ヘッダ

ホームページ
storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

製品カテゴリ

storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

ベストセラー商品

storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

店頭機能

ファイル：/inc/storefront-functions.php

storefront_header_styles – filter the header styles
storefront_homepage_content_styles – filter the homepage content styles
店頭クラス

結論

この記事では、WooCommerceストアフロントテーマのホームページ用に作成できる18の異なるストアフロントテーマホームページのカスタマイズのアイデアに焦点を当てました。これらのカスタマイズはテスト済みであり、スクリーンショットに示されているように機能します。

WordPressの初心者で、functions.phpファイルの場所がわからない場合は、次の簡単な手順に従ってください。

WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
[ダッシュボード]メニューから、[外観メニュー]> [テーマエディターメニュー]をクリックします。 テーマエディタページが開いたら、関数を追加するテーマ関数ファイルを探します。

それはそれと同じくらい簡単です。ストアフロントテーマのホームページのカスタマイズに関するこの記事から、ストアフロントテーマがどのように柔軟であるかを確認でき、フィルターとフックを使用して必要なカスタマイズを行うことができます。追加のスタイル設定については、追加のCSSセクションまたはCSSコードを入力するstyle.cssファイルを使用できます。

同様の記事

ストアフロントのWooCommerceテーマをカスタマイズするための80以上の秘訣：究極のストアフロントテーマのカスタマイズガイド
WooCommerceで商品を非表示にする方法、またはカテゴリや役割で商品を非表示にする方法
WooCommerceで現在の製品カテゴリ名を取得する方法
WooCommerceで注目の商品を設定する方法
WooCommerceのショップページからすべての商品を非表示にする方法
カートに追加されたアイテムをカウントする方法WooCommerceカートカウントコード
WooCommerceで価格なしで製品を隠す方法
検索結果からWooCommerce製品を非表示にする方法
WooCommerce製品属性の使用方法ステップバイステップ[完全ガイド]
プラグインを使用せずにWordPressで番号のページネーションを作成する方法