#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

Worum es im ersten Eintrag geht?

Um die Labels „Anzeige“ 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?

• Plugin „Advanced Custom Fields“ (deutsch „Eigene Felder“)
• Etwas Programmierverständnis
• Empfohlen: FTP-Programm (z. B. FileZilla oder WinSCP) und einen Editor (z. B. NotePad++ oder PSPad)

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 Button „Neu 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 Label „Anzeige„.

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öffentlichen“ Button 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!