为什么这些几乎相同的页面的样式不同？ [英] Why is the styling of these nearly identical pages different?
问题描述
我创建了我的第一个自定义WordPress主题，无法找出为什么两个几乎相同的类别模板文件显示不同。
I am creating my first custom WordPress theme and can't figure out why two nearly identical category template files are being displaying differently.
黑色的此网页的底部应该跨越网页的整个宽度，就像此网页，但由于某种原因不是。
The black-colored band at the bottom of this page should extend across the entire width of the page, like it does on this page, but for some reason it's not.
正确样式的模板文件的代码如下：
The code for the correctly-styled template file is as follows:
<?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>
错误样式模板的代码如下：
The code for the incorrectly-styled template is as follows:
<?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>
两个类别模板文件的结构相同（就我所知），并使用相同的样式表，所以我很失望，为什么他们被浏览器显示不同。
Both category template files are structured the same (as far as I can tell) and use the same style sheet, so I am at a loss as to why they are being displayed differently by the browser.
感谢。
推荐答案
由于您更改了问题，所以添加此代替原来的答案。原来你没有关闭< / div> 。这个问题不会出现在第一页，因为你只有一个职位，但我敢打赌，如果你添加另一个，你会看到同样的事情。下面的代码片段只关注你的while循环，如果你添加了通过注释指定的关闭< / div> ，应该解决你的问题。
Adding this in place of my original answer, since you changed the question. Turns out you are missing a closing </div>. The problem doesn't manifest itself on the first page because you only have one post, but I bet if you added another, you'd see the same thing. The snippet below focuses just on your while loop, and should fix your problem if you add the closing </div> where I've indicated via a comment.
<?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; ?>
这篇关于为什么这些几乎相同的页面的样式不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
