#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float:left;
	position: relative;
}
#access a {
	display:block;
	text-decoration:none;
	color:#aaa;
	padding:0 10px;
	line-height:38px;
}
#access ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
	float:left;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left:100%;
	top:0;
}
#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
	color:#fff;
	background:#333;
}
#access ul li:hover > ul {
	display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color:#fff;
}

Ganz schön viel für so ein Menü, doch wie kann ein einzelner Menüpunkt hervorgehoben werden, wie z.B. die Punkte “Lexikon” und “Umfragen” hier bei mir.
Dazu ruft man in seinem Browser den Quelltext der Seite auf und sucht den entsprechenden Abschnitt. Bei mir sieht der so aus:

Umfragen
Lexikon

Jetzt kommt es auf die IDs menu-item-4501 und menu-item-4465 an. Bei dir werden diese IDs andere Ziffern am Ende haben. Deswegen auch der Weg über den Quelltext um die Ziffern heraus zu finden. Diese IDs definieren wir über die style.css extra. Bei mir habe ich den Code

#menu-item-4501 {
	float:right !important;
	margin-right:13px;
	background:#ff0000;
	font-weight:bold;
	border-bottom:1px solid #000;
	}

#menu-item-4465 {
	float:right !important;
	margin-right:1px;
	background:#ff0000;
	font-weight:bold;
	border-bottom:1px solid #000;
	}

#menu-item-4465 a, #menu-item-4501 a {
	color:#000;
	}

in der style.css eingefügt. Bei der Gestaltung bzw. Hervorhebung einzelner Menüpunkte sind keine Grenzen gesetzt. Eine sehr gute Hilfe im Umgang mit CSS bietet übrigens die Seite selfhtml.org/css.

Nachteil dieser Methode: Entfernt man einen Link aus dem Menü und fügt ihn später wieder ein ändert sich die ID, so dass der Eintrag in der style.css angepasst werden muss.

Mit der Einführung dieses Features gehört die langwierige und für manchen komplizierte Bearbeitung der template Dateien der Vergangenheit an.

Um die benutzerdefinierten Menüs nutzen zu können müssen sie als erstes in der functions.php definiert werden. Es können beliebig viele Menüs mit dem tag register_nav_menus ¹ konfiguriert werden. Als Beispiel der Code aus dem Standard themes TwentyTen.

< ?php register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
	) ); ?>

Nun muss noch an der Stelle wo das Menü erscheinen soll der tag wp_nav_menu ² mit den entsprechenden Parametern eingefügt werden. In dem Standard themes TwentyTen sieht das z.B. in der header.php folgendermaßen aus.

< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

Baut man diesen Code nicht in eine seiner template Dateien ein kann das benutzerdefinierte Menü trotzdem verwendet werden. Und zwar als Widget.

Anmerkung: Bei dem dargestellten Code muss jeweils das Leerzeichen vor dem ersten Fragezeichen entfernt werden damit der Code interpretiert wird.

Da ich mächtig stolz auf mich bin die Anleitung WordPress als Lexikon benutzen in meinem Blog erfolgreich umgesetzt zu haben und mir mein Lexikon richtig gut gefällt, auch wenn dort erst wenige Begriffe zu finden sind, wollte ich den Menüpunkt in der horizontalen Navigation gebührend hervorheben.

Nachdem ich mir den Quelltext meiner Startseite angeschaut hatte wusste ich das jeder Menüpunkt einer extra ID bekommt, in dem Fall des Links zum Lexikon die ID menu-item-4465. Also rief ich in Notepad++ die CSS Datei auf und fügte den folgenden Code am Ende ein.

#menu-item-4465 {
	float:right !important;
	margin-right:13px;
	background:#ff0000;
	font-weight:bold;
	border-bottom:1px solid #000;
	}

Fertig war die Laube – äh, der wunderschön hervorgehobene Menüpunkt.

Nachteil: Entfernt man im Backend den Menüpunkt und fügt ihn dann wieder ein ändert sich die Zahl am Ende der ID. Doch wenn man das weiß kann man ja reagieren

Oft wird dieser Link vergessen – wenigstens passiert mir dies immer mal wieder. So auch Gestern bei dem Artikel Zahnversicherung Preisvergleich.

Also habe ich mich im Forum und in der Dokumentation von WordPress Deutschland auf die Suche nach einer Lösung gemacht und bin auch fündig geworden. Da ich alle Artikel für Trigami in einer extra Kategorie abgelegt habe konnte ich folgenden Code verwenden, den ich in der single.php direkt vor dem tag the_content() eingefügt habe.

< ?php if ( in_category('KATEGORIE-ID') ): ?>;
			//hier der Text oder der Code der angezeigt werden soll
			< ?php endif; ? >

