页面模板中的内容错位

Content inside page template is misplaced

我的 Genesis 主题 child 中有一个模板分配到我的主页 div,它有一个 ID,我在单独的 CSS 文件中设置了样式。 div 包含文本,在 CSS sheet 中有背景图片。

我有一个样式 header 通过函数连接它。 我也有页脚。

问题是 - 我提到的 div 呈现在所有这些元素下方,就好像它不是创世结构的一部分一样。

有 header 页脚,下面是带文字的图片。 如果我通过仪表板编辑页面,则会创建一个位置正确的新 post。 如何在 header 和页脚之间显示图片?

首页模板代码为:

<?php 
/*
Template Name: Homepage Template
*/

genesis();

echo "<link rel='style' type='text/css' href='styles.css' />";

get_header(); ?>


<div id="primary" class="content-area">

    <main id="main" class="site-main" role="main">


        <?php
    // Start the loop.
    while ( have_posts() ) : the_post(); ?>


    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <header class="entry-header">

        </header><!-- .entry-header -->

        <div class="entry-content">

            <div id="home_slider">
                Electrical & Mechanical Engineering<br>In Nigera

            </div>

        </div><!-- .entry-content -->

    </article><!-- #post-## -->



    <?php endwhile; // End the loop. ?>

    </main><!-- .site-main -->

</div><!-- .content-area -->

<?php get_footer(); ?>

关于 Genesis 内容的问题是您必须使用 Genesis 挂钩将内容添加到您的页面。这里有一个很好的视觉指南:http://genesistutorials.com/visual-hook-guide/

在您的情况下,如果您想将 div 放在内容区域之前,您可以执行以下操作:

/**
 * Template Name: Homepage Template
 */

add_action('genesis_before_content', 'add_extra_content_div');
function add_extra_content_div(){
    ?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
            </header><!-- .entry-header -->
            <div class="entry-content">
                <div id="home_slider">
                    Electrical & Mechanical Engineering<br>In Nigera
                </div>
            </div><!-- .entry-content -->
        </article><!-- #post-## -->
        <?php endwhile; // End the loop. ?>
        </main><!-- .site-main -->
    </div><!-- .content-area -->
?>
}

genesis();

另一点是,在 Genesis 中您不需要输入 get_header() 和 get_footer(),因此您应该从模板中删除它们。

此外,请确保 genesis(); 是模板中的最后一行 - 这非常重要。