Bludit Tipps #1

Bludit Tipps #1

Da ich mich entschlossen habe, meinen Blog nun anstelle von WordPress mit dem Flatfile System Bludit zu betreiben, konnte ich in den letzten Wochen einige Erfahrungen sammeln, von denen ich einige in diesem Artikel teilen möchte. Um Bludit so laufen zu haben wie ich es möchte sind und waren einige Anpassungen notwendig.
Das ist zumindest in meinem Fall nicht nur bei Bludit der Fall sondern trifft auch auf andere CMS Systeme zu. Eigentlich habe ich bisher bei allen System Anpassungen vornehmen wollen oder müssen( WordPress, Piwigo, Zenphoto). Bludit ist hier keine Ausnahme.

Bitte die Codeschnipsel ohne Zeilenumbruch eingeben – und immer an Backuops denken 🙂

Werde Patreon

Kein Tipp im eigentlichen Sinn aber wenn ihr euch für Bludit entschieden habt, dann solltet ihr euch überlegen ob ihr nicht gleich Patreon werdet. Für 1-2 Euro im Monat bekommt ihr bereits die Pro Version die im Unterschied zur normalen Version das Plugin Timemachine X mitbringt. Damit lässt sich das System recht leicht auf einen vorherigen Zeitpunkt zurück setzen, sollte ihr einmal falsche Einstellungen vorgenommen haben.

Editorial Theme

Das Editorial Theme zählt zu meinen Favoriten bei den Bludit Themes. In die Navigation links lassen sich leicht Menüpunkte zum Impressum etc. darstellen. Allerdings ist das Menü bei der mobilen Ansicht standardmässig erst einmal ausgeblendet.
Damit die Links zum Impressum und zur Datenschutzerklärung auch bei der mobilen Ansicht angezeigt wird ohne das der User eine Menü anklicken muss habe ich das folgendermassen gelöst.

Das Plugin „HTML Code“ installiert und aktiviert. Im Teil/Feld „Footer“ folgenden Code eingetragen:

<style>
.showonmobile{ display: none;}
   @media only screen
   and (max-device-width : 736px)
   { .showonmobile{ display: inline;}}
</style>
 <div class="showonmobile" >
	<center><p style="background-color:#f5f6f7; margin-bottom:45px;"> 
<a href="/link_zum_impressum" style="color: #7f888f; text-decoration: none; border-bottom: none;" >
Impressum </a> | <a href="link_zur_datenschutzerklärung" style="color: #7f888f; 
text-decoration: none; border-bottom: none;" > Datenschutzerkl&auml;rung</a></p></center></div>

Die Links müssen natürlich entsprechend auf eure Seite angepasst werden.

Der Code sorgt dafür, dass bei einer Auflösung bis zu 736 Pixeln die Links zum Impressum und zur Datenschutzerklärung im Fussbereich angezeigt werden. Bei einer höheren Auflösung erscheinen die Links nicht.
Die 736px sind eingetragen weil das Editorial Theme bis zu dieser Auflösung das Standardmenü ausblendet und als „Hamburger“ Menü (die 3 waagerechten Striche) anzeigt.

Snicker  Kommentare

Mit dem Plugin Snicker Kommentare könnt ihr Bludit um eine Kommentarfunktion ergänzen – das Ganze sogar datenschutzfreundlich. Sofern man die Option im TAB DSGVO aktiviert.
Was allerdings fehlt ist eine Benachrichtigung über neue Kommentare.
Das lässt sich durch Editieren der folgenden Datei (vorheriges Backup nicht vergessen) nachrüsten.
Im Verzeichnis „System“ des Plugins gibt es die Datei „class.comments.php“. Bitte auf das Comments im Dateinamen achten, da es auch eine class.comment.php gibt.

Die class.comments.php öffnet ihr nun in einem Texteditor. In Zeile 432 gibt es den Eintrag „return $uid“.
Fügt vor dieser Zeile eine neue Zeile mit folgendem Code ein:

mail("empfaenger_mail@eure-domain.de", "Ein neuer Kommentar auf dem Blog", 
"Der neue Kommentar muss noch gesichtet und gegebenenfalls freigegeben werden.", 
"From: absender_mail@eure-domain.de");

