• ホームページ
  • 記事
  • WooCommerce
  • ストアフロントのWooCommerceテーマをカスタマイズするための80以上の秘訣：究極のストアフロントテーマのカスタマイズガイド

ストアフロントのWooCommerceテーマをカスタマイズするための80以上の秘訣：究極のストアフロントテーマのカスタマイズガイド

公開: 2022-01-04

woocommerceストアフロントテーマのカスタマイズ WooCommerceストアフロントテーマをカスタマイズする方法をお探しですか？ この記事には、WooCommerceStorefrontテーマをカスタマイズするために使用できるさまざまな80以上のトリックがあります。 このガイドを読んだ後は、WooCommerceストアフロントのテーマのカスタマイズが簡単になります。

WooCommerce Storefrontは、無料のシンプルで強力なテーマです。 このテーマは、製品のプレゼンテーションとユーザーアクセスの観点からストアを細かく制御できます。 これは無料で、子テーマを通じて多数のカスタマイズオプションを提供します。

WooCommerce Storefrontテーマをカスタマイズするためのすべての秘訣を学ぶ前に、まず基本を教えてください。 さらに、WooCommerceストアフロントテーマをインストールおよび構成する方法に関する詳細なガイドがあります。

ストアフロントのWooCommerceテーマ

店先

WooCommerceプロジェクトはありますか？ はいの場合、StorefrontはWooCommerceとエレガントに連携するように構築された最高のeコマーステーマです。

このテーマは、WooCommerce Core開発者によって開発され、あらゆる種類のカスタマイズに対応できるクリーンで最小限のデザインを備えています。

このテーマは、どのデバイスでも機能するレスポンシブデザインです。 このテーマをダウンロードすることで得られるすばらしい機能のいくつかを次に示します。

    • エレガントなデザイン。
    • レスポンシブレイアウト。
    • SEOフレンドリーなマークアップ。
    • カスタムページテンプレート。
    • 無料。
    • GPLライセンス。
    • 他の言語に対応した翻訳。

WooCommerceストアフロントテーマをインストールして設定する方法

Storefrontテーマのダウンロードは、WordPressサイトに他のプラグインをインストールするのと同じです。 まず、[外観]、 [テーマ] 、[新規追加]の順に移動する必要があります。 検索フィールドに「storefront」と入力し、インストールボタンをクリックします。

インストールすると、[アクティブ化]ボタンを使用してテーマをアクティブ化できます。

ストアフロントインストール

さらに、wordpress.orgにアクセスして、Storefrontの最新バージョンをダウンロードできます。 次に、抽出したフォルダをFTP経由でサーバーのthemesディレクトリにアップロードできます。 その後、[外観]、 [テーマ]の順に移動して、テーマをアクティブ化する必要があります。

ページテンプレート

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

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

ホームページテンプレートは、すべての製品を表示するための優れた方法を提供し、製品と製品カテゴリの概要を示します。 あなたの店の訪問者はあなたの店に入るとき最初にこのページに着陸します。

新しいページを作成し、表示するコンテンツを追加するだけなので、設定は簡単です。 次に、[ページ属性]メタボックスの[テンプレート]ドロップダウンから[ホームページ]を選択する必要があります。

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

このページを公開した後、 [設定] 、[閲覧]の順に移動して、ホームページとして設定できます。

次に、[静的ページ]をオンにして、[フロントページ]ドロップダウンから作成したホームページを選択します。 変更を保存すると、変更は自動的にフロントエンドに反映されます。

ホームページの設定

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

ホームページ表示

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

さらに、ドラッグアンドドロップ機能を使用して、製品、カテゴリの順にクリックして変更を加えることができます。

カートとチェックアウトの全幅

全幅は、サイドバーなしでページ全体に広がるもう1つのテンプレートです。これは、カートページとチェックアウトページに推奨されるオプションです。 これは、カートとチェックアウトのページに移動し、[ページ属性]セクションのドロップダウンから[全幅]を選択することで実行できます。

全幅テンプレートの設定

メニューの設定

ストアフロントには、プライマリとセカンダリのメニューの場所のデフォルトの編成があります。 メインメニューは、サイトのロゴのすぐ下に表示されます。 特定のプライマリメニューを設定していない場合、WooCommerceはすべてのページを「プライマリメニュー」として表示します。

セカンダリメニューはロゴのすぐ横にあり、検索ボックスにネストされています。 ただし、このセカンダリメニューは、メニューを割り当てた場合にのみ表示されます。

メニューの表示

新しいメニューの作成とページの追加

これは、管理パネルの[外観]、[メニュー]の順に移動することで実行できます。 左側に、「ページ」というタイトルが表示されます。 [すべて表示]ボタンをクリックして、公開したすべてのページのリストを取得します。

目的のページにチェックマークを付けてから、 [メニューに追加]をクリックします。 ページをドラッグアンドドロップするだけで、メニューの順序を簡単にカスタマイズできます。

メニューの作成

ウィジェットの配置

ストアフロントテーマは、Webサイトにウィジェットを配置するための3つの異なる領域を提供します。 ヘッダーウィジェットは、コンテンツの上、サイトのヘッダーのすぐ下に配置できます。 サイドバーウィジェットは、選択したレイアウトに基づいて側面に配置されます。 さらに、使用可能な4つのウィジェットの選択に基づいて、フッターウィジェットを配置できます。

WooCommerce Storefrontテーマのインストールと構成の基本について理解したところで、このテーマをカスタマイズするために実行できるさまざまなトリックを見てみましょう。

1.子テーマの作成

WooCommerceストアフロントをカスタマイズするための複雑なトリックを掘り下げる前に、まずストアフロントテーマの子テーマを作成しましょう。 子テーマは、親テーマに依存する小さなテーマです。 これらは、親テーマのスタイルシートとカスタム関数をオーバーライドして、ページのさまざまなセクションに変更を加えます。

なぜ子テーマを作成する必要があるのですか？ これは、Storefrontのコアが絶えず更新されており、これがすべてのカスタマイズ作業にリスクをもたらすためです。 これは、カスタム作業を失うことなく、Storefrontを安全にアップグレードできることを意味します。

子テーマを作成する最良の方法は、Child ThemeConfiguratorプラグインをダウンロードしてアクティブ化することです。 ウィザードに従って、最初の子テーマを作成します。

2.ストアにロゴを追加します

これは、ダッシュボードの[テーマ] 、[カスタマイズ]の順にあるテーマカスタマイザーを使用して実行できます。 写真をアップロードしてロゴを追加するには、[サイトID]オプションを選択します。 ストアフロントテーマの推奨サイズは470x110pxです。 次に、[公開]をクリックして変更を保存します。

3.ヘッダーサイズをカスタマイズします

ここでは、テーマカスタマイザーを再度使用しますが、「追加のCSS」セクションにいくつかのCSSコードを記述します。

次のコードを追加します。

 *マストヘッド* /
＃masthead.site-header {
   高さ：155px！重要;
   margin-bottom：0px
}
/ *マストヘッド用のモバイルCSS * /
@media only screen and（max-width：320px）{
   ＃masthead.site-header {
   高さ：80px！重要;
   margin-bottom：0px;
}
}
/ *マストヘッドメニュー* /
.storefront-primary-navigation a、.cart-contents a {
   マージン：0 0 0 0;
}
.main-navigation ul {
   パディング：0 0 10px 4px！important;
}
.main-navigation li {
   height：38px！important;}
/ *マストヘッドメニューのモバイルCSS * /
@media only screen and（max-width：320px）{
.main-navigation ul {
   背景：＃D6DDE4！重要;
}
}
/ *ヘッダー領域* /
.site-header {
パディングトップ：0.5em;
}
.site-header .custom-logo-link img、.site-header .site-logo-anchor img、.site-header .site-logo-link img {
margin-bottom：-45px;
}

結果は次のとおりです。

ヘッダーサイズをカスタマイズする

4.テーマのヘッダーから検索バーを削除します

このコードを「追加のCSS」セクションに追加します。

 .site-header .widget_product_search
表示：なし;
}

結果は次のとおりです。

テーマのヘッダーから検索バーを削除します

5.モバイルデバイス用に別のドロップダウンメニューを作成します

Storefrontは、応答性が高く、すべての画面サイズに適切に調整できるように構築されています。 複数のメニューがある場合は、訪問者の注意をWebサイトの特定の場所に向けることが重要です。 WordPressカスタマイザーを使用すると、次のコードスニペットを追加してそれを行うことができます。

[外観]、[カスタマイズ]の順に移動し、[メニュー]オプションを選択します。小さな画面の場合は、[ハンドヘルドメニュー]を選択してカスタムメニューデザインを作成できます。

モバイルデバイス用に別のドロップダウンメニューを作成する

6.カスタマーレビューをオフにします

デフォルトでは、WooCommerceとストアフロントにはレビュー用の標準機能があります。 この非常に優れた統合により、訪問者があなたの製品についてどう思っているかを知ることができます。

ただし、カスタマーレビューはすべての種類のeコマースストアに適用されるとは限りません。 カスタマーレビューをオフにするには、WooCommerce設定に移動し、[製品]タブに移動します。 ページの下部に、必要に応じてレビューを更新できる「レビュー」セクションがあります。

カスタマーレビューをオフにする

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

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

 remove_action（ 'woocommerce_before_subcategory_title'、 'woocommerce_subcategory_thumbnail'、10）;

結果は次のとおりです。

ホームページから商品カテゴリの画像を削除する

8.ヘッダーメニューの色を変更します

カスタマイザーを使用すると、必要な色でヘッダーをカスタマイズできます。 これは、[カスタマイズ] 、[ヘッダー]の順に移動し、必要な色を選択することで実行できます。

ただし、このオプションは、検索バー、ログインセクション、ロゴを含むヘッダー領域全体に色を付けます。 次のコードスニペットを[追加のCSS ]パネルに追加するだけで、ヘッダーメニューの背景を変えることができます。

 .storefront-primary-navigation、
.main-navigation ul.menu ul.sub-menu {
背景色：＃f0f0f0;
}

結果は次のとおりです。

8.ヘッダーメニューの色を変更します

9.プライマリナビゲーションバーを非表示にする

ストアフロントテーマは、デフォルトですべてのページをメニューとして表示します。 プライマリナビゲーションバーを非表示にする場合は、メニューを削除するだけでは不十分です。 [カスタマイズ]、[追加のCSS ]セクションに移動して、次の行を追加するだけです。

 .storefront-primary-navigation {
表示：なし;
}

結果は次のとおりです。

プライマリナビゲーションバーを非表示にする

10.ショップページで商品タイトルを非表示にします

ショップページで商品のタイトルを非表示にするには、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。 

 h2.woocommerce-loop-product__title {
表示：なし！重要;
}

結果は次のとおりです。

ショップページで商品タイトルを非表示にする

11.ヘッダーから空白を削除します

[カスタマイズ]、[追加のCSS ]セクションに移動して、次の行を追加するだけです。

 .site-branding {
margin-bottom：0px;
}

結果は次のとおりです。

ヘッダーから空白を削除します

12.検索バーの幅を広げます

検索バーの幅を広げたい場合はどうしますか？ [追加のCSS]セクションを使用して、次の行を追加します。

 .woocommerce-active .site-header .site-search {
幅：44.739％;
}
#masthead .site-search .widget_product_search input [type = "search"] {
幅：700px！重要;
}

結果は次のとおりです。

検索バーの幅を広げます

13.ヘッダーとメニューの間のスペースを削除します

[カスタマイズ]、[追加のCSS ]セクションに移動して、次の行を追加するだけです。

 .site-header {
高さ：77px;
}
.col-full {
上：-84px;
}
@media only screen and（max-width：640px）{
.site-header {
高さ：自動;
}
.col-full {
上：0;
}
}

結果は次のとおりです。

ヘッダーとメニューの間のスペースを削除します

14.WooCommerce登録ページにテキストを追加する

