FlatPress: HTML-Fehler entfernen

[Madekozu]

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.

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 diese 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 …

Code: Alles auswählen

<!-- 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:

Code: Alles auswählen

<!-- 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:

Code: Alles auswählen

{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:

Code: Alles auswählen

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

ändern in:

Code: Alles auswählen

<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:

Code: Alles auswählen

<!-- 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:

Code: Alles auswählen

<!-- 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.

[Madekozu]

Im 1. Teil des Tutorials hatten wir uns um die Warnungen gekümmert, die der Validator unter Punkt 1 und 2 ausgespuckt hat. In diesem Teil geht es um die Fehler 3-5, die bei genauerer Betrachtung eigentlich nur 1 anstatt 3 Fehler sind.

Backup gemacht? Ja? Na dann kann es losgehen. Was will uns der Validator nun mit den Punkten 3-5 eigentlich sagen? Der meckert (zu Recht) rum, weil er in etwa das im HTML – Code vorfindet:

Code: Alles auswählen

<span>
    <p>Irgend ein Inhalt, der hier nicht weiter von Bedeutung ist.</p>
</span>

Genau das ist auch schon der Fehler. Mit <span> kann man zum Beispiel Stellen in einem Text markieren (so wie ein Textmarker). Was FlatPress hier aber bezwecken will, ist einen Bereich zu schaffen, in dem der Inhalt sein soll. Kann man sich wie eine Schachtel vorstellen, in die man etwas reinpacken will. Dafür verwendet man in der Regel ein <div>.

Wir müssen hier also nichts weiter machen, als dieses <span>&</span> mit einem <div>&</div> austauschen. Vielleicht war es auch ursprünglich mal so vorgesehen und in der Hitze des Gefechts nur verwechselt – das wissen wir nicht – ist uns auch egal. Wir wollen ja nur den Fehler beheben. Da wir den Validator über die Startseite laufen lassen haben, müssen wir nun herausfinden, welches Template dafür verantwortlich ist. Unter /fp-interface/themes/leggero/entry-default.tpl finden wir diese Zeilen, welche auch unser “span” enthalten. Innerhalb dieses “span” Teils wird der Inhalt reingeladen – ja – hier sind wir richtig.

Code: Alles auswählen

<span itemprop="articleBody">
{$content&#124;tag:the_content}
</span>

Jetzt brauchen wir nur noch <span>&</span> durch <div>&</div> ersetzen und schauen, was der Validator dazu sagt.

Code: Alles auswählen

<div itemprop="articleBody">
{$content&#124;tag:the_content}
</div>

Wenn ihr bis hier hin alles richtig gemacht habt, gibt es nur noch einen Fehler und der kommt uns aus dem 1. Teil schon bekannt vor. Um den kümmern wir uns dann im letzten Teil dieses Tutorials.

[Madekozu]

Nachdem wir Teil 1 und Teil 2 dieses Tutorials durchgearbeitet haben, gibt es nur noch den letzten Punkt, den der Validator auf der Demoseite an FlatPress bemängelt. Den Fehler im HTML-Code kennen wir schon aus Teil 1. Das sollte also schnell gehen.

Wir erinnern uns – der Blick in die header.tpl hat uns gezeigt, dass der fehlerhafte Teil durch ein Plugin in den Quellcode geschrieben wird. Schuldig ist dieses Mal das Plugin “Lightbox2”. Auch hier wird beim Scriptaufruf wieder ein Typ mit angegeben. Aber wir wissen ja schon – das braucht man bei Javascript nicht, es macht nur den Quellcode länger. Also auch hier – raus damit.

Zielsicher bewegen wir uns Richtung /fp-plugins/lightbox2/plugin.lightbox2.php und schauen uns das Ding mal an. Aha … wir finden die Zeilen:

Code: Alles auswählen

<!-- start of lightbox -->
<script type="text/javascript" src="' . $pdir . 'res/slimbox2.js"></script>
<!-- end of lightbox -->

Jetzt einfach wieder type=”…” rausgeschmissen und wir sind fertig.

Code: Alles auswählen

<!-- start of lightbox -->
<script src="' . $pdir . 'res/slimbox2.js"></script>
<!-- end of lightbox -->

Wenn ihr jetzt alles richtig gemacht habt, meldet sich der Validator mit einem:

Document checking completed. No errors or warnings to show.

Das war doch gar nicht so schwer, oder?

Damit ist diese Tutorialreihe auch schon beendet. Das war aber nicht die Letzte – es gibt noch einige Anzeigefehler, welche auch dringend beseitigt werden sollten – die tun einfach weh in den Augen.

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.

Dieses Tutorial hatte ich bereits am 1. Mai 2022 veröffentlicht. Arvid, der Kopf hinter FlatPress meinte dazu am 7. Mai 2022:

Danke für den ausführlichen Troubleshoot. Alle aufgeführten Fehler werden in der nächsten FlatPress-Version behoben sein.