Wordpress网格未显示所有帖子

时间:2016-01-08 20:03:51

标签: php css wordpress masonry

我一直在构建一个砖石风格的wordpress主题,我遇到了一个路障,我的网格不会显示所有已发布的帖子。

我目前每页的帖子设置为100个帖子,我发布了18个帖子,但每页只显示8个帖子,其余4个帖子显示在下一页上。我希望所有帖子都显示在同一页面上。

我的主要目标是实现我已经实现的3列网格。但我的内容并没有完全显示出来。

网址:http://www.dwaynecrawford.com/themes/

我的PHP:

    <?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Test Theme
 * @since 2015 1.0
 */

 get_header(); ?>

    <section class="work" id="work">
        <!--     Begin WP Grid     -->

        <div class="masonry">
            <?php
$counter = 1; //start counter

$grids = 3; //Grids per row

global $query_string; //Need this to make pagination work


/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');


if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
                <?php
//Show the left hand side column
if($counter == 2) :
?>
                    <div class="item">

                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php the_post_thumbnail('category-thumbnail'); ?>
                        </a>

                        <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                    </div>
                    <?php
//Show the right hand side column
elseif($counter == $grids) :
?>
                        <div class="item">

                            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                <?php the_post_thumbnail('category-thumbnail'); ?>
                            </a>

    <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    </div>
    <?php $counter = 0;
    endif;
    ?>
    <?php
    $counter++;
    endwhile;
    //Pagination can go here if you want it.
    endif;
    ?>

    </div>

    <article class="underpost">
    <?php posts_nav_link(); ?>
    </article>
    </section>

CSS:

.masonry {
    margin: 0em 0;
    padding: 0;
    -moz-column-gap: 0em;
    -webkit-column-gap: 0em;
    column-gap: 0em;
    font-size: 0em;
}
.item {
    display: inline-block;
    background: #fff;
    padding: 0px;
    padding: 0;
    margin: 0 0 0 0;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.item:hover {
    background-color: black;
    opacity: 0.2;
}
.item img {
    width: 100%;
    height: auto;
}
.item img.attachment-post-thumbnail {
    width: 100%;
}
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}

1 个答案:

答案 0 :(得分:0)

经过一段时间回顾我的问题,我找到了解决方案。

query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

我已将posts_per_page = 12的值更改为100个帖子。