时间戳

首页 > 解决方案 > Wordpress - 模板部分中断 wordpress 列布局

php - Wordpress - 模板部分中断 wordpress 列布局

问题描述

我认为一些帮助将不胜感激。我有这段代码将为 wordpres 自定义主题加载两个模板部分：

    <div class="row m-0">
        <?php get_template_part('assets/main', 'news'); ?>
        <?php get_template_part('assets/side', 'news'); ?>
    </div>

正如您在引擎盖下看到的那样，我使用的是 bootstrap 4，因此假设内容将在同一行内对齐。

我有一个col-8insidemain-news.php和一个col-4inside，side-news.php所以我想我会让内容对齐，但这不会发生，我的布局会中断。

这是main.news.phpteplate部分内的代码：

<?php $main_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'main-news', 'posts_per_page' => 4) ); ?>
        <!-- main -->
        <div class="col-sm-12 col-md-8 col-lg-8 mt-2">
            <p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Last news') ?></p>
        </div>
        <?php if( $main_news->have_posts() ): while( $main_news->have_posts() ): $main_news->the_post(); ?>
        <div class="col-sm-12 col-md-8 col-lg-8 mt-2 mb-2">
            <div class="card rounded-0 p-0">
                <img class="card-img-top w-100 h-100 rounded-0" src="<?php echo the_post_thumbnail_url(); ?>" />
                <div class="card-img-overlay news-overlay">
                    <a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </div>
            </div>
        </div>
<?php endwhile; endif; wp_reset_postdata() ?>

这是内容side-news.php

<?php $middle_news = new WP_Query( array( 'post_type' => 'post', 'category_name' => 'market-news', 'posts_per_page' => 4 ) ); ?>
<div class="col-sm-12 col-md-4 col-lg-4">
    <p class="text-uppercase font-weight-bold mb-0 section-title"><?php _e('Side news') ?></p>
</div>
<?php if( $middle_news->have_posts() ): while( $middle_news->have_posts() ): $middle_news->the_post(); ?>
    <div class="col-sm-12 col-md-4 col-lg-4 mt-2 mb-2">
        <img class="img-fluid w-100" src="<?php echo the_post_thumbnail_url(); ?>" />
        <a class="h4 stretched-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>        
    </div>
<?php endwhile; endif; wp_reset_postdata(); ?>

如何修复布局以使 col-8 和 col-4 在同一行上？也许我需要嵌套循环或什么？查看屏幕以了解正在发生的事情

在此处输入图像描述

标签： phpwordpresstwitter-bootstrap

解决方案

您的错误在main-news.php文件中。看，您为文件(col-sm-12 col-md-8 col-lg-8 )中的第一个 div 标签定义了这些，main-news.php因此您的 div 采用这些列，然后您为同一文件(col-sm-12 col-md-8 col-lg-8 )中的 div 标签定义了这些列，因此在您定义的情况下，两者都在文件内占用超过 12 列再次为文件内部的 div ，因此这些定义会破坏您的代码。loopdivsmain-news.php(col-sm-12 col-md-4 col-lg-4)side-news.php

解决方案：您应该从文件内部delete之一定义列。divsmain-news.php

祝你好运！！！

推荐阅读