ブロックテーマのページ送りのデザインカスタマイズ例（メモ）

ブロックテーマのテンプレートにあるページ送りをちょっとカスタマイズする方法のメモです。

ページ送り自体には、デザイン変更できる項目が少ないので、有効化しているテーマのstyle.cssなどへ直接追加してカスタマイズします。

このサイト（ホームやアーカイブを参照ください）と同じようにするには以下のコードで実装できます。

/*** ページ送り ***/
/* 全体 */
body.home .page-numbers,
body.archive .page-numbers
{
    padding: 4px 8px;
    font-size: 1.1em;
    margin: 2px;
    border: 1px solid var(--wp--preset--color--background);
	border-radius:2px;
}

/*** 現在のページ ***/
body.home .page-numbers.current,
body.archive .page-numbers.current
{
    background: var(--wp--preset--color--background);
    color: var(--wp--preset--color--foreground);
}

/*** 省略マークの位置 ***/
body.home .page-numbers.dots,
body.archive .page-numbers.dots
{
    border: none;
    vertical-align: text-bottom;
}

コードを見るとわかる通り、ページ送りは、「全体(.page-numbers)」「現在のページ(.page-numbers.current)」「省力マーク(.page-numbers.dots)」の3つで構成されています。

そして、クエリーループブロックの一部の機能ですので、ホーム（投稿一覧 body.home）とアーカイブ（カテゴリーやタグに紐づいた投稿の一覧 body.archive）のみに限定し、投稿や固定ページに挿入したクエリーループブロックとは区別するようにしています。

また標準のスタイルではGoogle PageSpeed Insightsなどで、ターゲットの間隔が狭すぎるという指摘を受けますので、隙間を増やしていますので、調整するといいでしょう。

さらに、現在のページとその他のページが分かりにくいので、色を反転表示させるようにしています。

コード中にある色指定はサイトエディターのグローバル設定（グローバルスタイル）で行う文字色と背景色を変数で適用させています。こうしておくことで、サイト全体の色味を変更した場合にも自動で変更してくれるようになります。もちろん#〇〇といった絶対値で設定することも可能です。

var(--wp--preset--color--foreground);・・・グローバルスタイルで文字色に指定した色

var(--wp--preset--color--background);・・・グローバルスタイルで背景色に指定した色