Was ist eigentlich dieser “Skip to content”-Link?

In den WordPress-Standard-Themes der Twenty-Reihe sitzt in der header.php kurz nach dem body-tag ein Skip-To-Content-Link.

<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Diesen Link sieht man normalerweise nicht. Er wird erst sichtbar und aktiv, wenn jemand die Tastatur nutzt um durch die Seite zu navigieren. Probiert es mal aus, den Skip-Link gibt es auch hier auf dieser Seite.

Zugang per Tastatur

Die Navigierbarkeit per Tastatur ist ein zentrales Kriterium für Barrierefreiheit. Mit der Tastatur bewegen sich nicht nur Screenreader über die Seite. Auch Menschen, die keine Maus bedienen können, bewegen sich via Tab-Taste. Weil sie Arthritis in den Händen haben, weil sie keine Arme haben oder weil sie den rechten Arm vier Wochen lang im Gips tragen.

Und wozu braucht es diesen Link jetzt?

Angenommen, ich habe das Excerpt eines Artikels gelesen und möchte jetzt die ganze Version lesen. Ich steuere mit der Tastatur den Read-More-Link an, der Browser öffnet die Seite mit der Einzelansicht des Artikel.

Gäbe es nun den Skip-to-Content-Link nicht, müsste ich mich in der Einzelansicht erst mal durch den gesamten Header-Bereich durchackern. Ich müsste alle Elemente – Logo, Seitentitel, Navigation, Suchfeld – der Reihe nach anklicken bevor ich endlich beim Artikel landen würde. Die Tab-Taste arbeitet sich stur von links oben nach rechts unten durch den Code.
Ist dagegen ein Skip-Link vorhanden, kann ich sofort an die Stelle springen, die mich interessiert.

Aus diesem Grund sollte jede Webseite einen Skip-Link zur Verfügung stellen.
Ein Codebeispiel gibt’s im Accessibility-Handbuch.

Icon Font oder SVG?

Es gibt immer wieder Diskussionen darüber, ob man kleine Symbole auf einer Webseite über einen Icon-Font oder besser über SVG-Grafiken einbinden sollte.

Icon-Fonts werden deshalb mit SVG-Grafiken auf eine Stufe gestellt, weil SVG ein Vektorformat ist und man diese Grafiken über CSS einfärben kann. Das kann man mit „normalen“ Pixelbildern (PNG, JPEG) nicht machen. Hier braucht man für jede Farbe ein eigenes Bild.

Bei der Entscheidung für oder gegen Icons-Fonts gibt einige Vor- und Nachteile abzuwägen. Ich fasse mal die Wichtigsten zusammen:

Nachteile Icon-Fonts

  • Opera Mini kann keine Icon-Fonts darstellen
    Opera Mini hat einen sehr hohen Marktanteil in Regionen, die keine gute Internet-Infrastruktur haben (Asien, Afrika). Seiten laden schneller, weil Opera Mini „überflüssige“ Daten ausblendet. Icon-Fonts, die über @font-face eingebunden sind, findet Opera Mini überflüssig.
  • Manche Browser (Chrome, Firefox) in manchen Versionen haben Rendering-Probleme.
    Das heisst, die Symbole können unscharf aussehen.

Vorteile Icon-Fonts

  • Über Standard-CSS integrierbar, keine Umbauten am HTML-Code notwendig
  • Auch alte Browser (IE 7 und IE 8) können Icon-Fonts darstellen.
  • Es müssen keine Fallback-Lösungen eingebaut werden.
    Für SVG-Icons braucht man Fallback-Lösungen für ältere Browser

Schlussfolgerung

Jedes Projekt ist anders. Aber wenn man sich sicher ist, dass man auf Opera Mini verzichten kann, dann ist die Entscheidung für einen Icon-Font in Ordnung. Das Einbinden von Icon-Fonts geht schnell, man braucht keine Fallback-Lösungen und für das Styling über CSS braucht man kein Expertenwissen.
Der Umgang mit SVG ist deutlich anspruchsvoller und erfordert mehr KnowHow.


Dieser Artikel beschreibt ausführlich die Vor-und Nachteile beider Herangehensweisen:
Ten reasons we switched from an icon font to SVG

 

Childtheme-CSS auf korrekte Weise laden

Lange Zeit war es üblich, in einem Childtheme die CSS-Angaben vom Parenttheme als @import Anweisung an den Anfang der CSS-Datei des Childthemes zu schreiben.

/*   
Theme Name: Childtheme
Theme URI:
Description: Your child theme description text...
Author: Your Name
Author URI: http://www.yourdomain.com/
Template: parenttheme
Version: 1.0
Tags: Child Theme
*/

/* Import the stylesheet from the parent theme */
@import url('../parenttheme/style.css');

Das ist schön einfach und übersichtlich. Aber @import ist nicht die eleganteste Methode ein Stylesheet einzubinden, denn diese Konstruktion kostet Ladezeit.
Auch der WordPress Codex sagt, man möge Stylesheets nicht mehr per @import, sondern über die functions.php einbinden.

function child_styles() {
wp_enqueue_style( 'childtheme-style', get_stylesheet_directory_uri().'/style.css', array('parenttheme-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_styles' );

Was passiert hier?

Das CSS des Childthemes wird so eingebunden, dass zuerst das CSS des Eltern-Themes geladen wird. Das erreicht man dadurch, dass man dem Child-CSS eine dependency (Abhängigkeit) zuweist, nämlich das Parent-CSS. Im Codebeispiel ist das der Teil, der in dem array steht:

array('parenttheme-style')

Der Browser bekommt dadurch die Anweisung: Lade das Child-CSS nach dem Parent-CSS. Oder anders formuliert: Lade zuerst das Eltern-CSS, dann das Child-CSS.

Nach dem Array kann man noch die Version des Themes eintragen. So kann man sicherstellen, dass nach einem Update des Themes die Parent-Styles neu geladen werden und nicht einfach nur aus dem Cache geholt werden.

Em und rem – was ist der Unterschied?

Im CSS kann man die Schriftgröße in unterschiedlichen Einheiten angeben. Die bekannteste Größe sind Pixel. Aber daneben gibt es auch noch die Einheiten em und rem. Was hat es damit auf sich?

Pixel sind eine absolute Einheit. Das heißt, eine Überschrift, die die font-size 20px hat, hat immer genau diese Größe, nämlich 20 Pixel. Ganz gleich, was um sie herum passiert.
Wie groß eine Überschrift ist, die in 2.5em angegeben ist, kann man erst sagen, wenn man weiß, in welcher Umgebung sie steht. Denn die Einheit em bezieht sich auf den nächsthöheren Container.

Weiterlesen Em und rem – was ist der Unterschied?

Anleitung: Ein WordPress-Child-Theme anlegen

Dieser Artikel ist veraltet. Hier geht es zur neuen, aktualisierten Version

Ein WordPress-Theme an die eigenen Bedürfnisse anzupassen ist gar nicht so schwer. Den Löwenanteil der Anpassungen kann man über die CSS-Datei des Themes umsetzen. Bei WordPress hat diese Datei immer den Namen style.css, man findet sie auf der obersten Ebene des Theme-Ordners.

Das Stylesheet könnt Ihr einfach so bearbeiten, aber geschickter ist es, Ihr arbeitet mit einem Childtheme. Ein Childtheme ist ein kleiner Ableger des Original-Themes, das damit zum Parent (=Eltern)-Theme wird. Der Vorteil dabei: Das Eltern-Theme bleibt wie es ist und wird nicht angetastet. Wenn also mal etwas schiefgeht beim Basteln, dann ist nicht gleich das ganze Theme kaputt. Und wenn die Entwickler des Themes ein Update zur Verfügung stellen, könnt Ihr das Parent-Theme updaten, ohne dass Eure Anpassungen überschrieben werden.
Im Childtheme-Ordner liegen nur die Dateien, die tatsächlich verändert wurden. So ist es leichter, die Änderungen nachzuhalten.

Weiterlesen Anleitung: Ein WordPress-Child-Theme anlegen

Ich habe da ein Problem mit meinem WordPress-Theme…

WordPress ist auch für Einsteiger leicht zu lernen. Ein bisschen Zeit und Mühe muss man zwar aufbringen, aber man kommt relativ schnell zu ansehnlichen Ergebnissen. Auch ohne viel Coding-KnowHow. Doch manchmal liegt der Teufel im Detail.

Da hat man sich tapfer durchgekämpft, WordPress ist installiert, ein schickes Theme ist hochgeladen, aber von einem Moment auf den anderen geht es nicht mehr weiter. Wie sehr man sich auch bemüht, das Plugin, das man zuletzt geladen hat, zerschießt das Design oder es erscheinen plötzlich seltsame Fehlermeldungen. Als Anfänger ist man da schnell mit seinem Latein am Ende.

Jetzt wäre es schön, wenn man jemanden fragen könnte. Voilà, Google spuckt ruckzuck eine lange Liste mit WordPress-Dienstleistern aus. Die könnte man doch mal fragen – so teuer wird es schon nicht sein. Das Problem löst ein Profi sicher in fünf Minuten.

Weiterlesen Ich habe da ein Problem mit meinem WordPress-Theme…

Twitter und Facebook im WordPress Benutzer-Profil ergänzen

In den Profileinstellungen im Admin-Menu „Benutzer“ fehlen die üblichen Verdächtigen: Twitter und Facebook. Diese Angaben kann man relativ einfach ergänzen.

Mit diesem Code könnt Ihr neue Felder einfügen. Die Angaben kann man in dei functions.php setzen oder besser in ein kleines PlugIn, damit die Funktion auch dann erhalten bleibt, wenn ihr das Theme wechselt.

// Twitter und Facebook ergaenzen
function twitter_facebook($contactmethods) {
// Twitter dazu
$contactmethods['twitter'] = 'Twitter';
// Facebook dazu
$contactmethods['facebook'] = 'Facebook';
return $contactmethods; }
add_filter('user_contactmethods','twitter_facebook',10,1);

Die Information aus dem Profil könnt Ihr im Theme aufrufen.
Für den Twitterlink geht das beispielsweise mit  the_author_meta(‚twitter‘).
Weiterlesen Twitter und Facebook im WordPress Benutzer-Profil ergänzen

WordPress und Git: Projekte auf GitHub

logo-gitEine große Stärke von Git kam bisher noch gar nicht zur Sprache: Die Möglichkeit, Projekte über GitHub zu teilen. GitHub ist eine Plattform, auf der man Projekte öffentlich zur Verfügung stellt. Die Idee dahinter ist, dass man so im Team arbeiten kann. Viele OpenSource-Projekte wohnen deshalb auf GitHub. 

Wir entwickeln Themes für Kundenprojekte, als Grundlage benutzen wir dazu das _s-Theme von Automattic. Freundlicherweise gibt’s das auf GitHub. Den Code zu kopieren ist nicht so ein großes Problem, aber wir möchten möglichst effizient damit arbeiten. Das bedeutet, wir wollen nicht nur eine Kopie haben, wir wollen auch keine Updates von Automattic verpassen. Wie geht das?

Weiterlesen WordPress und Git: Projekte auf GitHub

Git für WordPress: Arbeiten mit Branches

logo-gitEiner der großen Pluspunkte von Git ist, dass man innerhalb eines Projekts Verzweigungen anlegen kann. Ich kann also einen Teil meines WordPress-Themes „abzweigen“ und ganz entspannt darin arbeiten, ohne dass die Ausgangsversion in Gefahr ist.

Im letzten Artikel haben wir gesehen, dass Git ganz von allein einen Branch „master“ – den ersten Zweig – angelegt hat. Das können wir mit Hilfe des Befehls git status abfragen. Wir bekommen dann die Information „On branch master“. Der Branch „master“ entsteht immer automatisch sobald man Git in einem Verzeichnis initialisiert.


Dieser Artikel ist Teil einer Reihe.
Bisher sind erschienen/geplant:
1. Git für WordPress – Einstieg
2. Git für WordPress – Hilfe, Befehlszeile!
3. Git für WordPress – Die wichtigsten Kommandos
4. Git für WordPress – Arbeiten mit Branches
5. Git für WordPress – Projekte auf GitHub
6. Git für WordPress – Versionen zusammenführen
7. Git für WordPress – Tools und Tipps


Im ersten Artikel habe ich für die Entwicklung eines Sliders den Branch „slider“ angelegt (siehe Infografik erster Artikel). In diesem Zweig arbeite ich an einem Slider für die Startseite. Das Theme, das im Branch „master“ steckt, bleibt derweil unangetastet.
Achtung: Lieber einmal mehr prüfen, in welchem Branch Ihr gerade seid. Nur wenn Ihr Euch tatsächlich im richtigen Zweig befindet, könnt Ihr Eure Änderungen auch sehen. Am Anfang kann das ziemlich verwirrend sein.

Weiterlesen Git für WordPress: Arbeiten mit Branches