獲取多個圖像作爲背景

Question

我正在試圖圍繞如何實現多個背景（用於滑塊）到我的標題。

我已經完成了所有的定製工作，我現在正在嘗試設置一些東西，所以我可以讓一小部分的javascript圈通過我設置的不同背景圖像。

頭主頁代碼（頭-home.php）：

<header class="site-header"> 
<div class="row header-home" <?php 
if ((get_theme_mod('slider_radio', 'slider') == 'static')) { 
    echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat; 
background-position: center; background-size: cover;min-height:100vh">'; 
} else { 
    echo 'style="background-image:url(' . 
     getsliderimage1() . ',url(\'' . 
     getsliderimage2() . ',url(\'' . 
     getsliderimage3() . ');' . 
     'background-repeat: no-repeat;background-position: center; background-size: cover;min-height:100vh">'; 
} ?> 
<?php get_template_part('template-parts/header/site', 'branding'); ?> 
<?php get_template_part('template-parts/header/menu', 'top'); ?> 
</div> 

，它是指

slider.php代碼

function getsliderimage1() 
{ 
    if (!empty(get_theme_mod('slider_image_1'))) { 
     echo get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg') . ')'; 
    } 
} 

function getsliderimage2() 
{ 
    if (!empty(get_theme_mod('slider_image_2'))) { 
     echo get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg') . ')'; 
    } 
} 

function getsliderimage3() 
{ 
    if (!empty(get_theme_mod('slider_image_3'))) { 
     echo get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg') . ')'; 
    } 
} 

我的問題是當我打開我的slider_radio不'靜態'，slider.php獲取loa代碼，它只是打破了我的網頁從它被加載的地方。

顯然我在某個地方犯了一個錯誤。我只是不能指向哪裏。現在正在尋找幾個小時。

希望有人能告訴我我做錯了什麼。

這裏是新的WordPress主題發展。

已經謝謝了！

編輯：

讓我解釋遠一點。我的意圖是僅在定製器中使用圖像背景時將背景添加到背景中。包含這些圖像（或不是如果不使用）的3個控制是slider_image_1，slider_image_2和slider_image_3

UPDATE：

看來，當我在同一個並祝我的函數直接粘貼有沒有問題裝載頁面了。 Hmmn

Answer 1

一大堆的測試和編碼後的我得到它的一切，只是轉換成一些調整相同的文件工作。

當你使用回聲的鏈接，並使用它們過去到另一個回聲斜槓被刪除。

像這樣：：

<header class="site-header"> 
    <div class="row header-home" <?php 
    if ((get_theme_mod('slider_radio', 'slider') == 'static')) { 
     echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat; 
    background-position: center; background-size: cover;min-height:100vh">'; 
    } else { 
     echo 'style="background-image:'; 
     if (!empty(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
      echo 'url(' . esc_url(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg')) 
       . ')'; 
      if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) || !empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) 
      { 
       echo ','; 
      } 
     } 
     if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
      echo 'url(' . esc_url(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) . ')'; 
      if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) 
      { 
       echo ','; 
      } 
     } 
     if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
      echo 'url(' . esc_url(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')) . ')'; 
     } 
     echo ';'; 
     echo 'background-repeat: no-repeat;background-position: center; background-size: cover;min-height:100vh">'; 
    } ?> 
    <?php get_template_part('template-parts/header/site', 'branding'); ?> 
    <?php get_template_part('template-parts/header/menu', 'top'); ?> 
    </div> 
</header> 

Answer 2

如果u使用引導程序那麼這工作得更好：

<header class="site-header"> 
    <?php get_template_part('template-parts/header/site', 'branding'); ?> 
    <?php get_template_part('template-parts/header/menu', 'top'); ?> 
    <div class="row header-home" <?php 
    if ((get_theme_mod('slider_radio', 'slider') == 'static')) { 
     echo 'style="background-image:url(' . get_header_image() . ');' . 'background-repeat: no-repeat; 
    background-position: center; background-size: cover;min-height:100vh">'; 
    } else { 
    echo '>'; 
    ?> 
    <script>$('.carousel').carousel({ 
      interval: 2000 
     }) 
    </script> 
    <div id="designitCarousel" class="carousel slide carousel-fade" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#designitCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#designitCarousel" data-slide-to="1"></li> 
      <li data-target="#designitCarousel" data-slide-to="2"></li> 
     </ol> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <?php 
      if (!empty(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
       echo '<div class="item active"><img src="'; 
       echo esc_url(get_theme_mod('slider_image_1', get_bloginfo('template_url') . '/images/image1.jpg')) . '"'; 
       echo 'alt="Image 1">'; 
       echo '<div class="carousel-caption">'; 
       echo '<h1>' . get_theme_mod('slider_text_1') . '</h1>'; 
       echo '</div>'; 
       echo '</div>'; 
      } 
      if (!empty(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
       echo '<div class="item"><img src="'; 
       echo esc_url(get_theme_mod('slider_image_2', get_bloginfo('template_url') . '/images/image1.jpg')) . '"'; 
       echo 'alt="Image 2">'; 
       echo '<div class="carousel-caption">'; 
       echo '<h1>' . get_theme_mod('slider_text_2') . '</h1>'; 
       echo '</div>'; 
       echo '</div>'; 
      } 
      if (!empty(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg'))) { 
       echo '<div class="item"><img src="'; 
       echo esc_url(get_theme_mod('slider_image_3', get_bloginfo('template_url') . '/images/image1.jpg')) . '"'; 
       echo 'alt="Image 3">'; 
       echo '<div class="carousel-caption">'; 
       echo '<div class="slide-text slide_style_left">'; 
       echo '<h1 data-animation="animated zoomInRight">' . get_theme_mod('slider_text_3') . '</h1>'; 
       echo '</div>'; 
       echo '</div>'; 
       echo '</div>'; 
      } 
      ?> 
      <a class="left carousel-control" href="#designitCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#designitCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
     <?php 
     } ?> 
    </div> 
</header> 

U可以通過使用回聲無功能代碼的每一部分解決這個問題額外的CSS：

.header-home { 
    min-height: 100vh; 
} 
#designitCarousel { 
    width:100%; 
    height: 100%; 
    max-height: 100vh; 
    overflow: hidden; 
    z-index: -5; 
    position: absolute; 
} 
#designitCarousel img { 
    width: 100%; 
    height: auto; 
} 
.carousel-inner { 
max-height: 100vh; 
} 
.carousel-inner > .item { 
    max-height: 100vh; 
} 
.carousel-caption { 
    padding-bottom: 25%; 
}