Touchscreen optimierte DropDown-Navigation mit jQuery

navi-touch

Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.

Beitrag zu Ende lesen

WooCommerce-Bestellnummer (Order Number) mit Präfix versehen

woocommerce-order-prefix

WooCommerce, das populäre eCommerce-Plugin für WordPress, vergibt jeder Bestellung im Online-Shop eine fortlaufende Nummer. Diese Bestellnummer ist im Backend sichtbar und wird dem Käufer in E-Mails mitgeteilt. Wenn ihr ein Plugin zur automatischen Erzeugung von PDF-Rechnungen einsetzt, wird die Bestellnummer meist auch als Rechnungsnummer verwendet. In diesem Beitrag archivieren wir ein Code-Snippet um die Bestellnummer mit einem frei formulierbaren Präfix zu versehen. Beispielsweise um Rechnungen aus dem Online-Shop eindeutig identifizieren zu können.

Beitrag zu Ende lesen

WordPress: Single-Seiten von Custom Post Types umleiten

wordpress-redirect

Innerhalb einer WordPress-Website wird zum Erstellen von Übersichtsseiten, z. B. von Produkten oder Mitarbeitern meist auf »Custom Post Types« zurückgegriffen. Die einzelnen Beiträge des Post Types werden dann mit Hilfe eines Loops an der gewünschten Stelle auf der Website ausgegeben. Doch nicht immer wird dabei die Single-Ansicht (Detailseite) benötigt. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr die Single-Ansicht, sowie die Vorschau für bestimmte Beitragstypen umleiten könnt. Sowohl im Backend als auch im Frontend.
Beitrag zu Ende lesen

Benutzerdefinierte Felder (Custom Fields) in die Suche von WordPress integrieren

wordpress-custom-field-search

Mit Hilfe der sog. Benutzerdefinierten Felder (Custom Fields) kann der WordPress-Editor um zusätzliche Eingabefelder erweitert werden. Leider werden die Inhalte der Custom Fields bei der WordPress-Suche ignoriert und eventuell relevante Ergebnisse folglich nicht in den Suchergebnissen angezeigt. In diesem Beitrag archivieren wir ein Snippet das Custom Fields zur WordPress-Suche hinzufügt. Beitrag zu Ende lesen

Parallelogramme mit CSS erstellen

css-parallelogram

Im modernen Webdesign wird häufig auf rechteckige Gestaltungselemente zurückgegriffen. Ein Parallelogramm kann diese klaren Strukturen brechen und mehr Abwechslung ins Layout bringen. Wie ihr mit Hilfe von CSS ganz einfach Parallelogramme erstellen könnt bei denen der enthaltene Text nicht verzerrt wird, erklären wir euch in diesem Artikel anhand des Beispiels einer Navigation. Beitrag zu Ende lesen

Hintergrund-Grafiken mit CSS positionieren

css-positionierung-hinterguende

Mit CSS lassen sich Hintergrund-Grafiken einbinden und positionieren. Welche Möglichkeiten man bei der Positionierung dieser Grafiken hat, wollen wir euch in diesem Artikel zeigen. Dabei gehen wir neben der CSS-Eigenschaft background-position auch auf die Eigenschaften background-clip und background-origin ein und zeigen euch anhand von Beispielen ihre Auswirkungen auf die Hintergrundgrafik. Beitrag zu Ende lesen

Material Design – Die Designsprache von Google

material-design

»Material Design« ist eine von Google stetig weiterentwickelte Designsprache. Sie verbindet die Gestaltungsregeln des klassischen Grafik-Designs mit den Möglichkeiten digitaler Benutzeroberflächen. Ziel von Material Design ist u.a. die Verbesserung der Benutzerfreundlichkeit. Darüber hinaus hat Material Design einen charakteristischen Look, so dass im Material Design gestaltete Interfaces sich ideal kombinieren lassen.

In diesem Artikel erklären wir euch, worin der Unterschied zum Flat Design besteht und welche Gestaltungsregeln beim Material Design berücksichtigt werden sollten.

Beitrag zu Ende lesen