クエリーループブロック内のタイトルを1行表示に強制する方法（メモ）

WordPressのブロックエディターにおける最高の便利ブロックであるクエリーループブロック。いろいろな切り口でサイト内の情報を抽出して、リストやカード形式で表示でき、必要であればページ送りも付けることができる優れたブロックです。

でも個人的にはちょっと不満な点が．．それが、タイトルの長さが調整できないこと。

アイキャッチ画像の高さ、抜粋の長さは調整できるのに、タイトルの長さは指定できないので、横並び表示させた時に、タイトルの長さによって、その下のコンテンツに段付き（位置のバラつき）が出てしまうんです。

これを解消するには、タイトル部分の高さを強制して、最初から2段分3段分のスペースを作っておくのが一番無難な手ですが、タイトルの長さはまちまちなので、状況によっては大きなスペースが開いてしまったり、見切れてしまったりしてなかなかいい感じにコントロールするのは難しいです。

そこで今回は、タイトルの長さを強制的に1行分で切りそろえて、レイアウトの崩れを防ぐ簡単な方法をメモを兼ねて紹介します。

どのようになるのかのサンプル

百聞は一見に如かず、以下が本ページの措置を行っていない場合、行った場合のサンプルです。

タイトルをそのまま表示した例

以下がタイトル部分をそのまま（何もしないで）表示させた一例。タイトルの長さによって、その下の日付部分の位置がバラバラになってしまいますね（このサイトでの実際のクエリーループを表示させているのでそうなっていなかったらゴメンナサイ．．）。

タイトルを1行で揃えた例

こちらは本ページの簡単なスタイルコードで、タイトルを必ず1行にし、末尾を…で閉めた例です。タイトルは短く切り取られてしまうものの、レイアウトの崩れは防げますね。

クエリーループブロック内のタイトルを1行表示に強制する方法

スタイルコードを追加して実装する方法

以下のコードを有効化しているテーマのstyle.cssへ追加します。

.wp-block-post-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

これだけで、.wp-block-post-titleというCSSクラスの付いたリンク(a)要素すべてが、1行で表示され、末尾に「…」が付くようになります。簡単なコードで実装できますね。

上記はタイトルにリンクを付けるオプションを有効にしている場合のスタイルコード例です。リンクなしの場合には aを削除すれば適用されます。

ただし、この.wp-block-post-titleというクラスは、ブロックエディターの「タイトル」ブロックすべてが対象になるので、クエリーループだけでなく、例えば単一投稿や固定ページのタイトルにも適用される点に注意する必要があります。

もしも特定のクエリーループだけ、とか、特定のページだけという形にするのであれば、bodyクラスで指定されているもの（例えばブロック形式のテーマのトップページであれば「home」というクラスが付与される）を先頭に加えて（body.home ）判別させたり、クエリーループブロックの「追加CSSクラス」に任意のクラスを追加して先頭に加える、タイトルブロックの「追加CSSクラス」に任意のクラスを追加して先頭に加えるなどすればいいでしょう。

ブロックスタイルとして実装する方法

ブロックテーマ（「外観」→「エディター」メニューからサイトエディター（ブロックエディターと同様の機構）でデザインや配置を行うタイプのテーマ）を使用している場合に限られる方法です。

クエリーループブロックは展開すると、クエリーループという投稿や固定ページの内容を抽出する機能を使って引っ張り出したデータを投稿コンテンツブロックというもので繰り返し表示するという機能で、その中にはブロックの選択画面の「テーマ」項目に出てくる「投稿のアイキャッチ画像」「タイトル」といった部品が配置されています。

今回はその中の「タイトル」ブロックに対して一行で表示させたいわけですから、「タイトル」ブロックに独自のスタイル適用ボタンを追加すれば、前項のスタイルコードのように特定の条件を指定しなくても、そのスタイルを選んだタイトルだけが一行表示になる．．という形にできます。

以下が実際に「タイトル」ブロックに「Single Line」というボタンを追加した場合のスタイルタブ内の画像です。

このようにするには、以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_register_block_design_styles_post_title(){
	register_block_style('core/post-title', array(
	'name' =>  'pwcn-p-title-single-line',
	'label' => __( 'Single Line',''),
  ));
}
add_action('init','pwcn_register_block_design_styles_post_title');

function pwcn_block_design_post_title_style_init(){

//スタイルコードをまとめる
$custom_css = "
.is-style-pwcn-p-title-single-line a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.is-style-pwcn-p-title-single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
";

	wp_add_inline_style( 'global-styles', $custom_css );
//追加したスタイルコードをサイトエディタ側へインライン出力
	wp_add_inline_style( 'wp-edit-blocks', $custom_css );

}
add_action( 'init', 'pwcn_block_design_post_title_style_init',9999);
add_action( 'wp_enqueue_scripts', 'pwcn_block_design_post_title_style_init');

追加したら、サイトエディターを開いてクエリーループ内の「タイトル」ブロックを選択した後、スタイルタブをクリックすれば「Single Line」というボタンが出現し、クリックするとプレビューも表示画面側も一行表示になるはずです。

もしもならない場合には、コード中にある「global-styles」というハンドルを有効化しているテーマが出力しているスタイルシートのハンドル名へ変更すればうまくいくと思います。

このコードには、ブロックスタイルという機能とインラインスタイル（HTML上に直接スタイルコードを出力するWordPressの機能）を使っていますので、詳しくは以下のページを参照ください。

標準ブロックに独自デザインを選択できるようにする方法

もう外部CSSを読み込ませる必要なし？wp_add_inline_styleが超便利！

補足、その他参考ページなど

前述したサンプルでは、通常のクエリーループを挿入してグリッド表示させた時と何か違うことに気づきませんでしたか？

このサンプルでは以下のようなカスタマイズを行っています。

• アイキャッチ画像の高さを揃えています
• アイキャッチ画像をマウスオーバーした時に画像を少し拡大するようにしています
• 各投稿（各カード）の高さを揃えています

アイキャッチ画像の高さについてはブロックの設定オプションで指定すればOKなのですが、その他の施策について興味がある方は以下のページを参照ください。

画面サイズに関わらずクエリーループ内のコンテンツの高さを揃える方法

クエリーループブロック内のアイキャッチ画像をマウスオーバーでちょっと拡大させる方法

またサンプルでは設定していませんが、クエリーループのコンテンツはモバイルでは縦並びになり、タイトルを切る必要がないケースが多いと思いますので、パソコンだけに適用させたい場合には、以下のページを参考にモバイルとパソコンで別々のbodyクラスを付与して限定するといいと思います。

モバイルとパソコンそれぞれに別のbodyclassを付与する方法