web-dev-qa-db-ja.com

カテゴリを表示するWoo commerceのサムネイルとリンク

私のカテゴリーをウーコマースでサムネイル付きで表示したいのですが。リンクとして子の用語を一覧表示することはできますが、コンテンツを追加したいと思います。私は私のテンプレートのhome-page.phpのリンクとして "product_cat"の子用語を表示するために使用する以下のコードを追加しました。ただし、カテゴリ画像も追加したいと思います。ご協力ありがとうございました。

<?php

$taxonomyName = "product_cat";
//This gets top layer terms only.  This is done by setting parent to 0.  
$parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));   
echo '<ul>';
foreach ($parent_terms as $pterm) {
    //Get the Child terms
    $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
    foreach ($terms as $term) {

        echo '<li><a href="' . get_term_link( $term->name, $taxonomyName ) . '">' . $term->name . '</a></li>';  
    }
}
echo '</ul>';


?>
post-thumbnailswoocommerceget-terms
5
steamfunk

いくつかのカスタマイズをしました。これは親と子のカテゴリ画像を表示するのに役立ちます。必要に応じて、後でこのコードをカスタマイズできます。

    $taxonomyName = "product_cat";
//This gets top layer terms only.  This is done by setting parent to 0.  
    $parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));

    echo '<ul>';
    foreach ($parent_terms as $pterm) {

        //show parent categories
        echo '<li><a href="' . get_term_link($pterm->name, $taxonomyName) . '">' . $pterm->name . '</a></li>';

        $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
        // get the image URL for parent category
        $image = wp_get_attachment_url($thumbnail_id);
        // print the IMG HTML for parent category
        echo "<img src='{$image}' alt='' width='400' height='400' />";

        //Get the Child terms
        $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
        foreach ($terms as $term) {

            echo '<li><a href="' . get_term_link($term->name, $taxonomyName) . '">' . $term->name . '</a></li>';
            $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
            // get the image URL for child category
            $image = wp_get_attachment_url($thumbnail_id);
            // print the IMG HTML for child category
            echo "<img src='{$image}' alt='' width='400' height='400' />";
        }
    }
    echo '</ul>';

それがあなたの要求を満たすかどうか私に知らせてください。

2
WisdmLabs

こんにちは@Wisdmlabsご協力ありがとうございます。他の誰かがそうする方法を考えていない限り、私はこれが非常にうまく機能することを発見しました。

$taxonomyName = "product_cat";
$prod_categories = get_terms($taxonomyName, array(
    'orderby'=> 'name',
    'order' => 'ASC',
    'hide_empty' => 1
));  

foreach( $prod_categories as $prod_cat ) :
    if ( $prod_cat->parent != 0 )
        continue;
    $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
    $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
    $term_link = get_term_link( $prod_cat, 'product_cat' );
    ?>

    <img  src="<?php echo $cat_thumb_url; ?>" alt="" /> 
    <a class="button" href="<?php echo $term_link; ?>"> <?php echo $prod_cat->name; ?> </a> 
    <?php endforeach; 
wp_reset_query(); ?>
3
steamfunk

上記の@ Wisdmlabsの回答をさらに最適化するには、次の行を置き換えます。

$cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );

と

$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb_id, 'thumbnail-size' )[0]; // Change to desired 'thumbnail-size'

このようにして、画像はサーバー上で適切なサイズにトリミングされ、帯域幅の負荷が軽減されます。

0
jgangso