kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


WordPress: Prüfen ob die aktuelle Seite Parent- oder Child-Page ist

Ab und zu muss man bei der Erstellung eines WordPress-Themes prüfen ob die aktuelle Seite ein Parent- oder eine Child-Page ist. Mal angenommen ihr möchtet in der Sidebar immer alle, der aktuellen Seite untergeordneten Seiten anzeigen lassen. Zusätzlich möchtet ihr diesen Bereich so aufwändig gestalten, dass ein umschließendes Container-Element notwendig ist. Wenn nun keine Child-Pages mehr existieren sollte natürlich auch das Container-Element verschwinden, sonst ist der Bereich leer. Genau für einen solchen Zweck habe ich seinerzeit das nachfolgende Snippet benutzt.

Beitrag zu Ende lesen

WordPress: Prüfen ob sich ein User in Kategorie X (Parent-Category) oder in einer untergeordneten Kategorie von X (Child-Category) befindet

Manchmal möchten wir Inhalte in einem WordPress-Theme nur dann ausgeben, wenn sich der Besucher in einer bestimmten Kategorie bzw. in einer untergeordneten Kategorie befindet. Wenn es sich um ein Kundenprojekt handelt, kann der Kunde natürlich selbst neue Unterkategorien (Child-Categories) anlegen die wir bei der Erstellung des Themes noch nicht kennen und folglich auch nicht berücksichtigen können. Das Snippet muss also auf der ID, bzw. dem Namen der Hauptkategorie (Parent-Category) basieren. Gerade wenn ihr mit Custom Post Types arbeitet kann ein solcher Fall schnell auftreten.

Beitrag zu Ende lesen

Facebook-Problem? Like-Button auch im IE7/IE8 anzeigen

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Beitrag zu Ende lesen

WordPress: Breadcrumb-Navigation ohne Plugin

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/Zeilenumbrüche per CSS erzwingen

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

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

Kochtopf-Icon als gratis Photoshop/PNG-Download

Für ein vor kurzem abgeschlossenes Projekt habe ich einen Kochtopf illustriert. In Form eines Icons sollte der Kochtopf die Termine einer Kochschule anteasern. Letztendlich wurde das Icon durch ein Foto ersetzt und kam somit nicht zum Einsatz. Aus diesem Grund stelle ich die Photoshop-Datei sowie das Icon im PNG-Format hier als Download zur Verfügung. Vielleicht könnt ihr es ja in einem zukünftigen Projekt einsetzen.

Beitrag zu Ende lesen