WordPress: eigene Felder definieren (Custom Fields)

Im Artikel "WordPress Theme Hueman erweitern" ging es bereits um eigene, feste Felder über und unter dem eigentlichen Text eines Blog-Beitrags. Das war aber noch nicht "handlich" genug und außerdem galt das nur für einen immer gleichen, also "statischen" Text. 

Variabler ist die Lösung mittels sog. "eigener Felder" (Custom Fields) in WordPress. 

Um bei unserem Beispiel zu bleiben: wir möchten auf unserem Blog einen Link zu unserer Facebook-Seite haben. Und wenn der Blogbeitrag auf Facebook gepostet ist, dann soll das natürlich der direkte Link zu genau dem passenden Facebook-Posting sein. Und das geht bspw. so:

Facebook: Link zum Posting mittels "Custom Fields"

"Custom Fields" bieten die Möglichkeit, Wordpress mit individuellen "Funktionsfeldern" zu erweitern. Ein sehr gutes Plugin dafür ist "Advanced Custom Field". Damit habe ich auf einem unserer Blogs die Möglichkeit geschaffen, den direkten Link zum entsprechend Posting auf der dazugehörigen Facebook-Seite einzubauen:

1. Installation
Das Plugin Advanced Custom Fields installiert und aktiviert (es erscheint dann in der Menüleiste des WP Adminbereichs mit einem eigenen Punkt "Individuelle Felder".

2. Aktivierung und Einrichtung

Darin (also in Advanced Custom Fields) ein Feld namens "Facebooklink" angelegt und im WP Editor aktiviert. Jetzt passiert erstmal noch nichts. Das Feld existiert und kann im Editor benutzt werden, sonst passiert weiter nichts, denn unser Theme "kennt" dieses Feld ja noch nicht. 

3. Theme-Anpassung (Basis-Theme: Hueman)

Die allgemeine Anleitung zur Nutzung von Advanced Custom Fields im eigenen Theme ist hier zu finden: https://www.advancedcustomfields.com/resources/adding-fields-posts/

Der Einbau ist ganz einfach, beides kann hier in einer Datei erfolgen (die functions.php muss also nicht, wie im vorherigen Artikel beschrieben, angefasst werden):

Design > Theme Editor > tmpl/single-tmpl.php
Hierin über dieser Zeile ...

<?php hu_get_template_part('parts/single-heading'); ?>

... sowas einfügen:

<!-- Advanced Custom Fields: Facebooklink TOP / Start -->

<div style='background-color:#F4F4F4;color:#000000;padding-left:5px;padding-right:5px;font-style:italic;'>

Deine Meinung oder Feedback? Diskutiere fair und freundlich direkt auf &nbsp;

<?php 

$fblink = get_field('Facebooklink'); 

if( $fblink ): $fblink = $fblink;

else: $fblink = "https://www.facebook.com/WirHabenDieWahl/";

endif;

?>

<a href='<?php echo $fblink; ?>' style='color:#dd9933;font-weight:bold;'>&rarr; Facebook</a>

</div>

<!-- Advanced Custom Fields: Facebooklink TOP / End -->

  

<!-- Advanced Custom Fields: Facebooklink BOTTOM / Start -->

<?php

function string_after_the_content($content) {

$fblink2 = get_field('Facebooklink'); 

if( $fblink2 ): $fblink2 = $fblink2;

else: $fblink2 = "https://www.facebook.com/WirHabenDieWahl/";

endif;

return $content . "<div style='background-color:#F4F4F4;color:000000;padding-left:5px;padding-right:5px;font-style:italic;font-size:90%;'>Deine Meinung oder Feedback? Diskutiere fair und freundlich direkt auf <a href='" . $fblink2 . "' style='color:dd9933;font-weight:bold;font-size:90%;'>&rarr; Facebook</a></div>";

} add_filter('the_content',string_after_the_content);

?>

<!-- Advanced Custom Fields: Facebooklink BOTTOM / End -->

Das ist etwas "Schnellstrick" und kann natürlich noch weiter optimiert werden - aber es funktioniert, juchhu :-)

Ergebnis / Handhabung:

Damit erscheint jetzt über dem Titel und unter dem Text der Link zum jeweiligen Facebook-Post (sofern vorhanden),

Im WordPress Backend kann direkt beim Erstellen oder Bearbeiten des Beitrags jetzt der Link zum Facebook-Posting einfach direkt über das Feld "Facebook-Link" eingepflegt werden, sobald der Link vorhanden ist. Steht dort (erstmal) nichts, wird einfach direkt allgemein auf die Facebookseite verlinkt.

Simpel, perfekt.