ワードプレスの記事一覧に、属しているカテゴリ名を複数表示したい

Question

###前提・実現したいこと
ワードプレスのトップページに、カテゴリごとの記事一覧を表示したいと思っています。

・サムネイル画像
・投稿日
・カテゴリ名
・新着記事かどうか（新着後３日間表示）
・タイトル
・本文を28文字表示

###発生している問題
カテゴリ名だけ表示できていません。

###問題が発生するまでの流れ
同じようなことを表現しているサイトのソースをコピーして、
archive.phpとstyle.cssにペーストしてみましたが
カテゴリ名は表示できませんでした。

###該当のソースコード

<div id="blog">
<div id="blog_box">
<div class="title">
 <h3-news><a href=""><b>お知らせ</b></a></h3>
</div>
<div class="list">
<?php query_posts('cat=28&posts_per_page=3&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
<div class="list_left">
<?php the_post_thumbnail(array(80,80), array('class' => 'left')); ?></a>
</div>

<div class="list_right">
<ul>
<li><div class="list_date"><?php echo get_the_date('Y.m.d'); ?></div></li>
<li><div class="list_new"><?php if( time() - get_the_time('G') < 259200 ): ?>NEW!<?php endif; ?></div></li>

<span class="infoCate"><?php echo $taxo_catelist; ?></span> 

<li><div class="list_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></li>
<li><div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,28).'...'; ?></div></li>
</ul>
</div>
 
<?php endwhile; ?>
<?php else : ?>
 
<p>記事が見つかりません</p>
 
<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
</div>
</div>

スタイルシートにもinfoCateを追加

#blog_box{
width:30%;
overflow: hidden;
float: left;
padding:10px;
margin:10px;
color:#a29385;
font-size:80%;

}


.infoCate a{
border-radius;:3px;
box-shadow:1px 1px 0 raba(0,0,0,0.1) iset;
}

.infoCate a:hover{
background-color:#000;
color:#f5f5f5;
Text-decoration:mpme;
}

どのように記述すれば、カテゴリ名を表示できるでしょうか。
カテゴリ名はそれぞれ色分けして表示して
カテゴリ名をクリックするとそのアーカイブページに飛ぶように設定したいです。
よろしくお願い致します。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」をお書きください。

[退会済みユーザー]

「うまくいかない」がどういう状況であるか、<<具体的>>に書いたほうがいいです。（ぱっと見、$taxo_catelistの未定義エラーが起きそうだなあとは思いますけど……）

[退会済みユーザー]

変数名からして、このサイト（http://wp.clean-navi.com/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%84%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%81%AE%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E8%A1%A8%E7%A4%BA%E3%82%92%E8%89%B2%E5%88%86%E3%81%91-2143.html）を参考にされているのでしょうか。(以下、編集追記)――と思いましたが、コピペで同じ変数名になっただけみたいですね。失礼しました。

Answer 1

色々とツッコミどころがあるソースコードですが、その部分は置いておきます。以下にデフォルトテーマで動作確認済のソースコードを置いておきます。

コピペされると思いますが、色々と手直ししていますので、ご自身のソースコードと見比べて、何処をどう変えたのか、何故変えたのかを確認してください。WordPressのドキュメントで関数とか調べれば用途がでてくるので分かると思います。

<div id="blog">
	<div id="blog_box">
		<div class="title">
			<h3 class="news"><a href=""><b>お知らせ</b></a></h3>
		</div>
		<div class="list">
			<?php query_posts('cat=59&posts_per_page=3&paged=' . $paged ); ?>
			<?php if(have_posts()): ?>
				<?php while(have_posts()): the_post();
					$catlist = '';
					$cats = get_the_category();

					if ( ! empty( $cats ) ) {
						foreach( $cats as $cat ) {
							$catlist .= '<span class="' . sanitize_html_class( $cat->slug ) . '"><a href="' . esc_url( get_category_link( $cat->term_id ) ) . '" rel="category">' . $cat->name . '</a></span>';
						}
					}
					?>

					<div class="list_left">
						<?php the_post_thumbnail(array(80,80), array('class' => 'left')); ?></a>
					</div>

					<div class="list_right">
						<ul>
							<li><div class="list_date"><?php echo get_the_date('Y.m.d'); ?></div></li>
							<?php if( time() - get_the_time('G') < 259200 ): ?>
								<li><div class="list_new">NEW!</div>
							<?php endif; ?>
							<li><div class="list_cat"><?php echo $catlist; ?></div></li>
							<li><div class="list_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></li>
							<li><div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,28).'...'; ?></div></li>
						</ul>
					</div>
				<?php endwhile; ?>
			<?php else : ?>

				<p>記事が見つかりません</p>

			<?php endif; ?>
			<?php wp_reset_query(); ?>
		</div>
	</div>
</div>

Comments

[fal]

ありがとうございます！勉強になります。
かなり表現したいことに近づきました！
あと、やってみたら複数カテゴリー表示すると段差ができてしまうことに気づきました。
できれば日付の右側にNew!とカテゴリを並べて表記したいと思いました。
下記のように書いてみたところ、New!とカテゴリは横並びになりましたが、日付の横には配置できませんでした。
どのように記述すればよいかご指南いただければ有難いです。

```
<div class="list_right">
<ul>
<li><div class="list_date"><?php echo get_the_date('Y.m.d'); ?></div>
<?php if( time() - get_the_time('G') < 259200 ): ?>
<div class="list_new">NEW!</div>
<?php endif; ?>
<div class="list_cat"><?php echo $catlist; ?></div></li>
<li><div class="list_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></li>
<li><div class="post_body"><?php echo mb_substr(strip_tags($post-> post_content),0,28).'...'; ?></div></li>
</ul>
</div>
```

[退会済みユーザー]

CSSで横並びにするか、divをspanなどのインライン要素に変更するとよいかと思います。

あと、質問の内容が変わっているので、本件は解決済にするなりして、別途CSSやHTMLの質問として質問されてはいかがでしょうか？

[fal]

ご指導いただき、ありがとうございます。
いろいろと慣れていなくて申し訳ありません。
今後ともよろしくお願い致します。m(_ _)m

Answer 2

質問の回答ではないのですが、query_posts ではなく WP_Query を使われたほうが良いです。また、トップページに表示する記事のカテゴリを絞る目的であれば、pre_get_postsフックで書き換えるほうが高速です。

【WordPressで押さえておきたい！get_posts,WP_Query,query_posts の違いと用例｜TECHNICAL BLOG｜株式会社エムハンド】
http://www.m-hand.co.jp/program/4119/

Comments

[fal]

リンク先の説明はとてもわかりやすく、勉強になりました。
ご指導いただき、ありがとうございます。

Answer 3

get_the_category_list()かget_the_term_list()で、投稿のカテゴリを取得できますよ。

テンプレートタグ/get the category list - WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_category_list

関数リファレンス/get the term list - WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_the_term_list

Comments

[fal]

お世話になります。つたない質問にご回答いただき、ありがとうございます。
ご回答いただいたように、get_the_category_list()でカテゴリ取得はできました。
先ほど情報追加修正の欄にご記入いただいた参考ページのように、カテゴリごとに色分けしてリンクをクリックするとそのアーカイブページに飛ぶようにしたいのでした。
そのことを質問に書けていませんでした。申し訳ありません。
参考ページをじっくりひもといてみて、チャレンジします。。。
勉強不足であちらこちらのソースを切り張りしてばかりしているので、混乱してきています。
お世話おかけして申し訳ありません。