Question

我在Wordpress网站上使用Sparkling主题。主题在页面顶部的div中使用Flexslider。每张幻灯片都包含一个图像以及一个包含帖子标题和摘录的div。

滑块构建在header.php中，就像在这个函数中一样：

function sparkling_featured_slider() {
   if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
      echo '<div class="flexslider">';
         echo '<ul class="slides">';
            $count = of_get_option( 'sparkling_slide_number' );
            $slidecat =of_get_option( 'sparkling_slide_categories' );

            $query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
            if ($query->have_posts()) :
               while ($query->have_posts()) : $query->the_post();

               echo '<li>';
               if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
                 echo get_the_post_thumbnail();
               endif;

               echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
              echo '</div>';
          echo '</li>';
          endwhile;
        endif;

  echo '</ul>';

echo ' </div>';

} } ENDIF;

结果HTML如下所示：

<div class="top-section">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img width="1920" height="512" src="http://pathtoslider.jpeg" 
                    class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
                    alt="slide1" 
                    srcset="pathstodifferentresolutions.jpg" 
                    sizes="(max-width: 1920px) 100vw, 1920px" />
                <div class="flex-caption">
                    <h2 class="entry-title">Tomatoes</h2>
                    <div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
                    </div>
                </li>
                ..more slides..
        </ul>
    </div>
</div>

<div class="container main-content-area">

默认情况下，它通过在媒体查询中设置display：none来抑制小屏幕上的flex-caption，但是我想显示它，所以我将显示设置为内嵌在我自己的媒体查询中。

这会导致另一个问题，因为整个顶部div是图像的高度，并且不一定有灵活字幕的空间。

我希望条目标题的底部与图像的底部对齐，以及图像正下方的摘录，我完成了这样的操作：

@media (max-width: 768px) {
  .flex-caption {
    display: inline;
    bottom: 0;
   }
  .entry-title {
    position: absolute;
    bottom: 0;
  }
  .excerpt {
    position: absolute;
    vertical-align: top;
  }
}

但这并没有调整顶部div的大小，所以我覆盖了主要内容区域。

我尝试过很多不同的事情，包括在任何地方尝试height:auto。

我无法弄清楚如何设置滑块高度。它似乎在get_the_post_thumbnail中。这是问题吗？

Answer 1

您可以尝试在functions.php中设置图像高度 function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' )。

在小屏幕上的flexslider

1 个答案: