WordPress: Breadcrumb-Navigation ohne Plugin

wordpress-breadcrumb

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

Wortumbrüche per CSS erzwingen

css-wortumbruch-word-wrap

In letzter Zeit habe ich mittels CSS3 Media Queries einige Seiten für mobile Endgeräte optimiert. Dabei sind mir ein paar Besonderheiten der "Responsive Websites" aufgefallen die in dieser Form bei "normalen" Websites eher selten auftreten. Mobile Webdesigns werden beispielsweise mit Prozentangaben umgesetzt um die Inhalte auf die verschiedenen Displays und Ausrichtungen zu strecken. Dabei kann es leicht passieren, dass lange Wörter (z.B. ungekürzte Links innerhalb von Kommentaren) aus einem Container-Element herausbrechen und zu unschönen Darstellungsfehlern führen. Auf dem Smartphone wird durch ein solches Element häufig auch der Zoom-Faktor falsch berechnet.

Beitrag zu Ende lesen

WordPress: Benutzerdefinierte Felder (Custom Fields) nur dann ausgeben wenn Werte eingetragen wurden

custom-field-wordpress

In WordPress besteht die Möglichkeit Beiträge durch Zusatzinformationen zu ergänzen. Das geschieht unter anderem über die so genannten Benutzerdefinierten Felder. Hierbei wird zunächst einmal ein Name (auch Schlüssel genannt) festgelegt. Diesem Namen können anschließend verschiedene Werte zugewiesen werden, die dann wiederum im Theme ausgegeben werden können. Nun kann es vorkommen, dass dieser Wert in ein weiteres Code-Snippet - z.B. einen img- oder a-Tag eingebunden werden soll. Wird nun das Benutzerdefinierte Feld nicht ausgefüllt, so kommt es zu Fehldarstellungen auf der Seite. Wie Ihr dieses Problem umgeht und Eingabefehler verhindert, möchte ich in diesem Beitrag kurz erläutern.

Beitrag zu Ende lesen

Google+ Profilbild in die Google-Suchergebnisse integrieren

jonas-hellwig-into-google-search-ranking

Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem entsprechenden Treffer in den Suchergebnissen. Das sieht dann so aus.

Beitrag zu Ende lesen

WordPress-Benutzerprofil um Google+, Facebook, Twitter und andere Felder erweitern

wordpress-zusatzliche-felder-profil

Die WordPress-Benutzerprofile bieten die Möglichkeit verschiedene Meta-Informationen zu einem Benutzer anzugeben und anschließend mittels Template-Tag im Theme darzustellen. Allerdings sind insbesondere die Angaben der Social Media/IM-Dienste völlig veraltet: Jabber, AIM und Yahoo IM brauche ich nun wirklich nicht mehr. Dafür fehlen aktuelle Eingabefelder für Google+, Facebook und Twitter.
Mit ein paar Zeilen Code könnt ihr euer Profil um die fehlenden Angaben ergänzen und die überflüssigen Eingabefelder entfernen.

Beitrag zu Ende lesen

z-index-Bug im Internet Explorer 7 (IE7) mit jQuery lösen

z-index-bug-ie7

Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 trotz korrekt vergebenem z-index Layout-Elemente falsch an. Bei Drop-Down-Navigationen oder ähnlichen überlappenden Bereichen kann dieser Fehler daher zu etlichen grauen Haaren führen. Ein Live-Beispiel des Bugs findet ihr hier. Der z-index-Bug lässt sich auf verschiedene Arten lösen. Eine sehr schnelle und komfortable Variante bietet jQuery. Mit wenigen Zeilen Code kann die fehlerhafte Funktionalität im IE7 nachgerüstet werden.
Da ich genau dieses Problem vor wenigen Tagen lösen musste, möchte ich euch hier einen möglichen Lösungsweg zeigen.

Beitrag zu Ende lesen