Funktionen des Divi Mastermind Child-Themes

Child Theme nutzen?

Child-Theme nutzen – JA oder NEIN?
Im Netzt findet man immer wieder einige Diskussionen über den Nutzen oder Sinnlosigkeit eines Child-Themes. Ich für meinen Teil nutze IMMER ein Child-Theme, da ich so sicher sein kann, dass meine Funktionen, CSS Anpassungen bei einem Update nicht verloren gehen. Es lässt mir auch Freiheiten mein eigenes Footer-Template zu nutzen (um ein Beispiel zu nennen). Natürlich kann man seine „Codeschnippsel“ in den Divi Optionen, Customizer, Sektionen oder Modulen einfügen – das funktioniert alles tadellos.

Für mich persönlich sind diese vielen Orte an denen ich die Möglichkeit habe meinen „Code“ einzufügen, viel zu unübersichtlich.  Ich mag es, alles sauber getrennt und einfach auffindbar zu haben.  Jeder für sich alleine muss entscheiden ob er ein Child-Theme nutzen möchte oder nicht. Ich kann es nur empfehlen.

Aus diesem Grund, haben wir ein „READY-TO-GO“ Child Theme erstellt, mit einem Zusatz an paar zusätzlichen Funktionen, welche wir immer nutzen. Zu den einzelnen Funktionen komme ich gleich.

Das Divi Mastermind Child Theme könnt Ihr hier herunterladen. 

Was befindet sich in der ZIP-Datei?

In dieser Zip-Datei, findest Du zunächst einmal folgende Ordner und Dateien. Keine Sorge, da ist nichts wildes oder kompliziertes versteckt.

„css“ Ordner: login.css – ist die Datei die für das WP-Login Styling zuständig ist. Da mir dieses Standard Login von WordPress nicht so gefällt habe ich nach einer Lösung gesucht, für meine Kunden eine einfache Loginseite mit dem Kundenlogo zu erstellen. Plugins wollte ich dafür nicht nutzen also ran an das CSS und ein wenig aufhübschen.
Wie Du siehst, ist im Child Theme eine style.css in der obersten Ebene enthalten und im css Ordner ein custom.css. Ich nutze die style.css oft „nur“ für allgemeine oder Seitenweite CSS Anpassungen wie zum Beispiel Texte, Überschriften usw. Wenn es dann gezielt um etwas aufwändigere CSS Anweisungen geht, kopiere ich mir den Code in meine custom.css Datei. Je nach Umfang erstelle ich eine neue css Datei und benenne Sie z.B. form.css (diese beinhaltet z.B. nur das Styling für Formulare) ++++ Achtung: Nicht vergessen die neue CSS Datei in die functions.php zu integrieren. ++++
Also im Grunde fange ich bei der style.css Datei an und säubere so nach und nach mein CSS – easy oder??

„lang“ Ordner: Frank hat sich die Mühe gemacht die Sprachdateien zu übersetzen und anzupassen. Da die Sprache bei Divi in mehreren Dateien zu finden ist, wird hier in Systemübersetzungen, Übersetzungen im Builder und im Theme selbst unterschieden. Falls Du selbst Hand anlegen willst und die eine oder andere Übersetzung anpassen willst, einfach die .po Dateien mit einem Texteditor bearbeiten.

„function.php“ Datei: Das Kernstück des Child Themes sozusagen ist die functions.php Datei. Ich habe Dir neben den Standardfunktionen die ein Child Theme braucht um zu funktionieren, zusätzlich ein paar Funktionen mit eingebaut. Funktionen ohne die ich gar nicht mehr auskomme und so auch auf das Eine oder andere Plugin verzichten kann. Dazu aber gleich mehr! In der functions.php ist alles kommentiert, damit Du dich einfach zurechtfinden kannst. Solltest Du die eine oder andere Funktion nicht benötigen, kannst Du sie einfach löschen.

functions.php

Im oberen Teil der functions.php ist alles drin, was ein Child-Theme benötigt. Das heisst hier werden alle Dateien eingebunden, damit das alles reibungslos funktioniert. Ich werde hier jetzt nicht ins Detail der einzelnen Funktionen eingehen, da es den Rahmen sprengen würde. Solltest Du eine weitere CSS Datei erstellen wollen (ich nehme als Beispiel portfolio.css), dann kannst Du sie wie folgt hinzufügen:

wp_enqueue_style( 'portfolio-style', get_stylesheet_directory_uri() .'/css/portfolio.css', array(), null, 'all' );

Jetzt nur noch die Datei in den CSS Ordner schieben und alles läuft wie es soll!

Login-Seite: Das CSS für die Login-Seite befindet sich im Ordner css/login.css das dort eingebundene Logo findest Du im Ordner img/ . In der login.css kannst Du dich austoben wie Dir lustig ist. Ich habe mit display:none; den „Passwort vergessen“ Link, welchen man auf allen wp-admin Loginseiten findet ausgeblendet. Da jeder im Grunde genommen sein Passwort kennt, braucht es meiner Meinung nach dort auch keinen Link, zumal dieser gerne von Bots und Hackern verwendet wird. Ich hab ehrlich gesagt, keinen Schimmer ob das etwas hilft, aber zumindest hatte ich bisher keine gehakten Seiten. Wenn es nichts hilft, schadet es auch nicht. Aber Du kannst ihn auch einblenden wenn Du ihn benötigst – dazu einfach den gesamten Code löschen.

Revisionen reduzieren: Du kennst es bestimmt! Man arbeitet auf der Seite und speichert, bearbeitet, speichert, bearbeitet, speichert und und und. Die Revisionen im Divi-Builder werden so immer gespeichert. Dies kann schnell mal dazu führen, dass die Datenbank zugemüllt wird. Da hab ich die Funktion von SJ James – Divi Space als total nützlich eingestuft und reduziere somit meine Revisionen auf max. 3. Falls Du mehr Revisionen behalten willst, erhöhe einfach die Zahl „3“. Ansonsten kannst Du auch hier diese Funktion löschen.

Menüpunkte im Admin Dashboard entfernen: Ab und zu wollen meine Kunden Adminrechte haben. Soweit alles gut. Um Sie nicht unnötig mit den Menüpunkten im Dashboard zu verwirren, besonders mit Menüs die Sie sowieso nie brauchen, lösche ich die Menüs einfach raus. Im Child-Theme habe ich sie standardmässig deaktiviert. Falls Du sie aktivieren willst, einfach die „//“ VOR „remove_menu_page“ löschen und schon ist der Menüpunkt ausgeblendet. Auf der WordPress Seite selbst findest Du noch weitere Bezeichnungen zu den Menüs, welche Du ausblenden kannst.

Divi Theme ausblenden: Wie zu Beginn erwähnt, habe ich es gerne übersichtlich. Unter Dashoboard > Design > Themes werden uns von WordPress alle Themes angezeigt welche wir installiert haben. Ich blende mir die „nicht aktiven“ Themes einfach aus, so dass mir nur das aktive angezeigt wird. In meine Fall habe ich nur das Divi und das Divi Child-Theme installiert. Da ich das Divi (Haupt-Theme) nicht angezeigt haben will löse ich das mit dieser Funktion:

Da ich nicht möchte, dass man sieht, dass es ein Child-Theme ist, blende ich den Zusatz „This is a Child Theme of Divi“ (rot markiert im Bild) ebenfalls gleich aus. So sieht es VOR und NACH dem Einfügen der Funktion aus (natürlich wird der this is a… Text ausgeblendet):

SVG Upload & Bildqualität beeinflussen: Last but not least – zwei Funktionen auf die ich keinesfalls verzichten kann. SVG Dateien haben bei mir als Grafiker einen hohen Stellenwert. WordPress erlaubt von Haus aus – wegen angeblichen Sicherheitsmängeln – keinen Upload von -SVG Dateien. Dies kann man bequem mit Plugins lösen. ABER wozu?? Es geht auch ganz gut ohne.

Abschliessende Worte

Ich denke die restlichen Dateien sind soweit selbsterklärend.
jQuery Code-Schnippsel kannst Du im entsprechendem custom.js bequem an einem Ort einbinden. Im Moment ist es so, sobald wir ein jQuery Script verwenden wollen, müssen wir den Weg über die Divi Optionen gehen und unter Integration > Head unseren Code einfügen. Wenn man da aber mehrere jQuery Codes stehen hat, dann wird das in diesem kleinen Fensterchen sehr unübersichtlich. Nochmals zur Erinnerung – ICH mag es übersichtlich 🙂 . Denk dran die <script> </script> vom kopiertem Code zu entfernen, wenn Du sie im custom.js platzierst, denn die brauchst du nicht.

 

jQuery(function($){
   //Beispiel
   $('#something').addClass("firstclass secondclass");
});

 

Solltest Du coole Funktionen in Deiner functions.php haben, dann lass hören. Ich hoffe, dass wir Euch hier einen guten Start mit dem Divi Mastermind Child Theme geben konnten. Viel Spass damit

Euer Benny