Inhaltsverzeichnis
Als Webdesigner möchte ich meine Projekte auf meiner Portfolio-Seite mit zusätlichen Feldern für Services, Plugins, Themes etc. darstellen. Ich benutze Divi und Advanced Custom Fields (ACF), um meine Webdesign-Projekte individuell zu gestalten. In diesem Blogpost erkläre ich Ihnen, wie Sie ACF-Auswahlfelder in einer formatierten Liste darstellen können, um Ihre Projekte in Divi hervorzuheben und trotzdem dynamischen Content verwenden können.
Warum diese Methode?
Die Verwendung von ACF und Divi bietet die Flexibilität, Projekte nach eigenen Wünschen zu gestalten. Ein häufiges Problem ist jedoch die Darstellung von Auswahlfeldern, die in ACF erstellt wurden. Standardmäßig zeigt Divi diese als durch Kommas getrennten Text an. In dieser Anleitung zeige ich Ihnen, wie Sie die Auswahlelemente als Liste darstellen können, und das ganz ohne Programmierkenntnisse!
Bevor Sie beginnen
Bitte stellen Sie sicher, dass Sie ein Child-Theme verwenden. Ein Child-Theme schützt Ihre Anpassungen vor zukünftigen Updates des Hauptthemes. Wenn Sie noch keines haben, gibt es viele Anleitungen online, wie man eines erstellt.
Schritt 1: Öffnen Sie die functions.php-Datei
Die functions.php ist eine Datei in Ihrem WordPress-Theme, in der Sie benutzerdefinierte Funktionen hinzufügen können. Sie finden diese Datei im WordPress Dashboard unter „Design“ > „Theme-Editor“. Wählen Sie dort Ihr Child-Theme und dann die Datei functions.php.
Schritt 2: Fügen Sie den PHP-Code hinzu
Kopieren Sie den folgenden PHP-Code und fügen Sie ihn am Ende der functions.php-Datei ihres Childthemes ein. Ich habe hier den Inhaltstypen „Project“ gewählt, die Projekte in Divi. Ich bearbeite deren Template im Theme Builder und möchte genau hier die ungeordneten Listen.
function enqueue_custom_script_for_project() {
if (get_post_type() == 'project') {
echo '<script type="text/javascript">
jQuery(document).ready(function($) {
$(".dynamic-content-div").each(function() {
var content = $(this).text();
var items = content.split(",");
var list = $("<ul></ul>");
items.forEach(function(item) {
list.append("<li>" + item.trim() + "</li>");
});
$(this).html(list);
});
});
</script>';
}
}
add_action('wp_footer', 'enqueue_custom_script_for_project');
Speichern Sie die Änderungen.
Schritt 4: Dynamic Content in Divi einrichten
Jetzt, da der PHP-Code in der functions.php Datei ist, können wir zum Divi Builder wechseln. Fügen Sie ein Textmodul an der Stelle ein, an der Sie die Liste darstellen möchten. Klicken Sie auf das graue „Database“-Symbol, um das Dynamic Content-Menü zu öffnen. Wählen Sie das entsprechende ACF-Auswahlfeld aus der Liste aus.
Bevor Sie das Modul schließen, fügen Sie ihm noch eine CSS-Klasse hinzu. Gehen Sie zum Abschnitt „Erweitert“ und geben Sie im Feld „CSS-Klasse“ den Namen dynamic-content-div ein. Diese Klasse wird vom jQuery-Code verwendet, um das richtige Element auf der Seite zu finden.
Schritt 5: Stylen Sie Ihre Liste in Divi
Der Vorteil dieser Methode ist, dass Sie die Liste direkt im Divi Builder stylen können. Klicken Sie auf das Textmodul und gehen Sie zum Design-Tab. Hier können Sie Schriftart, Schriftgröße, Zeilenhöhe, Farbe und vieles mehr für Ihre Liste anpassen. Alle diese Stile gelten auch für die Liste, die durch das Dynamic Content-Feld erzeugt wird.
Schritt 3: Testen Sie es!
Jetzt ist es Zeit, Ihre Website zu besuchen und sicherzustellen, dass alles wie erwartet funktioniert. Die ACF-Auswahlfelder sollten jetzt als schöne Liste und nicht als durch Kommas getrennte Wörter angezeigt werden.
Zusammenfassung
Mit diesen einfachen Schritten können Sie ACF-Auswahlfelder in einer stilvollen Liste auf Ihrer Divi Portfolio-Seite darstellen. Diese Methode ist ideal für alle, die ihre Projekte individualisieren und gleichzeitig ein professionelles Erscheinungsbild beibehalten möchten.