C1: Hauptmenü / Navigation gestalten

Vorwort

In diesem Beitrag gestalten wir das Hauptmenü / Navigation optisch  gefälliger. Das Thema bietet sich förmlich zum Ausprobieren an – allerdings auch zum Verzweifeln. Ich bin mir nicht sicher, ob keinerlei Kenntnisse hier für ein stressfreies Ausprobieren  nicht eher von Vorteil sind.

Außerdem werde ich noch einige nützliche Features von Google Chrome zum Codeuntersuchen vorstellen.

Es sind keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Das Modifizierungsergebnis für das Hauptmenü / NavigationAbb.1: Modifiziertes, neugestaltetes Hauptmenü / Navigation. Das ist das Ziel. Das Hauptmenü ist durch seinen Hintergrund (1) optisch abgesetzt. Links, über die man mit dem Cursor rüber schwebt (engl. hover), verändern ihre Textfarbe (2) und ihre Hintergrundfarbe (2) als Hovereffekt.

Die Themeausgangslage für das Hauptmenü / Navigaton für einen späteren Vergleich.Abb.2: Die Ausgangslage als Vergleich. Von „da aus“ wird der Code modifiziert.

Teil 1 – Gesamtes Hauptmenü / Navigation untersuchen

Untersuchen der Codestelle für das gesamte Hauptmenü / Navigation über den Codeinspektor.

1. Drücken Sie in Google Chrome die rechte Maustaste im Bereich  Hauptmenü / Navigation und wählen Sie ‚Untersuchen‘.

CSS - Befehl, um das Hauptmenü / Navigation optisch hervorzuheben.

Hinweis:

In ‚SH – Manier‘ (3) vermuten wir, dass das ‚Hauptmenü / Navigation‘ irgendetwas mit der Klasse ‚main-navigation‘ zu tun haben könnte.
Der ‚a-Tag-Befehl‘ hat was mit Links zu tun.
Hier könnten wir also richtig sein.

Den Befehl für die Hintergrundfarbe haben wir schon kennengelernt.

2. Fügen Sie an entsprechende Stelle den Befehl folgenden Befehl ein:
background-color: rgba(255,255,225,0.5);

Das Codesnippet werden wir in unsere aus den vorherigen Beiträgen bekannte style.css des Childthemes kopieren und speichern.

Hinweis:

Das Ergebnis (4) sieht man sofort in der Liveansicht.

Speicherort der 'style.css' des Childthemes.

3. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets).

Der Codeteil wird in diese 'style.css' kopiert.

4. Fügen Sie das Codesnippet in die style.css des Childthemes ein und speichern.

Damit wäre der erste Teil erfolgreich erledigt.

Teil 2 – Hauptmenü / Navigation genauer untersuchen

Genaueres Codeuntersuchen über Features im Inspektor.

5. Drücken Sie die rechte Maustaste im Hauptmenü / Navigation und anschließend auf ‚Untersuchen‘.

6. Drücken Sie auf ‚:hov‘, um Hoverzustände zu simulieren und an die entsprechende Stelle im Quellcode zu gelangen.

Überprüfung über den Inspektor, ob die Codestelle die Gewollte ist.

7. Erzwingen Sie über Häckenaktivierung den Hoverstatus. Der Quellcode wird an der entsprechenden Stelle angezeigt.

8. Fügen Sie gewünschte Codezeilen hinzu
zum Beispiel: background-color: darkred;
und beobachten in der Liveansicht das Verhalten. Vergleichen Sie das Ergebnis mit unerem Ziel aus Abb.1!

Egal was Sie machen, es wird nie so aussehen wie in Abb.1!

Das Problem muss also anders gelöst werden!

Kurzexkursion: Realisierung Hauptmenü / Navigation mit CSS und HTML

Links werden über das ‚a-Tag‘ in html realisiert. Nun besteht das Hauptmenü / Navigation aus Links. Aber zusätzlich werden hier diese Links in Listen realisiert. Das Tag dafür ist an der Bezeichnung ‚li‘ zu identifizieren.

Wir suchen also eine Stelle die an ‚li‘ und ‚hover‘ zu erkennen ist!

Teil 2 – Zweiter Versuch!

Codestelle war falsch! Neuer Versuch.

Gehen Sie zurück und führen die Schritte 5. – 7. aus!

Zurück zur genaueren Codeuntersuchung.

9. Drücken Sie auf style.css:xyz (hier und wahrscheinlich auch bei Ihnen 831).

Hinweis:

Wir sind dann schon in der richtigen Klasse ‚.main-navigation‘. Auch das Stichwort ‚hover‘ ist schon da.

Nach Tipp fehlt aber noch unser ‚li‘.

Ein CSS-Befehl zur Live-Kontrolle wird verwendet.

10. Fügen Sie einen kontrollierbaren Befehl – z.B. color :red; – ein und testen das Liveverhalten.

Hinweis:

Irgendwie ist das noch nicht die richtige Stelle. Nach dem vorherigen Hinweis erscheint das auch nachvollziehbar.

Eine neue, die Richtige, Codemodifizierungstelle wird identifiziert.

11. Drücken Sie die rechte Maustaste – dieses Mal über dem aktiven Link – und wählen Sie ‚Untersuchen‘.

12. Nun taucht „unser li“ auf. Drücken Sie style.css:xyz (hier und wahrscheinlich bei Ihnen 3016).

Testen der Codemodifizierung im Inspektor mit Anzeige des Ergebnis in der Liveansicht.

13. Hier nun sind wir an der richtigen Stelle. Für das gezeigte Verhalten in der Liveansicht sind folgende Codezeilen zu modifizieren bzw. zu ergänzen:

color: white;

background-color: darkred;

Kopieren Sie den gesamten bei 13 umrandeten Code in den Zwischenspeicher.

Öffnen der 'style.css' des Childthemes.

14. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets)

Untersuchen der Codestelle für das gesamte Hauptmenü / Navigation über den Codeinspektor.

15. Fügen Sie den gesamten Quellcode ein und rücken ggf. den Code ein.

Speichern Sie die Datei.

Hinweis: Die Veränderungen sind nun dauerhafte umgesetzt.

Hinweis: Die ‚@media – Anweisung‘ steht im CSS-Code und „umgibt“ u.a. auch unseren modifizierten Code. Der Einfachheit halber habe ich den direkt angegeben und nicht gezeigt, wie man sich den zusammen sucht.

Bei ‚@media – Anweisungen‘ handelt es sich um sogenannte Media Queries.

 

 

 

 

B7: Widgettrennlinien gestalten

Vorwort

In diesem Beitrag machen wir die Trennlinien zwischen den aktivierten Widgets  optisch gefälliger, damit die Website stärker „aus einem Guss“ erscheint. Die Widgettrennlinien werden ebenfalls weiß-durchschimmernd.

Außerdem gibt es eine Kurzexkursion zum CSS – Befehl ‚border-top‘.

Es sind abermals keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Widgettrennlinien auf der Internetseite finden und Gestalten.Abb.: Widgettrenlinien – Ausgangslage. Die Widgettrennlinien (1) werden in Farbe, Dicke und Beschaffenheit auf das übrige Erscheinungsbild abgestimmt.

Quelltext untersuchen mit Google Chrome

2. Drücken Sie in Google Chrome die rechte Maustaste auf der Internetseite mit den Widgettrennlinien und wählen Sie ‚Untersuchen‘.

Den Widgetbereich auf der Internetseite suchen.

Hinweis:

In ‚SH – Manier‘ (3) vermuten wir, dass die Widgettrennlinien irgendetwas mit der Klasse ‚widget‘ zu tun haben könnte.

Dieser Vermutung werden wir durch Codedeaktivierung / Codeaktivierung und Beobachten der Liveveränderungen im Folgenden nachgehen.

Den Widgetbereich auf der Internetseite durch den Mauszeiger aufsprüren.

4. Drücken Sie mit der linken Maustaste den ‚Selector‘ und bewegen sie den Mauszeiger auf eine Widgettrennlinien.

5. Der zugehörige Quellcode wird angezeigt.
Wir vermuten, dass der gesuchte Befehl in der Klasse ‚widget‘ zu finden ist.

Finden des Quellcodes der Wigettrennlinien.

6. Durch ausprobieren (Codebefehle deaktivieren und Liveveränderungen beobachten) ermitteln wir den Befehl ‚border-top‘ als unseren Befehl.

Kurzexkursion: CSS – Anweisung ‚border-top‘

Über die „Befehlsfamilie“ ‚border‘ können Sie auf vielfältige Weise Linien und ganze Rahmen gestalten. Dabei reichen die Gestaltungsparameter von Farbe, Linieneigenschaft (z.B. gestrichelt) bis zur 3-D –Darstellung. Eine ausführliche Dokumentation dazu finden Sie hier. Das Durchlesen möchte ich Ihnen für einen Einblick in die vielen Gestaltungsmöglichkeiten empfehlen. Sie können diese auch sofort durch praktisches Probieren auf Grundlage des Folgenden auf sich wirken lassen.

Dem ‚border-top‘ – Befehl werden folgende Eigenschaften „mitgegeben“:

▓      Linienstärke

▓      Linienstil

▓      Linienfarbe

Ein CSS – Befehlsbeispiel ist:

»  border-top: 4px dotted rgb (123, 234, 5);

Widgettrennlinien gestalten

Der 'border-top' - Befehl, um die Widgettrennlinien zu gestalten.

7. Wir verändern ‚live‘ den Quelltext wie in dem Bild zu sehen.

»  border- top: 8px solid rgba(255,255,255,0.6);

Das Ergebnis kann direkt im Browser gesichtet werden.

Hinweis: Die Veränderung ist nicht dauerhaft! Sie wird durch ein „Neu laden“ der Seite zurückgesetzt.

Die style.css des Childthemes öffnen.

8. Kopieren Sie den gesamten Quellcode wie  im vorherigen Bild angezeigt (in den Zwischenspeicher).

9. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets)

Der CSS - Code der Wigettrennlinien in Brackets.

10. Fügen Sie den gesamten Quellcode ein und löschen Sie nicht veränderte Eigenschaften aus ihm raus.

Speichern Sie die Datei.

Hinweis: Die Veränderungen sind nun dauerhaft umgesetzt.

 

B6: Hintergrundbild in WordPress

Hintergrund auf der Homepage gestalten

Die Veränderung in unserem Theme, die ich in diesem Beitrag vorführe, ist wohl die optisch Auffälligste in dieser Beitragsreihe. Dabei sind die nötigen Veränderungen überschaubar. Wir werden ein Hintergrundbild (1) in WordPress mit der Standardfunktion einfügen und die vorhandene Ebene (2), die darüber liegt, im CSS-Code leicht transparent machen. Außerdem werden wir die Ebene oben und unten bündig (3) mit dem Browserfenster machen.

Dazu sind abermals keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Ausgangslage - Rahmen mit HintergrundAbb.: Hintergrundgestaltung in WordPress – Ausgangslage. Der schwarze Hintergrund (1) wird durch ein Bild ersetzt. Die weiße Ebene (2) wird durchscheinend. Der Abstand der Ebene oben und unten (3) zur Anzeigefläche des Browsers wird gelöscht.

Ein Hintergrundbild in WordPress einfügen

Designauswahl im Backend

4. Wählen Sie im Backend unter Design ‚Hintergrund‘.

Hintergrundbild auswählen

5. Drücken Sie auf ‚Bild auswählen‘.

Hintergrundbild aus der Meediathek auswählen

Hinweis: Die Mediathek öffnet sich.

6. Wählen Sie Ihr Hintergrundbild aus.

Hinweis:

Das hierausgewählte Bild wurde vorher in die Mediathek hochgeladen.

Es handelt sich um das kosten- und lizenzfreie Bild ‘bricks-459299‘ der Mediaplattform www.pixabay.de.

7. Drücken Sie ‚Bild wählen‘.

Hintergrundbild - Einstellungen und speichern

8. Wählen Sie über das Dropdown – Menü ‚Bildschirmfüllend‘.

9. Geben Sie die Bildposition als ‚zentriert‘ an.

10. Speichern Sie Ihre Einstellungen oder Veröffentlichen Sie direkt Ihr Hintergrundbild mit den entsprechenden Einstellungen.

Ergebniszwischstand

Hinweis:

Kurzer Ergebniszwischenstand

(11): Das Hintergrundbild liegt nun hinter der weißen Ebene (12) auf der der Content (Inhalt) dargestellt ist.

(12): Im nächsten Schritt werden wir über den CSS-Code die Ebene transparent(er) machen, wodurch das Hintergrundbild durchscheinen wird.

(13): Im Anschluss werden wir den oberen und unteren Abstand der Ebene zum Browserfenster löschen.

Kurze Anmerkung zum CSS-Code:

Die style.css ist in CSS-Code geschrieben.

Quellcode im Browser untersuchen

14. Drücken Sie die rechte Maustaste und wählen Sie ‚Untersuchen‘.

Hinweis:

Im nächsten Bild  gibt es zusätzliche Codeansichten der dargestellten Seite.

