Divi Theme – Social Icons hinzufügen

Themes | 0 Kommentare

In den Divi Theme Optionen findest Du die Möglichkeit, die Social Icons für den Footer-Bereich und das Top-Menü zu aktivieren. Momentan beschränkt sich diese einfache Möglichkeit jedoch auf Facebook, Twitter, Google+, Instagram und den RSS-Feed. Andere wichtige Soziale Netzwerke bleiben außen vor – es wird mir für immer ein Rätsel bleiben, weshalb die Entwickler des Divi-Themes hier nicht nachbessern. Immerhin sind sie sonst ja sehr innovativ.

Gute Nachricht: die Social Icons sind grundsätzlich schon da. Insgesamt sind im Divi-Theme Icons für folgende Netzwerke verfügbar:

Divi Theme verfügbare Social Icons

 

Voraussetzung für das Hinzufügen weiterer Social Icons:

 

  • ein Child-Theme – ohne wird es leider bei jedem Update wieder überschrieben
  • einen FTP-Zugang

 

Der Artikel ist bewusst ganz einfach gehalten. Für alle, die es etwas genauer wissen wollen, ist dieser Beitrag von Elegantthemes vielleicht besser geeignet: „How to add more Social Icons to Divi“.

 

Die einzelnen Schritte um Deine Social Icons zu aktivieren:

 

1. Aktiviere die Social Icons in den Theme-Optionen, die standardmäßig da sind und die Du nutzen möchtest:

Divi Optionen Social Icons aktivieren

 

2.  Die social_icons.php finden und wieder hochladen

Dann wählst Du Dich per FTP auf Deinen Server ein, um unter

/themes/divi/includes

die social-icons.php zu finden. Diese Datei müssen wir kopieren. Du lädtst sie also auf Deinen Computer herunter. Und wenn Du schon per FTP eingeloggt bist, wechselst Du auch gleich in den Child-Theme-Ordner und erstellst das Verzeichnis „includes“. Deine Ordnerstruktur sieht jetzt so aus:

/themes/divi-child/includes.

Nun hast Du die Möglichkeit, die social-icons.php in einem geeigneten Programm zur php-Bearbeitung zu verändern (z. B. Notepad++ für Windows oder Textwrangler für Mac – auf keinen Fall Word o.ä. verwenden). Nach der Änderung kannst Du diese Datei direkt in den includes-Ordner Deines Child-Themes wieder hochladen.

Wir machen es uns in diesem Beispiel noch einfacher und verwenden einfach den Editor direkt in unserer WordPress-Installation. Dazu nehmen wir uns die Originaldatei, die wir uns zuvor herunter geladen haben und laden sie so wie sie ist in unseren includes-Ordner des Child-Themes.

 

3. Die social_icons.php im WordPress-Editor bearbeiten

Nun kannst Du die Datei hier sehen und bearbeiten. Im Screenshot siehst Du die bereits bearbeitete Datei. Die Originaldatei wird etwas anders aussehen.

 

Theme Editor Divi social_icons.php

 

Achte unbedingt darauf, dass Du das Child-Theme ausgewählt hast und nicht an der Original-Datei arbeitest. In diesem Beispiel wurde Facebook über die Theme-Optionen bereits aktiviert und anschließend noch Linkedin und Pinterest ergänzt.

 

So ist der Code aufgebaut

Ganz am Anfang der Datei steht:

<ul class="et-social-icons">

 

Direkt darunter folgen die über die Theme-Optionen aktivierten Sozialen Netzwerke. In unserem Fall nur Facebook. Jeder Eintrag für ein soziales Netzwerk beginnt mit

<?php if und endet mit <?php endif; ?>

Jeder Abschnitt für ein Soziales Netzwerk hat also diese Struktur:

&amp;lt;?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?&amp;gt;
&amp;lt;li class="et-social-icon et-social-facebook"&amp;gt;
&amp;lt;a href="&amp;lt;?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?&amp;gt;" class="icon"&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;?php esc_html_e( 'Facebook', 'Divi' ); ?&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;/a&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;?php endif; ?&amp;gt;

 

Weitere Social Icons hinzufügen

Nun kommt der Teil, den Du eigentlich wissen möchtest 🙂 So sieht der Code aus, um weitere Social Icons im Divi-Theme zu aktivieren

 

&amp;lt;li class="et-social-icon et-social-linkedin"&amp;gt;
&amp;lt;a href="https://www.linkedin.com/in/deinprofil/" class="icon"&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;?php esc_html_e( 'Linkedin', 'Divi' ); ?&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;/a&amp;gt;
&amp;lt;/li&amp;gt;

Diesen Absatz kannst Du also so oft kopieren, wie Du Icons hinzufügen möchtest. Folgende Änderungen sind dabei für jedes Netzwerk vorzunehmen:

  • In der ersten Zeile nach et-social- Dein gewünschtes Netzwerk angeben. Die Endung „> muss dabei bestehen bleiben.
  • In der zweiten Zeile kommt zwischen den beiden “ “ der Link zu Deinem Profil (am besten gibst Du diesen manuell ein, damit vermeidest Du Formatierungsschwierigkeiten)
  • Und in der dritten Zeile in der Klammer ebenfalls Dein Netzwerk ergänzen. Bitte achte darauf das die Hochkomata dort bleiben, wo sie sind.

Divi Social Icons Code

Ganz am Ende Deiner social_icons.php steht:

&amp;lt;/ul&amp;gt;

 

Der komplette Code aus unserem Beispiel sieht also so aus:

 

&amp;lt;ul class="et-social-icons"&amp;gt;
&amp;lt;?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?&amp;gt;
&amp;lt;li class="et-social-icon et-social-facebook"&amp;gt;
&amp;lt;a href="&amp;lt;?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?&amp;gt;" class="icon"&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;?php esc_html_e( 'Facebook', 'Divi' ); ?&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;/a&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;?php endif; ?&amp;gt;
&amp;lt;li class="et-social-icon et-social-linkedin"&amp;gt;
&amp;lt;a href="https://www.linkedin.com/in/deinprofil/" class="icon"&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;?php esc_html_e( 'Linkedin', 'Divi' ); ?&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;/a&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;li class="et-social-icon et-social-pinterest"&amp;gt;
&amp;lt;a href="https://www.pinterest.de/deinprofil/" class="icon"&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;?php esc_html_e( 'Pinterest', 'Divi' ); ?&amp;gt;&amp;lt;/span&amp;gt;
&amp;lt;/a&amp;gt;
&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;

Soweit die Schritte zum Hinzufügen der Icons.

 

Die sozialen Profile sollen sich in einem neuen Fenster öffnen?

 

Dann benötigst Du noch den folgenden kleinen Code, den Du beim Divi in den Theme Optionen unter Integrationen im <body> hinterlegen musst:

&amp;lt;script type="text/javascript"&amp;gt;
jQuery(document).ready(function($) {
$(".et-social-icon a").attr('target', 'blank');
});
&amp;lt;/script&amp;gt;

 

Nun wünsche ich Dir viel Spaß und gutes Gelingen bei der Umsetzung.

 

Sonne 1

Das könnte dich auch interessieren:

Mehr Beiträge zum Divi-Theme

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.