2017-04-07 10 views
1

(スライダー用)を私のヘッダーに実装する方法について、私の頭の中を包み込んでいます。複数の画像を背景として取得

私はすでにすべてのカスタマイザの作業を行っています。私は設定をしようとしていますので、私はちょうど私が設定したさまざまな背景画像のJavaScriptサークルトラフを少し聞かせることができます。それは私の問題がある

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') . ')'; 
    } 
} 

を指していること

<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コード:

ヘッダーのホームページコード(ヘッダ-home.phpを)私がslider_radioをonにすると、slider.phpがloaになるという「静的」ではない私のページは読み込まれた場所から壊れてしまいます。

明らかに私はどこかでミスを犯しました。私はちょうどポイントをピン止めすることはできません。今、何時間も探しています。

あなたの誰かが私に間違っていることを伝えることができます。

ここにはWordPressテーマ開発の新機能があります。

ありがとうございました!

編集:

私はもう少し説明しましょう。私が意図しているのは、画像の背景をカスタマイザで使用するときだけ背景に追加することです。 (使用されていない場合やない)これらの画像を含む3つのコントロールslider_image_1、slider_image_2とslider_image_3

UPDATEです:

私が同じフィーユに直接私の機能を貼り付けるとき、それは何の問題ロードを持っていないようですもうページ。 Hmmn

答えて

1

後でテストとコーディングが大量になり、すべてを同じファイルに変換して調整しています。

リンクにechoを使用して、別のエコーにスクロールすると、スラッシュが削除されます。 Uは機能せず、コードの各部分のためにエコーを使用してこの問題を解決することができる:

このように:

<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> 
1

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> 

その他の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%; 
} 
関連する問題