Es wird der HTML – Code der verwendeten ‚Klasse‘ ‚div#page.site‘ (oben) angezeigt und der CSS – Code  im Reiter ‚Styles‘ (unten).

Das Ganze jeweils für das ausgewählte Element auf der Seite.

Quellcode - live im Browser

15. Wählen Sie (mit dem Cursor) die weiße Ebene, um den entsprechenden Code angezeigt zu bekommen.

Attribute für die weiße Ebene identifizieren

16. Um in ‚SH-Manier‘ die richtigen Stellen zu lokalisieren, gehen wir wie folgt vor (die meisten Einstellungen sind durch den Klick auf die weiße Ebene automatisch vorgenommen:

Ziel » Weiße Ebene durchschimmernd zu machen.

▓  Wählen Sie den Reiter ‚div+page.site‘.

▓  Vergewissern Sie sich, dass es sich um die Klasse ‚site‘ handelt.

▓  Suchen Sie unter ‚Styles‘ nach der Klasse ‚.site‘.

▓  » Es finden sich die Einträge ‚margin‘ und ‚background-color.

▓  Um herauszufinden was diese Befehle bewirken, kann man hier (background-color) und hier (margin) nachlesen oder ausprobieren. Letzteres werden wir jetzt machen!

17. Entfernen Sie den Haken. Damit deaktivieren Sie den Befehl. Auf der linken Seite sehen Sie direkt die Auswirkung. Die weiße Ebene wird durchsichtig.

Attribute für den Ebenenabstand

Hinweis:

Aktivieren Sie den Haken wieder. Da die Veränderung nur ‚Live‘ dargestellt wird und nicht gespeichert wird, können Sie auch über ‚F5‘ die Seite neu laden damit der Ursprungszustand wiederhergestellt wird.

18. Entfernen Sie den Haken des Margin – Befehls für die Klasse ‚.site‘. Sie deaktivieren damit den Befehl. Die weiße Ebene fühlt randlos das Browserfenster. Der Steinhintergrund liegt deckungsgleich darunter.

Hinweis:

Diese Befehle haben wir für unsere Zielerfüllung gesucht!


Exkursion ‚backgroundcolor‘:

Hintergrundbild - Exkursion 1 und 2

Der (Hintergrund-) Farbe einer Internetseite kann man über verschiedene Anweisungen Farben zu ordnen. Da wir die Transparenz mitangeben (Alphatransparenz) wollen, brauchen wir den Befehl. ‚rgba‘ (Rot, Grün, Blau, Alphatransparenz).

Die ‚rgb‘ – Werte werden jeweils als ganze Zahlen von 0 – 255 angegeben.

In Prozent bzw. in der Spanne von 0 -1 wird die Alphatransparenz angegeben. Kommawerte sind zulässig, wobei die Schreibweise für das Komma der Punkt ist!

Ein Beispiel für einen kompletten CSS-Befehl ist:

background-color: rgba (123,147,159,0.75);

Exkursion ‚margin‘:

Der Befehl ‚margin‘ gibt Abstände von einem Element zu einem übergeordneten Element an.

Hier wäre es unsere weiße Ebene zum Browerfenster.

Es gibt verschiedene Schreibweisen und Werteangaben, die benutzt werden können.

Eine Möglichkeit für verschiedene Schreibweisen stelle ich hier vor.

margin: 15px;

» Das Element hat zu allen Seiten den festen Abstand ‚15 Pixel‘.

margin: 15px 38px;

» Das Element hat nach oben und unten den festen Abstand ‚15 Pixel‘. Nach links und rechts den festen Abstand von 38 Pixeln.

margin: 15px 38px 43px 52px;

» Das Element hat folgende feste Abstände:

oben = 15 Pixel

rechts = 43 Pixel

unten = 38 Pixel

links = 52 Pixel


Auf zur Umsetzung!

Wir werden die Veränderungen in obiger Art durchführen und den entsprechenden CSS-  Code dann in unser Childtheme kopieren.

Weiße Ebene im Browser durchschimmernd machen - live

19. Geben Sie für die weiße Ebene eine Alphatransparenz von 0.8 an, um das Erscheinungsbild auf der linken Seite zu erhalten.

Der vollständige Befehl lautet:

background-color: rgba(255,255,255,0.8);

Ebenenabstand live im Browser verändern und veränderten Quellcode kopieren

20. Um den Abstand der weißen Ebene oben und unten zum Browserfenster zu löschen, geben Sie ein margin von 0px an.

Der vollständige Befehl lautet:

margin: 0 21px;

21. Markieren Sie sich den veränderten Codeteil und kopieren Sie diesen (in den Zwischenspeicher).

Style.css im Childthemeordner

22. Wechseln Sie im Explorer in den Childthemeordner, den wir in einem vorherigen Beitrag angelegt haben.

» C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen-child

23. Öffnen Sie die stlye.css mit einem geeigneten Editor, z.B. Brackets.

CSS - Code in Brackets einfügen

24. Fügen Sie Ihren kopierten Text unter die ‚@import – Anweisung‘ ein.

Da die beiden Befehle zur selben Klasse ‘site‘ gehören, können  Sie die Befehle in einer Klassenangabe zusammenführe.

Speichern Sie die erweiterte style.css ab.

Hinweis:

Klassen werden in CSS immer mit einem vorangestellten ‚.‘ definiert.

Öffentliches Endergebnis - Hintergrundbild in WordPress mit transparenter Ebene darüber

Hinweis:

Die Veränderungen sind nun dauerhaft umgesetzt.

 

 

B5: Hovereffekt des Headerbildes löschen

Allgemeines zum Hovereffekt

Der Hovereffekt ist ein Gestaltungselement, um ein statisches Verhalten eines Elementes auf ihrer Website interaktiver erscheinen zu lassen und interessanter zu machen. Breite Verwendung findet der Effekt bei der Anwendung auf Links über das a-tag im HTML-Code, um diese hervorzuheben. Sie fahren dabei mit dem Mauszeiger über den Link, der z.B. aus einem Text oder Bild besteht, und dieser/dieses verändert sich während der Mauszeiger darüber „schwebt“ (engl.: to hover).Hovereffekt des Headerbild löschenAbb. 1: Gegenüberstellung  des Websiteelementverhaltens des WordPress – Themes ‚Twenty Sixteen‘ ohne und mit „Hover – Reaktion“. Bei der Hover – Reaktion“ wird das Bild hier leicht „milchiger“.

Daraus kann man ableiten, dass der Hovereffekt für Touchscreendisplays in der „Linkanwendung“ eher uninteressant ist, weil Sie  hier nicht erst über den entsprechenden Bereich „schweben“, sondern sofort drauf drücken.

Der Effekt wird immer – also auch wenn ein WordPressplugin verwendet wird – über CSS-Code modelliert, der dann im HTML – Code aufgerufen wird.

Diese Stelle werden wir gleich im HTML – Code suchen und löschen.

Beispiele für Hovereffekte findet man hier.

Ich werde im Folgenden mit Google Chrome als Browser mit „Quellcode – Untersuchung“  und Brackets als Codeeditor arbeiten (siehe auch Links). Dabei werde ich nicht näher auf die Bedienung des Browsers und des Editors eingehen.

Echte Childthemebearbeitung

Kehren wir nun zur echten Childthemebearbeitung zurück. Für das Löschen des Hovereffekts müssen wir in den Code. Nun habe ich auf der Startseite gesagt, dass man ohne Programmierkenntnisse auskommt. Gleichwohl sind eine „taktische und zielorientierte Problemlösungsauffassung“ wünschenswert. Wir machen also nun einen auf „Sherlock Holmes (SH)“ und behalten dabei das Ziel im Blick.

Erfahrung hilft natürlich bei so einem Vorgehen und darum kann ich Sie nur ermutigen, meine Impulse zu akzeptieren bis Sie ein eigenes Gespür dafür entwickelt haben, wie man bei einem konkreten Zielvorhaben vorgehen kann.

Finden der richtigen Datei, um den Hovereffekt auf dem Headerbild im Code zu finden und zu löschen

Auf einer Webseite können verschiedenartige Hovereffekte eingesetzt werden. Wir wollen  uns speziell dem Hovereffekt des Headerbildes widmen.

Zunächst müssen wir die richtige Datei finden. In SH – Manier vermuten wir einen Dateinamen „irgendwas mit header“.

Der richtige Startpunkt zu herantasten ist immer in den Dateien des Themes zuschauen.

Hier unter » C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen. Und da werden wir auch schon fündig.header_php im Theme - OrdnerAbb. 2: Order und Dateien im Themeverzeichnis

Diese Stelle merken wir uns! Wir kommen gleich darauf zurück.

Zuvor überprüfen wir „live“ mit Google Chrome Bowser, ob es die richtige Datei ist.

Live – Modifikation im Browser

Bevor wir handfest unsere Überlegungen in die Tat umsetzen, überprüfen wir unsere Überlegungen im Browser. Geeignet hierfür sind Google Chrome und Firefox.

Hierzu öffnen wir in Google Chrome die Webseite.Website im BrowserAbb. 3: Experiment-WP (lokal) im Google Chrome Browser geöffnet.

1.     Drücken Sie die linke Maustaste über dem Headerbild.

2.     Es erscheint folgendes Auswahlmenü. Drücken Sie ‚Untersuchen‘.

Website und Quellcode im Browser angezeigt über Funkton "untersuchen"Abb. 4: Obiges Fenster wird geöffnet. Auf der linken Seite wird das HTML-tag und die Bildgröße (3) angezeigt. Auf der rechten Seite der „ausformulierte“ Seitenquellcode für den Headerteil (4). Der Headerteil trägt die individuelle Kennung (class)  ‚header-image‘ (5). Drücken Sie auf dem Quelltext die rechte Maustaste (6).

Live - Quellcode - Modifikation über die Funktion "untersuchen"Abb. 5: Live –Modifikationen im Browser

Die Veränderungen werden nicht gespeichert!

7.     Drücken Sie auf ‚Edit as HTML‘.

8.     Löschen Sie das vollständig das a – tag.

Bei 9. sehen Sie den temporär geänderten und funktionierenden Code.
 
Unter https://wiki.selfhtml.org/wiki/Referenz:HTML/a  finden Sie Informationen zum a – tag.

Auswirkung der Live - Quellcode - ModifikationAbb. 6: Überprüfen Sie die Auswirkung! Der Cursor hat nun keine Hover – Eigenschaften über dem Headerbild mehr (10).

Dauerhafte Modifikation im Childtheme

Nachdem im „Livemodus“ unsere Modifikation funktioniert, übertragen wir diese Veränderung auf unser Childtheme. Damit wird die Veränderung fester Bestandteil unserer Website.

header_php im Childtheme - OrdnerAbb. 7: header.php in den Childtheme – Ordner kopiert

11.           Kopieren Sie die header.php Datei aus Abb. 2 in den Childtheme –  Ordner.

header_php in BracketsAbb. 8: Die header.php aus dem Childtheme – Ordner in Brackets geöffnet. Der Quelltext ist „allgemein“ in PHP-Programmiersprache formuliert und weicht deshalb von unserem Quelltext im Browser ab. Über die Kennung (class) ‚header-image‘ ist die Stelle eindeutig zu identifizieren.

11.           Löschen Sie das a – tag.

12.           Speichern Sie die header.php ab.

Fertig! Nun funktioniert Ihre Website ohne Hovereffekt auf dem Headerbild.

Der Vollständigkeit halber bleibt zu erwähnen, dass im CSS – Code weiterhin die Klasse ‚header-image‘ als Artefakt existiert.

 

 

B4: Hochauflösende Displays in WordPress

Optimierung für hochauflösende Displays in WordPress

Optimierung für hochauflösende Displays in WordPress - Das Titelfoto Abb.: Retina- / Optimierung für hochauflösende Displays in WordPress

Normales HD, Full HD, QHD, 4K- Auflösung, was für TV- Displays im Wohnzimmer gilt, gilt auch für Smartphone Displays. Jedoch sind Smartphone – Displays eher um 5 Zoll in der Diagonalen und nicht 50 Zoll. Dies zeigt einen deutlichen Hang zum Marketingargument, wenn es neuerdings z.B. um 4K Smartphone Displays geht. Denn eine technische Sinnhaftigkeit existiert dafür nicht.

Der Grund für eine wünschenswerte hohe Auflösung (besser hohe Pixeldichte) ist, dass das menschliche Auge keine einzelnen Pixel mehr wahrnimmt. Das Bild was man erblickt erscheint „quasi-analog“.

In dem Zusammenhang gibt es hochauflösende Displays. Der Begriff Retinadisplays bezeichnet das gleiche und wird bei Appleprodukten benutzt.

Möchte man so über den Daumen sinnhafte Aussagen herausstellen so kann man sagen:

  • Unter 5 Zoll ist normales HD OK.
  • Eine 4K- Smartphone – Auflösung ist schwachsinnig.
  • Bei Benutzung einer VR – Brille ist jedoch eine möglichst hohe Auflösung zu bevorzugen.

Und immer an die Leser / Besucher denken!

Was kann man nun daraus ableiten? Keine einzelnen Pixel mehr erkennen zu können ist ein Qualitätsmerkmal. Dieses muss auch mit der Qualität ihrer angebotenen Bildmedien einhergehen! Nun bedeutet eine höhere Bildqualität zugleich größere Datenmengen, die zu laden sind. Außerdem besitzt nicht jeder Besucher ihrer Website ein hochauflösendes Display. Eine höhere Bildqualität stellt hier keinen Gewinn dar, sondern bestraft den Besucher durch ein unnötiges höheres Datentransfervolumen und damit einhergehend längere Ladezeiten.

Über sogenannte Media Queries im Quell – Code kann man nun die Displayauflösung des Besuchers abfragen. Im folgenden Schritt kann man wiederum über den Quell- Code das Bildmedium in geeigneter Qualität ausliefern.

Das ist aber was für Themeentwickler und Programmierer. Wir verwenden hier ein Plugin. Das macht das automatisch inkl. der nötigen Bildbearbeitung. Wir haben „nur“ drauf zu achten, dass die Ausgangsqualität hochwertig ist. Denn eine mindere Qualität aufzuwerten geht nicht!

Das Plugin: WP Retina 2x

Das Plugin WP Retina 2x ist die entsprechende Wahl für unser Vorhaben. Dieses wird in einer kostenfreien Version und in einer kostenpflichtigen Pro – Version angeboten. Ich benutze hier die kostenfreie Version.

Ich werde an dieser Stelle das Plugin nicht ausführlich erklären. Ebenso werde ich keine Strategien aufzeigen, um die Veränderungen zu verifizieren. Durch das Plugin optimierte Bilder bzw. Codeergänzungen sind durch den Zusatz“@2x“ im Dateinamen bzw. im Quellcode zu identifizieren.

Plugin für hochauflösende Displays in WordPress suchen 1.     Wählen Sie im Backend unter Plugins ‚Installieren‘.

2.     Suchen Sie nach dem Plugin ‚WP Retina 2x‘.

3.     Drücken Sie ‚Jetzt installieren.

Hinweis: Nach erfolgreicher Installation ändert sich die Buttonbeschriftung von ‚Jetzt installieren‘ in ‚Aktivieren‘

4.     Drücken Sie ‚Aktivieren‘.

Backend nach Installation des Plugins WP Retina 2x5.     Unter Plugins » Installierte Plugins ist das Plugin ‚WP Retina 2x‘ zu finden.

6.     Durch das Plugin ist der Punkt ‚Meow Apps‘ hinzugefügt worden.

7.     Unter Medien » Retina befindet sich nun die (Arbeits -) Oberfäche für   die Retinaoptimierung.

Oberfäche des Plugins WP Retina 2x8.     Erklärung der Plugin – Oberfläche:

a)     Bulk Generate (Thumbnails & Retina)

Alle vorhandenen Medien werden nach Möglichkeit retinaoptimiert.

b)    Bulk Delete (Retina Only)

Für alle vorhandenen Medien wird die Retinaoptimierung rückgängig gemacht und die nicht mehr benötigten Dateien gelöscht.

c)     Verzeichnis der vorhandenen Medien

█  Thumbnail

█  Dateiname

█  Pixelgröße des Originals

█  Generate – Button, um die Datei einzeln für eine hochauflösende Anzeige zu optimieren

█  Button ‚Ignore‘

█  Button ‚Details‘

d)    Mediengröße in Pixel für normale Anzeige und retinaoptimiert

T = thumbnail (300 x 300)

M = medium (600 x600)

M = medium_large (1536 x 0)

L = large (2048 x 2048)

P = post-thumbnail (2400 x 19998)

Farbcode

Orange = Eine Retinaoptimierung ist möglich.

Rot = Eine Retinaoptimierung ist nicht möglich.

Blau (Optimierungsstatus der einzelnen Bilder des Plugins WP Retina 2x)= Diese Datei ist retinaoptimiert.

 

9.     Hinweis auf die maximale Dateigröße, die hochgeladen werden kann.

Hinweis: Die Bilder finden Sie im WordPressordner unter: \wp-content\uploads


