WooCommerce には、アーカイブ ページに表示できる内容に関するいくつかのオプションがあります:
ただし、このアプローチには欠点があります。カテゴリとサブカテゴリが一緒に表示され、両者が分離されません。そのため、商品画像とサイズが異なる場合、レイアウトが少し混乱して見える可能性があります。画像のサイズが同じであっても、アーカイブ ページの行にカテゴリと商品の両方が含まれている場合、カテゴリの [カートに追加] ボタンがない場合、すべての要素のサイズが同じではないため、行が乱雑に見えます。
このチュートリアルでは、商品を表示する前に、カテゴリーを別のリストに表示する方法を説明します。
これを行うには、4 つの手順に従います:
WooCommerce がアーカイブ ページにカテゴリとサブカテゴリを出力するために使用するコードを決定します。
続行するには、次のものが必要です:
コードエディタ
それでは、WooCommerce がアーカイブ ページに製品カテゴリと製品をどのように表示するかを見てみましょう。
まだカスタマイザーを開いていない場合は、
タブを選択し、
製品カタログをクリックします。
ストア ページの表示 
で
を選択し、次に カテゴリの表示 で サブカテゴリと製品の表示 Strong> を選択します。
[公開 
] をクリックして変更を保存し、Web サイトのストア ページにアクセスします。私のものは次のようになります:
4 つのカテゴリと 3 つの並べた画像のグリッドがあるため、最初の 2 つの製品はカテゴリの 1 つと並べて表示されます。
カテゴリとサブカテゴリをより目立つようにして、製品リストとは別に単純に表示したいと考えています。それでは、これをやってみましょう。
WooCommerce がアーカイブ内のカテゴリと製品を出力するために使用するコードを識別します
最初のステップは、WooCommerce がカテゴリとサブカテゴリを出力する方法を決定することです。それでは、WooCommerce のソース コードを詳しく調べて、関連する関数を見つけてみましょう。
で、テンプレート フォルダーにあります。
そのファイルには、カテゴリと製品を出力するコードがあります: リーリー したがって、商品を出力するループを実行する前にカテゴリまたはサブカテゴリを出力する
woocommerce_product_subcategories()関数があります。
この関数はプラグイン可能です。つまり、テーマ内でオーバーライドできます。残念ながら、WooCommerce には項目をクリアするための組み込みスタイルがあり、デフォルトで表示される行の先頭に表示されるため、これは完全には機能しません。
<p>因此，我们将关闭存档页面上类别和子类别的显示，以便仅显示产品。然后，我们将创建一个输出产品类别或子类别的新函数，并将其挂钩到 <code>woocommerce_before_shop_loop 操作，确保我们使用高优先级，以便它在已经挂钩到该操作的函数之后触发。 p>
注意：由于 WooCommerce 向每个第三个产品列表添加了清除内容，因此我们无法使用 woocommerce_product_subcategories() 函数或其编辑版本来显示类别。这是因为即使我们使用此功能单独显示类别，它也会清除列出的第三、第六（等等）类别或产品。我们可以尝试覆盖它，但编写我们自己的函数更简单。
所以让我们创建一个插件来实现这一点。
在您的wp-content/plugins目录中，创建一个新文件夹并为其指定一个唯一的名称。我将我的命名为tutsplus-separate-products-categories-in-archives。在其中创建一个新文件，同样具有唯一的名称。我使用相同的名称：tutsplus-separate-products-categories-in-archives.php。
打开您的文件并向其中添加以下代码：
<?php /** * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479 * Description: Display products and categories / subcategories as two separate lists in product archive pages * Version: 1.0 * Author: Rachel McCollin * Author URI: https://rachelmccollin.co.uk * * */
您可能想要编辑作者详细信息，因为这是您正在编写的插件。保存您的文件并通过 WordPress 管理员激活插件。
现在让我们编写函数。但在开始之前，请关闭管理屏幕上的类别列表。打开定制器，单击 WooCommerce 选项，然后单击产品目录。对于每个商店页面显示和默认类别显示选项，选择显示产品。点击发布保存您的更改。
您的商店页面现在看起来像这样：
在您的插件文件中，添加以下内容：
function tutsplus_product_subcategories( $args = array() ) {
}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );
现在，在函数中添加以下代码：
$parentid = get_queried_object_id();
$args = array(
'parent' => $parentid
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="product-cats">';
foreach ( $terms as $term ) {
echo '<li class="category">';
woocommerce_subcategory_thumbnail( $term );
echo '<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
echo $term->name;
echo '</a>';
echo '</h2>';
echo '</li>';
}
echo '</ul>';
}
让我们看一下该函数的作用：
$parentid。get_terms() 来识别以当前查询项作为其父项的术语。如果这是商店主页面，则会返回顶级类别；如果这是一个类别存档，它将返回子类别。ul 元素。li 元素，然后使用 woocommerce_subcategory_thumbnail() 输出类别图像，后跟其存档链接中的类别名称。现在保存您的文件并刷新主商店页面。我的看起来像这样：
类别已显示，但需要一些样式。接下来我们就这样做。
为了添加样式，我们的插件中需要一个样式表，我们需要将其排队。
在您的插件文件夹中，创建一个名为 css 的文件夹，并在其中创建一个名为 style.css 的文件。
现在，在您的插件文件中，将其添加到您已创建的函数上方：
function tutsplus_product_cats_css() {
/* register the stylesheet */
wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
/* enqueue the stylesheet */
wp_enqueue_style( 'tutsplus_product_cats_css' );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );
这会正确地将您刚刚创建的样式表排入队列。
现在打开样式表并添加以下代码。 WooCommerce 使用移动优先样式，因此我们也将使用它。
ul.product-cats {
margin-left: 0;
}
ul.product-cats li {
list-style: none;
margin-left: 0;
margin-bottom: 4.236em;
text-align: center;
position: relative;
}
ul.product-cats li img {
margin: 0 auto;
}
@media screen and (min-width:768px) {
ul.product-cats li {
width: 29.4117647059%;
float: left;
margin-right: 5.8823529412%;
}
ul.product-cats li:nth-of-type(3) {
margin-right: 0;
}
}
我已从 WooCommerce 使用的样式中复制了准确的宽度和边距。
现在再次检查您的主商店页面。这是我的：
这是服装类别存档：
这是它在较小屏幕上的外观：
产品类别是 WooCommerce 的一大功能，但它们的显示方式并不总是理想。在本教程中，您学习了如何创建一个插件，该插件可以与产品列表分开输出产品类别或子类别，然后设置类别列表的样式。
您可以使用此代码在页面其他位置（例如，产品下方）输出类别或子类别列表，方法是将函数挂钩到 WooCommerce 模板文件中的不同操作挂钩。
現在拡張したいストアを運営している場合、または他の WooCommerce 関連のプラグインを探している場合は、CodeCanyon でどのようなプラグインが利用できるかを自由にチェックしてください。
CodeCanyon は、市場で最も柔軟で機能が豊富な WooCommerce WordPress プラグインを提供し、ユーザーが使い慣れたオンライン ストアに別次元の機能を追加します。
カスタム フィールドとアップロードの実装、複数の通貨の表示、またはメンバーシップの提供が必要な場合でも、CodeCanyon で利用できるさまざまな WooCommerce プラグインは、これらのタスクの達成に役立ちます。
利用可能なすべての高品質 WooCommerce プラグインに加えて、CodeCanyon には Web サイトの強化に役立つ他の高品質 WordPress プラグインが何千もあります。広範なプラグイン ライブラリを参照すると、フォーラム、メディア、SEO プラグインなど、あらゆる種類のプラグインのプラグインが見つかります。
CodeCanyon の高品質 WordPress プラグインの膨大なライブラリを今すぐ活用してください!
自分に合った WooCommerce プラグインを選択するのにサポートが必要な場合は、Envato Tuts の他の投稿をチェックしてください:
以上がWooCommerce カテゴリ、サブカテゴリ、および製品を表示するための個別のリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
