【EASEL】投稿に複数枚の画像が添付されている時、イラスト一覧のアイキャッチ画像にアイコンを付ける【メモ】

文章を整える気力がない本当にただのメモ書きです

きっかけは

こちらのブログ記事でした。
確かに、本当は複数ページ漫画だったり差分があったりするのに、それがサムネイルから分からないことで去っていく人が(…いるか!?)いたら勿体ない……参考にさせてもらうぞ〜!!!!

しかし、自分のサイトはイラストサムネイルの画像のみを小さくタイル状に並べるため、常に隅に数字があると少々狭く感じるのではという懸念があった。そこで、「投稿に添付されている画像が複数枚の時」だけアイコンを表示できないか?と考える(そしてこの作業に丸2日かかることになる・・・)

先のリンク先では、get_attached_mediaを使って指定された投稿($post->ID)に添付されている画像を取得していることがわかったので、この情報はかなり使えそうだ
参考:WordPressの投稿に添付されている画像の枚数などの情報を取得する方法
また、EASELのデモページをデベロッパーツールで観察していると、パスワード付き投稿のサムネイルにはそれ専用のクラスclass=”has_pass”が追加で指定されていることがわかる

→つまり、複数画像投稿の時にも追加クラスを設定すれば良い??

works-illust.phpを編集する

ここからはphpを改変していくのだけれど、親テーマには手を加えず、子テーマ内に複製した同名ファイルを編集することにする。
EASEL/library/partsにある「works-illust.php」の24~30行目で、パスワード投稿用のクラス設定がされているようなので、それを真似て、その下に追加クラスの設定を追記する。

<?php
if (post_password_required($post) && get_option('easel_pass_blur') === '1') {
	$pass = ' has_pass'; //この部分にあった"クォーテーションマークを消しています
} else {
	$pass = null;
}
?>

//以下が追加部分
<?php
//投稿に添付されている画像の枚数をチェック、
if ( count(get_attached_media('image', $post->ID)) >= 2 ) {
    //二枚以上のとき、追加するクラス
    $image_count = ' has_multiple_images';
} else {
    //二枚未満の場合、追加クラスなし
    $image_count = null;
}
?>
//ここまで

そして、32行目の記述の<figure class=”eye-catch<?php echo(中略) ?>”部分も書き換え。
PW保護+複数枚の場合でも$passと$image_countのクラスを適切に連結して出力できるようにした。

<figure class="eye-catch<?php echo esc_attr($pass . $image_count); ?>" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">

これで、添付画像が二枚以上($image_count === ‘ multiple-images’)のときにはクラスhas_multiple_imagesが追加されるはず
因みに、投稿と画像が紐づいていないと正しく画像枚数の情報を取得できないので、メディアライブラリのアップロード先の項目をよく確認する

ショートコードで作られる作品リストにも適用したい

以上で、イラストのアーカイブページのサムネイルでクラスを追加することが出来た
同じようにショートコードで挿入する作品リストのサムネイルにも適用したい

shortcode.phpの99~103行目でパスワード保護されている場合のクラスを適用していたので同じようにする。まず、100行目$pass = ‘ class=”has_pass”‘;について、代入の値を少し変更

if (post_password_required($post) && get_option('easel_pass_blur') === '1') {
    $pass = 'has_pass'; //この行を書き換えた
} else {
    $pass = null;
}

この直後に

// 2枚以上の画像が添付されているかどうかの判定を追加
if ( count(get_attached_media('image', $post->ID)) >= 2 ) {
    $image_count = ' has_multiple_images';
} else {
    $image_count = null;
}

// クラスをまとめて1つの変数に格納
$class = trim( $pass . ' ' . $image_count );

そして最終的にまとめたクラスをhtmlタグに適用する <figure></figure>を書き換え(元ファイルの105行目)▼

$retHtml.= '<figure class="' . esc_attr($class) . '">' . $new_illusts_thum . '</figure>'; // まとめたクラスを適用

子テーマが反映されない

ここで、ショートコードで挿入されるサムネイルは問題なかったが、アーカイブページで子テーマの変更が反映されない問題が発生
taxnomy-custom-cat.phpで、includeでファイルを読み込んでいるのが原因らしい(WordPressのテンプレート階層を無視してファイルを直接読み込むため?)
わかったよ!!!!!!子テーマにtaxnomy-custom-cat.phpも複製して……修正すればいいんでしょ!?!?!? ラスト8行を書き換えます。

// 子テーマを優先的に読み込むように修正
if ($slug == "illust" || $term == "illust") {
  $file_path = get_stylesheet_directory() . '/library/parts/works-illust.php';
} elseif ($slug == "update" || $term == "update") {
  $file_path = get_stylesheet_directory() . '/library/parts/works-update.php';
} else {
  $file_path = get_stylesheet_directory() . '/library/parts/works-text.php';
}

// 子テーマのファイルが存在しない場合、親テーマを参照
if (!file_exists($file_path)) {
  $file_path = get_template_directory() . '/library/parts/' . basename($file_path);
}

if (file_exists($file_path)) {
  include($file_path);
} else {
  // ファイルが見つからない場合
  echo '指定されたファイルが見つかりません。';
}
	 ?>

もう疲れてきたので、インターネットが指示するがままにコピーペーストをしている。うまく反映されました。

CSS

なんとか投稿に複数枚の画像が紐づいているときのクラスが設定できたので、あとは装飾する

.has_multiple_images::after {
    position: absolute;
    content: '\f24d';
    font-family: "Font Awesome 5 Free";
    top: 0%;
    right: 15%;
    color: #fff;
    font-size: 180%;
    filter:drop-shadow(0 0 5px #000000)
}

できた……

はあ……ゥチはただ推しカプの漫画と絵を自分の理想の形で載せたいだけなのに……なんでPHPと格闘してるわけ?

一刻も早く絵や漫画を描く作業に戻りたすぎ となってしまったので終わろうと思います。さようなら。