如何在WordPress FrontEnd中调用最新产品

时间:2017-03-15 14:47:32

标签: php html wordpress

在使用WooCommerce功能创建我的第一个WordPress主题的开发阶段,从头开始,我一直在将所有相关内容直接编码到php文件中。不确定这是不是标准的'如果MySql数据库发生任何事情,那么与其他人一样,但这是我保护内容的方法。

那就是说,我没有将所有相关内容转移到WordPress的FrontEnd。我已经开始使用index.php文件,我在index.php文件中输入了以下代码:

<?php get_header(); ?>
    <?php
        if ( have_posts() ):  
            while( have_posts() ): the_post(); 
    ?>
    <?php the_content(); ?>

    <?php 
            endwhile; 
        endif; 
    ?>

<?php get_footer (); ?>

在内容本身中,我希望能够调用已发布的最新产品。我已经设法通过在模板文件中输入以下代码然后在index.php中调用它来实现这一目的:

<div class="row" id="latest-products">
    <h2 id="latest-products-row"><i class="fa fa-circle" aria-hidden="true"></i><span class="latest-products-title">Latest Products</span><i class="fa fa-circle" aria-hidden="true"></i></h2>
        <ul class="row-fluid">
            <?php
                $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
            ?>
                        <li class="latest-products">    
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php 
                                    if (has_post_thumbnail( $loop->post->ID )) 
                                    echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
                                    else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; 
                                ?>
                            </a>
                                <h3><?php the_title(); ?></h3>
                                <p><?php the_excerpt(); ?></p>
                                <div class="price-row"><i class="fa fa-circle" aria-hidden="true"></i><span id="product-price"><?php echo $product->get_price_html(); ?></span><i class="fa fa-cirlce" aria-hidden="true"></i></div>
                                <div class="buy-button"><a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">View/Buy</a></div>
                        </li>
                <?php endwhile; ?>
                <?php wp_reset_query(); ?>
        </ul>
</div>

目前,我只是想在WordPress的FrontEnd中调用上面的代码。目前,我能做到这一点的唯一方法是通过硬编码,这不是我希望实现的。

是否有人能够指出我在哪里开始实现这一目标的正确方向?最后,我想在WordPress页面/帖子中创建一个选项,您可以选择它并打开一个包含选项的框,例如“您想要显示多少个产品”,&#39; &#39;背景颜色&#39;如果这不是那么多额外的工作,我会很感激任何指针来实现这一目标。

1 个答案:

答案 0 :(得分:1)

在对WooCommerce短代码进行一些快速研究后,您可以调用此代码:[recent_products per_page="4" columns="4"]并显示最近的产品。只需将其粘贴到您的WYSIWYG编辑器中即可。

有关WooCommerce短代码的详细信息,请查看以下链接:https://docs.woocommerce.com/document/woocommerce-shortcodes/