Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet für einen Accordion-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.

Beitrag zu Ende lesen

Bei der Erstellung eines WordPress-Themes kommt es häufiger vor, dass man nur den Titel einer übergeordneten Seite anzeigen möchte. Zum Beispiel um für eine Metanavigation in der Sidebar eine Überschrift auszugeben.
Besonders interessant ist in diesem Zusammenhang der Titel einer Eltern-Seite auf oberster Verschachtelungsebene.

Beitrag zu Ende lesen

In einem WordPress-Themes müssen häufig untergeordnete Seiten ausgegeben werden. Ich benötige diese Funktion regelmäßig um in der Sidebar die themenverwandten Seiten zur aktuell aufgerufenen Seite aufzulisten. In Kombination mit dem Snippet für den Titel der Eltern-Seite lässt sich hier sehr schnell eine individuelle Navigation erstellen.
Mit Standard-Funktionen von WordPress können alle, oder nur ausgewählte Seiten eingeblendet werden.

Beitrag zu Ende lesen

Breadcrumb-Navigationen sind in komplexen Websites ein wichtiges Navigations- und Orientierungselement. Sobald Ihr WordPress als "echtes" CMS einsetzt, werdet ihr allerdings merken, dass viele Plugins und Snippets zu sehr auf den Einsatz in Blogs ausgerichtet sind. Sobald diverse statische und hierarchisch verschachtelte Seiten und Custom Post Types im Spiel sind, stößt so manche Breadcrumb an ihre Grenzen.
Das folgende Snippet berücksichtigt alle Anforderungen die ich bisher an eine Breadcrumb gestellt habe. Da ich meinen Blog auch selbst als Archiv nutze, lege ich den entsprechenden Code hier ab. Sicher wird das Snippet euch auch mal weiterhelfen.

Beitrag zu Ende lesen

Die Photoshop-Profis haben in Folge 48 erneut einen Screencast zum Thema Webdesign von mir veröffentlicht.
In diesem 14-minütigen Video-Tutorial beschreibe ich wie Ihr mit Grundformen und Verläufen eine futuristische anmutende "Web 2.0"-Navigationsleiste entwerfen könnt.
Die Online-Redakteure von Photoshop-Profis beschreiben den Inhalt des Videos wie folgt:

Sie können mit Photoshop auch eigene Navigationselemente für Webseiten entwerfen. Jonas Hellwig erklärt Ihnen in dieser Folge der »Photoshop-Profis«, wie Sie eine Navigationsleiste mit Glanz- und Glüh-Effekten sowie abgerundeten Ecken komplett in Photoshop gestalten. Dabei zeigt er Ihnen gleich zwei verschiedene Wege, um einen Oberflächenglanz in Photoshop zu simulieren.

Video anschauen

Seit der WordPress Version 3.0 haben wir die Möglichkeit über das Backend individuelle Navigationsmenüs zu erstellen. Dieses Feature erleichtert nicht nur das Anlegen von Navigationen sondern vor allem auch die spätere Pflege seitens des Kunden oder des Webdesigners.
Nachdem die Unterstützung für diese Menüs im Theme aktiviert ist kann die Navigation entweder per Template-Tag oder per Widget im Theme anzeigen werden. Um diesem Menü nun automatisch auch noch ein Suchfeld hinzuzufügen reicht es die functions.php ein wenig anzupassen.

Beitrag zu Ende lesen

Beim Webdesign mit Photoshop müssen häufig verschiedene Unterseiten eines Projektes gestaltet werden damit der Kunde oder der Art-Director einen Eindruck des späteren Produkts bekommen kann. Nun kann man natürlich für die verschiedenen Subpages jeweils ein neues Dokument erstellen. Doch was passiert wenn sich nachträglich etwas im Header der Seite ändert oder die Navigation um einen Punkt erweitertert werden soll?
Spätestens zu diesem Zeitpunkt müssen Korrekturen in mehreren Photoshop-Files durchgeführt werden was natürlich lästig und zeitaufwändig ist. Mit Ebenenkompositionen könnt Ihr dieses Problem geschickt umgehen und alle Unterseiten, Navigations-Zustände etc. in einer Datei verwalten.

Beitrag zu Ende lesen