こんにちは朱夏です。
今回も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つ目のテーマを作る時は普通に作りたいと思います。
今回は以上です。
次回もよろしくお願いします。
