Wordpressでスライドショーを行うには、高度なカスタムフィールドのプラグインとリピータフィールドを使用してください。

Question

私は最初にコードを学習するようにしています。私はインターネットでいくつかのコースを作ったので、私はWordpressの子供のテーマを構築しながら、経験から学び続けることに決めました。

私はスライドショーを作りたいと思っていて、w3schoolsでこのクールでシンプルなものを見つけましたhttp://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self。

いいですね！しかし、私はWordpressでそれを実装したい場合、いくつかの問題があります。

10個の画像フィールドを作成しました。それぞれが1つは、私のスライドショーの1つの写真を置くためのスペースです。

<?php get_header(); ?> 

<script> 
var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
} 
</script> 



<div class="mySlides"><?php the_field("image"); ?></div> 
<div class="mySlides"><?php the_field("image_2"); ?></div> 
<div class="mySlides"><?php the_field("image_3"); ?></div> 
<div class="mySlides"><?php the_field("image_4"); ?></div> 
<div class="mySlides"><?php the_field("image_5"); ?></div> 
<div class="mySlides"><?php the_field("image_6"); ?></div> 
<div class="mySlides"><?php the_field("image_7"); ?></div> 
<div class="mySlides"><?php the_field("image_8"); ?></div> 
<div class="mySlides"><?php the_field("image_9"); ?></div> 
<div class="mySlides"><?php the_field("image_10"); ?></div> 


<a class="home-btn-left" onclick="plusDivs(-1)">❮</a> 
<a class="home-btn-right" onclick="plusDivs(1)">❯</a> 


</div><!-- .content-area --> 

<?php get_footer(); ?> 

これは問題があります：私は10未満の画像をアップロードする場合、私は空白として示したことになる空のカスタムフィールドを持っているでしょうので、私は10枚の画像をアップロードすることを常に持っているコードは、このようなものになるだろう。

この問題のため、私はリピーターフィールドを作ることに決めました。だから私はこの空のフィールド問題を持たずに、必要なイメージサブフィールドの数を作ることができます。

ので、コードは次のようになります。

<?php 

// check if the repeater field has rows of data 
if(have_rows('image')): 

    // loop through the rows of data 
    while (have_rows('image')) : the_row(); 

     // display a sub field value 
     the_sub_field('subimage'); 

    endwhile; 

else : 

    // no rows found 

endif; 

?> 

しかし、今の質問は：どのように私は自分のサブフィールドへのHTMLクラスを適用することができますか？このように私はスライドショーを作ることができます。

私はこれをtryiedが、それは動作しません：

<?php 

// check if the repeater field has rows of data 
if(have_rows('image')): 

    // loop through the rows of data 
    while (have_rows('image')) : the_row(); 

     // display a sub field value 
     <div class="mySlides"> the_sub_field('subimage');</div> 

    endwhile; 

else : 

    // no rows found 

endif; 

?> 

あなたは、いくつかの提案を持っていますか？あなたが動作するコードのためのphp-modeの中と外にジャンプする必要があり、HTMLやPHPを混合する際

?><div class="mySlides"><?php the_sub_field('subimage'); ?></div> <?php 

：

Answer 1

まず、ここthe_sub_field()を使用しないでください。 the_sub_field()はフィールドをエコーし​​ます。代わりにget_sub_fieldを使用してください。出力せずに値を取得します。あなたのコードは次のようになります。

// check if the repeater field has rows of data 
    if(have_rows('image')): 

     // loop through the rows of data 
     while (have_rows('image')) : the_row(); 

      if(get_sub_field('subimage')) : 
      // display a sub field value 
      echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>'; 
      endif; 

     endwhile; 

    endif; 

はリピータフィールド内の値が実際にそこにあるかどうかを確認するためにif(get_sub_field('subimage')) :文を注意してください。 yesの場合は、get_sub_field('subimage')関数でチェーンされた文字列をエコーし​​ます。

詳細な例についてはhereをご覧ください。

Answer 2

はとライン

<div class="mySlides"> the_sub_field('subimage');</div> 

を交換してください。

代替は、PHP-モード中のhtmlを印刷するには、エコー使って次のようになります。すべての

echo '<div class="mySlides">'; 
the_sub_field('subimage'); 
echo '</div>';