【WordPressテーマ】自作テーマ作成の記録　その９【2つ目】

こんにちは朱夏です。

今回もWordPressテーマ作成やっていきます。

勉強させていただく動画はこちらです。

今回は、ピックアップ記事の部分を作成していきます。
ピックアップ記事はBootstrapのカルーセルという機能を使ってスライドする様に作りました。
これをWordPress化するのは結構難易度高かったです。

それでは、やっていきましょう。

コード

初めにコードを貼っておきます。

<!-- ピックアップコンテンツ -->
<div class="bg-light p-2 shadow">
   <h3>PickUp!</h3>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

      <!-- スライドさせる画像の設定 -->
      <div class="carousel-inner">

         <div class="carousel-item active">
            <img class="d-block w-100 img-fluid" src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" alt="第1スライド">
            <div class="carousel-caption d-none d-md-block">
               <h4>ピックアップ</h4>
               <p>おすすめ記事一覧</p>
            </div><!-- /.carousel-caption -->
         </div><!-- /.carousel-item -->

         <?php $top_query = new WP_Query( 'tag=toppickup' ); ?>
         <?php if ( $top_query->have_posts() ) : ?>
            <?php while ( $top_query->have_posts() ) : $top_query->the_post(); ?>
               <div class="carousel-item">
                  <?php if ( has_post_thumbnail() ) : ?>
                     <?php the_post_thumbnail( '', array( 'class' => 'd-block w-100 img-fluid' ) ); ?>
                  <?php else : ?>
                     <img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="img-fluid" alt="...">
                  <?php endif; ?>
                  <div class="carousel-caption d-md-block">
                     <a href="<?php the_permalink(); ?>" class="stretched-link"></a>
                     <h5><?php the_title(); ?></h5>
                     <p><?php the_excerpt(); ?></p>
                  </div><!-- /.carousel-caption -->
               </div><!-- /.carousel-item -->
            <?php endwhile; ?>
         
            <?php wp_reset_postdata(); ?>

            <?php else : ?>
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
         <?php endif; ?>

      </div><!-- /.carousel-inner -->

      <!-- スライドコントロールの設定 -->
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
         <h2>＜</h2>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
         <h2>＞</h2>
      </a>

   </div><!-- /.carousel -->
</div>
<!-- ピックアップコンテンツ END -->

<h3>PickUp!</h3>

<img class="d-block w-100 img-fluid" src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" alt="第1スライド">

<h4>ピックアップ</h4>

<p>おすすめ記事一覧</p>

</div>

</div>

<?php $top_query = new WP_Query( 'tag=toppickup' ); ?>

<?php if ( $top_query->have_posts() ) : ?>

<?php while ( $top_query->have_posts() ) : $top_query->the_post(); ?>

<?php if ( has_post_thumbnail() ) : ?>

<?php the_post_thumbnail( '', array( 'class' => 'd-block w-100 img-fluid' ) ); ?>

<?php else : ?>

<img src="<?php echo get_template_directory_uri(); ?>/img/bg_digital_pattern_blue.jpg" class="img-fluid" alt="...">

<?php endif; ?>

<a href="<?php the_permalink(); ?>" class="stretched-link"></a>

</div>

</div>

<?php endwhile; ?>

<?php wp_reset_postdata(); ?>

<?php else : ?>

<?php endif; ?>

</div>

</a>

</a>

</div>

</div>

動画に倣って、投稿記事のタグに”toppickup”を付与したものを、ピックアップ記事として表示する様に指定しました。
投稿記事のタグは、クイック編集から簡単に変更する事が出来ます。

今回、カルーセルをWordPress化するにあたって、実装を諦めた部分があります。

- スライド下部のインジケーター
- 全スライドを投稿記事にする
- スライド画像の縦横比の統一

インジケーターは、投稿数に応じて増減させる事が困難だったのと、インジケーターはナンバリングしてスライドと紐づける必要があったので、そこが解決できずに断念しました。

カルーセルに表示するスライドの、最初の1枚はclassに”active”を付与する必要がありますが、ループで複数の記事を読み込む中で、最初の1つだけにそれを行うというのが私にはできませんでした。
なので、最初の1枚は固定にして、ピックアップ記事一覧ページへのリンクにする予定です。
これはスキル不足によるものなので、今後の課題としたいと思います。

最後に画像サイズの統一です。
これはBootstrapにこだわらなければ解決しそうな問題ですが、なるべくCSSを使わないで実装するようにしているので、今回はこのまま行きます。
完成前の調整で対応するかもしれません。

実行結果

実行結果はこんな感じになりました。