的WordPress的：条件标记在CSS的div背景图像？

Question

For the meta-data categories on my blog I have that part of the loop in its own div with a background image. I'd like to have the background image change based on the category of that post. I believe I can do this in css with a set of conditional tags (something along the lines of if category () echo red.png) Any ideas of where to start with this or if it is possible? The site is blog.printstitchandpaste.com and the image to be changed is the little flag/banner behind the category name. Thanks!

Answer 1

In your CSS, you can have something like:

.category_callout.cat-1-slug {
  background-image: url('category-1-image.jpg');
}
.category_callout.cat-2-slug {
  background-image: url('category-2-image.jpg');
}

And so on.

In your theme, where you have your .category_callout div, get the categories and echo the slugs. For example:

<div class="category_callout <?php foreach( get_the_category() as $cat ) { echo $cat->slug . ' '; } ?>">

This will add all the post categories slugs. If you want to use only the first category, do something like:

<?php $cat = get_the_category(); ?>
<div class="category_callout <?php echo $cat[0]->slug; ?> ">

See http://codex.wordpress.org/Function_Reference/get_the_category