0

初めてのカスタム WordPress テーマを作成していますが、ほぼ同じ 2 つのカテゴリ テンプレート ファイルが異なって表示される理由がわかりません。

このページの下部にある黒色の帯は、このページのようにページの幅全体に広がるはずですが、何らかの理由でそうではありません。

正しくスタイル設定されたテンプレート ファイルのコードは次のとおりです。

<?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>。投稿が 1 つしかないため、最初のページでは問題は発生しませんが、別の投稿を追加した場合、同じことが表示されるはずです。以下のスニペットは、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 に答える