登録ページにメッセージを追加することは重要です。ありがとうを追加したり、新規登録者に割引バウチャーを提供したりする場合があるためです。 これをアーカイブするには、子テーマのfunction.phpファイルに関数を追加するだけです。

 add_action（ 'bp_signup_profile_fields'、function（）{
//以下から編集を開始します。
？>
<p class = "notice-check-inbox">
メールをチェックし、登録を確認することを忘れないでください
<strong> 10％割引バウチャー</ strong>！
</ p>
<？php
//編集を終了します。
}）;

15.ストアフロントテーマのブレッドクラムを削除します

ほとんどのWebサイトのページの上部には、ナビゲーションを容易にするためにブレッドクラムが追加されています。 これらは各ページの上部にあり、ページまたは製品が属するカテゴリを示しています。

パン粉

ブレッドクラムは検索エンジン最適化のための素晴らしいツールですが、それらを削除したい場合は、子テーマのfunctions.phpファイルに次のコードを追加するだけです。

 add_filter（ 'woocommerce_get_breadcrumb'、 '__ return_false'）;

結果は次のとおりです。

ストアフロントテーマのブレッドクラムを削除する

16.ロゴの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」に置き換えて追加します。

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

この機能は単純にカテゴリを削除します。 次の行をfunctions.phpファイルに追加する必要があります。

 function storefront_child_reorder_homepage_contant（）{
remove_action（ 'ホームページ'、 'storefront_product_categories'、20）;
}
add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。

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

18.カートとミニカートから商品画像を削除します

これを行うには、子テーマのfunctions.phpファイルに次のコードを追加するだけです。

 add_filter（ 'woocommerce_cart_item_thumbnail'、 '__ return_false'）;

結果は次のとおりです。

カートとミニカートから商品画像を削除します

19.当店のページからの最近の商品

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

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

 function storefront_child_reorder_homepage_contant（）{
remove_action（ 'ホームページ'、 'storefront_recent_products'、30）;
}
add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。

当店のページからの最近の商品

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

一部の人にとっては、これは望ましい機能ではないかもしれません。 ベストセラーセクションを削除するには、子テーマのfunction.phpファイルに次のコードを追加するだけです。

 function storefront_child_reorder_homepage_contant（）{
remove_action（ 'ホームページ'、 'storefront_best_selling_products'、70）;
}
add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。

ストアページからベストセラー商品を削除する

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

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

 function storefront_child_reorder_homepage_contant（）{
remove_action（ 'ホームページ'、 'storefront_featured_products'、40）;
}
add_action（ 'init'、 'storefront_child_reorder_homepage_contant'）;

結果は次のとおりです。

注目の商品を削除する

22.粘着性のある「カートに追加」ボタンを統合する

説明、画像ギャラリー、追加情報など、商品に関する重要な情報を提供することが重要です。 最終的に、これによりページが長くなる可能性があります。

ただし、顧客がページの一番上までスクロールして商品をカートに追加することなく、商品をカートに追加するプロセスを簡単にしたい場合は、粘着性のある[カートに追加]ボタンを追加できます。画面の上部。

これは、WooCommerceのSticky add tocartというプラグインを使用して実行できます。 インストールしてアクティブ化するだけで、すべての製品ページにある「カートに追加」ボタンを楽しむことができます。

結果は次のとおりです。

粘着性のある「カートに追加」ボタンを統合する

23.チェックアウトページに都市のドロップダウンリストを追加します

チェックアウトページに都市のドロップダウンリストを追加すると、お客様が個人情報をすばやく入力できるようになります。 これにより、製品を出荷できる都市のみを作成できるようになります。

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

 add_filter（ 'woocommerce_default_address_fields'、 'override_checkout_city_fields'、10、1）;
関数override_checkout_city_fields（$ fields）{
//ここに希望の都市を配列で定義します（ここに都市の例があります）
$ option_cities = array（
'' => __（ '都市を選択してください'）、
'a' => 'a'、

）;

$ fields ['city'] ['type'] = 'select';
$ fields ['city'] ['options'] = $ option_cities;

$ fieldsを返します。
}

コードの5行目を見ると、都市のリストを定義できます。 コードの最初の部分 'a' =>は都市のIDであり、スペースや空の文字を含めることはできません。 街の名前を思い通りに書いてください。

結果は次のとおりです。

チェックアウトページに都市のドロップダウンリストを追加します

24.商品ページから商品数量のプラスボタンとマイナスボタンを非表示にします

プラスボタンとマイナスボタンでテキストフィールドを非表示にして製品の数量を増減するには、[追加のCSS ]セクションに次のCSSコードを追加するだけです。

 。量 {
表示：なし！重要;
}

結果は次のとおりです。

商品ページから商品数量のプラスボタンとマイナスボタンを非表示にします

25.商品ページの[カートに追加]ボタンを非表示にします

これを行うには、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 .single_add_to_cart_button {
表示：なし！重要;
}

結果は次のとおりです。

26.フッターからストアフロントテーマクレジットを削除します

デフォルトでは、WooCommerceStorefrontテーマはフッターにテーマクレジットを追加します。 個人的なタッチのフッターが必要な場合があります。 テーマクレジットを削除するには、子テーマのfunctions.phpファイルに次の関数を追加するだけです。

 add_action（ 'init'、 'custom_remove_footer_credit'、10）;
関数custom_remove_footer_credit（）{
remove_action（ 'storefront_footer'、 'storefront_credit'、20）;
add_action（ 'storefront_footer'、 'custom_storefront_credit'、20）;
}
関数custom_storefront_credit（）{
？>
<div class = "site-info">
＆コピー; <？php echo get_bloginfo（ 'name'）。 ''。 get_the_date（ 'Y'）; ？>
</ div> <！-。site-info->
<？php
}

結果は次のとおりです。

フッターからストアフロントテーマクレジットを削除する

27.ストアフロントウィジェットのセクションの色とフォントサイズを変更する

カスタマイザーを使用してページウィジェットのフォントの色やサイズを直接変更する方法はありません。 次のCSSコード行を追加することで、これを簡単に変更できます。 これを行うには、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 .widget-area .widget {
色：緑;
フォントサイズ：1em;
}

