WordPressの記事をbxsliderで呼び出して表示する方法

前提・実現したいこと

WordPressでサイトを制作中です。

bxsliderのカルーセル形式で
記事を呼び出して表示させたいですが、
サムネイルを順番に呼び出すところでつまづいています。

ソースをご覧いただくと、記事を呼び出すことは出来ているのですが、
記事表示部分の下に並ぶサムネイル、
表示を切り替えるためのdata-slide-indexのクラスが
0～4まであるのでループさせて呼び出せません。

ここでうまくサムネイルのdata-slide-indexのクラスの数字を1ずつ増やしながら、
呼び出すことは難しいでしょうか？

該当のソースコード

PHP
1				<div class="slide">
2					<div class="sliderBox sliderBox1">
3						<?php query_posts("showposts=5&cat=4"); ?>
4						<?php if(have_posts()): while(have_posts()): the_post(); ?>
5							<div class="innerBox">
6								<p class="img"><?php the_post_thumbnail('medium'); ?></p>
7								<div class="txtBox">
8									<p class="txt"><?php the_content(); ?></p>
9									<p class="btn"><a href="<?php the_permalink(); ?>">more</a></p>
10								</div>
11							</div>
12						<?php endwhile; endif; wp_reset_query(); ?>
13						<!--/sliderBox-->
14					</div>
15					<!--以下のサムネイル部分について、上記の５つの記事からアイキャッチを順番に呼び出したいです-->
16					<div>
17						<ul class="thumbBox thumbBox1">
18						<li><a data-slide-index="0" href="#"><span><img src="<?php bloginfo('template_url'); ?>/images/test1.png" /></span></a></li>
19						<li><a data-slide-index="1" href="#"><span><img src="<?php bloginfo('template_url'); ?>/images/test2.png" /></span></a></li>
20						<li><a data-slide-index="2" href="#"><span><img src="<?php bloginfo('template_url'); ?>/images/test3.png" /></span></a></li>
21						<li><a data-slide-index="3" href="#"><span><img src="<?php bloginfo('template_url'); ?>/images/test4.png" /></span></a></li>
22						<li><a data-slide-index="4" href="#"><span><img src="<?php bloginfo('template_url'); ?>/images/test5.png" /></span></a></li>
23						</ul>
24					</div>
25					<!--/slide-->
26				</div>

他のカルーセル系プラグインに乗り換える方法もありますが、
CSSでかっちりデザインしてしまったので、
何とかbxsliderで実現させたく、どなたかご助言いただけないでしょうか・・？

行動規範の内容に同意します

回答1件

ベストアンサー

邪道かもしれないですがパラメータさえ同じだったら問題無いかなと…
尚、query_postsはお勧めされないのでget_postsに変えてキーを数値として使えば手っ取り早いと思います。

                <div class="slide">
                    <div class="sliderBox sliderBox1">
                        <?php $args = array( 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post' ); ?>
                        <?php $myposts = get_posts( $args ); foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
                            <div class="innerBox">
                                <p class="img"><?php the_post_thumbnail('medium'); ?></p>
                                <div class="txtBox">
                                    <p class="txt"><?php the_content(); ?></p>
                                    <p class="btn"><a href="<?php get_the_permalink(); ?>">more</a></p>
                                </div>
                            </div>
                        <?php endforeach; wp_reset_postdata();?>
                        <!--/sliderBox-->
                    </div>
                    <!--以下のサムネイル部分について、上記の５つの記事からアイキャッチを順番に呼び出したいです-->
                    <div>
                        <ul class="thumbBox thumbBox1">
                        <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?>
                        <li><a data-slide-index="<?php echo $key; ?>" href="#"><span><?php the_post_thumbnail('medium'); ?></span></a></li>
                        <?php endforeach; wp_reset_postdata();?>
                        </ul>
                    </div>
                    <!--/slide-->
                </div>

投稿2018/01/30 11:34

編集2018/01/30 12:21