Die Zeichenkette KATEGORIE-ID muss noch mit der ID der betreffenden Kategorie ersetzt werden. Diese sieht man wenn man mit der Maus im Backend bei den Kategorien über die KAtegorie fährt. Dann wird in der Statusleiste der Link der Kategorie angezeigt. Die letzten Ziffern sind die ID.

An Stelle des Textes //hier der Text oder der Code der angezeigt werden soll wird einfach der von Trigami zur Verfügung gestellte Code verwendet.

Natürlich kann der tag in_category auch anders genutzt werden.

Ich hoffe ich konnte mit diesem kleinen Tipp dem ein oder anderen ein wenig helfen.

Update: Wie mir Moritz von Trigami in einem Kommentar mitgeteilt hat funktioniert meine Lösung nicht, weil für jeden Auftrag ein separater Code bereit gestellt wird. Nun nutze ich ein benutzerdefiniertes Feld, welches das theme von Hause aus hat, um den Link direkt unter dem Titel anzuzeigen.

Natürlich hat mir dies nicht gereicht und so habe ich noch ein paar Klassen definiert, und zwar für Twitter-Links, Facebook-Links, Links zu amazon und die Klasse für interne Links habe ich neu definiert. Der Code der CSS-Datei im plugin-Verzeichnis sieht nun wie folgt aus:

/* For Link Indication plugin */
a.liexternal { padding-right: 12px; background: url(images/link-icon_external.gif) no-repeat right; }
a.liwikipedia { padding-right: 13px; background: url(images/link-icon_wikipedia.gif) no-repeat right; }
a.liwp { padding-right: 16px; background: url(images/link-icon_wordpress.png) no-repeat right; }
a.liftp { padding-right: 13px; background: url(images/link-icon_ftp.png) no-repeat right; }
a.limailto { padding-right: 18px; background: url(images/link-icon_mail.gif) no-repeat right; }
a.lipdf { padding-right: 12px; background: url(images/link-icon_pdf.png) no-repeat right;  }
a.lizip { padding-right: 12px; background: url(images/link-icon_zip.png) no-repeat right;  }
a.liamazon { padding-right: 12px; background: url(images/amazon.gif) no-repeat right;  }
a.liintern { padding-right: 12px; background: url(images/liintern.gif) no-repeat right;  }
a.litwitter { padding-right: 12px; background: url(images/litwitter.gif) no-repeat right;  }
a.lifacebook { padding-right: 12px; background: url(images/lifacebook.gif) no-repeat right;  }

In den Einstellungen des plugins sieht der Bereich für die Link-Typen wie auf dem Screenshot aus. Selbstverständlich darf nicht vergessen werden die Grafiken für die einzelnen Klassen auf den Webspace in das Verzeichnis /wp-content/plugins/link-indication/images zu laden. Außerdem ist es wichtig die eigene url aus dem Feld Blog URLs (your internal URLs) zu löschen, damit die internen Links auch wirklich so angezeigt werden wie in der neuen CSS-Klasse definiert.

Ist das nun einfach nur eine nette Spielerei um den Blog Design technisch ein wenig auf zu werten oder birgt dieses plugin wohl möglich einen Mehrwert für den Leser, der nun leichter zwischen den einzelnen Linkarten unterscheiden kann? Wie seht ihr das?

Benötigt wird das plugin “Twitter for WordPress” und ein extra template für die statische Seite, wenigstens bei meinem Lösungsweg. Das plugin wird in den plugin-Ordner auf dem Webspace geladen und aktiviert. Einstellungen müssen an dem plugin nicht vorgenommen werden wenn es nur zur Anzeige der letzten 20 Tweeds genutzt werden soll. Habe mir bis jetzt die Einstellungen noch nicht mal angesehen.

Danach habe ich meine page.php in notepad++ geöffnet und folgenden Code ganz oben eingefügt:

< ?php
/*
Template Name: twitter
*/
?>

