wordpress popular postsにて、カテゴリ名（複数の場合あり）とタグ（1つ）をリンクなしで表示したい

Question

現在制作しているページ(静的サイトをwordpress化)のサイドバーに、人気記事の一覧を表示させています。

リンク先、タイトル、サムネイルは思ったように表示されました。
しかしカテゴリ名とタグの出力がうまくいきません。

実現したいこと

カテゴリに関しては2種類あり（増えることはなく2種類で固定。例：カテゴリA,カテゴリB）、タグには各記事の番号を3桁で入れています（例：001,002）。

これをリンクなしで出力したいのですが、面倒なことにカテゴリに関しては2種類両方に属している場合もあり、その場合は2種類両方出力したく、さらにカテゴリAは背景が灰色でカテゴリBは背景が黒、のように表示の仕方も変えたいです。（タグはテキストのみ表示されればOK）

つまりカテゴリによる条件分岐も必要だと考えております。

■カテゴリAの時に出力されるHTML

<p class="category_a">カテゴリA</p>

■カテゴリBの時に出力されるHTML

<p class="category_b">カテゴリB</p>

■両カテゴリの時に出力されるHTML

<p class="category_a">カテゴリA</p><p class="category_b">カテゴリB</p>

該当のソースコード

<?php 
add_filter( 'wpp_custom_html', 'custom_wpp_html_list', 10, 2 );
function custom_wpp_html_list( $popular_posts, $instance ) {
	foreach( $popular_posts as $popular_post ) {
	// タイトル
	$title = $popular_post->title;
	// リンク
	$permalink = get_permalink( $popular_post->id );
	// サムネイル
	$thumb_id = get_post_thumbnail_id($popular_post->id);
	$thumb_img = wp_get_attachment_image_src($thumb_id, $size);
	$thumb_src = $thumb_img[0];
	// 閲覧数
	$pageviews = $popular_post->pageviews;
	$output .= '<li id="">' . "\n";
	$output .= '<a href="' . $permalink . '" title="' . $title . '" class="iframe"><div class="thumbnail"><p><img src="' . $thumb_src . '" alt="' . $title . '"></div><section><div class="info"><p class="number">001</p><p class="category_a">カテゴリA</p></div><h3>' . $title . '</h3></section></a>' . "\n";
	$output .= '</li>' . "\n";
	}
	return $output;
} ?>

試したこと

下記ページを参考に試してみましたが、1つしかカテゴリが表示されないので、この方法は使えないかなと…。

https://www.nxworld.net/wordpress/wp-wpp-custom-html.html

どなたかいい方法を知っている方がいましたらぜひご教示いただければと思います。

Answer 1

表示させるカテゴリの数に変動がないことが仕様として決まっていたため、それぞれのパターンで違うクラスを付与してデザインを変える方法にした。

Answer 2

こんな感じでしょうか。slugで引っ掛けていますが、カテゴリ名などお好みで変えてください。
$category_htmlという変数をカテゴリを表示したい箇所で出力してください。

$target_categories['A'] = '<p class="category_a">カテゴリA</p>';
$target_categories['B'] = '<p class="category_b">カテゴリB</p>';

$category_html = '';
foreach($popular_posts as $popular_post) {
    (省略)
    $categories = get_the_category($popular_post->id);
    if ($categories) {
        foreach ($target_categories as $slug => $html) {
            foreach ($categories as $category) {
                if ($slug == $category->slug) {
                    $category_html .= $html."\n";
                    break;
                }
            }
        }
    }
}

Comments

[saku615]

ご回答ありがとうございます。

以下のように記述したのですが、カテゴリが出力される部分に「Array」と表示されてしまいます…

<?php
add_filter( 'wpp_custom_html', 'custom_wpp_html_list', 10, 2 );
function custom_wpp_html_list( $popular_posts, $instance ) {
$target_categories['A'] = '<p class="category_a">カテゴリA</p>';
$target_categories['B'] = '<p class="category_b">カテゴリB</p>';
foreach( $popular_posts as $popular_post ) {
// タイトル
$title = $popular_post->title;
// リンク
$permalink = get_permalink( $popular_post->id );
// サムネイル
$thumb_id = get_post_thumbnail_id($popular_post->id);
$thumb_img = wp_get_attachment_image_src($thumb_id, $size);
$thumb_src = $thumb_img[0];
// 閲覧数
$pageviews = $popular_post->pageviews;
$categories = get_the_category($popular_post->id);
if ($categories) {
foreach ($target_categories as $slug => $html) {
foreach ($categories as $category) {
if ($slug == $category->slug) {
$output .= $html."\n";
break;
}
}
}
}
$output .= '<li id="">' . "\n";
$output .= '<a href="' . $permalink . '" title="' . $title . '" class="iframe"><div class="thumbnail"><p><img src="' . $thumb_src . '" alt="' . $title . '"></div><section><div class="info"><p class="number">001</p>' . $categories . '</div><h3>' . $title . '</h3></section></a>' . "\n";
$output .= '</li>' . "\n";
}
return $output;
} ?>

[tabuu]

コードを少し使いやすくしました。$categoriesではなく$category_htmlを出力するようにしてみてください。

[saku615]

返信が遅くなってしまい申し訳ございません。
今回に関しては表示させるカテゴリの数に変動がないことが仕様として決まっていたため、それぞれのパターンで違うクラスを付与してデザインを変える方法にしました。

ありがとうございました。