結果は次のとおりです。

ストアフロントウィジェットのセクションの色とフォントサイズを変更する

28.商品画像にストアフロントの「セール」バッジを表示する

WooCommerce Storefrontテーマのデフォルトバージョンでは、特定の製品のセールまたは割引価格を定義できます。 ただし、商品画像にセールバッジを追加する場合は、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 ul.products li.product .onsale {
位置：絶対;
上：137px;
右：62px;
}

結果は次のとおりです。

商品画像にストアフロントの「セール」バッジを表示する

29.「セール」バッジの色を変更します

セールバッジの色を変更するには、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 。発売中 {
背景色：#FFFFFF;
ボーダーカラー：グリーン;
色：緑;
}

結果は次のとおりです。

「セール」バッジの色を変更する

30.数量の「プラスマイナス」ボックスの色を変更します

これは、数量のプラスボタンとマイナスボタンの背景色を変更することで実行できます。 これを行うには、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 .quantity .qty {
色：＃000;
背景色：＃f5df72;
}

結果は次のとおりです。

数量の「プラスマイナス」ボックスの色を変更する

31.ストアフロントヘッダーの背景色を変更する方法

WordPressカスタマイザーを使用すると、ストアフロントテーマのヘッダーの背景色を変更できます。 これを行うには、[カスタマイズ]、[ヘッダー]セクションの順に移動します。

ストアフロントヘッダーの背景色を変更する方法

32.ヘッダーのミニカートの背景色を変更します

ヘッダーの色を変更すると、ミニカートのドロップダウンはこの色を継承します。 ただし、可視性を高めるために次のCSSルールを使用してこれを変更できます。 [カスタマイズ]、[追加のCSS ]セクションに移動して、次の行を追加するだけです。

。

 woocommerce.widget_shopping_cart {
背景：白;
border-radius：12px;
}

結果は次のとおりです。

ヘッダーのミニカートの背景色を変更します

33.以下のCSSを使用してストアフロントフッターに画像を追加するCopyright

著作権テキストの下に独自のロゴ、支払いの承認、またはパートナーバッジを追加する場合は、[レイヤー]、[カスタマイズ]の順に移動し、[フッター]をクリックします。

[カスタマイズ]をクリックしてパネルを展開し、バックグラウンドで[画像の選択]をクリックします。

必要な画像を選択して追加します。

[繰り返しなし]と[下]を選択するか、必要に応じて手動で配置します。

カスタマイザーに戻り、 CSSをクリックしてパネルを展開します。 ただし、パーセンテージが仕様に従っていることを確認する必要があります。 次に、次の行を追加します。

 .site-info：after {
コンテンツ： '';
背景画像：url（独自のURLを追加）;
表示ブロック;
幅：100px;
高さ：100px;
マージン：0自動;
}

34.フッターのギャップを取り除く方法

[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 .footer-widgets {padding-top：0; }

結果は次のとおりです。

フッターのギャップを取り除く方法

35.ヘッダーを削除してメニューを保持する方法

[カスタマイズ]、[追加のCSS ]セクションに移動して、次の行を追加するだけです。

 ＃masthead＆gt; .col-full、
#masthead .site-header-cart {
表示：なし;
}

36.ハイパーリンクからアンダースコアを削除する方法

デフォルトでは、ストアフロントテーマに下線が引かれています。リンクを削除する場合は、[カスタマイズ]、[追加のCSS ]セクションの順に移動し、次の行を追加します。

 a {
テキスト装飾：なし！重要;
}

結果は次のとおりです。

ハイパーリンクからアンダースコアを削除する方法

37. WooCommerceStorefrontテーマの投稿で注目の画像を削除する方法

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

 remove_action（ 'storefront_post_content_before'、 'storefront_post_thumbnail'、10）;

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

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

 .page-template-template-homepage .hentry .entry-header、
.page-template-template-homepage .hentry、
.page-template-template-homepage .storefront-product-section {
ボーダーカラー：赤;
}

39.ストアフロントWooCommerceのセールバッジをカスタマイズする方法

追加のCSSセクションに次のコードを追加するだけです。

 。発売中 {
背景色：#FFFFFF;
ボーダーカラー：＃FF0000;
色：＃FF0000;
}

結果は次のとおりです。

ストアフロントWooCommerceのセールバッジをカスタマイズする方法

40.ロゴ、セカンダリナビゲーション、検索バーのサイズを変更する方法

それらをすべて一度に変更するには、次のコードを追加のCSSセクションに追加するだけです。

 @media screen and（min-width：768px）{
/ *ロゴ* /
.site-header .site-branding、.site-header .site-logo-anchor、.site-header .site-logo-link {幅：30％！重要; / *必要に応じて、px値を使用します。 350px * /}

/ *二次ナビゲーション* /
.site-header .secondary-navigation {幅：40％！重要; / *必要に応じて、px値を使用します。 350px * /}

/* 検索バー */
.site-header .site-search {幅：30％！重要; / *必要に応じて、px値を使用します。 350px * /}

41.WooCommerce製品ページのサイドバーを削除して全幅に拡大する方法

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

 add_action（ 'get_header'、 'remove_storefront_sidebar'）;
if（is_product（））{
remove_action（ 'storefront_sidebar'、 'storefront_get_sidebar'、10）;
}
}
次の行を追加のCSSセクションに追加します。
body.woocommerce #primary {幅：100％; }

結果は次のとおりです。

WooCommerce製品ページのサイドバーを削除して全幅に移動する方法

42.メニュー項目に画像またはアイコンを追加する方法。

これを行うには、メニュー画像をインストールしてアクティブ化するだけです。アイコンを使用するとプラグインが簡単になり、必要に応じてアイコンを追加できます。 必要な寸法をさまざまなメニューフィールドに追加するだけです。

視覚的な説明は次のとおりです。

43.ストアフロントにトップバーを追加する方法

これは、ソーシャルアイコンやウェルカムメッセージなどのクールなものを追加するために行うことができます。 これを追加するには、子テーマのfunction.phpファイルに次のコード行を追加するだけです。

 / **
