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

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

STEP1:カテゴリーの画像があれば画像を表示、なければ今までどおり

プラグインのCategory Imagesを利用してカテゴリーごとの画像を登録できるようにした。その関数とlightningの表示部分の処理を修正してカテゴリーの画像があれば画像を表示、なければ今までどおりテキストとその背景に色を付ける表示をする。以下のように修正した。

プラグインのCategory Images

こんな感じでカテゴリーの画像を設定できます。表示はそれぞれの環境のテーマ等のphpコードを変更し、このプラグインの関数を呼び出す必要があります。

コードの修正箇所1

/opt/bitnami/wordpress/wp-content/themes/lightning/_g3/template-parts/page-header.php

の一番下

<!-- //categoryだったらの条件はz_taxonomy_image()に入っている -->
<?php
if (function_exists('z_taxonomy_image')){
  $taximage = z_taxonomy_image(); //これで画像表示のecho、成功時にもhtmlコードを返すようにした
  if(!empty($taximage))           //画像があったら
    echo wp_kses( apply_filters( 'lightning_page_header_title_html', $page_header_title_html ), $allowed_html ); //カテゴリー名
 }
?>

<!-- //edit 青い枠 -->
<?php
if (empty($taximage)){ //画像がなかったらこれまで通りの青い枠+文字
  echo '<div class="page-header"><div class="page-header-inner container">';
  echo wp_kses( apply_filters( 'lightning_page_header_title_html', $page_header_title_html ), $allowed_html );
  echo ('</div></div>');
 }
?>

<!-- [ /.page-header ] -->

変更量が多いので元あったコードっぽいのだけ色を付ける。
echo はecho();とecho 'xxxx'の2つの表現がある。()なしで「'」で括れば良くて、その時は「"」を「\"」とかしなくて良い。「"」でくくっても良いのだが、そのときは元の「"」は「\"」にする必要がある？

2022/08/03追記

本記事の内容から全体の横幅より画像の横幅が狭い場合、左寄せになってたので中央寄せにするように修正しています。htmlのタグの出力を追加してますのでコピペするならこちらからするのがおすすめです。

カテゴリーイメージ画像を中央に寄せる

カテゴリートップページと投稿ページにカテゴリーごとのイメージ画像を表示するようにしましたが、横幅が小さめの画像の場合、特にPC表示の際に左寄せで表示されてました…

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

コードの修正箇所2

プラグイン側のコードのz_taxonomy_image()で画像があったかどうか知りたい。がechoしないときだけ返り値を変えす謎仕様だったので、echoしても返すようにした。
/opt/bitnami/wordpress/wp-content/plugins/categories-images/categories-images.php
関数はzTaxonomyImage()

        if ($echo)    echo $taxonomy_image;
        //else //edit 画像があったかどうかを判定したい
	return $taxonomy_image;
    }

具体的にはelseの構文をコメントアウトして下のreturn $xxxを無条件で返す

修正結果

テスト環境での結果表示です。
プラグインのCategory Imagesでカテゴリーに画像を設定したものはカテゴリーがその画像とカテゴリー名を表示しました。
青帯とカテゴリー名は非表示にして、カテゴリー名は次のステップのため、別に出しています。

画像を設定していないカテゴリーはこれまで通り、青バックの中央に文字です。

ちなみにlightningはしょぼいからできないのだと思ってのですが、調べてみると有料のもので普通にできるということがわかりました。なので、金で解決する手段もあります。また、外のテーマを探しても良いと思います。興味がてらこのまま突き進んでみます。

STEP2:投稿ページにも適用

また投稿ページにもカテゴリー画像は印象のため必要。lightning側では同じ処理なのですが、プラグイン側でページの種類を限定している。プラグイン側の同じファイルを修正します。
/opt/bitnami/wordpress/wp-content/plugins/categories-images/categories-images.php
関数はzTaxonomyImage()

   function zTaxonomyImage($term_id = NULL, $size = 'full', $attr = NULL, $echo = TRUE) {
        if (!$term_id) {
            if (is_category())
	      $term_id = get_query_var('cat');
            elseif (is_tag())
	      $term_id = get_query_var('tag_id');
            elseif (is_tax()) {
                $current_term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
                $term_id = $current_term->term_id;
            }
	    elseif(is_single()){ //edit 追加 投稿記事のときは上記どれでもない。通常記事である判定は？is_single()
	      $cats   = get_the_category(); //categoryは配列で入る
	      $term_id = $cats[0]->term_id;  //一つ目のcategory IDを入れる
	    }                    //---editここまで
	    //echo ("DEBUG:term_id:"); echo ($term_id);//edit is_catのときは21で、通常記事のときは何も入ってない
        }

青いところを追記します。
is_single()というのが単体の投稿ページの判定関数だということがわかりました。
その後の処理は前回、投稿記事で最近の投稿を同じカテゴリーのものにしたときに得たカテゴリーIDとってくるようにした知識です。

WordPressの投稿ページの「最近の投稿」に同じカテゴリのものだけを表示

前回に引き続き、見に来た人が興味のない別のコンテンツが「最近の投稿」に表示されないようにする方法の模索です。ググっても出てきません。分析していきます。成功すれ…

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

ちなみに上にあるzTaxonomyImage_url()という関数も同じ処理を書いてますが、今回使ってないのでスルーすることにします。STEP1の修正がそのままではできないので。同じ処理を書くことはクローンコードと言って良くないコードで腹立ちます。このプラグインはいじらないといけない2箇所中2箇所の100%があまり良くないコードです。

次にやりたいこと

• 文字を画像に重ねる

lightningトップページのように文字を画像に重ねたい。複数画像のスクロールはできなくて良い。どうやら基本はスタイルシートで指定するようだが、スタイルシートを指定しない方法もあるみたい。次回の記事に書きます。