Optimierung des Originals für hochauflösende Bilder in WordPress

Ich möchte nun an Hand der benutzten Headerbilder auf dieser Homepage skizzieren wie man strategisch vorgeht, um geeignete hochauflösende Bilder zu erzeugen. Ich bediene mich hier Vorlagen von Pixabay (siehe auch meine Linkliste). Dabei gehe ich davon aus, dass das WordPress – Logo schon in die entsprechende Vorlage reinmontiert ist.

Konkret handelt es sich um folgende Bilder:

Folgende Gedanken lohnen es sich dabei anzustellen. Ich habe diese in einer Tabelle zusammengefasst. Bildbearbeitungen  werden dabei mit einem Grafikeditor (z.B. Gimp, siehe auch Links) durchgeführt.

1.     (H-K | 2-3): Ermitteln Sie die WordPressempfehlung.

2.     (F, G | 2-6): Daraus ergibt sich das Seitenverhältnis.

3.     (A – E | 2-6): Ermitteln Sie Vielfache zur Empfehlung.

4.     ‚Matrix‘: Bringen Sie das Bild auf eine geeignete Vielfachgröße in der Breite.

5.     Bearbeiten Sie das Bild in der Höhe auf das dazugehörige Vielfache durch zuschneiden. » fertig

6.     ‚Medizin‘: Verkleinern Sie das Bild in der Höhe auf ein geeignetes Vielfaches.

7. Erstellen Sie ein neues Bild mit entsprechender Größe bzgl. der Höhe (und Breite).

8.     Kopieren Sie die bearbeitet Vorlage in das neue Bild  und ordnen es „prominenterscheinend“ an.

9.     Bearbeiten Sie die freien Flächen für ein gefälliges Erscheinungsbild. » fertig.

10.     ‚Wand‘: Wie ‚Medizin‘

11.     ‚E-Labor‘: Wie ‚Medizin‘

Hinweis: Die Bilder sollten auf das größtmögliche Vielfache optimiert sein und natürlich auch so abgespeichert werden.

Die Exceltabelle mit Rechenfunktionen können Sie hier downloaden.


Praktische Umsetzung in WordPress

Nachdem die Bilder nun in ausreichender Qualität vorliegen werden sie in die Mediathek geladen, ein Alt – Text vergeben und über das Plugin ‚WP Retina 2x‘ retinaoptimiert. Anschließend werden sie – wie schon einmal beschrieben – als Headerbilder integriert.

Hochladen von qualitätsoptimierten Bilder für den Header.

1.     Laden Sie die Bilder in die Mediathek hoch.

2.     Vergeben Sie jeweils einen Alternativtext.

Möglichkeit in WordPress einen Alternativtext zu vergeben.

Retinaoptimierte Headerbilder für hochauflösende Displays in Wodpress.

3.     Generieren Sie über das Plugin ‚WP Retina 2x‘ Bilder für hochauflösende Displays in WordPress.

Hinweis: Wechselt der Farbcode der Media-Size-Anzeige ins Blau, so ist das entsprechende Bild retinaoptimiert, also optimiert für hochauflösende Displays in WordPress.

Headerbilderlöschung in WordPress

4.     Löschen Sie die alten Bilder aus dem Header. Leere Headerarbeitsfläche in WordPress

Einfügen von Headerbilder für hochauflösende Displays in WordPress

5.     Fügen Sie die neuen, optimierten Headerbilder für hochauflösende Displays in WordPress ein. Nehmen Sie dafür die angebotenen Bilder aus Ihrer Mediathek.

Hinweis: Die vorgeschlagene Zuschneideauswahl sollten Sie so bestätigen.

B2: Ihr Logo in WordPress

Ihr Logo in WordPress auf der Internet – Seite

Nachdem wir im Beitrag „Bilder in WordPress“ die jpg – Kompression in WordPress ausgeschaltet haben bzw. auf maximale Qualität gesetzt haben, gibt es um Ihr Logo in WordPress keinen technischen Stolperstein mehr.

Aber es sei an dieser Stelle deutlich darauf hingewiesen, dass Sie für alle auf Ihrer Seite befindlichen Bilder die Lizenzrechte innehaben müssen. Zu einem freien Bilder und Video Pool  verweise ich unter Links (Pixabay).

Ich möchte den Weg an dieser Stelle trotzdem skizieren:

Der Weg zum WordPress Customizer1. Wählen Sie im Backend unter Design den Customizer.

Website - Informationen in WordPress. Hier können Sie Ihr Logoin WordPress einbinden.2. Unter ‚Website-Informationen‘ finden Sie die Möglichkeit, ein Logo auf Ihrer Seite einzubinden.

Auswahl eines Logos aus der WordPress - Mediathek3. Drücken Sie auf ‚Logo auswählen‘, um ein Logobild aus Ihrer Mediathek auszuwählen.

Bildmaßempfehlung für ein Logo in einem WordPress - Theme4. Wählen Sie nun ein Logo aus Ihrer Mediathek aus oder laden vorher ein gewünschtes in die Mediathek hoch.

Hinweis: Es werden für das Layout optimierte Bildmaße (themeabhängig; hier 240 px mal 240 px) vorgeschlagen.

Diese Angabe können Sie benutzen, um ein Logo außerhalb von WordPress – z.B. mit dem Grafikprogramm GIMP (siehe Links) – größen- und layoutoptimiert zu erstellen.

Bild - Anhang - Details für SEO. Der Alternativtext / das ALT - Tag.Exkursion  ‚Suchmaschienenoptimierung‘

5. Für die Suchmaschienenoptimierung (SEO) sind der Alternativtext (ALT) und der Dateiname Bewertungssignale die zum Ranking beitragen.

Den ALT- Text können Sie jederzeit verändern, müssen dann aber das Bild neu auf der Seite platzieren.

Denken Sie daran, dass das Logo – genauso wie Headerbilder – auf jeder Seite erscheinen können.

Eventuell nimmt hier ein Keyword Rankingpower einer Seite, weil es auch auf anderen Seiten auftaucht.

6. Wählen Sie ein Bild aus.

7. Drücken Sie auf auswählen.

Bild zuschneiden in WordPress8. Sie können jetzt das Bild zuschneiden

(Es wird dann neu abgespeichert. Da wir aber vorher die Kompression auf ‚maximale Qualität‘ gesetzt haben, wird nichts Nachteiliges passieren.)

oder das Zuschneiden überspringen.

Bilder bearbeiten und speichern in WordPress.9. Um Ihr Bild bzw. Bildbearbeitung zu sichern, wählen Sie eine der folgenden Aktionen:

  • Veröffentlichen
  • Speichern
  • Planen

In einem folgenden Beitrag führe ich diesen Weg für Headerbilder durch.

B1: Bilder in WordPress

Grundsätzliches zu Bildformaten im Internet

Es gibt viele Bildformate – .jpg, .png, .svg, .bmp, .gif – die im Internet und in der realen Welt benutzt werden. Eines ist sicher, Ihre Internetseite kommt ohne Bilder nicht aus. Bilder auf der Internetseite – also auch Bilder in WordPress – laden den Besucher ein, länger auf ihr ihr zu verweilen. Das ist durch Untersuchungen belegt.

digitale Bildformate auch in WordPress

Nun kommen wir aber gleich zu den zu „beachtenden Faktoren“. Bilder erzeugen Ladezeiten und sollten unbedingt optimiert für das Internet sein. Vorweg kann man pauschal schon sagen, dass Bilder für das Internet eine Auflösung von 72 dpi besitzen sollten. Bildformate sollten kompatibel zu allen Browsern in allen ihren Versionen sein.

Zwei Formate bieten sich hier an. Das ist das JPG – Format und das PNG – Format. Zu dem SVG – Format mache ich am Ende des Kapitels noch eine Bemerkung. Es soll hier ansonsten nicht weiter interessieren.

JPG oder JPEG – Format

Das Format entspricht einer Norm für verlustbehaftete Bildkomprimierung. Der Name geht auf das Gremium „Joint Photographic Experts Group“ zurück.

Es können 16,8 Millionen Farben bei geringer Dateigröße (auf Grund von verlustbehafteter Kompression) dargestellt werden.

Die Stärken des Formats liegen in der Darstellung von detailreichen und großen Fotos mit vielen Farben. Transparenz (kein Alphakanal) kann das Format hingegen nicht darstellen. Die Darstellung von scharfen Kanten ist eine Schwäche des Formats.

PNG – Format (Portable Network Grafics)

Das Format ist eine Weiterentwicklung des GIF – Formates. Es kann Transparenz, ebenso wie scharfe Kanten darstellen. Außerdem  kann es komprimiert oder kompressionslos verwendet werden. Das zur Verfügung stehende Farbspektrum muss sich allerdings mit 256 Farben  begnügen. So eignet sich das Format typischerweise für kleinere Logos, Icons und Grafiken.

SVG – Format (Scalable Vector Grafic)

Bilder im SVG – Format sind Vektorgrafiken. Sie können beliebig groß dargestellt werden, ohne dabei „pixelig“ zu werden. Das Format wird überwiegend für Logos und Grafikelemente im Internet benutzt. Außerdem kommt es in den Printmedien zum Einsatz. Es ist absolut ernst zu nehmen, verschiebt aber unseren Fokus. Daher möchte ich nicht näher darauf eingehen.