*ヘッダーの前のストアフロントにトップバーを追加します。
* /
function storefront_add_topbar（）{
？>
<div id = "topbar">
<div class = "col-full">
<p> WooStoreのテストへようこそ</ p>
</ div>
</ div>
<？php
}
add_action（ 'storefront_before_header'、 'storefront_add_topbar'）;

次に、このCSSをカスタマイザーの[追加のCSS]セクションに追加します。

 #topbar {
背景色：＃1F1F20;
高さ：40px;
行の高さ：40px;
}

#topbar p {
色：#fff;
}

結果は次のとおりです。

ストアフロントにトップバーを追加する方法

44.トップバーにカスタムメッセージを追加する方法

これは、トップバーにカスタムメッセージを追加するもう1つの方法です。 子テーマのfunction.phpファイルに次のコード行を追加するだけです。

 / **
*ヘッダーの前のストアフロントにトップバーを追加します。
* /
function storefront_add_topbar（）{
グローバル$ current_user;
get_currentuserinfo（）;

if（！empty（$ current_user-> user_firstname））{
$ user = $ current_user-> user_firstname;
} それ以外 {
$ user = __（ 'guest'、 'storefront-child'）;
}

？>
<div id = "topbar">
<div class = "col-full">
<p>ようこそ<？php echo $ user？>！</ p>
</ div>
</ div>
<？php
}
add_action（ 'storefront_before_header'、 'storefront_add_topbar'）;

トップバーにカスタムメッセージを追加する方法

45.ストアフロントでメタスライダーを全幅にする方法

メタスライダーは多くのWordPressサイトで非常に人気があります。 このコードを追加して、スライダーを全幅に伸ばします。 これを子テーマのストレッチに追加して、スライダーを全幅にします。

 add_action（ 'init'、 'child_theme_init'）;
関数child_theme_init（）{
add_action（ 'storefront_before_content'、 'woa_add_full_slider'、5）;
}
関数woa_add_full_slider（）{？>
<div id = "slider">
<？php echo do_shortcode（ "[metaslider id = 388percentwidth = 100]"）; ？>
</ div>
<？php
}

ただし、プラグインを使用してこれを行うことができます。良い例はWooSliderプラグインです。

46.ストアフロントにGoogleFontsを追加する方法

これは非常に簡単で、 Easy GoogleFontsプラグインをダウンロードしてアクティブ化するだけです。 WordPressコミュニティの300,000人以上のユーザーが、この優れたフォントプラグインを信頼しています。

簡単なGoogleFonts

47.ヘッダーから検索バーを削除する方法

これは、子テーマのfunction.phpファイルに次のコードを貼り付けることにより、ヘッダーから検索バーを削除する別の方法です。

 add_action（ 'init'、 'jk_remove_storefront_header_search'）;
関数jk_remove_storefront_header_search（）{
remove_action（ 'storefront_header'、 'storefront_product_search'、40）;
}

結果は次のとおりです。

ヘッダーから検索バーを削除する方法

48.ストアフロントでページタイトルを非表示にする方法

ページタイトルを非表示にする場合は、wordpress.orgコミュニティで利用できるStorefrontThemeプラグインのTitleToggleをインストールしてアクティブ化する必要があります。 10,000人以上のユーザーがこのプラグインを信頼しています。

ストアフロントテーマのタイトルトグル

49.ストアフロントフッターで「WooThemesによって設計された」を削除する方法

これは、前に説明したように、この問題の代替ソリューションです。 このコードを子テーマのfunction.phpファイルに追加する必要があります。

 add_action（ 'init'、 'custom_remove_footer_credit'、10）;
関数custom_remove_footer_credit（）{
remove_action（ 'storefront_footer'、 'storefront_credit'、20）;
add_action（ 'storefront_footer'、 'custom_storefront_credit'、20）;
}
関数custom_storefront_credit（）{
？>
<div class = "site-info">
＆コピー; <？php echo get_bloginfo（ 'name'）。 ''。 get_the_date（ 'Y'）; ？>
</ div> <！-。site-info->
<？php
}

結果は次のとおりです。

ストアフロントフッターで「designedbyWooThemes」を削除する方法

50.ストアフロントメニューにFontAwesomeアイコンを追加する方法

これは、wordpress.orgコミュニティで利用可能なFont Awesome 4Menusプラグインを使用して実行できます。 50,000人以上のユーザーがこのプラグインを信頼しています。

Font Awesome4メニュー

51.ストアフロントのモバイルビューで「ナビゲーション」の名前を変更する方法

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

 function storefront_primary_navigation（）{
？>
<nav id = "site-navigation" class = "main-navigation" role = "navigation">
<button class = "menu-toggle"> <？php _e（ 'メニュー名の編集'、 'ストアフロント'）; ？> </ button>
<？php wp_nav_menu（array（ 'theme_location' => 'primary'））; ？>
</ nav> <！-＃site-navigation->
<？php
}

結果は次のとおりです。

ストアフロントのモバイルビューで「ナビゲーション」の名前を変更する方法

52.ストアフロントの「マイアカウントページ」に顧客アバターを追加する方法

これは、子テーマのfunction.phpファイルに次のコード行を追加するだけで実行できます。

/ **
*ウェルカムメッセージの後に、マイアカウントページに顧客アバターを印刷します
* /
function storefront_myaccount_customer_avatar（）{
$ current_user = wp_get_current_user（）;

echo '<div class = "myaccount_avatar">'。 get_avatar（$ current_user-> user_email、72、 ''、$ current_user-> display_name）。 '</ div>';
}
add_action（ 'woocommerce_before_my_account'、 'storefront_myaccount_customer_avatar'、5）;
次に、[追加のCSS]セクションに次のCSSコマンドルールを追加します。
.myaccount_avatar {
border-right：1px solid rgba（0、0、0、0.1）;
フロート：左;
パディング-右：10px;
幅：83px;
}

.myaccount_user {
border-left：3px solid＃787E87;
フロート：右;
パディング-左：10px;
幅：88％;
}

