こんにちは朱夏です。
今回も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 -->
動画に倣って、投稿記事のタグに”toppickup”を付与したものを、ピックアップ記事として表示する様に指定しました。
投稿記事のタグは、クイック編集から簡単に変更する事が出来ます。
今回、カルーセルをWordPress化するにあたって、実装を諦めた部分があります。
-
- スライド下部のインジケーター
- 全スライドを投稿記事にする
- スライド画像の縦横比の統一
インジケーターは、投稿数に応じて増減させる事が困難だったのと、インジケーターはナンバリングしてスライドと紐づける必要があったので、そこが解決できずに断念しました。
カルーセルに表示するスライドの、最初の1枚はclassに”active”を付与する必要がありますが、ループで複数の記事を読み込む中で、最初の1つだけにそれを行うというのが私にはできませんでした。
なので、最初の1枚は固定にして、ピックアップ記事一覧ページへのリンクにする予定です。
これはスキル不足によるものなので、今後の課題としたいと思います。
最後に画像サイズの統一です。
これはBootstrapにこだわらなければ解決しそうな問題ですが、なるべくCSSを使わないで実装するようにしているので、今回はこのまま行きます。
完成前の調整で対応するかもしれません。
実行結果はこんな感じになりました。
横長の画像に切り替わった時に、縦の長さが変わってしまうのが解ると思います。
最終的には直したいですね・・・
とはいえ、ピックアップ記事を何とかスライドで実装する事が出来ました。
というわけで、カルーセルにピックアップ記事を表示させる対応を行いました。
これで、自分がピックアップしたい記事にtoppickpuのタグをつければ、いくつでもスライドに組み込むことができます。
普通に記事を表示させるよりも疲れるので、3つ目のテーマを作る時は普通に作りたいと思います。
今回は以上です。
次回もよろしくお願いします。