Die Mailadressen müsst ihr anpassen, den Text könnt ihr so lassen oder nach euren wünschen abändern.
Sobald es einen neuen Kommentar gibt, erhaltet ihr nun eine mail.
Warum dieses Feature nicht gleich in den Einstellungen des Plugins aktiviert ist, weiß ich nicht.

Google Fonts

Das Thema kann man sehen wie man will. Aktuell wird das Nachladen von Schriften von den Google Servern datenschutzrechtlich kritisch betrachtet. Hierzu hat es meines Wissens schon Abmahnungen gegeben. Die Schriften werden meistens durch das Theme oder Plugins geladen.
Leider nutzen auch einige Bludit Themes Google Fonts, wie zum Beispiel Editorial und Blekathlon.
Während es für WordPress spezielle Plugins die Fonts automatisch lokal „hosten“ ist bei Bludit Handarbeit erforderlich.
Ob euer Theme Fonts nachlädt lässt sich mit einigen Tools prüfen, zum Beispiel mit dem Google Fonts Checker:
https://sicher3.de/google-fonts-checker/

Sicherheitshalber sollte nicht nur die Startseite geprüft werden sondern auch Blogseiten oder die Kontaktseite.
Weist euch der Font checker darauf hin, dass Google Fonts nachgeladen werden dann schaut einmal in die php Seiten eures Themes.
Beim Editorial Theme findet sich in der „head.php“ der folgende Eintrag in Zeile 15:

<link href="https://fonts.googleapis.com/css2?family=
Open+Sans:ital,wght@0,400;0,600;1,400;1,600
&family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">

Diese Zeile wird gelöscht und schon werden keine Google Fonts mehr nachgeladen, was eine erneute Prüfung durch den Font Checker bestätigt.
Ihr habt nun zwei Möglichkeiten:
Ihr macht schlichtweg nichts mehr und belasst nach dem Löschen der Zeile alles so wie es ist. Eure Webseite wird nach wie vor problemlos angezeigt sieht aber auf verschiedenen Rechnern leicht unterschiedlich aus.

Die zweite Möglichkeit:
Ihr hostet die Schriften lokal.
In der Zeile die ihr gelöscht habt, steht drin welche Schriften das Theme normalerweise von den Google Servern lädt.
Im Fall oben sind das: Roboto Slab und Open Sans.
Ich habe das lokale Laden der Schriften bei mir wie folgt gelöst:

• Im Root Verzeichnis der Bludit Installatation habe ich ein Verzeichnis namens „webfonts“ angelegt.
• Auf der Seite: https://gwfh.mranftl.com/fonts habe ich die benötigen Schriftarten ausgewählt und heruntergeladen.
• Ihr seht unter der CSS Datei auf der Seite den Eintrag „Customize folder prefix“ In das Feld habe ich /webfonts/ eingetragen. Das führt dazu, dass beginnend vom Root Verzeichnis der Bludit Installation im Verzeichnis „webfonts“ nach den Schriften geschaut wird. Bei einer anderen Ordnerstruktur muss der Pfad entsprechend angepasst werden.
  Auf dieser Seite gibt es dazu einige hilfreiche Erklärungen:
  https://css-tricks.com/quick-reminder-about-file-paths/

  Die heruntergeladenen Schriften entpacken und dann in das Verzeichnis Webfonts hochladen.

• Den angezeigten CSS Code kopieren und in eine neue Textdatei einfügen. Diese Datei unter dem Namen „GoogleFonts.css“ speichern und ebenfalls in das Verzeichnis Webfonts hochladen.
• Falls noch nicht geschehen, das Plugin „HTML Code“ aktivieren. Im Head Bereich des Plugins tragt ihr den Link zur CSS Datei ein:

  <link rel="stylesheet" type="text/css" href="https://eure_domain/webfonts/GoogleFonts.css">

Damit werden die Schriften des Themes nun direkt von eurer Webseite geladen.

Weitere Tipps zu CMS Systemen findet ihr hier im Blog.