#0819 [Tutorial] WordPress ~ Label Einbindung

Eine neue Kategorie – da ich nun schon öfters dazu gefragt wurde, wollte ich dazu einmal ein kleines Tutorial machen – so haben auch andere was davon und ich kann einfach auf den Post verweisen :D

Worum es im ersten Eintrag geht?

Label-Beispiel

Um die LabelsAnzeige” und Co, die auf vielen Beitragsbildern hier im Blog zu sehen sind.

Das Tutorial bezieht sich ausschließlich auf WordPress, da ich euch hier ein Plugin vorstelle und erkläre, wie ihr es einbinden und nutzen könnt.

 

Was wird benötigt?

 

Der Vorteil an PSPad ist, dass man kein extra FTP-Programm benötigt, da man die Dateien direkt online editieren kann.
Jedoch sollte man immer ein Backup (Kopie) von den Dateien machen, die man bearbeiten will – sollte doch mal etwas schief gehen ;)

 

Plugin einstellen

Zuerst sollte man sich überlegen, welche Labels man nutzen möchte.

Ich habe mich für folgende entschieden:

  • Anzeige
    Man kann auch “Werbung” nutzen – ich persönlich fand “Anzeige” vom Wording her schöner.
    (Wurde das Produkt kostenlos zur Verfügung gestellt und/oder wird der Beitrag an sich bezahlt? Enthält der Beitrag Werbung, Amazonlinks etc?)
  • kostenlos zur Verfügung
    (Produkt wurde kostenlos zur Verfügung gestellt)
  • rabattiert erhalten
    (zu einem günstigeren Preis gekauft)
  • selbst gekauft
    (wurde komplett mit eigenem Geld erworben)

 

Um die Labels zu hinterlegen geht man im WordPress-Dashboard auf “Eigene Felder“.

Hier gibt es dann eine Übersicht über die bestehenden Labels – natürlich kann man dieses Plugin auch an anderen Stellen nutzen und ähnlich einbinden, ich habe es allerdings nur für diese Funktion bisher gebraucht.

Bei Klick auf den ButtonNeu erstellen” kommt man dann zu einer Eingabemaske.

Damit ihr besser versteht, was ich wie und wo eingestellt hab, zeige ich euch das ganze am besten anhand dem LabelAnzeige“.

Bei Klick auf die Bezeichnung öffnet sich ein weiteres Formular, indem alle Infos eingetragen werden.

Eine kleine Erklärung zu den einzelnen Sachen:

  • Bezeichnung
    Das ist der Text, der in der Beitragserstellung angezeigt wird.
  • Name
    Diesen Wert benötigt ihr später im Quellcode, damit ihr das Label an einer beliebigen Stelle einbinden könnt.
  • Feld-Typ
    Am einfachsten ist es, wenn ihr hier Checkbox wählt – so müsst ihr bei den einzelnen Posts später nur einen Haken per Klick setzen.
  • Feld-Anweisungen
    Hier tragt ihr einen kurzen Erklärungstext ein, damit ihr wisst, welches Label wofür eigentlich da ist.
  • Erforderlich?
    Muss diese Checkbox aktiv sein? In unserem Fall nicht, da es eine optionale Information ist.
  • Auswahlmöglichkeiten
    Ich habe mich für die einfachste Variante hier entschieden “ja : ja” – links der Wert, rechts die Beschreibung dazu.
  • Layout
    Wo soll es in der Beitragserstellung angezeigt werden – unter dem Editor oder in der rechten Spalte. Ich habe mich für “Horizontal” (rechte Spalte) entschieden.
  • Bedingungen für Anzeige
    Hier habe ich “Nein” gewählt, da es optional ist.

Nachdem man alles ausgefüllt hat, klickt man auf den “VeröffentlichenButton und tada – wir sind mit der Label-Einstellung fertig.

So können nun auch alle anderen Labels eingetragen werden, die man nutzen möchte.

 

In der Beitragserstellung sieht das Ganze dann so aus bei mir.

 

Quellcode einbinden

Je nachdem, wo ihr die Labels anzeigen lassen wollt, müsst ihr folgenden Quellcode einbinden.

<!-- post marked -->
	<?php if(get_field('anzeige')) { ?> Anzeige <?php } ?>
	<?php if(get_field('kostenlos')) { ?> kostenlos zur Verfügung <?php } ?>
	<?php if(get_field('rabattiert')) { ?> rabattiert erhalten <?php } ?>
	<?php if(get_field('selbstgekauft')) { ?> selbst gekauft <?php } ?>
<!-- /post marked -->

Der Code hier prüft, ob eine der Checkboxen angehakt wurde und gibt dann den entsprechenden Text aus.

In diesem Beispiel wird der Text einfach so ausgegeben.

Ich selbst habe es so gemacht, dass ich ein Div und mehrere Spans benutze, die ich dann per CSS positioniere:

loop.php

<?php 
$isAnzeige = get_field('anzeige'); 
$isKostenlos = get_field('kostenlos'); 
$isRabattiert = get_field('rabattiert'); 
$isSelbstgekauft = get_field('selbstgekauft'); 
?>
<?php if($isAnzeige || $isKostenlos || $isRabattiert || $isSelbstgekauft) { ?>
	<!-- post marked -->
	<div class="post-is-marked overview">
		<?php if($isAnzeige) { ?><span class="marked-as-ad"></span><?php } ?>
		<?php if($isKostenlos) { ?><span class="marked-as-free"></span><?php } ?>
		<?php if($isRabattiert) { ?><span class="marked-as-discount"></span><?php } ?>
		<?php if($isSelbstgekauft) { ?><span class="marked-as-bought"></span><?php } ?>
	</div>
	<!-- /post marked -->
<?php } ?>

single.php