結果は次のとおりです。

ストアフロントの「マイアカウントページ」に顧客アバターを追加する方法

53.WooCommerceストアフロントフッターの高さを変更する方法

[追加のCSS ]セクションに次のCSSコードを追加することで、WooCommerceストアフロントのフッターの高さを簡単に変更できます。

 section.footer-widgets {
パディングトップ：25px;
}

div.site-info {
パディングトップ：16px;
パディング-下：25px;
}

結果は次のとおりです。

WooCommerceストアフロントフッターの高さを変更する方法

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

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

 .storefront-featured-products {
background-image：url（ここにURLを追加）;
背景位置：中央中央;
background-repeat：no-repeat;
背景サイズ：カバー;
-o-background-size：カバー;
}

結果は次のとおりです。

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

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

これを行うには、最初に色を追加するセクションを特定する必要があります。 これは、追加のCSSセクションに次のコードを追加することで簡単に実行できます。

 .storefront-featured-products {
背景色：＃FFEB3B;
}

結果は次のとおりです。

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

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

これを行うには、最初に削除または非表示にするセクションを特定する必要があります。 これは、追加の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;}

結果は次のとおりです。

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

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

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

  • 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を返します。
}

結果は次のとおりです。

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

58.ページあたりのホームページセクション製品を増やす方法

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

 add_filter（ 'storefront_featured_products_shortcode_args'、 'custom_storefront_featured_product_per_page'）;
//ページごとの注目の注目製品
function custom_storefront_featured_product_per_page（$ args）{
$ args ['per_page'] = 10;
$ argsを返します。
}

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

次のコード行を子テーマの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を返します。
}

結果は次のとおりです。

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

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

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

 add_filter（ 'storefront_product_categories_shortcode_args'、 'custom_storefront_category_per_page'）;

//カテゴリ製品
function custom_storefront_category_per_page（$ args）{
$ args ['number'] = 10;
$ argsを返します。
}

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

このコードを子テーマの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}

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

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

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

 remove_action（ 'ホームページ'、 'storefront_popular_products'、50）;

さらに、[追加のCSS ]セクションに次のコードを追加することで削除できます。

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

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

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

 add_filter（ 'storefront_popular_products_args'、 'custom_storefront_product_popular_title'）;
//フロントページの注目製品タイトル
function custom_storefront_product_popular_title（$ args）{
$ args ['title'] = __（ 'トップ製品'、 'ストアフロント'）;
$ argsを返します。
}

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

Storefrontのデフォルトでは、トップレートセクションに4つの製品が表示されます。 この例では、15個の製品に増やします。 このコードを子テーマの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を返します。
}

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

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

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

 remove_action（ 'ホームページ'、 'storefront_on_sale_products'、60）;

66.セール中の商品の背景色を変更する方法

これは、追加のCSSセクションに次のコードを追加することで実行できます。

 .storefront-on-sale-products {
背景色：＃FFEB3B;
}

67.ボタンをカスタマイズする方法

ボタンは、カスタマイザーを使用して変更できます。 [外観]、[カスタマイズ]の順に移動します。 ボタンをクリックして、仕様に合わせてスタイルを設定します。

次に例を示します。

68.ストアフロントのカスタムフッターリンクを追加する方法

このコードを使用すると、カスタムフッターリンクを追加したり、必要に応じてスタイルを設定したりできます。 次のコード行を子テーマのfunction.phpファイルに追加するだけです。

 add_filter（ 'storefront_credit_links_output'、function（$ default_links）{
$ output = [
sprintf（
'<a href="%s">％s </a>'、get_home_url（）、 'ここにカスタムリンクを追加'

）、

$ default_links
];
implode（を返す
'<span role = "separator" aria-hidden = "true"> </ span>'、$ output
）;
}）;

結果は次のとおりです。

ストアフロントのカスタムフッターリンクを追加する方法

69.アーカイブに関するストアフロントショーのブログの抜粋

WooCommerce Storefrontテーマでブログを実行している場合、このコードは、ブログ投稿アーカイブの完全なコンテンツではなく、ブログの抜粋を表示できます。 次のコード行を子テーマのfunction.phpファイルに追加するだけです。

 add_action（ 'init'、function（）{
remove_action（ 'storefront_loop_post'、 'storefront_post_content'、30）;
add_action（ 'storefront_loop_post'、function（）{
echo '<div class = "entry-content" itemprop = "articleBody">';
if（has_post_thumbnail（））{
the_post_thumbnail（ 'large'、['itemprop' => 'image']）;
}
the_excerpt（）;
エコー '</ div>';
}、30）;
}）;

70.カスタムMetaviewportタグを追加する方法

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

 add_filter（ 'wpex_meta_viewport'、function（）{
return '<meta name = "viewport" content = "width = device-width、initial-scale = 1、maximum-scale = 1" />';
}）;

71.推奨プラグインの通知を削除する方法

プラグインの通知は一部の人にとって煩わしいものであり、削除するのは非常に簡単です。 次のコード行を子テーマのfunction.phpファイルに追加するだけです。

 //特定のプラグインを削除します
function my_recommended_plugins（$ plugins）{
// WooCommerceをインストールするための通知を削除します
unset（$ plugins ['woocommerce']）;
//プラグインを返します
$ pluginsを返します。
}
add_filter（ 'wpex_recommended_plugins'、 'my_recommended_plugins'）;
//すべてのプラグインを削除します
//通知は更新を知らせるためにも使用されるため、一部のプラグインを使用している場合、これは推奨されません
add_filter（ 'wpex_recommended_plugins'、 '__ return_empty_array'）;

72.フッターコールアウトを条件付きで表示または非表示にする方法

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

 function my_callout_visibility（$ bool）{
//フロントページに非表示
if（is_front_page（））{
$ bool = false;
}
//ブール値を返します
$ boolを返します。
}
add_filter（ 'wpex_callout_enabled'、 'my_callout_visibility'、20）;

73.テーマメタジェネレータを削除する方法

