Umsetzung eines Datepicker Fallbacks für das HTML5 Datumsfeld

In einem meiner Adventskalenderbeiträge habe ich auch beschrieben, wie ihr Bereichsattribute für Datumsfelder setzen könnt. In einem Kommentar wurde ich darauf hingewiesen, dass dieses neue Eingabefeld bisher noch nicht in Firefox unterstützt wird. Es wird wohl zukünftig unterstützt (ab Verion Firefox 56+ kann es über einen Flag aktiviert werden), aber bis dahin sollten wir einen Fallback implementieren.

Browsersupport prüfen

Ich bevorzuge die nativen Eingabeelemente gegenüber den JavaScript basierten Datumsauswahlfeldern, besonders auf mobilen Geräten. Um zu prüfen, ob der Browser diese neuen Felder unterstützt, könnt ihr diesen einfachen Test verwenden:

jQuery( document ).ready( function ( $ ) {
	var $date_fields = $( '.date-fields-selector' );
	if ( 'text' == $date_fields[0].type ) {
		$date_fields.datepicker( {
			// Optionale Datepicker Optionen
		} );
	}
} );

Zuerst wählen wir alle Datumsfelder mit einem geeigneten CSS-Selekor aus. Dann prüfen wir, ob der Typ des ersten Felds text ist und nicht date, wie es sein sollte, wenn der Browser den Feldtyp unterstützt. Wenn die Bedingung also wahr ist, dann verwenden wir den jQuery Datepicker für diese Felder.

Laden der Datepicker Dateien

Um den Datepicker verwenden zu können, müssen die JavaScript Dateien dafür geladen werden. Da diese mit WordPress ausgeliefert werden, können wir sie einfach einbinden:

wp_enqueue_script( 'jquery-ui-datepicker' );

Dies fügt allerdings nur die JavaScript Dateien ein. Die Styles sind nicht in WordPress enthalten. Eventuell ist solche Styles in eurem Theme enthalten. Falls nicht, könnt ihr beispielsweise den “jQuery Download Builder” verwenden. Alternativ werden diese auch auf verschiedenen CDNs wie etwa den “Google Hoster Libraries” zur Verfügung gestellt.

Fazit

Meiner Meinung nach sollte man immer die nativen Browserfeatures nutzen, für UI-Elemente wie Datumsauswahl, Farbwähler oder Dropdowns. Falls ihr diese nicht auf allen Geräten verwenden könnt, implementiert nur einen Fallback für diese Geräte, solange es keine guten Gründe gibt, die für eigene UI-Elemente sprechen (we ein konsistenter Style-Guide).

Wie sieht es bei euch aus? Verwendet ihr diese neuen Eingabefelder? Oder nutzt ihr immer JavaScript-Alternativen wir jQuery UI oder Elemente von Frameworks wie Bootstrap?

Direkte Downloads mit dem “download” Attribute

Ihr kennt sicher alle die Situation. Ihr habt Dateien auf eurer Website und möchtet es den Besuchern ermöglichen, diese einfach herunterladen zu können. Eigentlich eine ziemlich einfache Angelegenheit und ihr werdet euch jetzt vielleicht fragen, wieso ich hierzu einen Artikel schreibe. Nun, nicht alle Nutzer wissen, wie einfach das funktioniert. Wollt ihr es also für unerfahrene Nutzer so einfach wie möglich machen, solltet ihr euch meinen Tipp ansehen.

Das Standardverhalten von Links zu Dateien

Wie verlinkt ihr normalerweise zu einer Datei, die eure Besucher herunterladen können. Vermutlich mit einem einfachen Link, wie in diesem Beispiel:

<a href="http://example.com/bild.jpg">Bild herunterladen</a>

Weiterlesen →

Affiliate Links im Inhalt mit CSS markieren

Als Blogger gibt es in Deutschland ein paar Gesetze, auf die man achten sollten, wenn man Texte öffentlich im Internet veröffentlicht. Ein sehr wichtiges ist hierbei das “Gesetz gegen den unlauteren Wettbewerb” (UWG). Es regelt Verhalten von Unternehmen auf dem Markt, die im Wettbewerb stehen. Selbst wenn man nur einen privaten Blog betreibt, sind die Chancen recht hoch, dass der Blog “nicht so ganz privat” ist. Viele Blogger binden Werbung auf ihrer Seite ein, um die Seite zu finanzieren. Andere binden “lediglich” sogenannte Affiliate Links ein. Aber diese werden ebenfalls als Werbung betrachtet und müssen daher auch als solche gekennzeichnet werden.

Rechtlicher Hinweis

Ich bin kein Anwalt und übernehme daher keine Verantwortung, wenn Teile meines Beitrags nicht komplett rechtlich fundiert sind. Dieser Beitrag soll nur eine technische Möglichkeit aufzeigen. Konsultiert also am besten einen Anwalt, der im Einzelfall für euch prüft, ob diese Kennzeichnung ausreichend ist.

Weiterlesen →

IMHO: Braucht die WordPress Community Frauen-Meetups?

Eigentlich wäre ja diese Woche wieder ein englischer Artikel an der Reihe gewesen und erst nächste Woche wieder ein deutscher. Aber da gerade in der deutschen WordPress Community ein Thema diskutiert wird, dass ich nicht unkommentiert stehen lassen möchte, kommt heute schon ein deutscher Artikel. Aber worum geht es denn überhaupt und wieso dieser Artikel?

Female WordPress Meetup Berlin

Der Grund für die Diskussion in dieser Woche war ein Meetup, das Frauen in der Berliner WordPress Community eingeladen hat, sich zusätzlich zum bisherigen Meetup einmal im Monat zu treffen, um sich zu vernetzen, Erfahrungen auszutauschen und Fragen zu beantworten. Organisiert wird das Meetup von Maja, die mit mir zusammen auch das “normale” Meetup in Berlin organisiert.

Weiterlesen →

Eine Standardnachricht für das Jetpack Publicize Modul setzen

Viele von euch teilen sicher ihre Blogbeiträge in sozialen Medien wie Facebook Google+, Twitter und anderen. Ich tue das auch, allerdings teile ich sie immer manuell mit einer schönen Nachricht. Manchmal braucht man aber einen automatisieren Weg. Vor allem dann, wenn man sehr Inhalte teilt oder auf viele verschiedene Plattformen teilen möchte. Dann möchte man das nicht alles manuell tun müssen, sondern wünscht sich einen Automatismus.

Auf Social Media Plattformen teilen mit dem Jetpack Publicize Modul

Auf einer Kundenwebsite haben wir hierzu das Jetpack Modul zum Teilen von Inhalten eingesetzt. Sobald man es aktiviert und zu den entsprechenden Diensten verbunden hat, findest man eine neue Einstellung in der “Veröffentlichen” Metabox. Klickt man hier auf “Details bearbeiten”, erscheint eine neue Textbox, in der man die benutzerdefinierte Nachricht für das automatische Teilen eintragen kann. Das in etwa wie folgt aus:

Weiterlesen →