Echtma! » HTML-Fehler in FlatPress entfernen Teil 1


Stichworte: FlatPress HTML Template Leggero

Teil 1 » Teil 2 » Teil 3

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 type="text/javascript" src="https://fp-1-2-1.madekozu.de/fp-plugins/jquery/res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" 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' type='text/css'/>

ändern in:

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

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 Google-Fonts 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 type="text/javascript" src="' . $pdir . 'res/jquery/3.5.1/jquery-3.5.1.min.js"></script>
		<script type="text/javascript" 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.

Geschrieben:01.05.2022, 20:32 Uhr
Aktualisiert:31.05.2022, 14:30 Uhr

Kommentar schreiben

Hier kannst Du einfach und anonym Kommentare verfassen. Die Kommentare werden natürlich vor der Freigabe von mir geprüft. Außer dem Kommentar selbst, sind alle Angaben freiwillig. Angezeigt wird nur Name, Webseite (nur wenn Name angegeben ist) und natürlich der Kommentar selbst. Mit anderen Worten - du kannst mir hier deine Meinung geigen - gelesen wird es von mir, ob ich es auch anzeige ist natürlich eine andere Frage. Es kann auf jeder Seite kommentiert werden. Bist du gerade auf einer Beitragsseite, so werden dir nur Kommentare zu diesen Beitrag angezeigt. Bist du außerhalb der Kommentare, wird alles angezeigt, was nicht zu Beiträgen gehört.

Madekozu am 10.05.2022 um 10:55 Uhr:
Ich hab diesen Teil vorhin noch ein wenig erweitert. Da wir eh die header.tpl geöffnet haben, können wir dort ja auch gleich die GoogleFonts noch korrigieren. Das ist zwar kein HTML-Fehler, aber richtig ist es auch nicht ,)