Dank der Arbeit von Vrifox, die einige Dinge an unsere Bedürfnisse angepasst hat, sind wir auch mit dem neuen Aussehen zufrieden.

Die Anpassungen sind hier zu finden. Schön ist, dass auch die Leiste ganz oben hell wird, wenn man im Blog die Ansicht umschaltet.

Danke fürs Anpassen :)

Die Suchfunktion ist jetzt nicht mehr oben (Lupe im Screenshot) sondern ganz unten auf der Seite; nicht schön, ist mir auch eben erst aufgefallen.

Hier im Direktvergleich, der Blog bisher:

Und der Blog jetzt – im hellen Modus:

Und im dunklen Modus:

Automatische Hell-Dunkel-Auswahl im Browser

Siehe hier.

Jetzt konnte ich es – zufällig – lösen. Es war eine Leerzeile am Ende der functions.php des Child-Themes. Ich habe diese entfernt und dann war wieder alles in Ordnung.

Auch an andere Stelle hatte diese Leerzeile ein Problem verursacht – bei der Sitemap, siehe hier.

Für Suchmaschinen gab es bisher damit keine Probleme, aber es war nicht schön, dass man die Sitemap nicht direkt ansehen konnte; außer über den Quelltext.

Jetzt habe ich zufällig endlich herausgefunden, wo das Problem lag. In der functions.php des verwendeten Childthemes war am Ende eine Leerzeile.

Das wars; Leerzeile entfernt und schon funktioniert es, wie es soll.

Somit konnte ich das bisher genutzte Plugin „Google XML Sitemaps“ deinstallieren. Wieder etwas aufgeräumt.

Man sollte daran denken, in der robots.txt die URL der Sitemap anzupassen. Und man kann auch noch eine Weiterleitung von der alten URL auf die neue einstellen. In meinem Fall von sitemap.xml nach wp-sitemap.xml.

Deshalb habe ich im Plugin „Socialcards“ meines DokuWikis eine höher aufgelöste Version meines Logos hinterlegt. Im Blog tat ich dasselbe in den Einstellungen des WordPress-Plugins Open Graph.

In beiden Fällen wird das Logo immer dann automatisch für Twitter-Cards verwendet, wenn es im Blog kein Artikelbild oder im Wiki keine Bilder auf der Seite gibt.

Hier der Unterschied zwischen jetzt (oben) und vorher (unten) im Twitter-Client:

Beide Plugins funktionieren übrigens nicht nur für Twitter sondern auch für andere Plattformen, auf denen Links zu den Webseiten eingefügt werde. Der Standard, der das ermöglicht, heißt Open Graph.

Über die Zeit schaltete ich jedoch immer mehr Dienste ab, da ich sie nicht mehr benötigte. Jetzt gibt es nur noch einen Blog, ein Wiki und meinen Mumble-Server. Es gibt noch eine Dateiablage, aber die wird nur im Hintergrund verwendet und ist so direkt nicht für normale Menschen sichtbar. Eine „Startseite benötige ich daher nicht mehr und habe deshalb heute www.natenom.com sozusagen „abgeschaltet“. Sozusagen bedeutet, dass die Hauptseite jetzt zwar auf meinen Blog weiterleitet, es aber immer noch einzelne „Unterseiten“ gibt, die entweder auf den Blog oder auf das Wiki weitergeleitet werden.

Allerdings in einer modifizierten Dark-Version, die mir Vrifox bereit stellt.

Damit wurde hier im Blog das alte Thema Twentyfourteen abgelöst, das seit 2013 verwendet wurde. Mit vielen Modifikationen sah das das zuletzt so aus wie hier:

Für Interessierte habe ich die Liste der Modifikationen im Wiki hinterlegt; und auch für mich, falls ich irgendwann zurück zu diesem Design möchte.

Jetzt sieht es so aus wie auf der Webseite zu sehen, bzw. hier für den Fall, dass ich es wieder ändern werde:

Plugins gelöscht

Durch den Wechsel auf das neue Thema konnte ich auch zwei weitere Plugins aus WordPress entfernen.

• Disable Google Fonts
• Fourteen Colors

Keine Google-Fonts mehr von Haus aus

Mir gefällt sehr, dass WordPress in der neuen Version die verwendete Schriftart selbst mitliefert und nicht, wie bei älteren Versionen, per Google-Fonts einbindet. Zumindest nicht für den normalen Benutzer einer Webseite. Im Editor werden durchaus Schriften von Google eingebunden. Aber die habe ich gesperrt.

Anpassungen und was noch fehlt

Folgende Anpassungen sind für das neue Thema gemacht worden:

• Dunkler Hintergrund
  • Hintergrundfarbe für Header und Footer: #252d39
  • Hintergrundfarbe: #212730
