JavaScript　tab.js wordpress ページ遷移せずに、表示コンテンツを切り替える　忘備録

Bootstrapを利用。ポイント - タグはulで作成する

ulタグのクラス属性は nav nav-tabs
a要素のdata-toggle属性に、tabを指定する
div要素のclass属性にtab-contentを指定する。
最初に表示したい内容とそのタブ・メニューのclass属性にactiveを指定する。
下の画像やコンテンツが変わるとこはdivタグでも良い。しかし、クラス属性にtab-paneを指定する。id属性も指定する。

イメージ

f:id:happy_teeth_ago:20190122185144p:plain

//ulのクラス属性は、nav nav-tabsを指定
 <ul class="nav nav-tabs" role="tablist">

//初めに表示したいclass属性にactiveを指定
    <li role="presentation" class="active">

//リンク先に表示先のid指定する data-toggleも記載している
    <a href="#first-meet" aria-controls="first-meet" role="tab" data-toggle="tab">
                                        <i class="fi flaticon-clothes-1"></i>
                                        First meet</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="#first-date" aria-controls="first-date" role="tab" data-toggle="tab">
                                        <i class="fi flaticon-calendar-2"></i>
                                        First date</a>
                                        </li>
                                    <li role="presentation">
                                        <a href="#proposal" aria-controls="proposal" role="tab" data-toggle="tab">
                                        <i class="fi flaticon-heart-rate-monitor"></i>
                                        Proposal day</a>
                                    </li>
                                    <li role="presentation">
                                        <a href="#engagement" aria-controls="engagement" role="tab" data-toggle="tab">
                                        <i class="fi flaticon-ring"></i>
                                        Engagement</a>
                                    </li>
                                </ul>
                                <div class="tab-content">

//ここに表示するのでidを上記タブ　tabpanelと　id="first-meet"が記載されている
    <div role="tabpanel" class="row tab-pane fade in active" id="first-meet">
                                        <div class="col col-lg-6 col-md-4 col-sm-5">
                                            <img src="images/story/img-1.jpg" class="img img-responsive" alt>
                                        </div>
                                        <div class="col col-lg-6 col-md-8 col-sm-7 story-details">
                                            <h3>Our first meet</h3>
                                            <span class="date">14 feb 2016</span>
                                            <p>We meet a beautifully day. Lovely metting was between us on 14 february 2016. That was sun day. I was waking on the street of dash. suddenly i saw a beautifully girl was laughing her firnds. What a nice girl. She grab my hear with no time. I went to her behind and try to talk with her. bla bal bal. Love is every thing in human life. Man can not live without love. </p>
                                        </div>
                                    </div>

ここからループを埋め込む

まずul タブ部分

三項演算子でactiveを出力

WordPressのループ回数を取得してクラス名に付加する

ワードプレスは基本ループ処理その回数を拾うことは多々ある。

<ul class="nav nav-tabs" role="tablist">
                                <?php
                                    $args = array(
                                     'post_type' => 'manual', /* カスタム投稿名が「manual」の場合 */
                                     'posts_per_page' => 4, /* 表示する数 */
                                    ); ?>
                                <?php $my_query = new WP_Query( $args ); ?>
                                    <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
                                    //ここでループ回数を拾っている
                                    <li role="presentation" class="<?php $my_query->current_post == 0 ? print "active" : "" ?>">
                                        <a href="#<?php echo get_the_ID(); ?>" aria-controls="<?php echo get_the_ID(); ?>" role="tab" data-toggle="tab">
                                        <i class="fi flaticon-clothes-1"><?php the_title(); ?></i>
                                        </a>
                                    </li>
                                  <?php endwhile; ?>
                                </ul>

コンテンツ部分

 <div class="tab-content">
                                    
<?php                                 
$args = array(                                  
  'post_type' => 'manual', /* カスタム投稿名が「manual」の場合 */
   'posts_per_page' => 4, /* 表示する数 */
 ); ?>
                                    
<?php $my_query = new WP_Query( $args ); ?>
                                    
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>              
<?php echo $my_query->current_post ?>
//ループ回数を拾い、初回にクラス属性にactiveを 追加                                                                              
 <div role="tabpanel" class="row tab-pane fade in <?php $my_query->current_post == 0 ? print "active" : "" ?>" id="<?php echo get_the_ID(); ?>">
          
                                            
                                            <div class="col col-lg-6 col-md-4 col-sm-5">
                                              <?php the_post_thumbnail('thumbnail'); ?>
                                            </div>
                                            <div class="col col-lg-6 col-md-8 col-sm-7 story-details">
                                                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                                <span class="date"><?php the_time( get_option( 'date_format' ) ); ?></span>
                                                <p><?php the_content(); ?></p>
                                            </div>
                                        </div>
                                        <!-- △ ループ終了 △ -->
                                    
                                    <?php endwhile; ?>
                                  
                                    
                                </div>