これは、使用しているテーマのバージョンが通知されるようにサポートに使用されます。 そこに問題はありませんが、ここで削除したい場合はその方法です。

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

 add_action（ 'init'、function（）{
remove_action（ 'wp_head'、 'wpex_theme_meta_generator'、1）;
}、10）

74.タイトルのないページのヘッダーの下にスペースを自動的に追加する方法

いずれかのページのメインページタイトルを無効にすると、ヘッダーの下にスペースが残りません。 このコードスニペットは、スライダー、画像、またはその他のコンテンツを上部と同じ高さに挿入できるように、間隔を追加するのに役立ちます。 次のコードを[追加のCSS ]セクションに追加するだけです。

 body.page-header-disabled #main {
パディングトップ：30px;
}

75.モバイルで一番上にスクロールボタンを非表示にする方法

次のコードを[追加のCSS ]セクションに追加するだけです。

 @media only screen and（max-width：959px）{
＃site-scroll-top {display：none！important; }
}

76.「ボックス化された」レイアウトの外にヘッダーとフッターを移動する方法

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

 関数myprefix_move_header_footer_out_of_boxed_layout（）{
//ヘッダー/フッターを削除します
remove_action（ 'wpex_hook_wrap_top'、 'wpex_header'）;
remove_action（ 'wpex_hook_wrap_bottom'、 'wpex_footer'）;
//ヘッダー/フッターを再度追加します
add_action（ 'wpex_outer_wrap_before'、 'wpex_header'、9999）;
add_action（ 'wpex_outer_wrap_after'、 'wpex_footer'）;
}
add_action（ 'init'、 'myprefix_move_header_footer_out_of_boxed_layout'）;

77.グリッドモジュールに列の選択肢を追加する方法

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

 //この関数は列の選択を追加し、カスタムCSSを追加する必要があります
//実際の列の場合。 例 '.span_1_of_8 {width：12.5％; } '
関数myprefix_grid_columns（$ columns）{
$ columns ['8'] = '8';
$ columns ['9'] = '9';
$ columns ['10'] = '10'; //必要な数だけ追加します
$ columnsを返します。
}
add_filter（ 'wpex_grid_columns'、 'myprefix_grid_columns'）;

78.ヘッダーの下にセカンダリカスタムメニューを追加する方法

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

 関数add_custom_menu_above_main_content（）{？>
<div class = "my-nav-wrapper clr">
<div class = "container clr"> <！-。ナビゲーションバーのコンテンツを中央に配置->
<？php
//解決策1はナビゲーションバーのショートコードを追加します
echo do_shortcode（ '[vcex_navbar menu = "60"]'）; //メニューIDを変更します
// WPメニューを使用したソリューション2を参照
// @ https://codex.wordpress.org/Function_Reference/wp_nav_menu for args
$ args = array（）;
wp_nav_menu（$ args）;
//ソリューション3はuberMenuなどのメニュープラグインを使用します
do_shortcode（ '[menu_shortcode_here]'）; ？>
</ div>
</ div>
<？php}
add_action（ 'wpex_hook_header_after'、 'add_custom_menu_above_main_content'）;

79.ページヘッダーからタイトルを削除し、ブレッドクラムのみを残す方法

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

 //ページヘッダー領域からタイトルを削除します
add_action（ 'init'、function（）{
remove_action（ 'wpex_hook_page_header_inner'、 'wpex_page_header_title'）;
remove_action（ 'wpex_hook_page_header_content'、 'wpex_page_header_title'）; //合計v5 +
}）;

80.アクションリファレンス

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

全般的

一般的なアクション関数のいくつかを次に示します。

storefront_before_site – Executed after opening <body> tag

 storefront_before_content – <div id = "content">タグを開く前に実行
storefront_content_top – <div id = "content">タグを開いた後に実行されます

ヘッダ

storefront_before_header – <div id = "page">タグの後に実行
storefront_header – <header id = "masthead">タグの<divclass = "col-full">内で実行されます
ホームページ
storefront_homepage –ホームページコンテンツセクションの<divclass = "col-full">内で実行

製品カテゴリ