• Weißer Text
• Überschriften kleiner
• Weiterlesen-Button nicht mehr so hoch und nicht mehr „Uppercase“.
• Abstand der Bilder (oben und unten) wurde verringert. Auch bei Beiträgen ohne Artikelbild ist der Abstand kleiner.
• Die Bildbeschreibungen von Artikelbildern wurden ausgeblendet, da ich sie dort nicht haben will.
• Autor im Headerbereich der Beiträge wurde ausgeblendet; das ist mein Blog, daher unnötig.
• Fürs Cover-Template hat der Bereich mit dem Overlay nur noch 60% der Höhe. Man sieht dadurch besser, dass es unten weitergeht.
• Farbe fürs Cover-Overlay: #252d39
• Die Primärfarbe lässt sich zwar im Interface von WordPress einstellen, jedoch nur über einen Hue-Farbpicker und der ist sehr ungenau. Eigene Werte lassen sich dort nicht eintragen. D. h. entweder muss man umständlich alles übers CSS anpassen oder in der Datenbank den Wert manuell setzen. Ziel war hier das Blau meines Elefanten-Icons und es ist jetzt umgesetzt.
• Seit dem Update des Themas auf Version 1.1 funktionieren das Menü und die Suche auch auf dem Smartphone.

Aufräumarbeiten

Da ich sowieso einige der alten Beiträge durchschauen musste, habe ich direkt einige davon gelöscht (150 an der Zahl).

Damit eingebettete Videos in der mobilen Ansicht des Blogs auf dem Smartphone nicht zu breit dargestellt werden musste ich jedes Video im Beitrag anpassen. Dazu wurde der Beitrag mit „In Blöcke umwandeln“ bearbeitet und dann musste die Art der Videoeinbettung geändert werden.

Auch gab es und gibt es immer noch viel zu tun wegen der hier verwendeten Galerien. Dazu später mehr in einem eigenen Beitrag.

Mit dem heutigen Update auf WordPress 5.3 wurde das Problem teilweise behoben. Zwar kann man immer noch nicht die Vorschaugröße selbst einstellen. Diese wird indirekt automatisch über die Anzahl der Spalten der Galerie festgelegt. Aber immerhin wird beim Anklicken der Bilder nicht mehr die Miniversion der Bilder geöffent sondern das Bild in voller Auflösung. Für mich reicht das aus. Einen schon ziemlich alten Bugreport dazu gibt es auf Github, siehe hier.

Wenn man trotzdem noch den Classic Editor für Galerien verwenden möchte, so muss man jetzt nur noch zum Erstellen einer Galerie in diesen Wechseln. Eine bereits vorhandene Galerie in einem Beitrag kann man jetzt auch im Gutenberg Editor komplett mit allen Einstellungen bearbeiten, so als wäre man im alten Editor.

Ich brauche das aber nicht mehr, deshalb konnte ich heute das Plugin für den Classic Editor endlich löschen und arbeite jetzt nur noch mit dem Gutenberg Editor. Gleichzeitig kann ich auch das Plugin Publish Confirm löschen, das bei einem, meist versehentlichen, Klick auf „Veröffentlichen“ eine zusätzliche Abfrage stellte, damit nicht aus Versehen ein unfertiger Blogbeitrag veröffentlicht wird. Diese Funktion ist bereits im Gutenberg Editor enthalten.

Sehr schön; einen schönen Editor bekommen, zwei Plugins entfernt. Passt. In den nächsten Tagen werde ich dann noch testen, ob das neue Thema Twenty Twenty für meine Bedürfnisse passen könnte.

Ich brauche keine Kommentare oder Likes für Videos und die meisten Videos enthalten nur kurze Videosequenzen, die wenig Speicherplatz benötigen.

Dadurch benötige ich auch das WordPress Plugin „Video Embed Privacy“ nicht mehr und mein WordPress ist damit wieder etwas „leichter“.

Falls ich doch noch auf Youtube verlinke, dann nur noch mit einem Textlink und ohne Einbettung. Es könnte sein, dass ich die eine oder andere Einbettung übersehen habe, das werde ich dann noch nachholen.

Fügt man einen Galerie-Block ein, dann werden nicht die voll aufgelösten Bilder verlinkt sondern nur kleine Versionen der Bilder.

Die einzige Möglichkeit ist aktuell, dass man für das Erstellen einer Galerie in den Classiceditor wechselt und dann wieder zurück.

Einen Bugreport gibt es bereits, siehe hier.

Alle relevanten Inhalte verschob ich damals in mein “altes” Wiki unter wiki.natenom.de, das DokuWiki nutzt.

Jetzt nach weiteren zwei Jahren habe ich heute das alte Wiki komplett vom Netz genommen. Laut Google Search Console verirrten sich nur noch jeweils unter fünf Benutzer pro Monat auf dieses Wiki.

