WordPress: Transparente Grafiken in Blogposts kategorieabhängig einbinden

0

Als ich 2015 an meinem Responsive Design arbeite, berichtete ich stolz über meine Errungenschaft das Design der Blogposts von den Kategorien abhängig machen zu können!

Allerdings konnte ich meine damaligen Ideen nicht vollkommen umsetzen. Ich wollte mit transparenten Grafiken arbeiten, um meinen divs das viereckige Kastendesign zu nehmen. Allerdings hatte ich keine Ahnung, wie ich das machen soll, da bei WordPress alles auch noch variabel sein muss.

Nun habe ich vor einigen Wochen endlich einen Weg gefunden und nach und nach das angepasst, was ich damals nicht umsetzen konnte.

Wo finde ich den Code für meine Blogposts bei WordPress?

Im Loop! Der Loop kann sich in mehreren Dateien bzw. Templates befinden. Je nachdem welcher Inhalt ausgegeben werden soll, „sucht“ WordPress in einer bestimmten Reihenfolge bestimmte Templates, um den Inhalt anzuzeigen. Das schimpft sich Template Hierarchie und falls Du dich für dieses Thema genauer interessierst, dann empfehle ich dir diesen Artikel von WordPress.org. In dem Artikel wird diese sehr hilfreiche Darstellung erwähnt.

Meine einzelnen Blogposts (einen liest Du gerade ^^) lasse ich über die single-post.php auswerfen. Um es einfacher zu erklären, zeige ich Dir eine vereinfachte Version meines Templates (ohne Datum, Kategorien, Tags und Kommentare).

<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   <div class="entry">
      <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <h1><?php the_title(); ?></h1>
      <?php the_content( ); ?>
      </div>
   </div>

<?php else: ?>

   <div>
   (Fehlermeldung, wenn nichts gefunden werden konnte)
   </div>

<?php endif; ?>

Alles, was für mein Problem nicht relevant ist, ist grau gefärbt. Der lila gefärbte div war ein durchsichtiger div, dem lediglich eine Breite zugewiesen war. Alles darin passte sich diesem div an.

Dem blau gefärbten div wird durch PHP ordentlich viel Zeug als class zugewiesen, das wir in der Stylesheet verwenden können. Darunter befindet sich die Kategorie, der Du deinen Beitrag zugeordnet hast. Einer meiner Kategorien heißt Diverses und wird im Quelltext so ausgegeben: class=“category-diverses“. Das habe ich mir beim Redesign bereits zunutze gemacht, um Blogposts in dieser Kategorie so aussehen zu lassen:

altes Kategorie-Design

Div’s können sich unterordnen

Das wusste ich davor nicht und es ist mir nur zufällig aufgefallen, als ich mir die Stylesheet von Twenty Fifteen angeschaut habe. Für meinen Blog habe ich daher erstmal die zwei divs ausgetauscht:

   <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <div class="entry">
      <h1><?php the_title(); ?></h1>
      <?php the_content( ); ?>
      </div>
   </div>

Rollentausch: Den blau gefärbten div mache ich nun „unsichtbar“ und lege lediglich die Breite fest, da diese für jeden Post gleich groß sein soll, egal welcher Kategorie angehörig. Der lila gefärbte div kann in der Stylesheet nun nicht nur als .entry, sondern explizierter als .category-diverses .entry gestylt werden. Er übernimmt sozusagen die class des übergeordneten divs.

Das neue Design der Kategorie soll aussehen, wie ein weißes, aus einem Block gerissenes Papier. Der Text-Bereich soll daher ganz simpel weiß sein:

.category-diverses .entry {
 background: #fff;
}

Wie man sieht, funktioniert das mit den beiden class-Namen wunderbar! Nun kümmern wir uns aber endlich um meine transparenten Grafiken.

neues Textfeld

Dafür füge ich einen span ein, da ich nur eine Grafik ausgeben will und man unnötig viele divs vermeiden soll – habe ich irgendwo gelesen.

   <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
      <span id="top"></span>
      <div class="entry">
      <h1><?php the_title(); ?></h1>
      <?php the_content( ); ?>
      </div>
   </div>

Mein span hat die id top und ebenfalls die class category-diverses, die ich jetzt wie den entry div in der Stylesheet stylen kann:

.category-diverses #top {
 background: url(cat_leben_top.png) no-repeat top left;
 height: 31px;
 display: block;
}

Auch das hat super funktioniert und endlich habe ich meine transparente Grafik:

transparente Grafiken div WordPress

An dieser Stelle fragst Du dich vielleicht, warum ich eine transparente Grafik haben wollte, wenn mein Hintergrund sowieso monochrom ist. Nun, das wird sich in den nächsten Tagen ändern :D

Weitere neu gestylte Kategorien

Von meinem Umstyling sind nur zwei Kategorien verschont geblieben: Malerei und Zeichnungen. Die fand ich beide schön so, wie sie sind.

Die anderen Kategorien und meine Unterseiten habe ich genau mit dem gleichen Schema einer Schönheitskorrektur unterzogen. Als Nächstes ist eine Hintergrundgrafik dran, damit die Transparenz auch einen Zweck erfüllt.

Kategorie Oh-Man

Kategorie Oh-Man.de

Kategorie Hilfreich:

Kategorie Hilfreich

Unterseiten:

Unterseiten

Kategorie: Oh-Man
Tags: ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.

Scroll to Top

Hier werden (wie auf den meisten Websites) Cookies verwendet. Wenn Du dies zu Kenntnis genommen hast und Oh-Man.de weiterhin nutzen möchtest, stimme bitte zu. Mehr erfahren

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn Du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen