Als Ausgangspunkt hatte ich (bereits) WordPress installiert¹, (Test-) Daten eingegeben², bootScore installiert und es als Theme aktiviert³. So entstand — als Reihe von pimp your bootScore posts — folgender Weg:

1. Font Awesome — ein Symbol sagt mehr als 100 Worte: ShortCodes und CSS-Klassen
2. SEO von Anfang an: HTML-Semantik, Schlagwörter und Sitemaps und keine toten Links, bitte!
3. Das ‘(Un)Wichtige’ nach unten: Der dezente und umfassende Footer-Bereich für den ’nachrangigen’ Legalkram, das nachrangige Zweitmenü und die eigene Copyrightline
4. Mehrsprachigkeit mitdenken: Bilingualität ohne WP-Globus
5. Die Übersichtlichkeit: Das tiefer verzweigte Menü mit integrierten Shortcodes, sauberen Ebenen und lesbarer Stapelung, das dennoch kein H‑OVER-Menü sein muss.
6. Nicht frickeln, sondern automatisieren: Die eingebaute Silbentrennung
7. Ein Bild sagt mehr als 1000 Worte:
   • Das kann ein ‘manuell’ mit einer fancy Box in den Text eingefügtes Bild sein — gerne auch beschleunigt ausgeliefert per WordPress vorberechneter Bildgröße oder als SVG.
   • Oder ein automatisiert verwaltetes ‘Primäres Beitragsbild’. Nur sollte es möglichst wenig verwischt sein, wenn es des Responsiv-Designs wegen angepasst wird. Das organisiert das moderne IMG-Tag mit den Source-Angaben wohl am Besten. Schneller umzusetzen, aber weniger effektiv wäre es, WordPress eine weitere Bildgröße im Voraus berechnen zu lassen.
   • Wirklich freie Bilder gibt es im Netz, wenn wir ein Bildverzeichnis vorsehen, um die Lizenzvorgabn zu erfüllen.
   • Und die kleinen Browserbildchen neben der Url? Oder das Logo? Dafür nutzen wir bootScoores Logo- und Favicon-System.
8. Das Finden erleichtern: TAG-Wolken und Beitragslisten in der Sidebar
9. Der ‘gemauerte’ Überblick: Die Masonry-Beitragsliste
10. Das Wichtigste zuerst: eine eigene Landing-Page — selbst gestaltet - und dann weg mit dem, was ablenkt, auch mittels kontextsensitiven Sidebars und dezenterem Hinweise auf jüngere Posts
11. Designte Lesbarkeit: bootScore und der eigene generelle Font und ein Font für besondere Anlässe
12. Recht muss Recht bleiben: Datenschutz, DSGVO und Cookies, der Cookie-Dialog und seine Semantik mit bootScore
13. Der erste Eindruck: das Nutzerinnen orientierte Farbkonzept

So entsteht eine bootScore-basierte Website mit Responsive Design, die den Weg dorthin in sich selbst dokumentiert, auf dass ich auch in Zukunft nachschlagen kann, wie ich es in der Vergangenheit gemacht habe. Wenn dies auch anderen nützt, wäre das ein willkommener Nebeneffekt.

Im Übrigen: Männer sind mitgemeint.

1. Anleitung dazu gibt es zu Hauf, auch eine von WordPress selbst.
2. z.B. mit denen der zu migrierenden Site oder des Theme Unit Tests
3. z.B. gemäß bootScore-Anleitung

The post bootScore pimpen appeared first on Freigiebigkeit.

Lösung

• I. Verwende nur die personenbezogenen Daten, die Du für das Funktionieren Deines Systems wirklich benötigst.
• II. Wenn Du personenbezogene Daten erhebst, dann sage den Besitzerinnen,
  • dass Du das tust,
  • zu welchem Zweck Du die Daten verwendest,
  • welche Rechtsgrundlage Dich dazu berechtigt,
  • an wen Du die Daten weitergibst,
  • wie lange Du sie bei Dir speicherst,
  • wie sie bei der erfragen können, welche Daten Du über die Zeit gespeichert hast
  • wie sie die Daten wieder löschen lassen können.
• III. Wenn Du Daten auf dem Rechner Deiner Nutzerinnen speicherst, die sie nicht direkt oder indirekt angefordert haben (könnten), frage sie vorher um Erlaubnis.

Hintergrund

Gehe ich danach vor — so mache ich immer wieder glauben — werde ich meine Sites so gestalten, dass ich die gröbsten Fallen¹ und Fehler² vermeide. Denn eines habe ich immer im Kopf: mit einem bloßen Cookie-Banner ist es nicht getan:

1. Als Erstes überlege ich mir, wo mein Blog als System personenbezogene Daten erhebt. Die, die ich in und mit Formularen explizit abfrage, fallen mir am leichtesten auf und ein. Bei denen weiß ich — ‘qua Amt’ -, wofür ich sie nutze und an wen ich sie weitergebe etc.
2. Außerdem ist mir klar, dass auch IP-Adressen als personenbezogenen Daten gelten — obwohl das Internet ohne sie gar nicht funktionieren würde.
3. Zudem können WordPress, die von mir aktivierten Plugins, Javascript-Bibliotheken, Google-Fonts u.Ä.m. Daten erheben, notieren und an Dritte versenden.
4. Schließlich werden meine Kommentatorinnen üblicherweise über das gängige Gravatar-System wiedererkennbar gemacht.

Dieses Gemenge muss ich ordnen:

• Regel (I) sagt mir, dass Weniger im Mehr ist: Je weniger Daten ich erfrage, je weniger Plugins ich verwende, desto schlanker wird mein Datenschutzkonzept. Also miste ich hier aus, z.B., in dem ich Produktiv- und Developsytsem unterschiedlich behandele.
• Regel (II) sagt mir, dass ich die verbleibenden Datensets aber auch tatsächlich im Datenschutzkonzept beschreiben muss. Also ermittle ich nach bestem Wissen und Gewissen, welche Daten meine Plugins, Font-Requests und andere technische Komponenten erheben, wie sie sie speichern und wohin sie sie weitergeben.
• Regel (III) sagt mir, dass ich es ich es mir erlauben lassen muss, Dateien, will sagen: Cookies auf den Rechner meiner Nutzerin schreiben zu dürfen, sei es — wie bei technisch notwendigen Cookies — gesetzlich, sei es — wie bei den anderen — per Zustimmung durch meiner Nutzerin. Und um die gewährt zu bekommen, ist es hilfreich, Zweck und Auswirkung anzugeben.

Weitere Posts beschreiben, wie ich das konkret umgesetzt habe.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, zuletzt muss die Web-Designerin im Rahmen ihrer Anpassungen auch rechtliche Vorgaben beachten, seien es die der DSGVO, die für eine Cookie-Zustimmung und deren Beachtung oder die zur Erstellungen einer Datenschutzerklärung. In diesen Kontext gehören dann auch die Fragen nach dem Zweck eines Bildverzeichnisses, nach einem adäquaten Impressum oder nach einer hinreichenden Open-Source-Lizenzerfüllung. Dies ins rechte Licht zu rücken, will auch dieser Post unterstützen.

Im Übrigen: Männer sind mitgemeint.

1. vgl. https://www.e‑recht24.de/artikel/datenschutz/8451-hinweispflicht-fuer-cookies.html
2. vgl. https://www.ihk.de/halle/recht/datenschutz/sonstige-rechtsinformationen/cookie-banner-fuenf-fehler-die-sie-vermeiden-sollten–4854218

The post Datenschutz, DSGVO und Cookies appeared first on Freigiebigkeit.

Lösung

• Definiere in Deiner Child-Theme-Datei scss/_bscore_variables.scs noch die Variable $menu-font-family: 'PT Sans', sans-serif, !default; (mit einem Menufont Deiner Wahl.)
• Trage in Deiner Child-Theme-Datei scss/_bsscore-custom.scs die folgenden Zeilen ein:

#bootscore-navbar{
  font-family: $menu-font-family;
}

.footerSubMenu {
  font-family: $menu-font-family;
}

• Weise über das WP-Backend den Widgets Footer 1 bis Footer 4, die eine Liste als Menü enthalten, mit <ul class="footerSubMenu"> die neue Klasse zu.

Hintergrund

Noch einmal kurz: Wie kann dieser Bedarf eigentlich entstehen?

