EASELの作品タイプ「イラスト」のサムネイル（アイキャッチ）のみに、ページ内の画像枚数を表示させるカスタマイズの備忘録です。
PHPの編集
EASELの「easel」→「library」→「parts」→「works-illust.php」を編集します。※バックアップを取ってから行ってください！
32行目の<figure class=…から始まる行の直前に前半、52行目の</figure>の直後に後半をコピペします。
<div class="thumb">
<p class="number">
<i class="fa-solid fa-note-sticky"></i>
<?php $attachment_images = get_attached_media( 'image', get_the_ID() );
echo count( $attachment_images );
?>
</p>
//中略 <figure class="eye-catch"…>の行から</figure>まで
</div>上の3行目の記述はFont Awesomeを使ってアイコンを表示させています。Font Awesomeに登録していない場合は表示されません。
うまくいけばこんな風に表示されているかと思います。
CSSの編集
CSSでデザインを整えます。以下のCSSをWordpressメニュー「外観」→「カスタマイズ」→「追加CSS」にコピペします。
div.thumb {
position: relative;/*サムネの上に文字を配置する準備*/
white-space: nowrap;/*改行させない指定*/
}
p.number {
position: absolute;/*サムネの上に文字を配置*/
color: #fff;/*文字色を白に指定*/
background: rgba(0, 0, 0, 0.5);/*背景色を半透明の黒に指定*/
right: 0%;/*右に沿わせる*/
top: 0%;/*上に沿わせる*/
padding: 0px 5px;/*幅を調整*/
border-radius: 10%;/*角を丸める*/
margin: 0px;/*いらない余白を消す*/
z-index: 1;/*ぼかし回避*/
}9月15日追記：EASELのパス付きイラストのサムネぼかし機能を使うと数字ごとぼやけてしまっていたため、z-indexの値を追加しました。
終了！
実際と違う数字が表示される場合の対処
大体のページは画像枚数が正しく表示されましたが、たまに0枚になっていたり、実際より数枚多く表示されている場合がありました。
調べたところ、原因はページと画像が紐づいていない・余分な画像が紐づいていることでした。
各ページに何枚の画像が紐づいているかは、作品編集画面左上の「メディアを追加」→「メディアライブラリ」→プルダウンメニューから「この固定ページへのアップロード」を選ぶと確認できます。
このページには今4件の画像が紐づいているのが分かりました。ただし、実際に使われている画像はこの中の2枚のみで、画像2、3枚目はアップしたけれど使わなかったもの、アイキャッチ画像に設定したものです。また、4枚目はこのページ内で2回使っていますが、同じ画像を使ったため1枚とカウントされています。
これらが枚数表示の邪魔をしているので、使わないものはメディアライブラリから削除したり、WordPressメニューの「メディア」から画像アップロードを行い、アイキャッチ画像に設定するなどの対策で数合わせをします。
逆に実際より枚数が少なく表示される場合には、作品編集画面左上の「メディアを追加」から適当な画像をアップすることで数合わせしました。画像は本文から消してもメディアライブラリには残るため、本文に載せていた画像をいじることなく数合わせができます。