0

我正在创建我的第一个自定义 WordPress 主题，但无法弄清楚为什么两个几乎相同的类别模板文件显示不同。

此页面底部的黑色带应延伸到页面的整个宽度，就像在此页面上一样，但由于某种原因它不是。

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

<?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>

两个类别模板文件的结构相同（据我所知）并使用相同的样式表，所以我不知道为什么浏览器显示它们的方式不同。

谢谢。

4

4 回答 4

0

问题是您在http://bugsandbubs.com/category/adventures/中的页脚在您的内部#page-container，因此它只会像父级一样增长 945 像素。

如果你把你的<footer>元素移到外面，<div id="page-container">你应该很高兴。

于 2013-07-25T03:31:49.193 回答
0

添加这个代替我原来的答案，因为你改变了问题。原来你错过了一个关闭</div>。问题不会出现在第一页，因为您只有一个帖子，但我敢打赌，如果您添加另一个帖子，您会看到相同的内容。下面的代码片段只关注您的 while 循环，如果您</div>在我通过评论指出的位置添加结束语，应该可以解决您的问题。

    <?php while (have_posts()) : the_post(); ?>
            <div <?php post_class(); ?>>  <!-- *** you open this but never close it *** -->
                <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>  
            </div> <!-- *** need to add a closing div here - I've added it for you *** -->
    <?php endwhile; ?>
于 2013-07-25T03:31:51.160 回答
0

这些页面几乎相同......但是在样式不正确的页面上你有一些错误......

你错了只是图片的 URL；

因为图像的实际大小与您在 css 上设置的大小不同...当 url 损坏/错误时，这会弄乱页面样式...

我建议修复链接并在第 151 行添加您的 style.css 文件：

#social img {
    width: 145px;
    height: 30px;  /* ADD THIS */
   }
于 2013-07-25T03:34:43.543 回答
0

您可以使用验证器检查问题，使用此处的 w3schools 验证器工具http://validator.w3.org/

输入你的 URL，它会告诉你它发现了什么错误。

您可以在输入 URL 的位置下方选择一个框以显示源代码。这将允许您快速查看您的问题区域。

我希望这会有所帮助，祝你好运！

于 2013-07-25T03:36:24.780 回答