Google 没有正确配对我的 'div' 标签（提前结束）

Question

我正在为自定义 WordPress 主题编写页面，我正在使用 PHP 和高级自定义字段为页面创建动态内容。我所有的 div 标签都有开始和结束，但是 Google 似乎提前结束了 div 标签，因为它与错误的结束标签合作，这让我的内容看起来很奇怪.有谁知道它为什么这样做以及如何解决它？

我已经尝试匹配我所有的标签，但找不到未正确结束的标签，所以我不知道它可能是什么。

这是我的代码。我试图尽可能地减少它，但所有这些都是看到 Div 配对所必需的：

<div class="smaller-width center top">

    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
        <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
        <?php foreach($allCategories as $category) {
                        echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
                } ?>

        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">

        <div class="clr"></div>

            <div id="projects-section">
                <?php               
                    foreach ($postslist as $post) :  setup_postdata($post); ?> 

                <?php if (has_post_thumbnail( $post->ID ) ):
                     $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); 
                ?>

                    <div class="project-post" data-categories="<?php 
                        foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                            echo $category->name . ',';
                        } ?>">
                        <a class="single-project" href="<?php the_permalink() ?>">                        
                            <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"> 
                            </div>
                            <p>
                                <?php the_title(); ?><br>
                                <span id="tag">
                                    <?php foreach(wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                        echo $category->name . ' ';
                                    } ?>
                                </span>
                                <i class="fas fa-angle-right project-arrow"></i>
                            </p>  
                        </a>

                <?php endif; ?>               

                    </div>
                <?php endforeach; ?>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>

关于可能破坏它的东西，这里有什么突出的地方吗？

编辑：这是 google 提前结束我的 div 的屏幕截图... 如您所见，最后 2 个 project-post id 应该在 project section

内

Answer 1

格式化是你的朋友。我已经在 VS Code 中格式化了你的代码，我可以更清楚地看到你的问题是什么。 div 您在结尾 if 和 for 每个语句之间的位置错误。我相信这就是导致您出现问题的原因。

<div class="smaller-width center top">
    <div id="project-nav" class="title-section">
        <h1>Work.</h1>
        <nav id="project-filters">
            <button onClick="filterProj('All')" class="news-filter" ><p>All</p></button>
            <?php foreach ($allCategories as $category) {
                echo '<button onClick="filterProj('."'". $category->name ."'".')" class="news-filter" ><p>' .  $category->name . '</p></button>';
            } ?>
        </nav>
    </div>
    <div class="projcont full center">
        <div class="news-inner">
            <div class="clr"></div>
                <div id="projects-section">
                    <?php foreach ($postslist as $post) :  setup_postdata($post); ?> 
                        <?php if (has_post_thumbnail($post->ID)):
                            $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail');
                        ?>
                            <div class="project-post" 
                                data-categories="
                                    <?php
                                        foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ',';
                                        } ?>">
                                <a class="single-project" href="<?php the_permalink() ?>">                        
                                    <div class="project-inside" style="background-image: url( <?php echo $image[0]; ?>);"></div>
                                    <p>
                                        <?php the_title(); ?><br>
                                        <span id="tag">
                                            <?php foreach (wp_get_post_terms($post->ID, 'Project_Category', array("fields" => "all")) as $category) {
                                            echo $category->name . ' ';
                                        } ?>
                                        </span>
                                        <i class="fas fa-angle-right project-arrow"></i>
                                    </p>  
                                </a>
                            </div>
                        <?php endif; ?>     
                    <?php endforeach; ?>          
                </div>
            </div>     
        </div>
        <div id="load"> 
            <button href="#" id="loadMore">VIEW MORE</button>
        </div>
    </div> 
</div>

Google 没有正确配对我的 'div' 标签（提前结束）

Google is not pairing my 'div' tags correctly (ending it early)

html

php

tags

foreach

custom-wordpress-pages