web-dev-qa-db-ja.com

ウーコマース特有のループまたはarchive-product.phpをオーバーライドする方法

これまでのところ、私のwoocommerceテーマはショップページ内のすべての商品をループ処理している間、デフォルトスタイルが生成されるのでレイアウトの問題が生じるので、私はいくつかのブートストラップクラスをカスタマイズすることを試みています。ページを調査した後、私はこれがループの中心にあることを発見しました：

wc_get_template_part( 'content', 'product' );

それが通常のhtmlクラスやcssクラスのように見えるとは思わないで編集できますが、どこかに隠れている可能性があると考えていますが、検索場所がわかりません。

私は昨日からHTML要素の編集方法にこだわっていますが、私はまだテーマ開発の初心者なので、助けてくださいまたは少なくともアドバイスをお願いします。これは完全なarchive-product.phpです。

get_header(); ?>

<div class="row">
    <div class="small-12 medium-12 large-12 columns text-left">
        <!--breadcrumb-->
        <?php
        /**
         * woocommerce_before_main_content hook.
         *
         * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
         * @hooked woocommerce_breadcrumb - 20
         * @hooked WC_Structured_Data::generate_website_data() - 30
         */
        do_action( 'woocommerce_before_main_content' );
        ?>
    </div>

    <header class="small-12 medium-6 large-6 columns text-left woocommerce-products-header collapse">
    <!--title-->
        <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

        <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>

        <?php endif; ?>

        <?php
            /**
             * woocommerce_archive_description hook.
             *
             * @hooked woocommerce_taxonomy_archive_description - 10
             * @hooked woocommerce_product_archive_description - 10
             */
            do_action( 'woocommerce_archive_description' );
        ?>
    </header>

    <div class="small-12 medium-6 large-6 columns collapse">

        <?php if ( have_posts() ) : ?>
        <?php
            /**
             * woocommerce_before_shop_loop hook.
             *
             * @hooked woocommerce_result_count - 20
             * @hooked woocommerce_catalog_ordering - 30
             */
            do_action( 'woocommerce_before_shop_loop' );
        ?>
        <?php endif; ?>
    </div>

</div>


<div class="row small-up-2 large-up-4">
    <?php if ( have_posts() ) : ?>

    <?php #woocommerce_product_loop_start(); ?><!--removes ul-->

        <?php woocommerce_product_subcategories(); ?>

        <?php while ( have_posts() ) : the_post(); ?>

            <?php
                /**
                 * woocommerce_shop_loop hook.
                 *
                 * @hooked WC_Structured_Data::generate_product_data() - 10
                 */
                do_action( 'woocommerce_shop_loop' );
            ?>

            <?php wc_get_template_part( 'content', 'product' ); ?>

        <?php endwhile; // end of the loop. ?>

    <?php #woocommerce_product_loop_end(); ?>

    <?php
        /**
         * woocommerce_after_shop_loop hook.
         *
         * @hooked woocommerce_pagination - 10
         */
        do_action( 'woocommerce_after_shop_loop' );
    ?>

    <?php elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) : ?>

    <?php
        /**
         * woocommerce_no_products_found hook.
         *
         * @hooked wc_no_products_found - 10
         */
        do_action( 'woocommerce_no_products_found' );
    ?>

    <?php endif; ?> 
</div>
customizationloopthemeswoocommerce
2
OT AMD

WooCommerceテンプレートは、ニーズやスキルに応じてさまざまな方法で機能します。

関数：

<?php
    wc_get_template_part('content', 'product');

wooCommerceの WordPressコアテンプレート関数 と同等のものです。

<?php
    get_template_part('filename');

これはphp require と同じですが、最後に.php拡張子を付けずに と同じであることを知っておくことは重要です。

下記の手順を実行する前に、次のコード行についてfunctions.phpを調べて、テーマがWooCommerceをサポートしていることを確認してください。

<?php

// After setup theme hook adds WC support
function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' ); // <<<< here
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

あなた自身のデザイン/テンプレートを使用するためには、さまざまなオプションがあります。

1）最も簡単な方法：

テーマフォルダに "woocommerce.php"を作成してください

このファイルはあなたのテーマでWordPressがどのファイルを使用するかという点で最も優先度が高くなります。 2番目の方法を使用したい場合は、このファイルを削除してください。

2）高度な方法：

"woocommerce"フォルダを作成し、変更したいテンプレートをこのフォルダにコピーします。

WooCommerce/WordPressはそれを認識し、このフォルダに提供されているテンプレートを使用します。このメソッドは " テンプレートの上書き "と呼ばれ、WooCommerceのフロントエンド出力の一部をテーマに挿入したり変更したりすることができます。これはWCのカスタマイズのより高度な方法です。おそらくあなたにとっては難しいかもしれませんが、より専門的な方法です。

この場合、あなたはおそらくこのファイルを探しています：

woocommerce/archive-product.php

それは店の主な製品概要を表示するテンプレートファイルです。フォルダ名を作成してそこにファイルをコピーしたら、このレイアウト用に独自のマークアップを作成できます。

結局、新しいファイルは次のようになります。

<?php get_header(); ?>
    <div class="container">
        <div class="row">
            <?php get_template_part('sidebars/sidebar-left'); ?>
            <main class="col-xs-12 col-sm-9 col-md-9 col-lg-9">

                <?php
                    // Only run on shop archive pages, not single products or other pages
                    if ( is_shop() || is_product_category() || is_product_tag() ) {
                        // Products per page
                        $per_page = 24;
                        if ( get_query_var( 'taxonomy' ) ) { // If on a product taxonomy archive (category or tag)
                            $args = array(
                                'post_type' => 'product',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                                'tax_query' => array(
                                    array(
                                        'taxonomy' => get_query_var( 'taxonomy' ),
                                        'field'    => 'slug',
                                        'terms'    => get_query_var( 'term' ),
                                    ),
                                ),
                            );
                        } else { // On main shop page
                            $args = array(
                                'post_type' => 'product',
                                'orderby' => 'date',
                                'order' => 'DESC',
                                'posts_per_page' => $per_page,
                                'paged' => get_query_var( 'paged' ),
                            );
                        }
                        // Set the query
                        $products = new WP_Query( $args );
                        // Standard loop
                        if ( $products->have_posts() ) :
                            while ( $products->have_posts() ) : $products->the_post();
                                // Your new HTML markup goes here
                                ?>
                                <div class="col-xs-12 col-md-3">
                                    <h2><?php the_title(); ?></h2>
                                    <?php the_content(); ?>
                                    <?php // more stuff here... markup, classes etc. ?>
                                </div>
                                <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    } else { // If not on archive page (cart, checkout, etc), do normal operations
                        woocommerce_content();
                    }
                ?>

            </main>
        </div>
    </div>
</div>
<?php get_footer(); ?>

これがどのように機能するのかを理解するのに役立つことを願っています。一番下のWCバックエンドシステムのページを見ることもできます。そこには、WCが使用しているテンプレートが表示されます。

3
user3135691