web-dev-qa-db-ja.com

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

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

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

次のような障害や質問に出くわして、進められなくなりました。

  1. これらのカテゴリーの選択を制御するメカニズム/機能は何ですか？ （theirCode）
  2. それはテーマベースですか、それとも基礎となるWordPressシステム内のものですか？
  3. この変更を行うために他にどのような情報が関連しますか？
  4. Firefox Dev Barからどのような情報が役立ちますか？
  5. MyCodeに置き換えることができるように、「theirCode」を見つける方法を教えてください。

ここで本当の質問は： どのように私はこのようなFirefoxのようなツールを使用してこの選択を担当している "theirCode"と実際のソースを見つけるのですか？

この質問はWooCommerce（プラグイン）に関するものではありません。私はWooCommerce（会社）がデザインしたテーマまたは実際にはどんなテーマでも機能を見つける方法を探しています。

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

functionscategoriestheme-developmentcustomizationthemes
8
T. Thomas

ここでの本当の質問は：firefox dev barや実際のソースなどのツールを使用して、この選択を担当する「TheirCode」を見つけるにはどうすればよいですか？

IfHTML出力/ソースを参照している場合、たとえば公式のStorefrontテーマ デモサイト 、ちょうどいい- [商品カテゴリ]の見出しまたはセクションをクリックすると、sectionを簡単に確認できます。 「要素の選択」アイコンなどの他のオプションについては、 MDN doc を参照してください。

enter image description here

ここで、「実際のソース」（つまり、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/#section-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

「アクション」と「フィルター」の違いがわからない場合は、 this を参照してください。

更新：どのようにコードを見つけることができましたか？

Storefrontテーマドキュメント を参照します。

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

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

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

たとえば、Storefrontテーマデモサイトの製品カテゴリセクションの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/themeのドキュメントについて知らなかったと仮定すると、上記の検索を実行すると、最終的に正しいファイルまたはPHP code/functionが表示されます。

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

11
Sally CJ