Menüs sehen in der Regel mit serifenlosen Fonts besser aus. Haben wir in der Variable $font-family-base eh einen serifenlosen Default-Font festgelegt, ist alles gut. Verwenden wir aber einen Serifenfont, müssen wir — wenn wir es denn so wollen — nicht nur den Überschriften einen serifenlosen Font zuweisen, sondern auch die Menüs. Das Hauptmenu ist seitens bootScore in einem Bereich mit der ID bootscore-navbar eingebettet. Diese ID können wir weiterverwenden. Für die Submenüs im Footerbereich müssen wir uns eine entsprechende Klasse definieren und den Listen manuell zuweisen.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Fonts für besondere Anlässe appeared first on Freigiebigkeit.

Lösung

• Wähle aus den Google Fonts Deine Schriften aus:
  • eine Schrift mit Serifen (z.B. pt-serif oder noto-serif),
  • eine dazu passenden serifenlose Schrift (z.B. pt-sans oder noto-sans),
  • eine dazu passende Monospace-Schrift (pt-mono oer noto-sans-mono)
  • und vielleicht noch eine spezielle Schrift für Überschriften (z.B. arima-madurai oder eb-garamond)
• Wähle jede Schrift im google-webfonts-helper an und
  • belasse den Zeichensatz (charset) auf latin
  • selektiere — so weit vorhanden — die Größen 400 und 700.
  • selektiere dazu — so weit vorhanden, die Stile regular, regular italic, bold und bold italic.
  • kopiere den im google-webfonts-helper dazu erzeugten font-face-code in die Datei scss/_bscore_custom.scss
  • lade das Zip-Paket aus dem google-webfonts-helper herunter.
• Erzeuge einen Ordner fonts in Deinem Child-Thema.
• Entpacke alle heruntergeladenen Zip-Pakete im Ordner fonts
• Erweitere die Datei scss/_bscore_variables.scss um die Zeilen:

  $font-family-base: 'Noto sans', Verdana, sans-serif !default;
  $font-family-sans-serif: 'Noto Sans', Verdana, sans-serif, !default;
  $font-family-monospace: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $font-family-code: 'Noto Sans Mono', 'Courier New', monospace, !default;
  $headings-font-family: 'EB Garamond', Garamond, serif !default;
  $display-font-family: 'EB Garamond', Garamond, serif !default;

Hintergrund

Schriften sind — begrifflich und inhaltlich gesehen — ein weites Feld¹:

In der Typografie ist es üblich zwischen Serifen-Schriften und serifenlosen Schriften zu unterscheiden. Serifenschriften seien — heißt es — für gedruckten Fließtext besser, weil sie durch ihre horizontalen Verlängerungen am Buchstaben das Auge besser führen. Im Web galt dagegen lange, dass seriflose Schriften am Bildschirm lesebarer seien. Je feiner aber die Bildschirme über die Zeit wurden, desto feiner ließen sich auch die Serifen darstellen. Das Auge ermüdete weniger. Und so wird heute gesagt, es gäbe von der Lesbarkeit her keinen wirklich Unterschied mehr: Serifenschriften und serifenlose Schriften können gleichermaßen verwendet werden.

Für alles nur eine einzige Schrift zu verwenden, langweilt allerdings. Wenigstens die Überschriften und die Textkörper sollten sich unterscheiden. Andererseits reduzieren zu viele Schriften — der Unruhe im Gesamtbild wegen — die Lesbarkeit. Und Lesbarkeit und unmittelbare Wahrnehmbarkeit ist nun einmal der Qualitätsmaßstab. So arbeitet die moderne Web-Designerin mit Paaren, mit einem Font für die Überschrift, einem für den Fließtext. Und eben deshalb werden uns heute so oft Fontpaare ‘empfohlen’, bei denen die Fonts doch recht wild kombiniert werden.

In diesem Kontext wichtig ist auch die Unterscheidung zwischen font-familiy und font-face. Mit der CSS-Anweisung font-family: XYZ; teilen wir dem Browser — ungenau gesprochen — mit, dass er den Text in einem HTML-Tag mit dem Font XYZ darstellen solle. Tatsächlich weisen wir ihn aber an, den Text mit einem passenden Font aus der Font-Familie XYZ darzustellen. Mit der CSS-Anweisung @font-face {...}² haben wir ihm zuvor gesagt, dass eine bestimmte durchgestaltete Schrift aus einer bestimmten Schriftfamilie (font-family: XYZ) mit einem bestimmten Stil (font-style: [normal|italic]) und einer bestimmten Stärke (font-weight: [<400<...<700<]) zur Verfügung steht und wo er sie findet. Es ist dann Aufgabe des Browsers, die für eine bestimmte Stelle im HTML-Quelltext am besten passende Schrift konkret herauszusuchen. Denn er muss ja nicht nur die Schrift selbst darstellen, sondern auch die Spezifikationen normal, italic, bold, bold-italic berücksichtigen.³

Wenn ein spezifizierter Font doch nicht zu Verfügung steht — etwa, weil der Browser ihn nicht hat herunterladen oder verstehen können -, dann wählt der Browser einen anderen, möglichst ‘ähnlichen’ Font aus seinem Bestand. Und ‘ähnlich’ meint hier nur, ob es sich dabei auch um einen serifenlosen Font oder auch um eine serifenlose Schrift handelt. Wenn für die anderen geforderten Eigenschaften kein genau passender Font einer Familie bereitsteht, kann der Browser diese Eigenschaften ‘herstellen’, indem er den gewählten Font rechnerisch kippt oder verstärkt. Solche ‘berechneten’ Schriftypen sehen aber schlechter aus, als die explizit so gestalteten.⁴

Im Prinzip kann die Web-Designerin also nicht sicher sein, wie ihr Text auf dem Rechner einer Leserin tatsächlich aussieht. Um die Wahrscheinlichkeit zu erhöhen, dass die Designerin ihrer Leserin das liefern kann, was sie vorhat, dürfen in der CSS-Anweisung font-family: XYZ; mehrere Font-Familien kombiniert werden — bis hin zur generischen Familie serif, sans-serif oder monospace. Der Browser sichert zu, — für jeden Buchstaben — den ersten Font aus einer der Familien zu nehmen, mit dem er den Buchstaben wie gefordert darstellen kann. Ob und wie gut das klappt, hängt auch von Art und Güte des Browsers ab. Und um der Designerin noch mehr Gewissheit zu bieten, ist das Konzept der Web Safe Fonts entstanden⁵: Fonts, von denen frau weiß, dass sie auf den Geräten (meistens) zur Verfügung stehen. Aus diesen wählt sie ersatzweise die, die ihren Designvorstellungen zwar nicht optimal, aber noch gut gerecht werden.

Damit entsteht eine Strategie, Google-Fonts lokal zu integrieren⁶:

Wir entscheiden uns für eine Font-Paar und nutzen — wie von bootScore empfohlen — den google-webfonts-helper, um die entsprechenden Google-Fonts herunterzuladen und die auch generierten @font-face-Anweisungen in Datei scss/_bscore_custom.scss einzufügen.

In der Datei scss/_bscore_variables.scss legen wir dann fest, wofür die Schriften überhaupt verwendet werden sollen. Dazu nutzen wir die Boostrap-Methodik:

Bei Bootstrap legen wir über die Variable $font-family-base die ‘Hauptschrift’ fest. Das kann die Familie einer Serifenschrift oder einer serifenlosen Schrift sein. Über die Variable $font-family-sans-serif legen wir die serifenlosen Hauptschrift fest. Eine Variable $font-family-serif gibt es nicht. Wollen wir für die Überschriften eine andere Familie nehmen, als die der generellen Hauptschrift, wären dafür die Variablen $headings-font-family und $display-font-family zuständig. So lassen sich alle Kombinationen einfach abbilden.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

1. vgl. https://kinsta.com/de/blog/html-fonts/
2. vgl. https://www.w3schools.com/cssref/css3_pr_font-face_rule.php
3. vgl. https://technicalcommunicationcenter.com/2020/06/10/whats-a-font-font-family-typeface-font-face/
4. Deshalb ist es wichtig, die gewünschte Schriftfamilie mindestens in den Stärken ‘400’ und ‘700’ und die jeweils in den Typen ‘regular’ und ‘italic’ bereitzustellen.
5. vgl. https://www.w3schools.com/cssref/css_websafe_fonts.php
6. Die Alternative wäre, die Fonts fallweise direkt von Google-Font-Servern hinzuladen zu lassen. Das erleichtert Deine Arbeit. Und kompliziert Dein Datenschutzkonzept: Denn beim Herunterladen fragt Google Nutzerdaten ab, also die Deiner Leserin. Das verursacht Deine Site. Mithin müsstest in Deinem Datenschutzkonzept darauf hinweisen. Besser also, Du lädst die Fonts selbst herunter, integrierst sie in Deine Site und lieferst sie selbst mit aus.

The post Passende Web-Schriften appeared first on Freigiebigkeit.

Lösung

• Installiere das Plugin Recent Posts Widget With Thumbnails.
• Öffne Appearance/Widgets.
• Kopiere das Widget Recent Posts with Thumbnails in Dein allgemeines Sidebar Widget und konfiguriere es:
  • Setze die Nummer der zu zeigenden Posts auf 1, höchstens 2.
  • Wähle Show only sticks posts an.
  • Aktiviere Show excerpt.
  • Setze die Anzahl der zu zeigenden Zeichen auf 144.
  • Setze die Breite des zu zeigenden Thumbnails auf 120, die Höhe auf 75.
  • Aktiviere die Option Use aspect ratios of original thumbnails.
• Stelle Deine Site auf eine eigene Landingpage um.
• Lade die Landingpage mylap-sp0rp1 herunter.
• Kopiere sie unter dem Namen mylap.php in Dein Child-Theme.

Hintergrund

Die Idee dieser Änderung ist einfach: Als Sticky-Posts markieren wir ja eh nur die, die die Aktualität überstrahlen. Deshalb wollen wir sie unseren Leserinnen besonders ans Herz legen. Aber wir belassen es bei ein oder zwei Posts. Sie sollen unsere sonstigen nicht verdrängen.((Und ja, das heißt auch, dass wir unsere Sticky-Tags immer wieder umsetzen. Sonst wird es langweilig.)) Unsere bisherige Landingpage mylap-sp1rp1 stellte die uns übergreifend wichtigen Posts den zeitlich jüngsten voran. Das geht eleganter und dezenter:

Dazu installieren wir das Plugin Recent Posts Widget With Thumbnails. Es sagt von sich, es sei Open Source Software, die Datei Readme.txt im Repository verweist auf die GPL‑2.0 und der GPL‑2.0‑Lizenztext liegt auch dort. Damit sind wir hier auf der Seite der Guten.

Danach konfigurieren wir das Plugin so, dass es unserer Leserin hilft. Treu der Maxime, weniger ist mehr. Und weil wir damit die Stick-Posts in unserer allgemeinen Sidebar verschoben haben, brauchen wir auch die Landingpage nicht mehr, die beide Arten zeigt. Wir können also zu my-landing-page-stickposts-0-recentposts‑1 wechseln. Bingo.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Dezente Hinweise auf frühere Posts appeared first on Freigiebigkeit.

Lösung

• Wenn noch nicht geschehen, bereite die Nutzung einer eigenen Landingpage nach dem Artikel vor.
• Wenn Du den absolut letzten Post und den letzten ‘Sticky Post’ auf Deiner Landingpage anzeigen willst, lade Dir von bsToppings das Template mylap-sp1rp1.php herunter.
• Wenn Du nur den absolut letzten Post auf Deiner Landingpage anzeigen willst, lade Dir von bsToppings das Template mylap-sp0rp1.php herunter.
• Kopiere die heruntergeladene Datei unter dem Namen mylap.php in Dein Child-Theme.((Ja, es soll die Datei gleichen Namens ersetzen))

Hintergrund

Um unseren Leserinnen die Arbeit zu erleichtern, haben wir diese Landing-Pages vorgestaltet und unter bsToppings zum Download bereitgestellt. Damit müsste eigentlich nur deren Header-Bereich mit den Logos den je eigenen Wünschen nach umgestaltet werden.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Die verschlankte Landingpage appeared first on Freigiebigkeit.

Lösung

• Die Sitebar für die Beitragsübersicht:
  • Installiere das Plugin ‘Custom Sidebars’ über das WordPress Backend.
  • Öffne Appearance/Widgets und erstelle eine zweite Sitebar myplp.
  • Füge dem Widget myplp ein Textfeld hinzu, um die Nutzer der Überblicksseite zu informieren.
  • Füge eine Cool Tag Cloud Instanz zum Widget myplp hinzu wie Du es für die Standard-Sidebar gemacht hast
  • Weise das Widget myplp mittels Sidebar Location/For Archives/As Sidebar for selected Archive Types/ dem Post Index zu.
• Die Default-Sitebar für alle anderen Seiten:
  • Wähle ein beliebiges “more”-Bild aus und lade es in die Mediathek.
  • Füge der Standard-Sitebar, die jetzt Theme-Sitebar heißt, ein Bildfeld hinzu.
  • Fügen das hochgeladene Bild in dieses Feld ein und verlinke es mit der Seite https://yourdomain/myplp.

Hintergrund

Was ist der Effekt? Die Default-Sidebar wird auf allen Seiten angezeigt, außer auf der Überblicksseite. Und es hat jetzt einen more-Button. So kann jede Leserin diese Überblicksseite mit einem Klick erreichen. Und die Tag-Cloud wird nur auf der Überblickseite angezeigt sodass sie sich die Liste thematisch vorsortieren lassen kann.

Bliebe noch zu konstatieren, dass das Plugin ‘Custom Sidebars’ Open-Source-Software ist: Das Repository enthält den Text der GPL‑2.0 Lizenz. Und die zugehörige Datei readme.txt weist das zu entsprechende Lizenzierungsstatement auf.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Kontextsensitive Sidebars: Bleibe schlank appeared first on Freigiebigkeit.

Ihr z.B. — so die Liebingsleserin — reiche, wenn sie weiterlesen wolle, eine Übersicht. Eine! Und erst wenn sie ein Thema interessiere, wolle sie die Posts dazu auf einen Klick bekommen können. Ich würde doch sonst auch — gefragt und ungefragt — predigen: ‘kill your darlings’.

Lösung

• Lösche im Widget Sidebar die Recent Post List, die Tag-Cloud und die Category-Cloud.
• Lösche das Plugin Recent Posts Widget Extended.
• Gehe zu Appearance/Menu und
  • Lösche Dein Footermenü.
  • Organisiere Dein Hauptmenü so, dass Deine Haupt-Kategorien darin auf der obersten Ebene erscheinen.
  • Füge darunter jeweils einen Custom Link mit einem Listensymbol + Text ein, das Du auf https://karsten-reincke.de/category/your-top-category-x verweisen lässt.
  • Füge am Ende Deines Hauptmenüs auf der obersten Ebene ein Symbol für ‘Überblick’ ein.
  • Füge unter dieser Quasi-Kategorie einen Custom Link mit einem Listensymbol ein, das Du auf https://karsten-reincke.de/myplp verweisen lässt.
  • Füge unter dieser Quasi-Kategorie auch einen Custom Link mit einem Sitemap-Symbol ein, das Du auf https://karsten-reincke.de/sitemap verweisen lässt.

Hintergrund

Da habe ich nun so viel Aufwand betrieben, all die bootScore-Möglichkeiten einzubauen — und jetzt schmeiße ich es einfach wieder weg? Hätte ich mir das nicht vorher überlegen können? Hätte ich! Nur sehe ich es mir lieber praktisch an. Und räume dann auf. Gerne auch nach hilfreichen Hinweisen. Die wichtigste Phase beim Schreiben ist auch die beim Website-Design, nämlich die Phase Kill Your Darlings.

• Wozu brauchen wir denn ein Footer-Menu, das doch nur wieder in die Hauptkategorien zurückführt? Um unserer Leserin das Scrollen zu erleichtern? Das Hauptmenü bleibt bei bootScore ja eh oben immer sichtbar. Also weg mit dem Footer-Menü!
• Und wozu brauchen wir eine Recent Post List in unserer Sidebar? Unsere Überlicksseite präsentiert unsere Beiträge ja eh zeitlich absteigend. Die letzten Beiträge werden dort mithin als erstes angezeigt. Und unsere Leserin wollte ja weniger ‘Sieh-auch-noch-mal-hier’-Anreize haben. Also weg auch mit der Recent-Post-Liste!
• Wenn wir keine Recent-Post-Liste haben, brauchen wir auch kein Plugin, dass sie verschönert. Also weg damit!
• Wozu brauchen wir auf allen Seiten eine Tag-Wolke? Die Leserin möchte doch nur eine Suchseite haben. Mit allem, was Not tut. Darauf würde so etwas wohl Sinn machen. Aber doch nicht überall. Also weg mit der generellen Tag-Wolke.
• Und wozu brauchen wir eine Kategorien-Wolke? Wir können doch unser Menü danach gliedern. Also weg mit der Kategorien-Wolke!

Jetzt müssen wir unserer Leserin nur noch sagen, dass es — wie gewünscht — die eine Suchseite gibt. Dazu fügen wir im Menü eine Überblickskategorie ein, unter der wir auf unsere Suchseite myplp verlinken.((myplp steht ja für My Post List Page und ruft als Menüeintrag unsere Listenseite home.php auf.)) Und der Einfachheit halber können wir hier auch gleich auf unsere Sitemap verlinken.((Unsere SEO wird’s danken.))

Es ließe sich das Leben unserer Leserin aber noch weiter erleichtern. Indem wir in der Sidebar einen fancy ‘mehr’-Button einfügen, der einfach auf unsere Überblicksseite myplp führt. Allerdings würde der dann auch in der Sidebar der myplp-Seite selbst erscheinen, was wiederum Quatsch wäre. Also brauchen wir unterschiedliche Sidebars für unterschiedliche Seiten. Das gehen wir als Nächstes an.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Was stört, muss weg appeared first on Freigiebigkeit.

Und warum — so fragte meine schönste Leserin weiter — werde auf meiner Einstiegsseite überhaupt so eine lange Liste von Artikeln angeboten? Warum könne sie dort nicht einfach immer nur das jetzt gerade Wichtigste sehen? Ob sie die ‘Suchtools’ nicht überhaupt aus dem Menü heraus aufrufen könne? Auf einen Schlag? Und zwar dann, wenn sie die benötige, nicht, wenn die Site das meint? Recht hat sie, meine geschätzte Leserin! Wie immer! Verschlanken wir uns also, immer einen Schritt nach dem anderen:

Lösung

• Lege über das WordPress-Dashboard eine Seite mylap an (= my landing page)
• Lege über das WordPress-Dashboard eine Seite myplp an (= my post list page)
• Kopiere die index.php aus bootScore-main unter dem Namen mylap.php in Dein Cild-Theme.
• Ändere in der Datei mylap.php die Zeile The main template file in Template Name: mylap (my landing page).
• Füge auch in der Datei home.php die Zeile Template Name: myplp (my post list page) ein.
• Aktiviere unter Settings/Reading/Your homepage displays den Button a static page, wähle unter Homepage die Seite mylap aus, und unter Posts page die Seite myplp.
• Editiere im WordPress Dashboard die Seite mylap und wähle rechts unter den Page-Optionen statt des Eintrages Default Template das Template mylap aus.
• Füge unter Appearance/Menus die neue Seite myplp hinzu.

Hintergrund

Damit bietest Du Deiner Leserin die Option, über das Menü eine Übersicht über all Deine Beiträge Posts aufzurufen. Denn anstelle der eigentlich angeklickten Seite myplp zeigt WordPress von sich aus ja die Datei home.php.

Unter Deiner Site-Url wird WordPress nun allerdings die Seite mylap aufgerufen. Die hast Du mit einem eigenem, vom Default-Template abgeleiteten Template verknüpft. Sie zeigt Dir also erst einmal auch nur eine Liste Deiner Beiträge an. Dennoch bist Du jetzt frei, sie als Deine Landingpage so zu gestalten, wie Du willst. Dazu später mehr.

Hier noch paar Fallen, die Du umgehen kannst:

• Wenn Du Deine php-Templates nicht eindeutig benennst, wirst Du bei der Zuordnung der WordPress-Seite mylap zum Template mylap.php verzweifeln.
• Würdest Du auch der WordPress-Seite myplp das als myplp benannte Template home.php zuordnen, brächtest Du WordPress durcheinander: Dass beim Aufrufen der Seite myplp aus dem Menü heraus in Wirklichkeit die Datei home.php angezeigt wird, organisiert WordPress nämlich ohne weitere Zuarbeit von sich aus. Das hast Du mit der Zuordnung unter Settings/Reading/Your homepage displays bereits organisiert.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

The post Die eigene Landingpage mit bootScore appeared first on Freigiebigkeit.