カテゴリートップページにカテゴリーイメージの絵を出したい〜実施編STEP3〜

前回からの続きです。
カテゴリートップページと1つ1つの投稿記事の一番上にカテゴリーのイメージ画像を表示したい。こうすることで、例えば見ている人の印象に残るのと、全く違うカテゴリーのところは全く別の人の文書だと思うだろう。マルチサイトをやめた代わりのカテゴリー独立作戦のシリーズです。

カテゴリートップページにカテゴリーイメージの絵を出したい 〜実施編STEP1・2〜

カテゴリートップページと1つ1つの投稿記事の一番上にカテゴリーのイメージ画像を表示したい。こうすることで、例えば見ている人の印象に残るのと、全く違うカテゴリーの…

ロードスターでも釣りがしたい!

今回はカテゴリーの絵を表示した上にカテゴリー名を重ねて表示します。
もう慣れてきたので調査の過程とかほぼなくなりました。

HTMLの書き方を調査

今回参考にしたサイトはここ。スタイルシートを使わないでちょくでアライメントを指定します。
https://gazocustomize.com/top-text-image/

上記サイトでは文字が中央に寄らせられなかったので、指定の仕方とか詳細は別途ググりました。
https://sororikaku.com/center-text/

やりたいことは下記のようなHTMLにしたい。

<div style="position: relative; display:inline-block;">
<img src="./img/カテゴリーの画像.jpg" alt="topimg">
<div style="position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; color:white;transform:translate(-50%,-50%)">
<p>カテゴリー名</p>
</div></div>

PHPコードの修正

前回に引き続き、
lightningの全ページ共通のヘッダー表示処理の下記ファイルを修正します。
/opt/bitnami/wordpress/wp-content/themes/lightning/_g3/template-parts/page-header.php
場所は前回修正した同じ箇所。カテゴリー画像の出力とカテゴリー名の出力の周りに先程のHTMLになるようにHTMLコードをechoしまくります。

<!-- //カテゴリー独立プロジェクトのための修正、プラグインのCategory Imagesを利用している
<!-- //categoryだったらの条件はz_taxonomy_image()に入っていたのでそこもいじる -->
<?php
if (function_exists('z_taxonomy_image')){
  echo '<div style="position: relative; display:inline-block;">';
  $taximage = z_taxonomy_image(); //これで画像表示のecho、成功時にもhtmlコードを返すようにした
  if(!empty($taximage)){           //画像があったらカテゴリー名を表示
    echo '<div style="position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%; color:white;transform:translate(-50%,-50%)">';
    echo '<p>';
    echo wp_kses( apply_filters( 'lightning_page_header_title_html', $page_header_title_html ), $allowed_html ); //カテゴリー名
    echo '</p>';
    echo '</div>';
  }
  echo '</div>';
 }
?>

以上。ここまで来たらもう何でもできます。
色の指定とかlightningの設定からとってこれたりしたい？まぁ置いとこう。

結果

できましたね。おしゃれですね。

今後

大体のやりたいことはできました。
・スマホ用に小さい画像を出したい
でも4kのスマホとかどうなってんだろう？

1つUPすると下記ファイル名とサイズのバリエーションが同時にUPされる
category-kayak-1024x576.jpg
category-kayak-150x150.jpg
category-kayak-1536x863.jpg
category-kayak-300x169.jpg
category-kayak-320x180.jpg
category-kayak-768x432.jpg
category-kayak.jpg