Lesetipp zum WordPress-Theme Twenty Twenty-Four

In grauer Vorzeit 😉 hatte ich unter anderem das Buch „Little Boxes“ von Peter Müller, in dem viele Tipps für den Umgang mit CSS gegeben wurden.

Durch Zufall habe ich ihn neulich im Fediverse getroffen ((@pmmueller@mastodon.social) und natürlich auf seine im Profil verlinkte Website „Einstieg in WordPress“ geschaut.

Habe dann auch angefangen, mit dem neuesten Standart-Theme Twenty Twenty-Four herumzuspielen. Das wird mit Vorlagen für drei Anwendungsfälle geliefert: Business, Photographer und Blogger. Natürlich ist das für mich unpassende Business voreingestellt. Und der Knopf zum Wechsel ist wirklich gut versteckt – ich habe lange vergebens danach gesucht und schon angefangen, das Template Business zurecht zu biegen.

Zum Glück wird das in Peters Blogbeitrag Twenty Twenty-Four kennenlernen im Abschnitt 5. Die Geheimwaffe »Template ersetzen« verraten.

Uff.

Vielen Dank!

(natürlich gibt es noch eine ganze Menge anderer wichtige Infos auf der Webseite zum Theme Twenty Twenty-Four und WordPress generell)

WordPressgebastel

Für meine Handvoll Websites nutze ich WordPress und als Theme GeneratePress Premium. Funktioniert, simpel zu bedienen. Kostet aber auch jährlich um die 50 $.

Beim Podcast kommt das Podlove-Plugin zum Einsatz, das mir den Feed und die einzelnen Episoden zur Verfügung stellt. Da sind Anpassungen etwas kniffliger; Umformatierung des Datums geht dort nur über PHP. Das ist nicht so schlimm, wie es sich anhört. Man muss nur darauf achten, dass man die Änderungen im Notfall auch rückgängig machen kann 😉

Die Tage habe ich Ebbe beim Vorlesen mangels Kurzgeschichten und bin auf die Idee verfallen, mich doch noch mit dem Gutenberg-Editor und dem Block-Gedöns von WordPress anzufreunden.

Habe ein Testblog aufgesetzt und auch am „richtigen“ System etwas gebastelt. Hier mal zwei Screenshots, oben die aktuelle Version mit GeneratePress, unten die noch nicht aufgehübschte Ansicht mit dem kostenlosen Standard-Theme 2024. Mal sehen, wie sich das entwickelt.

An error was encountered while trying to authenticate

Das ist jetzt nur Quick und Dirty notiert, mache ich bei Gelegenheit (?) hübscher

Wundervolle Fehlermeldung beim Login in meine WordPress Podcastinstallation.

Abhilfe wie folgt:

  • Über FTP-Client ins Verzeichnis auf dem Server einsteigen
  • Verzeichnis wp-content/plugins umbenennen in plugins-alt
  • anschließend funktioniert der Login
  • Dashboard sollte erreichbar sein
  • Plugins alle deaktiviert
  • Eingeloggt und auf dem Dashboard bleiben, Verzeichnis plugins-alt zurück in plugins umbenennen. Refresh im Browser drücken
  • Jetzt erst einmal nur die wichtigsten Plugins (Generate Press und sowas) wieder aktivieren.

Mille Gracie an kinsta.com

PS: mittlerweile hatte ich das noch einmal. Konnte es eingrenzen auf das Plugin „Limit Login Attempts Reloaded“ oder „Wordfence Login Security“. Hmm.

Umbauarbeiten

Alles wird teurer, also muss gespart werden. Auch hier im Blog. Die letzten Jahre habe ich das Theme von GeneratePress verwendet. Großartige Arbeit, deren Funktionen ich nur zu einem Bruchteil genutzt habe. Und die jährlich mit mittlerweile 59 USD zu Buche schlägt. Zu viel für ein Hobby ohne Einnahmen.

Also werde ich zuerst das Blog und dann auch die Podcastseiten auf ein kostenloses Theme umbauen. Ich entschuldige mich schon mal vorab für das möglicherweise chaotische Erscheinungsbild 😉

NACHTRAG:
Habe einige Stunden damit verschwendet, mir Themes anzuschauen und zu testen. Und entschieden, dass die Leute von GeneratePress ihr Geld wert sind. Außerdem ist die jährliche Verlängerung mit knapp 30 USD gar nicht so hoch, wie ich dachte.

Alles bleibt so, wie es ist. (Insiderscherz von der Arbeit)

WordPress Sicherheit xmlrpc

Immer wieder im Protokoll: Einbruchsversuche ins Blog über die xmlrpc.php, die eigentlich nicht mehr (oder nur in seltenen Fällen) gebraucht wird.

Am einfachsten sperren über die .htacccess Datei mit folgendem Schnipsel VOR der Zeile mit „Begin WordPress“. ACHTUNG: Fehler in der .htaccess können den ganzen Webseitenbetrieb, ähm, ruinieren. Unbedingt vor Änderungen eine Kopie von der funktionierenden Datei machen!

<Files xmlrpc.php>
Order Allow,Deny
Deny from all
</Files>

Für jene, die nicht per sFTP in Dateien des Systems herumpfuschen wollen, sollte eine Googlesuche nach „xmlrpc in WordPress abschalten“ genug Vorschläge bringen.

Ach ja, und das Plugin „Limit Login Attempts“ sollte man unbedingt haben.

Bastelstunde Schriften

Screen Shot Webseite Klausgesprochen.de

Über Typographie und Schrift im Internet gibt es unzählige Bücher und genauso viele Klagen. Nachdem mich die Schriftart im Podcast schon immer ein bisschen genervt hat, habe ich mich (wieder einmal) mit dem Thema beschäftigt.

Dabei waren die Einstellungen gar nicht schlecht: es war gar keine feste Schriftart vorgegeben, d. h. es wurde die Schrift genommen, die beim Seitenbesucher in seinem Gerät als Default eingestellt war. Eigentlich eine gute Idee: man spart sich den Aufwand der Definition und der Besucher sieht es so, wie er will. (Note to self: es gibt einen Unterschied zwischen „inherit“ und „system stack“)

Aber ach. Den meisten Benutzern ist das gar nicht bewußt. Ich hatte das selbst vergessen. Google Fonts ist eine interessante Lösung; leider kommt man damit in Datenschutzschwierigkeiten. Aber über Umwege geht es doch.

Dank der Anleitung „Adding local fonts“ für das bei mir genutzte Theme „GeneratePress“ habe ich jetzt einen altmodischen Schreibmaschinenfont eingebaut, der direkt von meinem Webspace ausgeliefert wird.

2 Haken: man muss die Schriftdateien per sFTP in WordPress hochladen, weil ein Import über den Medienbereich aus Sicherheitsgründen gesperrt ist. Und ich war zu doof, den Font Manager in GeneratePress zu finden. Weil ich damit auch nicht den Schalter für „lokal, nicht von Google“ für die Schriftdateien fand, habe ich die Schrift im CSS kurzerhand umbenannt in „Schreibmaschine“.

Ich wollte den Schriftsatz sowieso nur auf größeren Bildschirmen anzeigen lassen, so dass ich mit den folgenden CSS-Ergänzungen (GeneratePress / Customizer / zusätzliches CSS) auskomme:

blockquote {background-color: #e9f1f5;
font-style: italic}
body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
/* special-elite-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Schreibmaschine';
  font-style: normal;
  font-weight: 400;
  src: url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://klausgesprochen.de/wp-content/uploads/special-elite-v18-latin-regular.svg#SpecialElite') format('svg'); /* Legacy iOS */
}
/* @media only screen and (min-width: 1024px) {
  h1, h2 {
    font-family: "Schreibmaschine";
  }
} */

