WordPress中的页面特征图像问题

Question

我正在学习一门课程，并与讲师一起编写了一个自定义网站，但我无法弄清楚为什么资源页面 (https://topcdltraining.com/resources/) 和联系页面 (https://topcdltraining.com/contact/) 上的标题图片较短它应该与博客页面上的标题图像高度相同（https://topcdltraining.com/blog/）。有人可以帮我看看我在哪里搞砸了吗？关于特征图像和 H1 标题，我对所有三个页面都有完全相同的 html 代码（我什至再次在所有三个页面上复制并粘贴了相同的代码，并更改了标题以确保）。我为静态资源页面以及下面的 page-resources.php 页面添加了 HTML、CSS 和 PHP 代码（请忽略我添加到 PHP 代码中的 cmets - 我对此很陌生，所以我添加了 cmets 以提供帮助我记得以后怎么做这一切）。

```
<section class="feature-image feature-image-default-alt" data-type="background" data-speed="2">
            <h1 class="page-title">Blog</h1>
        </section><!-- feature-image -->

============================= CSS ======================================

.feature-image {
    display: table;
    width: 100%;
}

.feature-image-default {
    background: url('/wp-content/themes/bootstrap2wordpress/assets/img/stuff-feature.jpg') no-repeat;
    background-size: cover;
}

.feature-image-default-alt {
    background: url('/wp-content/themes/bootstrap2wordpress/assets/img/hipster-stuff.jpg') no-repeat;
    background-size: cover;
}

.feature-image h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
}

============================== PHP ==========================================

<?php if( has_post_thumbnail() ) { // add php code to check for featured image ?>

        <!-- add php to allow featured image to be shown by url -->
        <section class="feature-image" style="background:url('<?php echo $thumbnail_url; ?>') no-repeat; background-size: cover;" data-type="background" data-speed="2">
            <!-- add php code to make title dynamic -->
            <h1><?php the_title(); ?></h1>
        </section><!-- feature-image -->

        <?php } else { // add php code for fallback image if there is no featured image ?>
        <section class="feature-image feature-image-default" data-type="background" data-speed="2">
            <!-- add php code to make title dynamic -->
            <h1><?php the_title(); ?></h1>
        </section><!-- feature-image -->

        <?php } ?>

============== 讲师的 PHP 代码 ======================

<?php
/* Template Name: Resources Page */ 

get_header();

$thumbnail_url  = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
?>

    <!-- FEATURE IMAGE
    ================================================== -->
    <?php if( has_post_thumbnail() ) { // check for feature image ?>

    <section class="feature-image" style="background: url('<?php echo $thumbnail_url; ?>') no-repeat; background-size: cover;" data-type="background" data-speed="2">
        <h1 class="page-title"><?php the_title(); ?></h1>
    </section>

    <?php } else { // fallback image ?>

    <section class="feature-image feature-image-default" data-type="background" data-speed="2">
        <h1 class="page-title"><?php the_title(); ?></h1>
    </section>

    <?php } ?>

    <!-- MAIN CONTENT
    ================================================== -->
    <div class="container">
        <div class="row" id="primary">

            <div id="content" class="col-sm-12">

                <section class="main-content">

                    <?php while ( have_posts() ) : the_post(); ?>

                        <?php the_content(); ?>

                    <?php endwhile; // end of the loop ?>

                    <?php $loop = new WP_Query( array( 'post_type' => 'resource', 'orderby'=>'post_id', 'order'=>'ASC' ) ); ?>

                    <hr>

                    <div class="resource-row clearfix">

                        <?php while( $loop->have_posts() ) : $loop->the_post(); ?>

                        <?php
                            $resource_image = get_field('resource_image');
                            $resource_url   = get_field('resource_url');
                            $button_text    = get_field('button_text'); 
                        ?>

                        <div class="resource">

                            <img src="<?php echo $resource_image[url]; ?>" alt="<?php echo $resource_image[alt]; ?>">


                            <h3><a href="<?php echo $resource_url; ?>"><?php the_title(); ?></a></h3>
                            <?php the_content(); ?>

                            <?php if( !empty($button_text) ) : ?>
                            <a href="<?php echo $resource_url; ?>" class="btn btn-success"><?php echo $button_text; ?></a>
                            <?php endif; ?>
                        </div><!-- resource -->

                        <?php endwhile; ?>

                    </div><!-- resource-row -->

                </section><!-- main-content -->

            </div><!-- content -->

        </div><!-- row -->
    </div><!-- container -->

<?php get_footer(); ?

>

```

Answer 1

你的博客页面的 body 元素有类：

<body class="blog hfeed">

另外两个页面的 body 元素也有“page”类：

<body class="... page ...">

在您的 css 样式表中，您有以下内容：

body {
    margin-top: 50px;
    font-family: 'proxima-nova', 'Raleway', Helvetica, sans-serif;
    font-size: 16px;
    background: url('/wp-content/themes/bootstrap2wordpress/assets/img/tile.jpg') top left repeat;
}

重要的一行是“margin-top: 50px;”它定义了你身体上方的空间，这样固定的顶栏就不会覆盖标题。

你的 css 中也有这个：

.post, .page {
    margin: 0 0 1.5em;
    margin-top: 0px;
}

这将覆盖所有具有“page”或“post”类的元素的margin-top，并将其设置为“0px”。

你有两种方法可以解决这个问题。添加一个 !important 到您的页边距顶部，这样它就不会被覆盖：

body {
    margin-top: 50px !important;
}

或者您可以更改 .post 和 .page 的值：

.post, .page {
    margin: 0 0 1.5em;
    margin-top: 50px;
}