storefront_homepage_before_product_categories – <sectionclass = "storefront-product-categories">ホームページセクションの前に実行storefront_homepage_after_product_categories_title`– <h2class = "section-title">製品カテゴリセクションのタイトルの後に実行storefront_homepage_after_product_categories– <section class = "storefrontの後に実行-product-categories ">ホームページセクション

最近の製品

storefront_homepage_before_recent_products – <sectionclass = "storefront-recent-products">ホームページセクションの前に実行storefront_homepage_after_recent_products_title– <h2class = "section-title">最近の商品セクションのタイトルの後に実行storefront_homepage_after_recent_products– <section class = "storefront-の後に実行最近の製品 ">ホームページセクション

おすすめ商品

storefront_homepage_before_featured_products – <section class = "storefront-featured-products">の前に実行されます
ホームページセクションstorefront_homepage_after_featured_products_title– <h2 class = "section-title">の後に実行されます
注目の商品セクションのタイトルstorefront_homepage_after_featured_products– <sectionclass = "storefront-featured-products">ホームページセクションの後に実行

人気商品

storefront_homepage_before_popular_products – <sectionclass = "storefront-popular-products">ホームページセクションの前に実行storefront_homepage_after_popular_products_title– <h2class = "section-title">人気商品セクションのタイトルの後に実行storefront_homepage_after_popular_products– <section class = "storefront-の後に実行人気商品 ">ホームページセクション

セール商品

storefront_homepage_before_on_sale_products – <sectionclass = "storefront-on-sale-products">ホームページセクションの前に実行storefront_homepage_after_on_sale_products_title– <h2class = "section-title">販売中の商品セクションのタイトルの後に実行storefront_homepage_after_on_sale_products– <セクションクラスの後に実行= "storefront-on-sale-products">ホームページセクション

ベストセラー商品

storefront_homepage_before_best_selling_products – <sectionclass = "storefront-best-selling-products">ホームページセクションの前に実行
storefront_homepage_after_best_selling_products_title – <h2class = "section-title">ベストセラー商品セクションタイトルの後に実行
storefront_homepage_after_best_selling_products – <sectionclass = "storefront-best-selling-products">ホームページセクションの後に実行されます

ブログアーカイブページ

storefront_loop_before –ブログアーカイブのすべての投稿の前に実行されます
storefront_loop_post –ブログアーカイブの各投稿の前に実行されます
storefront_post_content_before –ブログアーカイブの各投稿のコンテンツの前に実行されます
storefront_post_content_after –ブログアーカイブの各投稿のコンテンツの後に実行されます

一般ページ

storefront_page_before –単一ページの `<main id =” main”>`タグの後に実行されます
storefront_page –単一ページで `<div id =” post-…”>`タグを開いた後に実行されます
storefront_page_after –単一ページの `<div id =” post-…”>`タグの最後で実行されます

単一の投稿

storefront_single_post_before –単一のブログ投稿の開始<main id = "main">タグの後に実行されます
storefront_single_post_top –単一の投稿で<div id = "post -...">タグを開いた後に実行されます
storefront_single_post –投稿コンテンツを表示するためにstorefront_single_post_topフックの直後に実行されます
storefront_single_post_bottom –単一の投稿の<div id = "post -...">タグを閉じる前に実行されます
storefront_single_post_after –単一のブログ投稿の終了<main id = "main">タグの前に実行されます

サイドバー

storefront_sidebar –ウィジェットが存在する場合、サイドバーを含むすべてのページで実行されます

フッター

storefront_before_footer – <footer id = "colophon">タグの前に実行
storefront_footer – <footerid = "colophon">タグを閉じる前に実行されます
storefront_after_footer – <footer id = "colophon">タグを閉じた後に実行されます

フィルタリファレンスガイド

このセクションでは、ストアフロントテーマ内で使用できる最も一般的に使用されるフィルターのいくつかをリストします。

コメントコメント

ファイル：comments.php

storefront_comment_form_args –コメント返信タイトルHTMLの前後をフィルタリングします

ストアフロントテンプレート関数

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

ナビゲーションメニュー

storefront_menu_toggle_text –レスポンシブメニューのトグルテキストをフィルタリングします

ホームページ

製品カテゴリ

storefront_product_categories_args –ホームページの商品カテゴリの引数をフィルタリングします
storefront_product_categories_shortcode_args –ホームページの商品カテゴリのショートコード引数をフィルタリングします

最近の製品

storefront_recent_products_args –ホームページの最近の製品の引数をフィルタリングします
storefront_recent_products_shortcode_args –ホームページの最近の製品のショートコード引数をフィルタリングします

おすすめ商品

storefront_featured_products_args –ホームページの注目商品の引数をフィルタリングします。
storefront_featured_products_shortcode_args –ホームページの注目商品のショートコード引数をフィルタリングします。

人気商品

storefront_popular_products_args –ホームページの人気商品の引数をフィルタリングします。
storefront_popular_products_shortcode_args –ホームページの人気商品のショートコード引数をフィルタリングします。

セール商品

storefront_on_sale_products_args –販売商品の引数でホームページをフィルタリングします。
storefront_on_sale_products_shortcode_args –セール商品のショートコード引数でホームページをフィルタリングします

ベストセラー商品

storefront_best_selling_products_args –ホームページで最も売れている商品の引数をフィルタリングする
storefront_best_selling_products_shortcode_args –ホームページのベストセラー商品のショートコード引数をフィルタリングします

単一の投稿

storefront_single_post_posted_on_html –詳細に投稿されたシングルをフィルタリングします

フッター

storefront_footer_widget_rows –フッターウィジェットの行数をフィルター処理します（デフォルト：1）
storefront_footer_widget_columns –フッターウィジェット列の数をフィルター処理します（デフォルト：4）
storefront_copyright_text –フッターの著作権テキストをフィルタリングします
storefront_credit_link –フッタークレジットリンクをフィルタリングします

店頭機能

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

 storefront_header_styles –ヘッダースタイルをフィルタリングします
storefront_homepage_content_styles –ホームページのコンテンツスタイルをフィルタリングします

店頭クラス

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

 storefront_custom_background_args –デフォルトのバックグラウンド引数をフィルタリングします
storefront_default_background_color –デフォルトのサイトの背景色をフィルタリングします
storefront_sidebar_args –デフォルトのサイドバー引数をフィルタリングします
storefront_google_font_families –デフォルトのGoogleFontFamilyをフィルタリングする
storefront_navigation_markup_template –ナビゲーションの出力マークアップをフィルタリングします。

WooCommerceテンプレート関数

ファイル：/woocommerce/storefront-woocommerce-template-functions.php

 storefront_upsells_columns –アップセル列をフィルタリングします（デフォルト：3）
storefront_loop_columns –デフォルトの製品ループ表示をフィルタリングします（デフォルト：3）
storefront_handheld_footer_bar_links –ハンドヘルドフッターバーリンクをフィルタリングします

WooCommerceクラス

ファイル：/woocommerce/class-storefront-woocommerce.php

 storefront_related_products_args –関連商品の引数をフィルタリングします
storefront_product_thumbnail_columns –商品のサムネイル列をフィルタリングします（デフォルト：4）
storefront_products_per_page –商品カテゴリのページごとに商品をフィルタリングします。

結論

ストアフロントのテーマをカスタマイズする場合は、この包括的なストアフロントのカスタマイズガイドで共有されているこれらのヒントから始めるのが最適です。 これにより、ストアフロントの子テーマをすばやく追加して結果を即座に取得できるコードスニペットも提供されます。 このストアフロントのカスタマイズガイドがお役に立てば幸いです。

同様の記事

  1. 4つのシンプルなオプションを備えたStorefront＆Woocommerce FooterLinkで構築されたものを削除する方法
  2. プラグインを使用してストアフロントフッターのテキストとリンクを削除する方法
  3. WordPressメニュー項目を個別にスタイリングするWordPressメニューCSSクラス
  4. Diviモバイルメニューをスクロール可能なクイックフィックスソリューションにする方法
  5. プラグインを使用せずにWordPressで番号のページネーションを作成する方法