在Wordpress中显示循环内每个帖子的类别名称

I'm modifying a pre-built theme to display 3 'featured posts' before the main grid of all posts on the index.php home page. I thought that the best way to do this was to do another loop before the main loop that queries posts with the category 'featured'. I need it to display the title of the post as well as the post categories in front of a background image of the post thumbnail.

However, when I use the_category(); the background image is no longer clickable and it seems that the anchor tag duplicates and closes itself around every element in the loop. My code is as follows:

<?php

$query = array(
'posts_per_page' => 3,
'post_type'      => 'post',
'category_name'  => 'featured',
'orderby'        => 'date',
'order'          => 'DESC'
);

$featured_home = new WP_Query( $query );

if( $featured_home->have_posts() ) {

?>

<div class="container featured-home">
    <?php while ( $featured_home->have_posts() ) : $featured_home->the_post();?>
    <div class="featured-home-box">
        <a href="<?php the_permalink(); ?>">
            <div class="featured-home-img" <?php
            if ( $thumbnail_id = get_post_thumbnail_id() ) {
                if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
                    printf( ' style="background-image: url(%s);"', $image_src[0] );     
                }?>>
                <div class="blog-info-content">
                    <span class="cat"><?php the_category(); ?></span>
                    <h3><?php the_title(); ?></h3>
                </div>
            </div>
        </a>
    </div>
<?php
endwhile;
?>
</div>
<?php
}
wp_reset_postdata();
?>

Everything works fine until I add the_category();.

Now when I inspect the boxes I see this:

<div class="featured-home-img" style="background-image: url(bag.jpg);">
    <a href="my-favorite-bag/"></a>
    <div class="blog-info-content">
        <a href="my-favorite-bag/">
            <span class="cat"></span>
        </a>
        <ul class="post-categories">
            <a href="my-favorite-bag/"></a>
            <li>
                <a href="my-favorite-bag/"></a>
                <a href="category-culture/" rel="category tag">Culture</a>
            </li>
            <li>
                <a href="category-featured/" rel="category tag">Featured</a>        
            </li>
        </ul>
        <h3>My Favorite Bag</h3>
    </div>
</div>

The anchor link with "my-favorite-bag" (the permalink) is duplicated over and over again. Also, the category is NOT enclosed in the span with the class of "cat", as I would expect.

Why does this only happen when I add the_category or get_the_category?

How do I show the categories for each post in this loop?

The easiest way to get the category would be by passing the get_the_category() function the current post id.

$post_id = get_the_ID(); // or use the post id if you already have it
$category_object = get_the_category($post_id);
$category_name = $category_object[0]->name;

The get_the_category() function returns an object that contains properties such as the category id, it's name, etc...

Also, note that when using multiple wordpress loops, you may have to call wp_reset_postdata() to reset to the original query.

You can read more here:

Wordpress Wp_Query

get_the_category()

You can get the category name in number of ways:

within the post loop, if your posts have only one category then use as :

$cats = get_the_category();
$cat_name = $cats[0]->name;

and if your post have more than 2 categories then you can look for get_the_category_list().

Reference Link: https://codex.wordpress.org/Function_Reference/get_the_category_list.

for getting the link for this category you can use

$category = get_the_category(); 
echo '<a href="'.get_category_link($category[0]->cat_ID).'"><img src="'.$category[0]->cat_name.'" alt="'.$category[0]->cat_name.'" /></a>';

While working with the category archive (this could be used before the loop to save the category name to the $cat_name variable):

$cat_name = get_category(get_query_var('cat'))->name;

Reference Link: http://codex.wordpress.org/Function_Reference/get_category