タクソノミーのカテゴリ毎にタイトル横にアイコンをつけたい

gatespace様

お忙しいところホントにありがとうございます。
説明が下手くそですいません。

上手に説明できるかわかりませんがやりたいことはこんな事です。
現在私のindex.phpには「最新ニュース01」「最新ニュース02」があります。

下記のように「最新ニュース01」は普通の投稿を使って記事を書いているもので、
記事のタイトルとカテゴリ毎のアイコンが出力表示されるようになっています。

<ul id="new_topics_list">

<?php $posts = get_posts('numberposts=5&order=desc'); ?>
	<?php foreach($posts as $post): ?>
		<?php
			$cats = get_the_category($post->id);
			$cat = $cats[0];
			$img = '<img src="' . get_bloginfo('template_url'). '/images/category-'
			  . $cat->category_nicename . '.jpg" alt="' . $cat->cat_name . '" />';
		?>
		<li><?php echo $img; ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php endforeach; ?>

	</ul>

これと同じように、「最新ニュース０２」も記事のタイトルとカテゴリ毎のアイコンが出力表示されるようにしたいのですが、「最新ニュース０２」はカスタム投稿でつくられているせいなのかカテゴリ毎のアイコン画像が表示されません。
とっても恥かしいのですが「最新ニュース０２」の現状の記述がこれです。

<ul id="new_topics_list">

<?php $loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?>

		<?php
			$cats = get_the_category($post->id);
			$cat = $cats[0];
			$img = '<img src="' . get_bloginfo('template_url'). '/images/cat-'
			  . $cat->category_nicename . '.jpg" alt="' . $cat->cat_name . '" />';
		?>
		<li><?php echo $img; ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>

<?php endwhile; ?>

	</ul>

上記のように「カテゴリ毎のアイコン」＋「記事タイトル」のように出力させたいのです。

なんて説明すればいいかな。。。わかりますでしょうか。

gatespaceさん

何度もすいません。
gatespaceさんから頂いた物をベースにやってみたのですがアイコンが出てくれません。
下記のように記述したのですが、全然遠いでしょうか。
教えてください。

<?php
$loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );

if($loop->have_posts()) : // 該当する投稿がある場合
?>
	<ul id="new_topics_list">
	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>

		<li>

		<?php // カスタムタクソノミー 'books-cat' の処理
		$terms = get_the_terms( get_the_ID(), 'books-cat' ); // 投稿に紐づけられた 'books-cat' のタームをすべて取得
		$term = $terms[0];
		$img = '<img src="' . get_bloginfo('template_url'). '/images/term-'
			  . $term->slug . '.jpg" alt="' . $term->term_name . '" />';
		?>
		<?php echo $img; ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
		</li>

	<?php endwhile; // ループ終わり ?>
	</ul>
<?php else: // 該当する投稿が無い場合 ?>
	<p>該当する投稿はありません</p>
<?php endif; ?>

フォーラム等の記事を見ながらどうにか下記のような記述を書いたら
アイコンがうまく表示されたのですが、

<?php
$loop = new WP_Query( array( 'post_type' => 'books', 'posts_per_page' => 4 ) );

if($loop->have_posts()) : // 該当する投稿がある場合
?>
	<ul id="new_topics_list">
	<?php while ( $loop->have_posts() ) : $loop->the_post(); // ループ開始 ?>

		<li>

		<?php // カスタムタクソノミー 'books-cat' の処理
		$termbook = array_shift(get_the_terms($post->ID, 'books-cat'));
		$termbookimg = esc_html($termbook->slug);
		$img = '<img src="' . get_bloginfo('template_url'). '/images/term-'
			 . $termbookimg. '.jpg" alt="' . $cat->cat_name . '" />';
		?>

		<?php echo $img; ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

		</li>

	<?php endwhile; // ループ終わり ?>
	</ul>
<?php else: // 該当する投稿が無い場合 ?>
	<p>該当する投稿はありません</p>
<?php endif; ?>

上記記述内の、

$termbook = array_shift(get_the_terms($post->ID, 'books-cat'));
この中にある、array_shiftっていうのは何故必要なのでしょうか。

教えてください。

gatespaceさん

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

昨晩から、上記に頂いた記述を試しているのですがどうしてもアイコンが表示されません。
現在も色々と自分なりにいじっては試してとやっているのですがどうしてもうまくいきません。
上記頂いた記述は何か記述を加える必要がありますか？

それだけでも教えていただけると助かります。
よろしくお願いします。

gatespaceさん

何度もスイマセンでした。
無事出来ました。ありがとうございます。