Ich hätte es einfach dort liegen lassen können, es war nur statisches HTML, aber ich räume gerade auf und es gibt für mich keinen Grund, das online zu lassen, die Inhalte sind ja gesichert.

Somit bleiben noch drei Webseiten von mir, die ich auch in Zukunft aktiv betreiben werde:

• Mein Blog unter natenom.de
• Mein Wiki unter wiki.natenom.de
• Meine Übersichtsseite/Startseite unter www.natenom.com

Was wir alles geändert haben:

• Die globale Topbar, die auf allen meinen Webseiten zu sehen ist, ist nun dunkler, hat einen Hover-Effekt und sieht insgesamt schöner aus.
• Die Suchleiste wird jetzt an der richtigen Stelle angezeigt und nicht mehr mitten auf der Webseite.
• Der Blog ist nun ziemlich dunkel gehalten und nur die einzelnen Artikel sind weiß hinterlegt. Somit lässt sich noch besser erkennen, wo ein Artikel anfängt und aufhört.
• Das Aussehen der Tags unterhalb der Artikel wurde dezenter gemacht und die Tags sind nicht mehr durchgehend groß geschrieben.
• Die Artikelbilder werden nicht mehr teilweise von den Überschriften verdeckt sondern sind komplett sichtbar.
• Die Artikelbilder sind an den oberen Ecken abgerundet.
• Artikel selbst sind am unteren Rand abgerundet.
• Und noch einiges mehr, das ich vergessen habe.

Zum Vergleich, vorher und nachher:

• Die Artikel sind jetzt breiter als zuvor (700 Pixel statt 474 Pixel).
  • Artikelbilder (die über der Überschrift) sind kleiner geworden (maximal 760 Pixel statt 100% der verfügbaren Breite).
  • Der Hintergrund der Artikelbilder ist nicht mehr weiß/schraffiert sondern dunkel gehalten. Dadurch kann man beim Durchscrollen besser erkennen, wann ein neuer Artikel beginnt.

Hier ein aktueller Screenshot, falls das Design wieder ändert wird:

Das alte Logo erkennt man meiner Meinung nach zwar gut wieder, aber wirklich gefallen hat es mir seit längerem nicht mehr.

In den letzten Monaten habe ich immer mal wieder versucht ein neues Logo selbst zu entwerfen; aber dabei kam nichts Sinnvolles heraus.

Die nächste Idee war dann, das jemanden machen zu lassen, der auch etwas davon versteht…

Netterweise hat mir dann Vrifox ein neues Logo erstellt, welches ich jetzt überall nutze.

Zum Vergleich das alte Logo in den Größen 16×16, 100×100 und 300×300 Pixel:

Und das neue Logo in denselben Größen:

Gefällt mir; vielen Dank dafür :)

PS: Je nach Browser kann es bei euch etwas dauern, bis das neue Logo angezeigt wird. Eventuell hilft auch Strg + F5 oder Shift + F5.

Die dritte Spalte rechts wurde entfernt, dadurch ist die Inhaltsspalte deutlich breiter und auch so eingestellt, dass Artikel deren volle Breite nutzen können.

Die Änderungen am CSS sind (Quelle):

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content,
.post-navigation,
.image-navigation,
.comments-area {
max-width: 80%;
}

Die Inspiration dafür kam von dieser Seite.

In der linken Spalte gibt es nur noch die Widgets für die Kategorien und die Schlagwörter.

Viele Verlinkungen aus den Seitenleisten sind nun oben im Menü zu finden – welches immer zu sehen ist. Die entfernten Widgets sind im Footer zu finden.

Somit kann man sich (so die Überlegung) besser auf den Inhalt konzentrieren und muss nicht immer wieder an denselben Informationen vorbei.

Außerdem ist das Menü auf kleinen Displays viel besser zu erreichen als die Widgets.

Hintergrund und Schatten

Der Hintergrund ist nun etwas winterlicher, auch wenn es bisher noch keinen Schnee bei mir zuhause gab. Das Foto stammt von Januar 2013 und das Original gibt es hier.

Außerdem gibt es jetzt um die Seite herum einen von KDE SC abgekupferten, bläulichen Schatten.

Das dazu gehörige CSS ist:

div#page.hfeed.site {
box-shadow: 0px 0px 15px 5px #9AD3F2;
}

Das obere Menü hat keinen Schatten; soll dieser auch noch hinzugefügt werden, so benutzt man noch den folgenden CSS-Code:

div.header-main {
box-shadow: 0px 0px 2px 2px #9AD3F2;
}

\o/

Vielleicht wird der ganze Footer in Zukunft auch noch entfernt werden, mal sehen.

Passt :)

Hier noch ein Screenshot, falls sich das Design in Zukunft wieder ändern wird: