Question

我有一个wordpress网站，从ACF获取数据。该网站的主页有6个帖子，背景图片延伸到屏幕的高度。我想在网站的主页上添加另一个帖子/部分。但是当我这样做时，所有图像都会从背景中消失。谁能帮我这个？这些是我的代码;

function bannerLoad(){
     var getHeight = $(window).height();
    $(".home-banner").css('height', getHeight);

    $('.home-banner').each(function(){
        var homebannerid = $(this).attr('id');
        var imgsrc = $(this).find('img.slide-img').attr('src');
        $("#"+homebannerid).backstretch(imgsrc, {speed: 300});
    });

主页

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

            get_header(); ?>
            <?php
            $args = array('post_type' => 'home_post','order' => 'ASC','posts_per_page' => -1); 
            $custom_posts = get_posts($args);
            $i=0;
            foreach($custom_posts as $post) : setup_postdata($post);
                $title = get_the_title();
                $title = str_replace(" ","",$title);
                $banner_image = get_field('banner_image'); 
                $link_target = get_field('select_pagelink_target');
            ?>
            <div class="pagename" id="home-page"></div>
            <div id="banner-slide<?php echo $i; //strtolower($title);?>" class="home-banner">
                <div class="banner-caption-wrap">
                    <div class="banner-caption">
                        <h3><?php echo get_the_title();?></h3>
                        <p><?php echo worthy_limited_excerpt(get_the_ID(),'30'); //the_content();?></p>
                        <?php
                            if($link_target == '') {
                                $target = '';
                            }else{
                                $target = 'target="_'.$link_target.'"';
                            }
                        ?>  
                        <a  <?php echo $target ?> href="<?php echo $page_link = get_field('page_link');?>"><?php echo $link_title = get_field('link_title'); ?></a>
                        <!-- LINK TEXT -->
                    </div>
                </div>
                <?php //home_post_images
                //echo $banner_image;
                 if( $banner_image ){ ?>
                    <img  src="<?php echo $banner_image; ?>" alt="" class="slide-img" />
                <?php }     
              ?>
</div>
<?php 
$i++;
endforeach;?>
<div class="next_btn_wrap">
    <a href="#" class="next_btn"><?php _e( 'Next', 'alainclub' ); ?></a>
</div>
<script type="text/javascript">
    bannerLoad();

</script>

<?php get_footer(); ?>

主页的CSS代码段：

                /* Home Banner 
                ------------------------------------------------*/
                .slide-img{display: none;}
                .backstretch{background: #1d082b;}
                .home-banner{background: #1d082b; height: 1024px;}
                /* Banner Caption */
                .banner-caption-wrap { margin: 0 auto;  max-width: 1200px;  width: 100%; position: relative;}
                .home-banner .banner-caption
                {color: #fff; position: absolute; width:585px; left:0; padding:40px; top:124px;
                background: -moz-linear-gradient(top,  rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); 
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0)));
                background: -webkit-linear-gradient(top,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%);
                background: -o-linear-gradient(top,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%); 
                background: -ms-linear-gradient(top,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%);
                background: linear-gradient(to bottom,  rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
                }
                .home-banner .banner-caption p { color:#fff; font-weight:normal; font-size:15px; line-height:24px; margin-bottom:0; height: 75px;}
                .home-banner .banner-caption a { background:rgba(90, 38, 124, 0.86) none repeat scroll 0 0; text-decoration:none; font-size:24px; padding:15px 40px; color:#fff; border:2px solid #fff; display:inline-block; margin-top:35px; text-transform:uppercase;}
                .home-banner .banner-caption h3 { margin-top:20px; background:url(../images/brand-icon.png) no-repeat 0 top ; color:#fff; font-size:45px; font-weight:bold; padding-top:50px; text-transform:uppercase; margin-bottom:20px;}

                #banner-slide2 .banner-caption h3 span { font-size:47px; color:#fff;}
                /* Banner Mouse Btn */
                .next_btn_wrap { position:fixed; width:100%; text-align:center; left:0; bottom:0;}
                .next_btn_wrap a.next_btn { display:inline-block; width:16px; height:25px; overflow:hidden; text-indent:-50px; background:url(../images/click_mouse.png) no-repeat 0 0;}

Answer 1

只需复制通过此代码并尝试更新

     <?php
    /*
    Template Name: Homepage Template
    */
 get_header(); ?>
            <?php
            $args = array('post_type' => 'home_post','order' => 'ASC','posts_per_page' => -1); 
            $custom_posts = get_posts($args);
            $i=0;
            foreach($custom_posts as $post) : setup_postdata($post);
                $title = get_the_title();
                $title = str_replace(" ","",$title);
                $banner_image = get_field('banner_image',get_the_ID()); 
                $link_target = get_field('select_pagelink_target',get_the_ID());
            ?>
            <div class="pagename" id="home-page"></div>
            <div id="banner-slide<?php echo $i; //strtolower($title);?>" class="home-banner">
                <div class="banner-caption-wrap">
                    <div class="banner-caption">
                        <h3><?php echo get_the_title();?></h3>
                        <p><?php echo worthy_limited_excerpt(get_the_ID(),'30'); //the_content();?></p>
                        <?php
                            if($link_target == '') {
                                $target = '';
                            }else{
                                $target = 'target="_'.$link_target.'"';
                            }
                        ?>  
                        <a  <?php echo $target ?> href="<?php echo $page_link = get_field('page_link');?>"><?php echo $link_title = get_field('link_title'); ?></a>
                        <!-- LINK TEXT -->
                    </div>
                </div>
                <?php //home_post_images
                //echo $banner_image;
                 if( $banner_image ){ ?>
                    <img  src="<?php echo $banner_image; ?>" alt="" class="slide-img" />

            </div>
            <?php }   
                endforeach;
              ?>

ACF背景图像

1 个答案: