Question

我的网站已设置好，以便在木制背景（#above）上显示图片或图库，其余内容位于亚麻背景下（#below）。这适用于每个页面，但投资组合页面 - 在选择特定图库之前，木制空间没有内容。

有没有办法让亚麻背景＆amp;内容（#below）显示而不是普通的木制背景（#above），直到画廊被选中？（如果是这样，它是否可能让它从屏幕顶部向下滑动？）

的header.php

<body>
<div class="above">
    <div id="header">
        <div class="logo">
            <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Urban Palate logo" id="logo" /></a>
        </div><!-- end logo -->
        <nav>
            <ul>
                <li><a href="?page_id=7"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" alt="Urban Palate intro" /></a></li>
                <li><a href="?page_id=12"><img src="<?php echo get_template_directory_uri(); ?>/img/portfolio.png" alt="Urban Palate portfolio" /></a></li>
                <li><a href="?page_id=15"><img src="<?php echo get_template_directory_uri(); ?>/img/blog.png" alt="Urban Palate blog" /></a></li>
                <li><a href="?page_id=10"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" alt="Urban Palate contact" /></a></li>
            </ul>
        </nav>
    </div><!-- end header -->

portfolio.php

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>  

    <div class="gallery">
       <?php     
            if( is_page( 24 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider1]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 26 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider2]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 28 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider3]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 30 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider4]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 32 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider5]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 34 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider6]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 36 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider7]');
            } else {
              // output standard content here
            }

        ?>

        <?php     
            if( is_page( 42 ) ) {
              // make your stuff here
               echo do_shortcode('[rev_slider slider8]');
            } else {
              // output standard content here
            }

        ?>

    </div><!-- end gallery -->
</div><!-- end above -->
<div class="below">
    <div class="blurb">
        <img src="<?php echo get_template_directory_uri(); ?>/img/portfolio_blurb.png" alt="see who has experienced our fabulous + creative and beautiful + cutting edge decor firsthand" />
    </div><!-- end blurb -->
    <div id="client-list">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
    </div><!-- end client-list -->


<?php get_footer(); ?>

Answer 1

可以对上面的代码进行很多改进。调查switch语句，或者至少放弃所有else块。无论如何，

在header.php中，尝试

<body>
<div class="above <?php if (is_page(1)) echo 'short'; ?>">
    <div id="header">
        <div class="logo">
        // etc...

您需要更改is_page(1)部分以获得正确的页码。我不知道你是如何用WordPress解决这个问题的，但如果你能为每个画廊做到这一点，你可以在空的投资组合页面上做到这一点。

然后，在你的网站css：

.above.short {
    height: 200px;
}

我的解决方案很丑陋，但它适合你所拥有的PHP的其余部分。如果您为这项工作向开发人员付费，请获得新的开发人员。

知道WP的人可能会告诉你如何给div.above一个额外的课程，而不必像我那样使用内联代码。这将是一个更好的解决方案。

Answer 2

你可以用jQuery做到这一点。

例如：

// check if the gallery is empty and hide if it is.
if ($('.above .gallery').contents().length == 0){
  $('.above').hide();
}

或使用css代替.hide和display:none或将高度设置为0.

 $('.above').css('height', '0');

仅在一个页面上进行动态div大小调整？

2 个答案: