Question

我试图根据the example from wordpress codex制作帖子页面。我正在使用一个漂亮的WP主题（拉德克利夫）并没有成功地将它与提到的例子结合起来。

我创建的页面确实有效，但帖子是重叠的，一个在另一个上。在它下面有很多空白区域，最后是页面底部的页脚。

我的页面现在看起来像这样：

<?php get_header(); ?>

<div class="content">

            <?php 

        if ( have_posts() ) :
            while ( have_posts() ) : the_post();


              get_template_part( 'content', get_post_format() ); 
              wp_reset_postdata();

            endwhile;
        endif;

        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

        $args = array(
             'category_name' => 'testy', 
            'paged' => $paged
        );

        $list_of_posts = new WP_Query( $args );
        ?>
        <?php if ( $list_of_posts->have_posts() ) : ?>
            <?php /* The loop */ ?>
            <?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
                <?php // Display content of posts ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            <?php endwhile; ?>

        <div class="posts">

            <?php
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $total_post_count = wp_count_posts();
            $published_post_count = $total_post_count->publish;
            $total_pages = ceil( $published_post_count / $posts_per_page );

            if ( "1" < $paged ) : ?>

                <div class="page-title section small-padding">

                    <h4 class="section-inner"><?php printf( __('Page %s of %s', 'radcliffe'), $paged, $wp_query->max_num_pages ); ?></h4>

                </div>

                <div class="clear"></div>

            <?php endif; ?>

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

                    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                        <?php get_template_part( 'content', get_post_format() ); ?>

                    </div> 

                <?php endwhile; ?>

            <?php if ( $wp_query->max_num_pages > 1 ) : ?>

                <div class="archive-nav">

                    <?php echo get_next_posts_link( '&laquo; ' . __('Older posts', 'radcliffe')); ?>

                    <?php echo get_previous_posts_link( __('Newer posts', 'radcliffe') . ' &raquo;'); ?>

                    <div class="clear"></div>

                </div> 

            <?php endif; ?>

        <?php endif; ?>

    </div> 

</div> 

<?php get_footer(); ?>

有人可以告诉我我的错误吗？

Answer 1

这是页面内容的CSS，也许有人可以看看？

我仍然认为这个问题出现在php代码的某个地方，因为我已经安装了这个主题，所以我还没有触及css。

.post { position: relative; }

.posts .post.has-featured-image { min-height: 266px; }

/* featured media */

.featured-media { 
    position: relative;
    display: block;
    width: 100%;
    max-height: 682px;
}

a.featured-media:hover { opacity: 0.75; }

.featured-media > img { 
    visibility: hidden; 
    display: block;
    margin: 0 auto;
}

.media-caption-container {
    position: absolute;
    bottom: 5%;
    right: 5%;
    left: 5%;
    text-align: center;
}

.media-caption {
    display: inline-block;
    padding: 9px 12px;
    border-radius: 3px;
    background: #444;
    background: rgba(17,17,17,0.5);
    font-size: 0.8em;
    line-height: 120%;
    font-weight: 400;
    font-style: italic;
    color: #fff;
}

.media-caption:hover { background-color: rgba(17,17,17,0.75); }

/* post header */

.post-header { display: block; }

a.post-header { position: static; }
a.featured-media + a.post-header { position: absolute; }

a.post-header {
    background: #BFBFBF;
    background: rgba(17,17,17,0.35);
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
}

a.post-header:hover { 
    background: #333;
    background: rgba(17,17,17,0.75); 
    color: #FFF; 
}

.post.no-featured-image a.post-header { position: static; }
.post.no-featured-image a.post-header:hover { background: #333; }

a.post-header:hover .post-title { color: #CA2017; }

.post-meta-top { 
    text-transform: uppercase;
    color: #FFF;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center; 
    margin-bottom: 30px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.post-meta-top .sep { 
    color: #CCC;
    margin: 0px 5px; 
    font-weight: 400;
}

a.post-header .post-meta-top .sep { 
    color: #fff;
    color: rgba(255,255,255,0.5); 
    text-shadow: none; 
}

.sticky .post-meta-top { display: block; }

.post-title {
    font-family: 'Abril Fatface', serif;
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

a.post-header .post-title { 
    max-width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

Wordpress页面的帖子问题

1 个答案: