kulturbanause® blog » Navigation

Aktiv-Zustände von Links (a:active) auf iPad und iPhone optimieren

Jonas Hellwig — Thu, 07 Feb 2013 18:48:49 +0000

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

iPhone und iPad verwenden die „Tap-Highlight-Color“

iOS, das Betriebssystem von iPhone & Co., ignoriert die Pseudoklasse :active und blendet stattdessen eine halbtransparente, graue Überlagerung ein, sobald ein Link angetippt wird. Diese Darstellung nennt sich „Tap-Highlight-Color“.

Standard-Darstellung von aktiven Links unter iOS mittels „Tap-Highlight-Color“

Individuelle „Tap-Highlight-Color“ verwenden

Glücklicherweise gibt es einen Webkit-spezifischen Code, mit dem man die Farbe der Überlagerung beeinflussen kann. Mit folgendem CSS-Snippet ändert ihr die Farbe auf Rot und reduziert die Deckkraft auf 50%. Achtet darauf den Code als Eigenschaft des Standard-Links (a:link) zu verwenden. Die Anwendung auf :hover oder :active funktioniert nicht.

a {	
  color:blue;
  -webkit-tap-highlight-color: rgba(255,0,0,.5);
}

Die Darstellung sieht unter iOS dann so aus. Mit einer zum Design passenden Farbe ist das zumindest schon mal hübscher als der Standard.

Individuelle Tap-Highlight-Color für iOS

Echte :active-Zustände wiederherstellen

Es ist auch möglich den echten Aktiv-Zustand des Links mit Hilfe von JavaScript wiederherzustellen. Insbesondere für beim Klick eingedrückte Buttons oder ähnlich ausgefeilte Interaktionen lohnt es sich etwas Zeit zu investieren.

Damit die Tap-Highlight-Color den Zustand nicht überlagert, sollten wir zunächst die Deckkraft der Überlagerung auf 0% reduzieren. Zusätzlich muss natürlich ein :active-Zustand vorhanden sein. Der Vollständigkeit halber zeigt der folgende Code auch den Mouse-Over-Effekt.

a {
  color:blue;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:hover {color:green;}

a:active {color:red;}

Im Footer der Website binden wir nun folgendes JavaScript ein und holen somit den Effekt zurück. Beachtet bitte, dass eine Fallback-Lösung für ausgeschaltetes JavaScript vorhanden sein sollte.

Wird der Link unter iOS nun angetippt, färbt er sich rot. Genau wie in der Desktop-Version also.

Per JavaScript aktivierter Mouse-Over-Zustand unter iOS

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Pagination in WordPress

Jonas Hellwig — Tue, 09 Oct 2012 07:41:46 +0000

In den Einstellungen von WordPress kann festgelegt werden wie viele Beiträge auf einer Seite angezeigt werden sollen. Häufig sind es ca. zehn Artikel. Wenn diese Zahl erreicht ist, blendet das WordPress-Theme eine Seitennavigation („Nächste Seite“ / „Vorherige Seite“) ein, damit der Besucher auch ältere Beiträge erreichen kann. Leider kann über diese Links keine Seite übersprungen werden. Auch ist dem Besucher oft unklar, auf welcher Seite er sich befindet. Mit einer Pagination ersetzt ihr die Standard-Seitennavigation durch eine benutzerfreundlichere Version.

functions.php - Template für Pagination definieren

Öffnet die functions.php des Themes und fügt folgenden Code ein. Mit diesem Snippet wird das Template der Pagination definiert – ein

-Element mit ungeordneter Liste:

/* pagination  */
function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;  
     global $paged;
     if(empty($paged)) $paged = 1;
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         { $pages = 1; }
     }   
 
     if(1 != $pages)
     {
         echo "";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "«";
         if($paged > 1 && $showitems < $pages) echo "‹";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "".$i."
":"".$i."";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "›";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "»";
         echo "\n";
     }
}

Pagination im Theme aufrufen

Öffnet nun das Template in dem die Pagination eingebunden werden soll. Das ist häufig die index.php, die tag.php, die category.php oder die archive.php. Fügt folgenden Code dort ein, wo die Pagination erscheinen soll. Auch eine Einbindung außerhalb des Loops ist möglich.

max_num_pages); } ?>

Links zum Thema / Quellen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress: Inhalte nur auf letzter Seite anzeigen

Jonas Hellwig — Thu, 12 Apr 2012 09:58:12 +0000

Der WordPress-Loop zeigt immer eine von euch festgelegte Anzahl an Beiträgen je Seite. Diese Anzahl wird i.d.R. entweder in den Einstellungen festgelegt, oder über einen modifizierten Loop individuell definiert. Sind mehr Artikel geschrieben als abgebildet werden sollen, teilt WordPress die Beiträge auf verschiedene Seiten auf. Mit folgendem Snippet zeigt ihr einen bestimmten Inhalt nur auf der letzten Seite.

Ein Beispiel

Mal angenommen ihr erstellt eine Seite mit Kochrezepten. Der Besucher hat die Möglichkeit sich der Reihe nach alle Rezepte zu einem bestimmten Thema – z.B. Kuchen – anzuschauen. Sofern er nicht vorher fündig wird, gelangt er irgendwann zwangsläufig ans Ende der Liste mit Kuchenrezepten.
Damit der Besucher jetzt nicht die Seite verlässt, bietet es sich an ihm andere Rezepte vorzustellen die ihm vielleicht gefallen. Frei nach dem Motto: „Leider haben wir keine Kuchenrezepte mehr für dich – aber wir haben noch tolle Rezepte für leckere Torten und Plätzchen.“.
Dieser Hinweis soll natürlich nur auf der letzten Seite angezeigt werden.

Inhalt auf der letzten Seite einer Pagination darstellen

Mit folgendem Snippet könnt ihr prüfen ob die aufgerufene Seite die letzte Seite des Loops ist. Fügt folgendes Snippet dort ein wo der Inhalt erscheinen soll.

get( 'paged' );
		if ( ! $kb_current_page ) {
			$kb_current_page = 1;
		}
		if ( $kb_current_page == $wp_query->max_num_pages ) { ?>

Dieser Text ist nur auf der letzten Seite zu sehen!

(Technisch korrekt handelt es sich hierbei um die erste Seite des Loops. Diese zeigt allerdings die ältesten Beiträge und ist daher gefühlt die letzte Seite. )

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Touch-Gesten per JavaScript: Hammer.js

Jonas Hellwig — Wed, 11 Apr 2012 09:56:36 +0000

Mit der zunehmenden Verbreitung von Touchpads in Smartphones und Tablets wird auch die Gestensteuerung (Touch Gestures) für Websites immer interessanter. Wenn Ihr bestimmte Elemente einer Website über Touch-Gesten navigierbar machen möchtet, lohnt ein Blick auf das Script hammer.js . Das Script lässt sich als jQuery-Plugin oder als Standalone-Lösung einsetzen und realisiert die Gesten „Tap“, „Double Tap“, „Hold“, „Drag“ und „Pinch (Transform)“.

Gestensteuerung in die Website integrieren

Das Projekt hammer.js lässt sich sehr einfach in eine Website integrieren. Nachdem das Script in die Website eingebunden wurde muss nur noch ein Ziel-Element für die Gestensteuerung festgelegt werden.

Anschließend erhaltet ihr verschiedene Callback-Funktionen der Touch Events wie touches, position oder rotation, die ihr dann dazu verwenden könnt das gewünschte Ereignis herzustellen. Welche Callbacks das im Detail sind, hängt von der Art der Geste ab und kann in der Dokumentation nachgeschlagen werden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Navigationspunkte im WordPress-Backend ausblenden und umbenennen

Jonas Hellwig — Tue, 10 Apr 2012 08:09:43 +0000

Wenn ihr WordPress für Kundenprojekte einsetzt, ist das Backend häufig umfangreicher als es für die Bedürfnisse des Kunden notwendig ist. Damit im Dashboard nur die Navigationspunkte auftauchen die der Kunde auch wirklich benötigt bietet es sich an ein paar Anpassungen vorzunehmen. In diesem Beitrag möchte ich euch verschiedene Snippets, Links und Plugins vorstellen mit denen ihr das Dashboard individualisieren könnt.

Verschiedene Lösungsansätze

Bevor ihr Änderungen am WordPress-Theme vornehmt oder ein Plugin verwendet solltet ihr prüfen ob die Standard-Benutzerverwaltung von WordPress nicht bereits zum Ziel führt. Wenn für den Kunden beispielsweise nur die administrativen Menüeinträge versteckt werden sollen, bietet es sich an eine schwächere Benutzerrolle (z.B. den Redakteur) zu verwenden.

WordPress-Plugin: Admin Menu Editor

Eine weitere Möglichkeit das Backend abzuspecken ist der Einsatz eines Plugins wie Admin Menu Editor oder WPlite. Mit diesem Plugin können unerwünschte Menüpunkte und Boxen ausgeblendet werden. Inwiefern sich hier ein Plugin anbietet ist wohl abhängig von der Art der Anpassung die ihr vornehmen wollt.

Zuletzt besteht noch die Möglichkeit die Anpassungen selbst über die functions.php des Themes vorzunehmen. Für diesen Weg möchte ich euch zwei Snippets vorstellen.

Navigationspunkte ausblenden

Wenn ihr Navigationspunkte ausblenden möchtet, kopiert das folgende Snippet in die functions.php eures Themes. Alle Menüeinträge innerhalb des Arrays werden entfernt.

/* Navigationspunkte aus dem WordPress-Dashboard entfernen */ 
function remove_menus () {
global $menu;
		$restricted = array(__('Artikel'), __('Mediathek'), __('Links'), __('Seiten'), __('Kommentare'), __('Design'), __('Plugins'), __('Benutzer'), __('Werkzeuge'), __('Einstellungen'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
		}
}
add_action('admin_menu', 'remove_menus');

Dashboard Menüpunkte umbenennen

Wenn Ihr Menüpunkte umbenennen möchtet könnt ihr dafür folgendes Snippet verwenden und einzelne Wörter per str_replace ersetzen. Die Ersetzung findet dann allerdings immer global im gesamten Menü statt, auch in den Untermenüs.

Kopiert folgenden Code in die functions.php des Themes. Anschließend legt ihr immer fest welche Zeichenkette mit welchem Wort ersetzt werden soll. Im nachfolgenden Beispiel ersetzen wir „Artikel“ mit „Blog-Beiträge“.

/* Gezielte Wörter im WordPress-Dashboard-Menü umbenennen */ 
function kb_rename_dashboard_menu( $kb_rename_item ) 
{  
    $kb_rename_item = str_replace( 'Artikel', 'Blog-Beiträge', $kb_rename_item );
    $kb_rename_item = str_replace( 'artikel', 'blog-beiträge', $kb_rename_item );
    return $kb_rename_item;
}

add_filter( 'gettext', 'kb_rename_dashboard_menu' );
add_filter( 'ngettext', 'kb_rename_dashboard_menu' );

Zum Thema

Wenn ihr gezielt einen einzelnen Menüpunkt umbenennen möchtet, oder die Anordnung der Navigationspunkte umstellen wollt, könnt ihr direkt auf den Array des Dashboard-Menüs zugreifen. Ein ausführlicher Beitrag auf WPTuts gibt einen Einblick in die Materie.

WPtuts: Customizing Your WordPress Admin
Customizing WordPress Admin – updated for 3.1 with new tips!
Alle Beiträge auf kulturbanause zum Thema WordPress-Dashboard

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Links im WordPress-Nav-Menu in neuem Fenster öffnen, mit Klassen auszeichnen und um Mikroformate erweitern

Jonas Hellwig — Mon, 30 Jan 2012 08:00:47 +0000

WordPress bietet mit dem wp_nav_menu eine tolle Möglichkeit Navigationselemente unkompliziert über das Dashboard anzulegen und zu verwalten. Normalerweise verlinkt man statische Seiten oder Kategorien innerhalb von WordPress, doch ab und zu möchte man auch externe Seiten mit in die Navigation aufnehmen, in einem neuen Fenster öffnen und vielleicht sogar mit einem entsprechenden Icon kennzeichnen.
WordPress bietet von Haus aus die Möglichkeit Links mit einer Klasse, einem Linkziel, einer Beschreibung und einem XML-Attribut auszuzeichnen. Da die Funktion jedoch standardmäßig nicht aktiviert ist, und ich sogar schon Anleitungen gesehen habe die Features mit JavaScript nachzurüsten, möchte ich euch kurz zeigen wo ihr sie einschaltet.

Menü-Optionen

Im WordPress-Backend seht ihr oben rechts den Button "Optionen einblenden". Auffällig ist, dass sich unter diesem Link je nach aufgerufener Seite unterschiedliche Optionen verstecken. Es lohnt sich also häufiger mal die Optionen zu besuchen.
Wenn ihr euch im Bereich "Design → Menüs" befindet, könnt Ihr in den Optionen die oben beschriebenen Punkte aktivieren.

Anschließend stehen euch für jeden Menüpunkt die erweiterten Einstellungsmöglichkeiten zur Verfügung.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Daten per Link/URL an Zielseite übergeben

Jonas Hellwig — Thu, 15 Dec 2011 11:06:28 +0000

Wenn ihr Daten von einer Quellseite an eine Zielseite übergeben wollt, stehen euch verschiedene Möglichkeiten offen. Die Variante, auf die ich in diesem Beitrag kurz eingehen möchte überträgt die Daten mit Hilfe der URL an eine Zielseite. Dazu werden dem Link verschiedene Parameter mitgegeben und auf der Zielseite mit dem PHP-Befehl GET wieder ausgelesen.

Grundsätzliche Funktionsweise

Das Prinzip ist denkbar einfach. Ihr setzt einen ganz gewöhnlichen Link auf eine andere Seite und erweitert diesen lediglich um verschiedene Parameter/Werte-Paare. Verschiedene Parameter werden mit „&“ von einander getrennt.

Beispiel für einen Link mit zwei Parametern:

Link

Auf der Zielseite wird anschließend der Wert zu einem bestimmten Parameter wieder ausgelesen. Das funktioniert mit folgendem Snippet:

Beachtet bitte, dass die Parameter in der URL sichtbar sind und daher leicht manipuliert werden können. Für sensible Daten ist diese Art der Übertragung daher absolut nicht geeignet!

Beispielseite

Ich habe ein Beispiel zu diesem Thema erstellt, das ihr hier live testen und herunterladen könnt. Es geht darum eine Farbe auszuwählen und die Eigenschaften dieser Farbe zu erfahren. Je nach Wahl werden unterschiedliche Paramenter mit dem Namen der Farbe, dem Hexadezimalcode und den Eigenschaften an die Zielseite übertragen und dort entsprechend zusammengesetzt.

Live-Demo (Probiert es aus!):

Live-Demo in neuem Fenster öffnen

HTML/PHP-Code der Ausgangsseite (start.php)

[...]


Welche Farbe gefällt dir am besten?

  Rot
  Orange
  Gelb
  Grün
  Blau
  Violett



[...]

HTML/PHP-Code der Zielseite (ziel.php)

[...]


"> Du hast  gewählt. Eine schöne Farbe! 
Wusstest du schon, dass mit  folgende Eigenschaften, Wirkungen und Assiziationen verbunden werden?


← Zurück zur Farbauswahl


[...]

Ihr könnt alle Dateien des Beispiels auch herunterladen.

Beispieldateien herunterladen

Die Farbwirkungen für das Beispiel habe ich mir vom Webdesign Blog ausgeliehen. Vielen Dank dafür!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

jQuery Accordion – Elemente auf- und zufahren lassen (slide toggle) und parallel das Icon austauschen

Jonas Hellwig — Thu, 17 Nov 2011 06:32:01 +0000

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.

Aufbereitete Demo

Zunächst einmal die mit CSS3 gestaltete Demo-Version. Diese Demo dient dazu den Effekt so zu zeigen wie ich ihn mir auch auf einer Website vorstellen kann. Achtet darauf, dass das Icon sich je nach Zustand verändert.

Der Download beinhaltet eine HTML-Datei und eine Mini-Sprite mit der Grafik des Buttons.

Dateien dieser Demo herunterladen

Basis-Version ohne Design

Wie eingangs erwähnt habe ich auch eine Basis-Version erstellt. Diese Datei enthält nur den Code der für die Funktion auch wirklich benötigt wird. Wenn ihr die Funktion also schnell einsetzen wollt, müsst ihr nicht erst ein gestaltetes Beispiel umbauen.

Der HTML- und JavaScript-Code des Beispiels sieht wie folgt aus: Das Grundgerüst bildet eine Definitionsliste. Innerhalb des Definition Term dt wird die Überschrift und der "Mehr lesen"-Link eingebunden. Die per CSS ausgeblendete Definition Definition dd beinhaltet den ausführlichen Text.

Per JavaScript wird bei einem Klick auf dt das nachfolgende dd-Element eingeblendet. Gleichzeitig wird die Klasse des a-Tags innerhalb von dt ausgetauscht. jQuery wird übrigens extern von Google eingebunden.



  Hier steht die Überschrift Details
  Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.
  Hier steht die Überschrift Details
  Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.
  Hier steht die Überschrift Details
  Hier steht die detallierte Beschreibung. Dieser Text wird erst nach einem Klick auf das übergeordnete Elemente (dt) eingeblendet. Parallel wird auch die Klasse des Links gewechselt um den Pfeil zu drehen.

Der CSS-Code des Beispiels ist ebenfalls sehr übersichtlich.

dd { display:none; }

.closed { background:red; }

.open { background:green; }

Der Download beinhaltet eine HTML-Datei in der alles enthalten ist.

Basis-Version herunterladen

Links / Quellen:

jQuery Accordions – Best Webdesign Tools

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress: Titel übergeordneter Seiten auslesen (direkter und oberster Vorfahre)

Jonas Hellwig — Fri, 23 Sep 2011 10:42:40 +0000

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.

Bei einer Verschachtelungstiefe ab zwei, besteht ein Unterschied zwischen dem direkten Vorfahren einer Seite und dem Vorfahren auf oberster Ebene. Das folgende Beispiel zeigt eine Beispiel-Verschachtelung:

Geografie
- Städte
  - Berlin
  - Köln
- Flüsse
  - Spree
  - Rhein

Übergeordnete Seite auf oberster Ebene ausgeben

Nehmen wir nun an wir befinden uns auf der Seite "Berlin". Mit dem folgenden Snippet geben wir den Vorfahren auf oberster Ebene aus. In unsererm Beispiel also "Geografie".

Dieses Snippet gehört entweder global in die functions.php oder ebenfalls in die Template-Datei.

post_parent) )
	{ the_title(); }
  else {
	$ancestors = get_post_ancestors($post->ID);
	end($ancestors);
	  echo get_the_title(end($ancestors));
  }
}

?>

Um den Titel im Theme auszugeben verwendet ihr folgendes Snippet:

Direkten Vorfahren ausgeben

Wenn wir nun auf Basis des gleichen Beispiels den direkten Vorfahren (Städte) auslesen wollten, muss das Snippet leicht modifiziert werden.

Code für die functions.php.

post_parent) )
	{ the_title(); }
  else {
	$ancestors = get_post_ancestors($post->ID);
	end($ancestors);
	  echo get_the_title($ancestors[0]);
  }
}

?>

Um den Titel im Theme auszugeben verwendet ihr folgendes Snippet:

via

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress: Untergeordnete Seiten gezielt ausgeben

Jonas Hellwig — Fri, 23 Sep 2011 09:43:03 +0000

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.

Alle untergeordneten Seiten ausgeben

Der folgende Code zeigt immer alle untergeordneten Seiten zur aktuell aufgerufenen Seite an. Auch Kinder von Kindern etc.


  ID); ?>

Verschachtelungstiefe begrenzen

Wenn ihr die Tiefe beschränken wollt, erreicht ihr das mit dem Parameter "depth".
"0" Entspricht hierbei allen Seiten. Mit "1", "2", "3" etc. legt ihr die Tiefe fest. Sollen also nur die direkten Nachkommen angezeigt werden - so benutzt folgenden Code:

  

  ID); ?>

Bei der hier beschriebenen Technik handelt es sich um eine WordPress-Standard-Funktion. Mehr dazu findet ihr hier: codex.wordpress.org/Function_Reference/wp_list_pages

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress: Breadcrumb-Navigation ohne Plugin

Jonas Hellwig — Wed, 24 Aug 2011 05:21:30 +0000

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.

Code für die functions.php

Den folgenden Code fügt Ihr in die functions.php eures WordPress-Themes ein.


// breadcrumb
function nav_breadcrumb() {
 
  $delimiter = '»';
  $home = 'Home'; 
  $before = ''; 
  $after = ''; 
 
  if ( !is_home() && !is_front_page() || is_paged() ) {
 
    echo '';
 
    global $post;
    $homeLink = get_bloginfo('url');
    echo '' . $home . ' ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $before . single_cat_title('', false) . $after;
 
    } elseif ( is_day() ) {
      echo '' . get_the_time('Y') . ' ' . $delimiter . ' ';
      echo '' . get_the_time('F') . ' ' . $delimiter . ' ';
      echo $before . get_the_time('d') . $after;
 
    } elseif ( is_month() ) {
      echo '' . get_the_time('Y') . ' ' . $delimiter . ' ';
      echo $before . get_the_time('F') . $after;
 
    } elseif ( is_year() ) {
      echo $before . get_the_time('Y') . $after;
 
    } elseif ( is_single() && !is_attachment() ) {
      if ( get_post_type() != 'post' ) {
        $post_type = get_post_type_object(get_post_type());
        $slug = $post_type->rewrite;
        echo '' . $post_type->labels->singular_name . ' ' . $delimiter . ' ';
        echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        echo $before . get_the_title() . $after;
      }
 
    } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
      $post_type = get_post_type_object(get_post_type());
      echo $before . $post_type->labels->singular_name . $after;
 
    } elseif ( is_attachment() ) {
      $parent = get_post($post->post_parent);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '' . $parent->post_title . ' ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;
 
    } elseif ( is_page() && !$post->post_parent ) {
      echo $before . get_the_title() . $after;
 
    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '' . get_the_title($page->ID) . '';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $before . get_the_title() . $after;
 
    } elseif ( is_search() ) {
      echo $before . 'Ergebnisse für Ihre Suche nach "' . get_search_query() . '"' . $after;
 
    } elseif ( is_tag() ) {
      echo $before . 'Beiträge mit dem Schlagwort "' . single_tag_title('', false) . '"' . $after;
 
    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $before . 'Beiträge veröffentlicht von ' . $userdata->display_name . $after;
 
    } elseif ( is_404() ) {
      echo $before . 'Fehler 404' . $after;
    }
 
    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo ': ' . __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }
 
    echo '';
 
  }
}

Breadcrumb im Theme aufrufen

Mit diesem Snippet bindet Ihr die Breadcrumb im Theme ein. Dabei ist es irrelevant ob sich die Navi innerhalb oder außerhalb des WordPress-Loops befindet.

Je nachdem, auf welcher Unterseite des Projektes Ihr euch befindet, wird nun die Breadcrumb dargestellt. Im Gegensatz zu vielen anderen Lösungen die ich kenne, arbeitet diese Breadcrumb einwandfrei mit Archiven, Seiten und Kategorien. Auch Custom Post Types werden berücksichtigt.

Der Code wurde ursprünglich unter dimox.net/wordpress-breadcrumbs-without-a-plugin veröffentlicht. Ich habe ihn nur meinen Anforderungen entsprechend leicht abgewandelt und die Begriffe übersetzt.

Update vom 13. Februar 2012

Ich habe eine Anpassung am Code vorgenommen, der die Breadcrumb-Darstellung beim Einsatz einer Pagination verbessert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Screencast: Futuristische Navigation mit Oberflächenglanz

Jonas Hellwig — Thu, 21 Apr 2011 12:28:11 +0000

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.

Die Photoshop-Profis - Folge 48: Navigationsleisten für Web 2.0

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Suchfeld automatisch zum WordPress-Menü hinzufügen

Jonas Hellwig — Mon, 17 Jan 2011 11:15:56 +0000

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.

Suchfunktion automatisch hinzufügen

Um Menüs im Theme verwenden zu können müssen diese zunächst aktiviert werden. Wie das geht erfahrt Ihr im WordPress-Codex:

Jetzt kann mit folgendem Code der Navigationleiste das Suchfeld hinzugefügt werden. Öffnet die function.php und fügt folgenden Code ein. Anschließend erscheint das Suchfeld automatisch als Listenpunkt nach dem Menü.

/* automatisch ein Suchfeld zum wp-nav-menu hinzufügen. */

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '' . $searchform . '';

    return $items;
}

via: WP Recipes

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop-Screencast: Ebenenkompositionen im Webdesign

Jonas Hellwig — Wed, 05 Jan 2011 21:38:05 +0000

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.

In diesem circa 5 Minuten langen Screencast möchte ich Euch die Grundlagen der Ebenenkompositionen vermitteln, so dass Ihr die Funktion später problemlos auf eigene Projekte anwenden könnt.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.