Funktion has_tag(); in Wordpress richtig benutzt

Verfasst von Mattias Stiller am 28. September 2011 | Wordpress | Keine Kommentare
Funktion: has_tag(); Wordpress Tutorial

In diesem Artikel möchte ich euch einmal die Funktion has_tag(); etwas näher bringen und zeigen, was man mit dieser Funktion so alles hübsches machen kann. Als Beispiel werde ich den blauen Störer „CD Rezension“ den ihr bei allen CD-Rezensionsartikel sehen könnt nehmen. Im ersten Schritt schauen wir uns erst einmal meinen Artikel-Loop an:

Mein Artikel-Loop

  1. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  2. <!-- ########### BEGIN ARTICLE ########### -->
  3. <div <?php post_class('artikelbox'); ?>>
  4. <h2 class="readmore"><a href="<?php the_permalink(); ?>"><?php the_title() ?> <br /></a></h2>
  5. <div class="meta">Verfasst von <?php the_author() ?> am <?php the_time(__('d. F Y' )) ?> | <?php the_category(', ') ?> | <a href="<?php the_permalink(); ?>#commentform"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?></a> </div>
  6. <div class="text">
  7. <a href="<?php the_permalink(); ?>">
  8. <?php if ( has_tag('Rezension') ) { echo '<span class="cd-box"></span>'; } ?></a>
  9. ...
  10. <?php the_excerpt() ?>
  11. </div>
  12. </div>
  13. <!-- ########### END ARTICLE ########### -->
  14. <?php endwhile; endif; ?>

Interessant ist bei diesem Codebeispiel die Zeile 8. Hier wird nämlich definiert, wann der Störer angezeigt werden soll und zwar immer dann, wenn ein Artikel das Schlagwort (Tag) Rezension besitzt. Der Code steht quasi für: Wenn Artikel Schlagwort Rezension hat dann zeige das <span> an.

If-Else Anweisung für die Funktion has_tag();

  1. <?php if ( has_tag('Rezension') ) { echo '<span class="cd-box"></span>'; } ?>

im Frontend bzw. in dessen Quellcode sieht das ganze dann wie folgt aus:

  1. <div class="post-359 post artikelbox">
  2. <span class="cd-box"></span>
  3. ...

Nun ist dem aufmerksamen Beobachter natürlich aufgefallen, dass der Störer etwas außerhalb des eigentlichen Artikels liegt. Das bekommt man mittels position: absolute; hin. Aber damit dieser Befehl funktioniert, muss man einem sogenannten Elternelement, ein position: relative; mitgeben. Wie das Verhältnis der unterschiedlichen position:;-Befehle ist könnt ihr hier sehr gut nachlesen. Kommen wir aber nun zu der notwendigen CSS-Anpassung:

CSS-Befehle für den Button

  1. div.artikel .category-musik {
  2. position: relative;
  3. }
  4. div.artikel .cd-box {
  5. background: url('images/cd-rezension.png') no-repeat 0 0;
  6. height: 115px;
  7. position: absolute;
  8. right: -32px;
  9. top: 32px;
  10. width: 115px;
  11. }

In Zeile 5. gebe ich dem oben genannten <span> die Hintergrundgrafik mit, also die eigentliche Störergrafik. Jetzt nur noch den Störer mittels top:; und left:; an die richtige Position gerückt und schon erscheint jedesmal wenn ich einem Artikel das Schlagwort Rezension mitgebe ein schöner großer blauer Störer. Ich hoffe, dass dieses kleine Tutorial euch ein wenig weitergeholfen hat und ich bald viele viele viele Störer in euren Artikelübersichten sehen kann.

Sorry, the comment form is closed at this time.