如何根据查看器的屏幕宽度更改存档页面上的产品数量

问题描述

我构建了一个主题，其中根据不同的屏幕尺寸，商店页面上的列或产品数量会发生变化（使用 CSS）。这意味着在某些屏幕尺寸下，最后一行中的产品数量不会填满该行。

示例：我将产品数量设置为 12，以便在 1、2、3、4 或 6 列的最后一行充满产品。但是在显示 5 列的屏幕宽度下，最后一行将只有 2 个产品。

我知道我可以使用 CSS 来隐藏剩余的产品（也许使用 display: none;），但是那样会弄乱分页。所以使用上面的例子，它会隐藏产品 11 和 12，但是当用户移动到第 2 页时，它会从产品 13 开始，所以他们永远不会看到产品 11 和 12。

这是我在下面 bones theme 的 archive.PHP 中使用的代码：

<?PHP if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?PHP the_ID(); ?>" <?PHP post_class( 'cf' ); ?> role="article">

<header class="article-header">

    <div class="featured-image"><a href="<?PHP the_permalink() ?>" rel="bookmark" title="<?PHP the_title_attribute(); ?>"><?PHP the_post_thumbnail( array(1000,1000) ); ?></a></div>

    <h2 class="h2 entry-title"><a href="<?PHP the_permalink() ?>" rel="bookmark" title="<?PHP the_title_attribute(); ?>"><?PHP the_title(); ?></a></h2>

</header>

<section class="entry-content cf">
    <?PHP the_excerpt(); ?>
</section>

<footer class="article-footer cf">

    <a href="<?PHP the_permalink() ?>" rel="bookmark" title="<?PHP the_title_attribute(); ?>" class="button primary fill">Read More</a>

</footer>
</article>
<?PHP endwhile; ?>
<?PHP bones_page_navi(); ?>
<?PHP else : ?>

    <article id="post-not-found" class="hentry cf">
            <header class="article-header">
                <h1><?PHP _e( '','bonestheme' ); ?></h1>
        </header>
            <section class="entry-content">
                <p><?PHP _e( 'Something is missing. Try double checking things.','bonestheme' ); ?></p>
        </section>
        <footer class="article-footer">
                <p><?PHP _e( '','bonestheme' ); ?></p>
        </footer>
    </article>
<?PHP endif; ?>

分页代码 (/library/bones.PHP)：

// Numeric Page Navi (built into the theme by default)
function bones_page_navi() {
  global $wp_query;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  echo '<nav class="pagination">';
  echo paginate_links( array(
    'base'         => str_replace( $bignum,'%#%',esc_url( get_pagenum_link($bignum) ) ),'format'       => '','current'      => max( 1,get_query_var('paged') ),'total'        => $wp_query->max_num_pages,'prev_text'    => '&larr;','next_text'    => '&rarr;','type'         => 'list','end_size'     => 3,'mid_size'     => 3
  ) );
  echo '</nav>';
} /* end page navi */

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

wordpress wordpress