Html 在内容和侧边栏前放置幻灯片-WordPress

我试图在页面内容之前添加一个图像滑块，该滑块跨越页面的整个宽度（我使用的是bootstrap，因此将使用12列div）

以下是

index.php

文件的当前代码：

get_header(); ?>

    <div class="col-sm-12">
        <?php 
            echo do_shortcode("[metaslider id=2010]"); 
        ?>
    </div>

    <?php if ( have_posts() ) : ?>
        // The Loop

    <?php else : ?>

        <?php get_template_part( 'no-results', 'index' ); ?>

    <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

（代码的其余部分其实并不需要，因为它只是导航和横幅等）

然后将图像滑块放置在

主内容内部col-sm-12 col-md-8

上方的该div中。

main content

是输出帖子的地方，因此我需要在这个div之前使用图像滑块。我可以将此代码移动到

index.php

代码中，但我不确定这是否一定是好的做法。这是我能看到的唯一能够将图像滑块放在内容之前的方法

答复:

将my

header.php

更新为：

<div class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <?php if (is_front_page()) { 
                    echo do_shortcode("[metaslider id=2010]"); 
                }?>
            </div>
            <div id="content" class="main-content-inner col-sm-12 col-md-8" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">

执行以下操作：

以上：

<div class="main-content">

这是您要调用幻灯片的地方

---

如果您不希望它显示在每个页面上，请使用一些条件标记来控制它显示在哪个页面上。请参阅：

既然您一直在使用引导，为什么不使用carousel模板作为示例并根据口味进行定制呢？查看此页面并查看代码：@Duncubuntu我正在帮助一位朋友开发网站，他没有技术知识或编程知识，这就是我选择WordPress的原因。所以，在可能的情况下，我会尽量让事情简单化。我认为，图像滑块插件比引导旋转木马更易于管理和更新你试过用容器液体代替col-sm-12吗？@Duncubuntu是的！我很确定我刚刚把图像滑块放错了位置，但是经过多次尝试，我想我会看看这里是否有人知道我应该把它放在哪里。我想把它放在标题中，但我不想让它成为

header.php

模板的一部分，因为如果我也转到一个静态页面，它也会在那里。发布你的标题代码谢谢，我发布了更新的

header.php

代码，供你或任何有兴趣的人查看。现在我只需要调整一下造型！谢谢你的帮助。

<div class="main-content">