h1, h2 {font-family: "Schreibmaschine"}

.main-title {font-family: "Schreibmaschine"}

Und wo ich schon dabei bin, for the record noch diese CSS-Ergänzung, die Blockquotes formatiert und für Silbentrennung sorgt:

blockquote {background-color: #e9f1f5;
font-style: italic}
body {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Zumindest auf meinen Geräten sieht es passabel aus. Mal sehen, wie lange ich mir das ansehen kann, ohne dass es langweilig wird.

Was treibt meine Webseite eigentlich so?

Bei modernen CMS-Systemen weiß man meistens gar nicht, was da so automatisch an Daten irgendwohin weitergegeben wird oder welche Services von Drittanbietern eingebunden werden (z. B. Google Fonts). Da könnte man mit der DSGVO in Konflikt kommen.

Abgesehen davon finde ich diese ganzen Cookie-Banner und den Werbefirlefanz nervig. Also habe ich versucht, das auf meinen Seiten besser zu machen. Ohne Kekse und ohne irgendwas.

Um das zu prüfen, gibt es die Webseite https://webbkoll.dataskydd.net/de/

Sehr empfehlenswert.

Plugins

Nach der WP-Installation hinzugefügte Plugins / Theme

  • Antispam Bee
  • Cache Enabler
  • Disable Emojs (Datenschutz)
  • Remove IP (Datenschutz)
  • Subscribe to Double-Opt-In Comments
  • Generate Press (gutes, schnörkelloses Theme)
  • –> ab Herbst 2021 Theme Marianne
    und statt 2FA jetzt Limit Login Attempts Reloaded

Nicht mehr benutzte Plugins:

  • Disable FLoC (eigentlich Sache der Anwender)
  • Duplicator (brauche ich nur zum Umzug von WP)
  • Podlove Webplayer (bremst die Seite wahnsinnig aus)
  • Redirection (mache ich in der htaccess direkt)
  • WP Super Cache (Einstellungsmonster)
  • WP Optimize (für meine kleine Seite überdimensioniert)

Das muss schneller werden

Meine Podcastseite https://klausgesprochen.de war schon immer schnarchlangsam: Googles PageSpeed Insights zeigte einen Wert von 51(!). Die JavaScript-Ladezeit betrug 18 sec.(!)

Beim Aufrufen der Seite wurde eigentlich alles zügig angezeigt, bis auf den Podlove-Webplayer und den Podlove-Abo-Button.

Wie bereits im Beitrag Späte Rache – Audiotest ausprobiert, gibt es eine einfache, sparsame Lösung: habe den Podlove-Webplayer rausgeworfen und durch das HTML 5 / Audio-Element ersetzt. Et voilà: PageSpeed Insights Wert 99.

Nicht mehr so hübsch, aber schnell.

Außerdem werden die Podcastepisoden nicht mehr mit allem Text angezeigt, sondern nur noch mit einem Auszug und dem „Weiterlesen“-Link. Das ist fürs schnelle Drüberschauen einfacher und am Handy auch bequemer.

Späte Rache – Audiotest

Beim Podcast kämpfe ich seit jeher mit der mangelhaften Ladegeschwindigkeit meiner Webseite klausgesprochen.de. Hauptschuldiger ist der Podlove-Webplayer. Die Statistik behauptet, dass fast niemand den Podcast über den Webplayer hört – die haben den alle via Feed im Podcatcher.

Den Player ganz wegwerfen ist natürlich auch keine Lösung; wenn jemand hier vorbeikommt, soll er schon einfach mal reinhören können. Neulich ist mir eine ebenso simple wie schnelle Lösung eingefallen: HTML. Im Gutenberg-Editor von WordPress gibt es sogar extra die Auswahl „Audio“ dafür.

Das sieht dann so aus. Einfach, aber blitzschnell.

„Späte Rache“, Kurzgeschichte von Carola Bach, gelesen von Klaus Neubauer | Feed abonnieren oder hier die Feed-Adresse zum Podcastabonnieren: https://klausgesprochen.de/feed/mp3/

Sieht drüben in der Podcast Abteilung natürlich eleganter aus, ist aber endlos lahm: zur Podcastversion.

Ein weiteres Element könnte der sogenannte „Mehr“-Block sein, der dafür sorgt, dass an einer Stelle im Beitrag ein „Weiterlesen“ erscheint, so wie in der nächsten Zeile … (sieht man natürlich nicht in der Artikelansicht)

Weiterlesen …