カード全体の高さを揃えたい
ポートフォリオ作成講座で作ったフロントページ、ブログセクション部分。 このレイアウトとコードを変更せずに、自身のブログを制作していると、下図のようにカードの高さが合わなくなります。
高さを揃えるためには、cardクラスのdivを囲っている<div class="col-md-4 ...">部分に「d-flex」クラスを加えてください。
front-page.php
<? //この行はコピーしない
<div class="row">
<?php query_posts('post_type=post&showposts=3');
while (have_posts() ): the_post(); ?>
<div class="col-md-4 mb-5 d-flex"><!-- ★ここにd-flexクラスを追加 -->
<div class="card blog-card">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : //アイキャッチ画像あり ?>
<img src="<?php the_post_thumbnail_url('post-thumbnails'); ?>" alt="" class="img-fluid">
<?php else: //アイキャッチ画像なし ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.jpg" alt="" class="img-fluid">
<?php endif; ?>
</a>
<div class="card-body">
<h3 class="card-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
<div class="card-text"><?php the_excerpt(); ?></div>
</div>
<div class="card-footer d-flex justify-content-between align-items-center">
<div class="mb-1">
<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
<img src="<?php echo get_avatar_url($post->post_author); ?>" class="avatar rounded-circle">
<?php the_author(); ?>
</a>
</div>
<div class="mb-1">
<i class="far fa-clock"></i> <?php the_time('Y/m/d'); ?>
</div>
</div>
</div>
</div>
<?php endwhile; wp_reset_query();?>
</div><!-- //row -->
仕組み
横並びにした要素の高さが自動で揃うという、flexboxの性質を利用しています。
最初（<div class="col-md-4 ...">部分に「d-flex」を指定していない）の状態では、下記のようになっています。
align-itemsプロパティの初期値はstretch＝伸縮して揃える。 ですので、div.col-md-4の高さは揃っています。 しかし、その中にあるdiv.cardの高さは、中身次第で変わります。
div.col-md-4にd-flexクラスを追加して、フレックスコンテナ化します。 すると、align-items: stretch; によって子要素の.cardは親要素と同じサイズになります。
もともと、bootstrapのCSSの方で、.card-bodyにはflex: 1 1 auto;が指定されています。
このため、.card-body部分に割り当てられる高さが増えています。
タイトルの文字数を制限して、長さを揃えたい
いくつか方法があります。 シンプルなのは、wp_trim_words関数を使う方法です。
【例】
<?php echo wp_trim_words( get_the_title(), 40, '...' ); ?>
ただし、日本語の場合は指定した文字数が正しく取り出せないことがあります。 字数制限が効いていないような形になってしまった時は、プラグイン WP Multibyte Patch を有効化してみてください。
※詳細は関数リファレンス/wp trim wordsをご確認ください。
その他にも、いろいろな方法でタイトルや抜粋分の出力文字数は調整できます。 サンプルコードを公開されているサイトも多いので、やりたいことに合わせて検索してみてください。