<?php 
$markedCss = ''; 
$isAnzeige = get_field('anzeige'); 
$isKostenlos = get_field('kostenlos'); 
$isRabattiert = get_field('rabattiert'); 
$isSelbstgekauft = get_field('selbstgekauft'); 

if($isAnzeige || $isKostenlos || $isRabattiert || $isSelbstgekauft) { 
	if($isRabattiert && $isSelbstgekauft) { 
		$markedCss = ' padding-discount-bought'; 
	} elseif($isKostenlos) { 
		$markedCss = ' padding-free'; 
	} elseif($isRabattiert) { 
		$markedCss = ' padding-discount'; 
	} elseif($isSelbstgekauft) { 
		$markedCss = ' padding-bought'; 
	} 
} 
?>
<?php if($isAnzeige || $isKostenlos || $isRabattiert || $isSelbstgekauft) { ?>
	<!-- post marked -->				
	<div class="post-is-marked">
		<?php if($isAnzeige) { ?><span class="marked-as-ad"></span><?php } ?>
		<?php if($isKostenlos) { ?><span class="marked-as-free"></span><?php } ?>
		<?php if($isRabattiert) { ?><span class="marked-as-discount"></span><?php } ?>
		<?php if($isSelbstgekauft) { ?><span class="marked-as-bought"></span><?php } ?>
	</div>
	<!-- /post marked -->
<?php } ?>

Hierfür benötigt ihr aber noch folgenden CSS Code:

/* Kennzeichnungen */
.post-is-marked {
   display: block;
   text-align: right;
   padding-bottom: 10px;
   margin-top: -20px;
}

@media screen and (min-width: 1025px) {
   .post-is-marked {
      position: absolute;
      top: 5px;
      right: -2px;
      margin-top: 0;
   }
}

.post-is-marked span {
   display: inline-block;
}
.post-is-marked span:after {
   display: inline-block;
   font-size: 11px;
   padding: 2px 5px;
   margin: 1px 2px;
   background-color: rgba(127, 136, 143, 0.2);
   border: 1px solid #aab3ba;
   border-radius: 2px;
}
.post-is-marked .marked-as-ad {
   display: block;
   margin-bottom: 5px;
}
.marked-as-ad:after {
   content: 'Anzeige';
}
.marked-as-free:after {
   content: 'kostenlos';
}
.marked-as-discount:after {
   content: 'rabattiert';
}
.marked-as-bought:after {
   content: 'selbst gekauft';
}
#banner .overview.post-is-marked {
   top: 3px;
}
.overview.post-is-marked {
   position: absolute;
   top: 18px;
   left: 2px;
   right: inherit;
   text-align: left;
   margin-top: 0;
}
@media screen and (min-width: 1025px) {
   #banner .overview.post-is-marked {
      top: inherit;
      bottom: 3px;
      padding-bottom: 0;
   }
   .overview.post-is-marked {
      top: 15px;
      left: 2px;
   }
}
.overview.post-is-marked .marked-as-ad {
   margin-bottom: 0;
}
.overview.post-is-marked span {
   display: block;
}
.overview.post-is-marked span:after {
   color: #c3ccd3;
   background-color: rgba(127, 136, 143, 0.9);
}
@media screen and (min-width: 1025px) {
   .entry-title.padding-discount-bought {
      padding-right: 150px;
   }
   .entry-title.padding-bought {
      padding-right: 100px;
   }
   .entry-title.padding-free {
      padding-right: 80px;
   }
}

 

Hier und da müsst ihr sicherlich noch ein paar Anpassungen machen, aber der Grundstein ist gelegt! :)

Das ist von Theme zu Theme unterschiedlich – bei mir gibt es eine loop.php und eine single.php (wie oben angegeben) – an sich habe ich es überall da eingesetzt, wo auch das thumbnail (bei mir mit der Funktion the_post_thumbnail() ) ausgegeben wird.
In anderen Themes gibt es statt der loop.php eine content.php – da müsst ihr euch ggf. etwas durchtesten.

Es kommt dann auch noch darauf an, ob ihr die Labels auf dem Bild haben wollt, oder z. B. vor dem Post-Titel etc.

Wichtig: Wenn ihr ein fertiges Theme benutzt, dann sichert eure Änderungen – bei jedem Theme-Update sind diese sonst komplett weg!

 

Wenn ihr noch Fragen habt oder etwas unverständlich ist, dann lasst es mich bitte wissen und ich update es im Post! :)

2 Kommentare

  • Vielen Dank für das leicht verständliche Tutorial.^^
    Mir sind diese Label-Einbindungen bei dir schon länger aufgefallen und ich habe mich auch immer gefragt, wie du das gemacht hast und/ob es dazu ein Plugin gibt. Die Frage wurde mir ja nun beantwortet – finde ich auch ziemlich praktisch, ich weiß allerdings nicht, ob das bei mir momentan von Nöten ist (da ich meinen Blog ja sowieso erst einmal aus dem Verkehr gezogen habe) und ich die Hauptseite eher nun etwas portalmäßig aufgebaut habe.

    Linkage und Partner werden aber wieder folgen. ❤

    Ich selber arbeite kaum bis gar nicht mit dem CSS Code im WordPress Template, weil ich da schnell Sorge habe, was falsch zu machen und nachher baue ich das gesamte Theme auseinander und finde den Fehler nicht mehr. XD

    • Gern! :)
      Ich hoffe, er ist dem ein oder anderen nützlich und auch wirklich verständlich genug.. :’D

      Ja, das Problem ist halt, dass man es bei einem Themeupdate immer wieder neu einbauen muss – das sollte ich vielleicht noch hinzufügen.. ^^’

Schreibe einen Kommentar

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

to top
%d Bloggern gefällt das: