kulturbanause blog » Navigation

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.

Elemente mit jQuery 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 zum Slide-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

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.

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.