Question

我有两个几乎相同的WordPress类别模板文件，这些文件在浏览器中的显示方式不同。

this page底部的黑色条带应该延伸到页面的整个宽度，就像它在this page上一样，但由于某种原因它不会。{/ p>

两个类别模板文件的结构相同（据我所知）并使用相同的样式表，因此我不知道为什么浏览器会以不同的方式显示它们。为错误设置样式的页面添加额外的关闭似乎可以解决问题，但我无法弄清楚为什么在一个模板文件中需要额外关闭，而在另一个模板文件中则不需要。

正确样式的模板文件的代码如下：

<?php get_header(); ?>

<body class="projects">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>

    </div>

</div>

样式不正确的模板的代码如下：

<?php get_header(); ?>

<body class="adventures">

<div id="page-container">

    <?php get_sidebar(); ?>

    <div id="content">
        <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>

        <div <?php post_class(); ?>>

            <div class="post-container">

                <div class="post-title">
                    <span class="date"><?php the_time('F j, Y'); ?></span><h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                </div>

                <div class="post-content">
                    <?php the_content(''); ?>       
                </div>

                <div class="post-footer">
                    <p>BY:</p><div class="post-footer-item"><?php the_author_posts_link(); ?></div><p>CATEGORY:</p><div class="post-footer-item"><?php the_category(', '); ?></div><div class="post-footer-action"><a href="<?php the_permalink(); ?>"><p><?php comments_number('0','1','%'); ?></p><img id="comments" src="<?php bloginfo('template_directory'); ?>/images/comments.png" height=20px></a></div><div class="post-footer-action"><a href="#"><p>44</p><img id="likes" src="<?php bloginfo('template_directory'); ?>/images/likes.png" height=20px></a></div>
                </div>

            </div>  

        <?php endwhile; ?>

            <div id="more-posts">
                <a href="<?php next_posts_link(''); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/more.png" width=200></a>
            </div>

        </div>

        <?php endif; ?>         

    </div>

</div>

提前感谢您的帮助。

Answer 1

我首先注意到while(have_posts())（<div <?php post_class(); ?>>）中有一个开始标记，但无论是否有帖子，都会包含结束标记。

另外，请查看您的来源（或者更好的是，获取Firebug）。在不正确的示例中，您的<footer>元素位于<div id="page-container">内，而另一个元素位于其下方。您的来源是否还有您发布的部分，因为我无法在任何一个示例中看到get_footer();的来电？

类似结构化的WordPress模板文件产生不同的CSS样式

1 个答案: