Artikelbild Kategorie-Klasse zuweisen?

fLoRi

Hallo zusammen!

Ich suche verzweifelt nach einer Lösung, um meinen Artikelbildern eine Klasse anzuhängen, die zeigt, in welcher Kategorie der Artikel des Artikelbildes liegt.

Hintergrund: Ich liste auf meiner Startseite alle Artikel aus allen Kategorien. Es werden nur quadratische Bilder gelistet, also die Artikelbilder der Artikel. Diese Artikelbilder haben ein Mouseover, welches den Titel und die Tags des Artikels anzeigt. Ich möchte, dass sich über die Kachel eine Grafik legt. Diese Grafik soll abhängig davon sein, in welcher Kategorie der Artikel liegt. Doch wie schaffe ich es, dass eine CSS-Klasse eingefügt wird?

Danke schon mal, Florian!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Können wir mal ein Link zur Seite bekommen, damit wir sehen was bereits wie umgesetzt ist?

fLoRi

Darf ich leider nicht freigeben! ;(
Ich muss es "nur" schaffen, dass the_post-thumbnail die Klasse erhält, mit dem Namen der Kategorie in der der dazugehörige Artikel liegt.
Dann kann ich jeder Klasse im CSS ein anderes PNG zuweisen.

SirEctor

Betrachte folgendes nur mal als Brainstorming:
Könnte man das nicht über Conditional Tags, also z.B. eine is_category(ID)-Abfrage lenken? Oder werden die Thumbs dann sortiert ausgegeben?!

fLoRi

Ich habe folgende Related-Funktion, die auf einer Single-Seite 10 Artikelbilder zeigt, zu Artikeln mit den gleichen Tags:

PHP

<div id="related">
    <?php
  $tags = wp_get_post_tags($post->ID);
    if ($tags) {
		      $the_tags = array();    
			  foreach($tags as $each_tag) $the_tags[] = $each_tag->term_id;   
			  $args=array(      
			  'tag__in' => $the_tags,      
			  'post__not_in' => array($post->ID),      
			  'showposts' => 10, // Anzahl der aufzulistenden Artikel        
			  'caller_get_posts' => 1 // Verhindert, dass Sticky Posts gelistet werden  
			  );    
			  $new_query = new WP_Query($args);    
			  if( $new_query->have_posts() ) {    
			   echo '<ul>'; // Ueberschrift der Liste    
			   while ($new_query->have_posts()) {      $new_query->the_post(); ?>
    <li><div class="related-kachel"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
      <?php if ( has_post_thumbnail() ) {the_post_thumbnail('related-kacheln');} else { ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/leere-kachel-76.png"  />
      <?php } ?>
      </a></div></li>
    <?php }     echo '</ul>';  }  }?>
  </div>

Alles anzeigen

Ich möchte, dass jedes gelistete Artikel-Bild eine Klasse zugewiesen bekommt, an der man erkennt, in welcher Kategorie der Artikel liegt.
Es gibt drei Kategorien: Sound, Video, Text.
Ich würde diesen 3 Klassen dann gerne ein Hintergrundbild zuweisen, so dass beim späteren Mouse-Over optisch ersichtlich ist, in welcher Kategorie sich der Artikel befindet.
Wie aber bekomme ich die Kategorie als Klassen-Namen um das Artikel-Bild?

fuhrmara

Wie man ein Post-Thumbnail mit einer Klasse versieht gibt es hier :

http://codex.wordpress.org/Function_Refer…_post_thumbnail

Kategorie gibt es hier :

http://codex.wordpress.org/Function_Refer…et_the_category

Problem ist, das Wordpress immer ein Kategorien-Array zurückgibt, da ein Artikel ja (rein theoretisch) auch mehreren Kategorien zugeordnet werden kann. Man muss sich also den ersten Eintrag des Arrays schnappen.

fuhrmara

Also mal trocken programmiert.

PHP

<?php 
if ( has_post_thumbnail() ) { 




	$category = get_the_category(); 
	echo $category[0]->cat_name;	
	the_post_thumbnail('', array('class' => $category[0]->cat_name) );




} else { 




	?>
	<img src="<?php echo get_template_directory_uri(); ?>/images/leere-kachel-76.png"  />
	<?php




} 
?>

Alles anzeigen

fLoRi

Ein Stückchen weiter bin ich mit eurer Hilfe schon mal. Vielen Dank!

Ich habe es jetzt so:

PHP

<div id="related">
    <?php
  $tags = wp_get_post_tags($post->ID);
    if ($tags) {
		      $the_tags = array();    
			  foreach($tags as $each_tag) $the_tags[] = $each_tag->term_id;   
			  $args=array(      
			  'tag__in' => $the_tags,      
			  'post__not_in' => array($post->ID),      
			  'showposts' => 10, // Anzahl der aufzulistenden Artikel        
			  'caller_get_posts' => 1 // Verhindert, dass Sticky Posts gelistet werden  
			  );    
			  $new_query = new WP_Query($args);    
			  if( $new_query->have_posts() ) {    
			   echo '<ul>'; // Ueberschrift der Liste    
			   while ($new_query->have_posts()) {      $new_query->the_post(); ?>
    <li>
      <div class="related-kachel"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php 
if ( has_post_thumbnail() ) { 




	$category = get_the_category(); 
	
	the_post_thumbnail('related-kacheln', array('class' => $category[0]->cat_name) );




} else { 




	?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/leere-kachel-76.png"  />
        <?php




} 
?>
        </a></div>
    </li>
    <?php }     echo '</ul>';  }  }?>
  </div>

Alles anzeigen

Ein Denkfehler meinerseits aber ... Ich brauche die Kategorie in meinem Container

also so:

fuhrmara

Also dann einfach an der richtigen Position ausführen :

PHP

while ($new_query->have_posts()) {      
$new_query->the_post(); 
$category = get_the_category(); ?>
<li>
<div class="related-kachel <?php echo $category[0]->cat_name; ?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">


        <?php if ( has_post_thumbnail() ) { the_post_thumbnail('related-kacheln');


} else {

Alles anzeigen

Damit wäre die Kategorie dann aber nicht mehr im Thumbnail

fLoRi

Vielen Dank fuhrmara! Du hast mir sehr geholfen und ich habe einiges gelernt...

Es funktioniert mit ein wenig Anpassung und sieht jetzt so bei mir aus:

PHP

<div id="related">
    <?php
  $tags = wp_get_post_tags($post->ID);
    if ($tags) {
		      $the_tags = array();    
			  foreach($tags as $each_tag) $the_tags[] = $each_tag->term_id;   
			  $args=array(      
			  'tag__in' => $the_tags,      
			  'post__not_in' => array($post->ID),      
			  'showposts' => 10, // Anzahl der aufzulistenden Artikel        
			  'caller_get_posts' => 1 // Verhindert, dass Sticky Posts gelistet werden  
			  );    
			  $new_query = new WP_Query($args);    
			  if( $new_query->have_posts() ) {    
			   echo '<ul>'; // Ueberschrift der Liste    
			   while ($new_query->have_posts()) {      $new_query->the_post(); ?>
    <li>
      <?php $category = get_the_category(); ?>
      <div class="related-kachel <?php echo $category[0]->cat_name; ?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php 
if ( has_post_thumbnail() ) { 
	the_post_thumbnail('related-kacheln');
} else { 
	?>
        <img src="<?php echo get_template_directory_uri(); ?>/images/leere-kachel-76.png"  />
        <?php
} 
?>
        </a></div>
    </li>
    <?php }     echo '</ul>';  }  }?>
  </div>

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Artikelbild Kategorie-Klasse zuweisen?

Jetzt mitmachen!