HTML-Fehler in FlatPress entfernen Teil 1/3

Letzte Aktualisierung: 15. Januar 2023 um 09:41 Uhr

#FlatPress kommt in der Version 1.2.1 mit dem Theme #Leggero und ein paar kleineren Fehlern im #HTML – Code daher. Das ist erst einmal nicht so schlimm, da #FlatPress auch so funktioniert, aber dennoch sind es eben #Fehler und die soll man ja bestmöglich vermeiden.
Nachtrag vom 10.05.2022: In kommenden Versionen sollten die hier beschriebenen Probleme schon behoben sein, laut Arvids Kommentar unter Teil 3.

Als erstes erstellen wir mal ein Backup, sicher ist sicher. Danach schauen wir uns mal an, wo die Fehlerchen denn so schlummern. Dazu verwenden wir einen #Validator, denn ohne den sehen wir die #Fehler nicht (außer sie stechen uns im #Quelltext der Seite direkt ins Auge) – aber den meisten (mich eingeschlossen) fällt da nicht alles auf. Zu diesem Zweck habe ich eine Grundinstallation von FlatPress 1.2.1 als Demo installiert, dort könnt ihr das anschauen, falls ihr gerade keine “Rohinstallation” zur Hand habt. Schauen wir uns also dieses Demo im Validator mal an.

Unter Punkt 1 und 2 werden uns zwei Scripts mit einer Warnung markiert. Das ist nicht schlimm, nur unschön. Ein #Javascript benötigt keinen Script-Type, das können wir also einfach löschen. Erstmal den #Quelltext der Seite anschauen…

<!-- start of jsUtils -->
<script  src="https://fp-1-2-1.madekozu.de/fp-plugins/jquery/res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script  src="https://fp-1-2-1.madekozu.de/fp-plugins/jquery/res/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- end of jsUtils -->

Diesen Teil müssen wir damit austauschen:

<!-- start of jsUtils -->
<script src="https://fp-1-2-1.madekozu.de/fp-plugins/jquery/res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="https://fp-1-2-1.madekozu.de/fp-plugins/jquery/res/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- end of jsUtils -->

Jetzt müssen wir nur noch finden, wo das herkommt. Erste Anlaufstelle ist erst einmal das #Template, welches für den #Header zuständig ist (/fp-interface/themes/leggero/header.tpl). Hier finden wir das allerdings nicht, aber wir finden das an der Stelle

{action hook=wp_head}

Aha – ein Hook=wp_head (wofür das wp wohl steht?). Die Zeilen werden also nachträglich noch reingeladen, vermutlich durch ein #Plugin. Wenn wir uns das da oben nochmal anschauen sehen wir sogar welches Plugin (jquery) und wir haben den Übeltäter ausfindig gemacht.

Bevor wir aber die /fp-interface/themes/leggero/header.tpl wieder verlassen ändern wir noch eine Kleinigkeit direkt darüber:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' />

ändern in:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' />

Das wurde uns zwar nicht als #Fehler angezeigt, ist aber dennoch ein Problem, da die meisten modernen Browser das Nachladen von unsicheren (unverschlüsselten) Inhalten in sichere (verschlüsselte = https) Seiten (zurecht!) verhindern. Ab jetzt kann also das Leggero-Theme auch wirklich auf die #GoogleFonts zugreifen. Optisch ändert sich dabei aber so wenig, dass ich empfehlen würde, komplett auf die #GoogleFonts zu verzichten, da diese auch problematisch im Zusammenhang mit der #DSGVO sind, aber darum geht es hier ja nicht.

Jetzt aber zurück zu unserem Fehler durch den wir eigentlich in der header.tpl angekommen, aber dort nicht so recht weiter gekommen sind.
Achtung: Wir werden also nicht das Theme #Leggero, sondern das verursachende Plugin ändern müssen! Dann schauen wir doch mal wo und sehen uns im Pluginordner genauer um. Gesagt getan und wir finden /fp-plugins/jquery/plugin.jquery.php und darin die uns bekannten Zeilen, die nur ein wenig anders ausschauen:

<!-- start of jsUtils -->
<script  src="' . $pdir . 'res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script  src="' . $pdir . 'res/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- end of jsUtils -->

ändern wir einfach in

<!-- start of jsUtils -->
<script src="' . $pdir . 'res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="' . $pdir . 'res/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- end of jsUtils -->

und die ersten beiden Punkte sind erledigt. Im 2. Teil kümmern wir uns dann um die Fehler 3-5 und ihr werdet schmunzeln – die sind nur ein Denk- oder Flüchtigkeitsfehler, hoffe ich jedenfalls für “den Schuldigen” (Frage an die smartys: Oder kommt das komplette Theme inkl Templates von #smarty – hab mir das Ding nie angeschaut und werde das auch nicht tun.)

Im 3. und letzten Teil von “Fehlerbehebung im HTML-Dschungel” geht es dann noch #Fehler (oder besser Warnung) 6 an den Kragen – wer in diesem Teil aufgepasst hat, kann das auch jetzt schon lösen. Danach ist #FlatPress schon mal mit validem #Code gesegnet – Anzeigefehler gibt es aber auch dann noch, um die kümmern wir uns dann im nächsten Tutorial.

Wichtiger Hinweis:

Beachtet bitte, dass alle Änderungen beim nächsten #Update wieder verloren gehen. Das FlatPress-Team sollte diese Änderungen nochmals prüfen und in einer der kommenden Versionen mit berücksichtigen.