Der ist wichtig damit das template später im backend als twitter angezeigt wird. Das plugin habe ich dann mit dem Code twitter_messages(‘hartgekocht’, 20, true, true, ‘#’, true, true, false) in das template integriert, guckst du!

< ?php
/*
Template Name: twitter
*/
?>


	< ?php if (have_posts()) { while (have_posts()) : the_post(); ?>

< ?php the_title(); ?>

< ?php the_content(); ?>

			< ?php twitter_messages('hartgekocht', 20, true, true, '#', true, true, false); ?>

< ?php wp_link_pages(); ?>

< ?php the_time(__('F j, Y')); ?>< ?php edit_post_link('Editieren',' | ', ''); ?> | < ?php wp_loginout(); ?>


< ?php comments_template(); ?>
	< ?php endwhile; } else { ?>

< ?php _e('Nichts gefunden, was den Suchkriterien entspricht.'); ?>

	< ?php } ?>

< ?php get_footer(); ?>

Natürlich im Code noch meinen Twitternamen mit dem eigenen ersetzen. Also die Zeichenfolge “hartgekocht” mit eurem Nick überschreiben. Eine genaue Beschreibung der einzelnen Parameter findet ihr auf der plugin Homepage. Nicht vergessen die so modifizierte page.php unter einem anderen Namen, z.B. twitter.php zu speichern und wieder in das theme-Verzeichnis hoch zu laden!

Dann muss nur noch eine neue Seite erstellt werden mit dem template “twitter” an Stelle des Standard-templates. Dies kann rechts in dem Kasten “Attribute” im Pulldown-Menü ausgewählt werden. Die Darstellung der Tweeds kann natürlich noch über CSS angepasst werden. Dazu stehen folgende Klassen zur Verfügung:

• ul.twitter: the main ul (if list is activated)
• li.twitter-item: the ul items (if list is activated)
• p.twitter-message: each one of the paragraphs (if msgs > 1)
• .twitter-timestamp: the timestamp span class
• a.twitter-link: the tweet link class
• a.twitter-user: the @username reply link class

In meiner style.css steht folgender Code:

li.twitter-item {
	font-size: 0.85em;
	border-top: 1px dotted #ccc;
	padding:10px !important;
}

ul.twitter {
	line-height: 1.4em !important;
}

Ich hoffe ich konnte wieder einmal zur allgemeinen Verwirrung beitragen :wink:

Wenn ich auf anderen Blogs kommentiere springe ich mit Hilfe der Tabulator-Taste von Eingabefeld zu Eingabefeld. Leider gibt es aber Blogs wo die Reihenfolge der Eingabefelder ziemlich durcheinander ist, so dass z.B. vom Eingabefeld “Name” nicht zu dem darunter liegenden Feld “E-Mail” gesprungen wird sondern meinetwegen ins Suchfeld. Das nervt mich total, da ich so ganz schnell die Orientierung verliere und meinen Cursor suchen muss.

Als ich Gestern das plugin “Twitterlink Comments” von Andy Baily installiert habe und danach manuell in meiner comments.php einbaute kam ich auf des Rätsels Lösung. Für die Reihenfolge der Eingabefelder ist nämlich der tag “tabindex” verantwortlich. Der Code für die vier Eingabefelder in meiner comments.php sieht z.B. wie folgt aus:

 />
< ?php _e('Name', 'kubrick'); ?> < ?php if ($req) _e("(required)", "kubrick"); ?>


 />
< ?php _e('Mail (wird nicht veröffentlicht)', 'kubrick'); ?> < ?php if ($req) _e("(required)", "kubrick"); ?>



< ?php _e('Website', 'kubrick'); ?>



< ?php _e('Twitter Benutzername', 'kubrick'); ?>

Mit der Angabe des tabindex stellt man also sicher, das nicht irgendwo hin gesprungen wird, wenn die Tabulator-Taste gedrückt wird, sondern schön brav zum nächsten Eingabefeld. Nur ein klein wenig Code aber ganz gewiss eine große Erleichterung für den Kommentierenden.

Ich hoffe, ich konnt wieder einmal zur allgemeinen Verwirrung beitragen!

Neben der Suche in Weblogs bietet Icerocket auch eine Websuche, eine Twittersuche, eine Newssuche, eine Bildersuche sowie die Möglichkeit bei mySpace zu suchen. Wird der Reite “Bigg Buzz” vor der Suche ausgewählt erhält der User eine Auflistung der aktuellsten Einträge aller Bereiche. Ein tolles Feature mit dem man sich prima einen Überblick verschaffen kann was gerade angesagt ist im Netz. Doch Icerocket bietet noch mehr als “nur” die Suche. Es gibt weitere Dienste um dem User das Leben zu erleichtern, z.B. RocketMail, RSS Builder, Blog Trends oder IceSpy.

Außerdem gibt es noch den Blog Tracker. Ein kostenloser Dienst der nach der Einbindung eines Codeschnippsels die Besucher des Blogs zählt und den Traffic grafisch darstellt. Der Code kann auf zwei Arten eingebunden werden, entweder sichtbar auf der Website oder halt unsichtbar. Ich habe mich für die sichtbare Variante entschieden, zu finden in meiner Sidebar bei den vielen Microbuttons. Unter anderem kann der Traffic nach Hits & Visits, last Visits, nach Refferer, Keywords und vielen weiteren Kriterien analysiert werden.

Zwei Beispiele der grafischen Darstellung der Seitenstatistik:

Ich werde Icerocket auf jeden Fall nutzen auf meiner Suche nach Erleuchtung im Netz denn es hat bei mir einen sehr guten ersten Eindruck hinterlassen.

Mittlerweile steht jedoch nicht mehr der technische Aspekt im Vordergrund sondern ich schreibe weil es mir einfach Spaß macht und es mir manchmal hilft mir über Dinge klar zu werden, meine Gedanken zu ordnen. Irgendwo hab ich mal geschrieben das das Grundrauschen in meinem Kopp abgenommen hat seitdem ich schreibe. Ich denke das trifft es am besten.

Nun habe ich allerdings zwei Artikel geschrieben die anscheinend großen Anklang bei meiner Leserschaft finden. Sie haben keinen privaten Charakter sondern sind eher technischer Natur. Es sind die Artikel “Artikel auf der Startseite” sowie “Wie geht das? Avatar bei Kommentaren“.

Kommen wir nun zu meinem Problem. Ich möchte nicht das mein Blog in die Kategorie “Technikblog” rutscht. Auf der anderen Seite sind die Besucherzahlen, die ich durch diese Artikel verbuchen darf sehr verlockend. Vor allem aber gehen mir die positiven Kommentare runter wie Öl, sie sind Balsam für meine Seele und mein Ego wird gestärkt.

Was soll ich denn nun machen? Mehr Artikel schreiben, in denen ich meine Lösungen WordPress betreffend erkläre oder auf die vielen positiven Erfahrungen die diese technisch angehauchten Artikel mit sich bringen einfach verzichten? Einen zweiten Blog parallel laufen lassen will ich nicht.

Ich bitte euch – meine Leser – um Stellungnahme zu den folgenden Fragen!

1. Soll ich weiterhin Artikel veröffentlichen, in denen ich beschreibe wie div. Dienste funktionieren oder wie ich technische Dinge in WordPress löse?
2. Wenn ja, soll ich für den “technischen Bereich” extra eine Struktur schaffen ähnlich der Aktionen Follow Friday und Kolumne?

Ich habe eine Kategorie geschaffen für den Hartmut, sie nennt sich Kolumne und der aktuellste Artikel wird immer rechts in der Sidebar angezeigt. Außerdem gibt es einen Link oben in dem horizontalen Menü zu dieser Kategorie. Darum sollen die Artikel nicht auf der Startseite erscheinen.

Nichts leichter als das. Einfach den folgenden Code in der index.php vor dem Loop einfügen und fertig – dachte ich.

< ?php
   if (is_home()) {
      query_posts("cat=-X");
   }
?>

Das X wird dann mit der ID der Kategorie ersetzt. Die findet ihr indem ihr im Backend die Kategorien auflistet und dann mit der Maus über die entsprechende Kategorie fahrt. In der Statusleiste seht ihr dann den Link zu der Kategorie und an deren Ende eine Zahl. Das ist die ID der Kategorie.

So, wenn der Code aber so eingefügt wird und später dann auf dem Blog der Link zur nächsten Seite angeklickt wird erscheinen keine älteren Artikel sondern es werden immer wieder die aktuellsten Artikel angezeigt. Nach einer Suche im Forum und der Lektüre der englischsprachigen Dokumentation habe ich den Code folgendermaßen bei mir eingebaut:

< ?php
if (is_home()) {
query_posts($query_string . "&cat=-480&showposts=4");
}
?>

Wenn ich das mit meinen stark eingeschränkten Englischkenntnissen richtig deute bewirkt der Code $query_string . das alle anderen Parameter außer die aufgeführten von der Anweisung unberührt bleiben und so ausgeführt werden wie es Standard ist. Also tauchen nun auf der zweiten Seite des Blogs tatsächlich ältere Artikel auf. Genau so wie es sein soll.

Mit cat=-XXX wird halt eine Kategorie ausgeblendet und showposts=X gibt an wie viel Artikel auf einer Seite angezeigt werden sollen. Das ist ganz praktisch wenn z.B. in den Suchergebnissen oder den Archiven 15 Artikel angezeigt werden sollen aber auf der Startseite halt weniger. Wie viel Artikel generell angezeigt werden wird im Backend unter >>Einstellungen >>lesen eingestellt.

Es gibt noch wesentlich mehr Variablen die so definiert werden können, die findet ihr alle in den Dokus auf Deutsch oder Englisch. Eine weitere große Hilfe beim Blog zerschießen ist das Forum.

Martin von downunderzone hatte mich drauf hingewiesen das bei meinem Blog die Anzeige älterer Artikel nicht funktionierte. Danke an dieser Stelle.