フロントページにランダムなカテゴリを表示する(テーマ関数の検索と編集)


8

私は現在、Wordpressテーマの子テーマを編集するアルファ段階にあります。私はプログラミングの経験とワードプレスの管理の経験はありますが、ワードプレス関連のコードを直接編集した経験はありません。現在、最初の3つのカテゴリをアルファベット順に表示しています。

私がやろうとしていること:最初の3つのカテゴリーをアルファベット順に表示する代わりに、xを超える数の製品を含む3つのランダムなカテゴリーを表示したいと思います。

次の障害/質問に遭遇したため、続行できませんでした。

  1. これらのカテゴリーの選択を制御するメカニズム/機能は何ですか?(TheirCode)
  2. それはテーマに基づくものですか、それとも基盤となるWordPressシステムに何かありますか?
  3. この変更を行うには、他にどのような関連情報がありますか?
  4. Firefox Dev Barからどんな情報が役に立つでしょうか?
  5. 「TheirCode」を検索して「MyCode」に置き換えるにはどうすればよいですか?

ここでの本当の質問は、Firefox Dev Barや実際のソースなどのツールを使用して、この選択を担当する「TheirCode」をどのように見つけるのですか?

この質問はWooCommerce(プラグイン)に関するものではありません。WooCommerce(会社)が設計したテーマ、または実際に任意のテーマで機能を見つける方法を探しています。

オープンソースのテーマ:WooCommerce Storefront


2
Firefox Developer Inspectorを使用して、特定のクラスまたはIDラッピングカテゴリのタグを検索します。次に、テーマのソースファイルでこのクラスまたはIDを検索します。カテゴリを表示するある種の関数を見つける必要があります。関数を上書きするか、関数フィルターを使用してカテゴリーを置き換えます。
kierzniak

回答:


11

ここでの本当の質問は次のとおりです。Firefoxdev barなどのツールと実際のソースを使用して、この選択を担当する「TheirCode」をどのように見つけますか?

HTMLの出力/ソースを参照している場合は、たとえば公式のStorefrontテーマのデモサイトで、[Product Categories]の見出しまたはセクションを右クリックするだけで、簡単に検査できますsection。「要素の選択」アイコンなどの他のオプションについては、MDNドキュメントを参照してください。

ここに画像の説明を入力してください

実際のソース」(つまり、「ホームページ」テンプレートを使用してページに「製品カテゴリ」セクションを生成するPHPコードまたは関数)の場合は、で見つけることができますinc/storefront-template-functions.php

if ( ! function_exists( 'storefront_product_categories' ) ) {
    /**
     * Display Product Categories
     * Hooked into the `homepage` action in the homepage template
     *
     * @since  1.0.0
     * @param array $args the product section args.
     * @return void
     */
    function storefront_product_categories( $args ) {

        if ( storefront_is_woocommerce_activated() ) {

            $args = apply_filters( 'storefront_product_categories_args', array(
                'limit'             => 3,
                'columns'           => 3,
                'child_categories'  => 0,
                'orderby'           => 'name',
                'title'             => __( 'Shop by Category', 'storefront' ),
            ) );

            ...
        }
    }
}

storefront_product_categories()あなたが探しているPHP関数もそうであり、必要に応じて完全にオーバーライドできます(https://docs.woocommerce.com/document/set-up-and-use-a-child-theme/#を参照してください)セクション5)。しかし、ランダムなソートで製品カテゴリを表示したいだけの場合はstorefront_product_categories_args、クエリ引数をフィルタリングするために単に使用することができます(あなたの場合はorderby):

add_filter( 'storefront_product_categories_args', function( $args ){
    $args['orderby'] = 'rand';
    return $args;
} );

そのフィルターはstorefront_product_categories()関数内から呼び出され、これらは使用できる他のフィルター/アクションです:

  • フィルタ: storefront_product_categories_shortcode_args

  • アクション: storefront_homepage_before_product_categories

  • アクション: storefront_homepage_after_product_categories_title

  • アクション: storefront_homepage_after_product_categories

参照してください。これを使用すると、「アクション」と「フィルタ」の違いがわからない場合。


更新:どのようにしてコードを見つけることができますか?

Storefrontテーマのドキュメントを閲覧します

WooCommerce(会社)が設計したテーマ、または実際に任意のテーマで機能を見つける方法を探しています。

  • まず、テーマのドキュメントを確認(および読み取り)します。

  • 何もない、または必要な情報が見つからなかった/見つからなかった場合は、@ motivastが提案したことを試してください—ページの要素を調べ、適切なHTMLコードまたはCSS class/を見つけてid、テーマファイルを検索しますHTMLまたはCSS class/ id適切なファイルまたはPHPコードが見つかるまで/ function

たとえば、ストアフロントテーマのデモサイトでは、製品カテゴリセクションのHTMLは次のとおりです。

<section class="storefront-product-section storefront-product-categories" aria-label="Product Categories">
    ...
</section>

したがって次のいずれかのキーワードを使用してテーマファイルを検索できます(生成されたHTMLに最も具体的または最も近い一致から始めます)。

  • <section class="storefront-product-section storefront-product-categories"

  • class="storefront-product-section storefront-product-categories"

  • storefront-product-categories

  • storefront-product-section

Storefront /テーマのドキュメントについて知らなかったとすると、上記の検索を実行すると、最終的に正しいファイルまたはPHPコード/に移動しfunctionます。

さらにサポートが必要な場合はお知らせください。この回答を適宜更新します。


回答の更新された部分は、ストアフロント2.5.0では機能しません。独自のドキュメントサイトにある特定のフィルターの例でも機能しません。
クレウィス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.