Kurzexkursion 1 – Sprites:

Um die „Geschwindigkeit einer Internetseite“ zu optimieren, und damit positiv im Ranking einer Suchmaschine bewertet zu werden, können sogenannte Sprites einsetzt werden. (Das ist jetzt kein WordPressthema, sondern eine CSS  – Thematik.)

Eine Grafik besteht aus mehreren einzelnen Grafiken, die dann gezielt angesprochen werden. Sinn der Aktion, man hat nur einmalig eine Serveranfrage, statt für jede einzelne Grafik und spart somit Zeit bzw. gewinnt Geschwindigkeit.


Kurzexkursion 2 – Icon – Fonts:

Icon – Fonts sind in meinen Augen die prominentere, anzutreffende Lösung der beiden Techniken, wenn es um grafische Bedienelemente geht. Icon – Fonts sind Webfonts als Pictoramm  zumeist im vektoriellen SVG – Format und somit in der Dateigröße klein und skalierbar.

Auch das ist ein CSS – Thema und interessant für den Themeentwickler. Aber nicht für uns hier! Socialmedia – Icons basieren in der Regel auf Icon – Fonts. Eine mit CSS animierte Navigationsleiste mit Icon – Fonts ist auf meiner Homepage www.sebastian-handl.de zu sehen.

Bilder in WordPress

Allgemeine Betrachtung

Bilder, die in die WordPress – Mediathek hochgeladen werden, werden (stark) komprimiert. Zwar wird in der Mediathek die Original – Dateigröße angezeigt, benutzt wird für Bilder in WordPress allerdings i.d.R. eine optimierte Version  für Ihre Seite. Auf die Komprimierung haben Sie zunächst keinen Einfluss. Was Sie machen können ist, die von WordPress verwendete Größe  auf Ihrer Seite ermitteln, diese wird im Dateinamen als „Postfix“ angehangen. Optimieren Sie nun das Original vor dem (erneuten) Hochladen auf diese Größe (z.B. 1024×599 Pixel) – z.B. mit der kostenlosen Grafiksoftware „gimp“ (siehe Links) wird die Datei nicht komprimiert.

Wir gehen einen anderen Weg und schalten im Folgenden die WordPress-Bild –Kompression über das Childtheme aus (das kann man auch gerne über ein Plugin bewirken, was man in verschiedenen Themes wiederverwenden kann). Trotzdem sollte Ihre Grafikdatei nicht unnötig groß sein. Die vorher beschriebene Methode führt zu einer „Punktlandung“.

Ausschalten der Bildkompression in WordPress

Um die Bildkompression in WordPress (dauerhaft) für Ihr Theme auszuschalten und Sie so mehr Kontrolle über Ihre Bilder in WordPress besitzen, müssen Sie in der function.php in Ihrem Childtheme einen Eintrag tätigen.

Der Reihe nach:

Die functions.php Datei im Elternordner

1. Kopieren Sie sich aus dem Eltern- Theme- Ordner die functions.php Datei.

Hinweis: Der Eltern- Theme- Ordner befindet sich in Ihrer XAMPP – Installation unter:

C:\xampp\htdocs\wordpress\wp-content\themes

Die functions.php Datei im Childordner

2. Fügen Sie die functions.php Datei in den Childtheme- Ordner ein.

3. Öffnen  Sie die functions.php in einem geeigneten Editor (z.B. Brackets, siehe Links)

Hinweis: Der Childtheme- Ordner befindet sich in Ihrer XAMPP – Installation unter: 

C:\xampp\htdocs\wordpress\wp-content\themes\twentysixteen-child

Codeanweisung zum Ausschalten der WordPresskompression

4. Löschen Sie den php – Code (Zum besseren Einstieg habe ich den Anfangskommentar stehen lassen)

5. Schreiben Sie wenn Sie möchten einen eigenen Kommentar, um den folgenden Code zu markieren und erklären.

6. Fügen Sie folgende Codezeilen ein:

add_filter(‚jpeg_quality‘, function($arg) {return 100;});

add_filter(‚wp_editor_set_quality‘, function($arg) {return 100;});

7. Speichern Sie die Datei ab.

Bilder in WordPress

Hinweis: Um den Erfolg Ihrer Änderungen zu kontrollieren, können Sie ein Bild vor den Veränderungen in die Mediathek hochladen und dasselbe Bild nach den Veränderungen.

Nun erstellen Sie eine Seite auf denen beide Bilder vorhanden sind und laden Sie über die rechte Maustaste ‚Grafik speichern unter …‘ auf Ihren PC.

Durch vergleichen der Dateigröße erkennen Sie, ob Ihre Veränderung erfolgreich war.

A4: Einrichten eines Childtheme

Grundsätzliches zu unserer Childtheme – Einrichtung

In diesem Beitrag werde ich ein sogenanntes Childtheme des Elternthemes ‚Twenty Sixteen‘ einrichten.

Die Einrichtung geschieht über das Anlegen von Ordnern und Dateien. Am Ende kann man das Childtheme im Backend wie bei installierten Themes auswählen und aktivieren. Hierbei werden Änderung zum Elterntheme in der sogenannten style.css – die für das Erscheinungsbild ihrer Seite zuständig ist -überschrieben. Gibt es keine Änderungen, so merkt man gar nicht, dass es sich um ein Childtheme handelt.

Warum ein Childtheme benutzen?

Änderungen kann man  im WordPresseditor vornehmen.  Auch kann man sie „hardcore“ im Elterntheme reinprogrammieren oder gar Text-Plugins—Ins  dafür zweckentfremden.

All diese Vorgehensweisen haben einen entscheidenden Nachteil! Erfährt das Theme ein Update, so sind ihre Änderungen verloren. Sie werden nicht mitgenommen.

Beim Arbeiten mit einem Childtheme ist das anders! Das Elterntheme wird aktualisiert und das Childtheme bleibt unangetastet. Somit bleiben ihre Änderungen erhalten.

Jetzt aber auf zur Praxis!

Childtheme in WordPress: Wertvolle Anlaufstelle

Die erste Adresse, um sich bezüglich Childthemes in WordPress zu informieren ist bei WordPress selbst. Und so möchte ich ihnen für erste Erkundungen die Seite https://codex.wordpress.org/Child_Themes ans Herz legen.

Childtheme Codex von WordPressAbbildung-1: Die Einstiegsseite für Childthemeinformationen

Childtheme erzeugen Schritt 1: Ordner anlegen

In der style.css stehen Grundinformationen, die im Backend für das Handling ausgelesen werden. Außerdem stehen in ihr Anweisungen, die das Erscheinungsbild ihrer Seite bestimmen. In einem ersten Schritt lege ich hier eine leere Datei an.

Dazu öffne ich einen einfachen Texteditor und speichere eine leere Datei mit Namen style.css im Ordner twentysixteen-child ab.

Anlegen der style_cssAbbildung-3: Angelegen einer leeren style.css – Datei

Anlegen einer leeren stlye.css – Datei im Ordner ‚twentysixteen-child‘Abbildung-4: Anlegen einer leeren stlye.css – Datei im Ordner ‚twentysixteen-child‘

style_css im Childtheme - OrdnerAbbildung-5: Angelegte style.css – Datei

Im Folgenden werde ich für Dateiinhaltserweiterungen das kostenlose Programm Brackets benutzen.

Sie können jeden beliebigen Texteditor benutzen. Jedoch auf keinen Fall ein Textverarbeitungsprogramm wie z.B. Word.

Childtheme erzeugen Schritt 3: Datei „style.css“ mit Grundinformationen füllen

Gehen sie im Folgenden wie folgt vor:

  1. Öffnen ihre stylee.css Datei im geeigneten Editor – z.B. Brackets.
  2. Gehen Sie auf die Internetseite https://codex.wordpress.org/Child_Themes von WordPress und kopieren sich folgenden Codeteil in die Zwischablage.Childtheme - Codex von der WordPresseiteAbbildung-6: Childtheme – Code original von der WordPressseite
  3. Fügen sie den Codeteil in ihre style.css. Datei ein.
  4. Löschen sie unnötige Einträge, machen sie textliche Veränderungen  und fügen sie eine import Anweisung an(siehe folgende Abbildung).Optimierter Childtheme - CodeAbbildung-7: Childtheme – Code zugeschnitten auf unsere Bedürfnisse

    Erklärung der Codezeilen:  


    1 + 8 = Öffnen und Schließen eines Kommentartextes, der keine Einfluss auf den Programmiercode hat.


    2 – 6 = Bedeutung wie die Beschreibung sagt. Bei Zeile 5 (Template) ist die Schreibweise 100% einzuhalten! Es wird an dieser Stelle angegeben auf welches Elterntheme sich das Childtheme bezieht.


    10 = Importanweisung, wo die Eltern-style.css Datei zu finden ist.


  5. Speichern sie die Datei.

Childtheme erzeugen Schritt 4: Erscheinungsbild im Backend und seine Aktivierung

Das Childtheme ist nun eingerichtet und kann im Backend wie jedes andere installierte Theme benutzt werden.

Wenn sie mit der Maus über das Childtheme – Symbol gehen, erscheint der Text ‚Theme-Details‘. Durch einen Klick können sie sich diese anzeigen.

Anmerkung: Mein Childtheme liegt bereits auf dem Liveserver.

Erscheinungsbild des childthemes im BackendAbbildung-8: Erscheinungsbild im Backend

Details über das Childtheme, sichtbar im BackendAbbildung-9: Detailinformationen über das Theme mit den Angaben aus der style.css – Datei

Aktivieren sie das Theme über die Schaltfläche ‚Aktivieren‘.

Aktiviertes Childtheme im BackendAbbildung-10: Aktiviertes Theme im Backend

Erscheinungsbild des Childthemes im FrontendAbbildung-11: Erscheinung des Childthemes auf Grundlage des Elternthemes auf der Internetseite

Das Childtheme gleicht dem Elterntheme an dieser Stelle. Eventuell müssen nun das Logobild, Headerbilder und Hintergründe neu angegeben werden, wenn diese vorher auf der Seite sichtbar waren.  Diese befinden sich nach wie vor in der Mediathek. Auch sollten benutze Widgets überprüft werden.

 

A3: Kurzüberblick über die Dateiarchitektur

Dateiarchitektur & Sprachdatei

An dieser Stelle verweise ich auf meine Vorstellung auf der Seite Info & Struktur. Alles was ich diesbezüglich zur Dateiarchitektur an dieser Stelle erzählen wollte, ist da ausgeführt.

Daher hier weitere Gedanken:

Haben Sie das schon mal gesehen, Browsermeldungen für Links die ins Leere laufen, also tote Links.

Der berühmt-berüchtigte 404 Fehler. Nun kann die Meldung ziemlich „uncharmant“ als kalte Browsermeldung daher kommen oder eingebettet in Ihr Homepage- Design.

Der 404 - Fehler; Meldung Seite nicht gefunden.

Abbildung-1: Die wahrscheinlich bekannte 404-Fehlermeldung.

404 Fehlerdarstellung in einer WordPressumgebung - definitiv eleganter dank Dateiarchitektur

Abbildung-2: Die gleiche 404- Fehlermeldung in einer WordPressumgebung.

Letzteres funktioniert durch die Dateihierarchie / Dateiarchitektur, z.B. eines typischen WordPressprojektes. Ein WordPressprojekt besitzt immer diese Dateiarchitektur. Konkret kann man sie unter der WordPresshomepage direkt einsehen (leider nur in englischer Sprache).

Im vorliegenden Fall und auch in der Regel so, wird man die besagte Datei nie zu Gesicht bekommen.

Die Dateiarchitektur beinhaltet „Rückfallebenen“ wenn mal was schief läuft, ohne die Homepageumgebung dabei zu verlassen.

Textliche Veränderung von Stadardtexten über die Sprachdatei

Ein anderer Punkt sind textliche Veränderungen von Standardtexten wie z.B. ‚ein Gedanke zu‘ bei Kommentaren.

Kanditaten - Beispiel für Wortänderungen in der Sprachdatei

Abbildung-3: Ein potentieller „Kandidat“ für eine Textoptimierung über eine Sprachdatei.

Möchte man gerne statt Gedanke Kommentar da stehen haben, stellt sich die Frage, wo man da schauen könnte. Inhalte werden in der Datenbank gespeichert und da kommt man nicht ran. Standardtexte sind oft außerhalb zu finden. So auch hier. Fündig wird man in der entsprechenden Sprachdatei (Dateierweiterung  ‚.po‘).

Ort für Sprachteien in WordPress

Abbildung-4:  Erscheinungsbild von Sprachdateien

Nun braucht man noch ein geeignetes Programm wie das kostenfreie Poedit und schon kann es mit Augenmaß losgehen.

Hier ist eine Sprachdatei / PO - Datei mit dem kostenlosen Editor Poedit geöffnet.

Abbildung-5:  Sprachdatei in Poedit geöffnet