Exakt ein Jahr nach dem letzten derartigen Beitrag dachte ich mir, dass es doch eine gute Idee wäre, wieder die monatlichen Statistiken von neontrauma.de festzuhalten. :)

• Artikel: 321
• Kommentare: 1.335
• Besucher: 124.221

Zahlen von seitwert.de:

• Seitwert: 37,16
• Gewichtung bei Google: 12,38 / 29
  65 Backlinks, PageRank 5
• Gewichtung bei Yahoo: 7,32 / 17
  7.284 Backlinks
• Externe Wertungen: 0,92 / 10
  Rang weltweit: 306.973, Rang Deutschland: 29.094
  SVR: 0.0119
• Technische Details: 13 / 13
• Social Bookmarks: 1,05 / 22
  del.icio.us: 16, Mister Wong: 91, Linkarena: 41, Kledy: 1, Twitter: 6
• Sonstiges: 2,49 / 9

Nach rund vier Monaten hat neontrauma.de heute Nacht endlich ein neues Layout bekommen – das vorherige wollte mir so gar nicht mehr gefallen, und das hat auch meine Motivation zum Artikelschreiben beeinträchtigt. ;-)

Das Dropdown-Menü tut’s im Internet Explorer 6 trotz Suckerfishs Sohn nicht, und ich muss morgen noch etwas an der Performance arbeiten. Ansonsten sollte soweit aber erstmal alles laufen… uff.

Das Lexikon habe ich rausgenommen; das lohnte die Arbeit nicht wirklich. Auch das Ask me habe ich – allerdings schon vor einiger Zeit – wieder entfernt. Wirklich rentiert hat es sich nicht, und mit der Kommentarfunktion, dem Wunschbuch und der Shoutbox gibt es schließlich genug andere Möglichkeiten, wie ihr Fragen stellen könnt.

Die Seite Neontrauma ist ein Projekt, das im Sommer 2007 entstand. Gründerin der Seite ist die Anne und führt nach wie vor die große Seite alleine.

Auf Neontrauma finden sich viele Inhalte über Tutorials und Webdesign. Ein Servicebereich und Resourcenbereich ist ebenfalls vorhanden.

Erstmal zum Gesamtbild der Seite. Das Design ist zwarschlicht gehalten, aber hier ist der Inhalt wichtiger und die Übersichtlichkeit. Das passt hier sehr gut zusammen! Farben und Schriften sind sehr gut gewählt.

Die Inhalte sind sauber in einzelne Kategorien eingegliedert und es wird ebenfalls die Anzahl angezeigt. Die Artikel oder auch Tutorials selbst sind sehr gut und auch ausführlich gestaltet.

Der Resourcenbereich ist eher kleiner, wobei ich denke, dass das nur ein Zusatzservice ist und nicht unbedingt Hauptbestandteil der Seite.
Mein Vorschlag hierzu wäre jedoch, die Vorschaubildchen ein bisschen kleiner zu machen, sodass in einer Reihe mehr Platz hat und nicht alles untereinander steht. Trotzdem gute und auch brauchbare Resourcen!

Als weiteres wird angeboten, Webseiten für andere zu erstellen oder bei Fragen weiterzuhelfen. Da es teilweise schon recht aufwändig ist, einen solchen Service zu betreiben, finde ich es toll, wenn es so etwas noch gibt.

Die Updates werden immer regelmäßig gemacht, teilweise sogar täglich. Somit ist man als Besucher immer auf dem neuesten Stand und kann gleich alles ausprobieren ;-)

Fazit: Eine große und wunderbare Seite, die sehr informativ und aktuell ist. Darf nicht verpasst werden!! Liebe Anne, mach weiter so ^_^

Link zum Review: http://rootworx.de/view_reviews.php?id=6

Danke für das Review! :-)

Da diese Erklärung den Umfang der Shoutbox ein wenig sprengen würde, hier ein Tutorial dazu: Ziel ist es, die letzten beiden Artikel eines WordPress-Blogs so nebeneinander anzeigen zu lassen, dass in der linken Box der zweitneueste Artikel steht und rechts der aktuellste.

Für dieses Beispiel habe ich mir die home.php geschnappt – das ist das Template, das für die Startseite des Blogs zuständig ist (natürlich könnt ihr auch die index.php, category.php etc. nehmen – je nachdem, wo ihr diese zweispaltige Anzeige realisieren wollt).

Wir legen ein Div der Klasse artikelbox an, das wiederum zwei weitere, nebeneinander stehende Divs mit den beiden Artikel enthalten soll. Das linke Div zeigt hierbei den vorletzten Artikel an und gehört der Klasse boxlinks an; das rechte Div mit dem neusten Artikel hat dementsprechend die Klasse boxrechts.

Zunächst legen wir das umfassende Div artikelbox an und weisen der Variable $box den Wert rechts zu.
Die dritte Zeile – <?php query_posts(‘showposts=2′); ?> – ist dafür zuständig, dass auf dieser Seite nur zwei Artikel ausgegeben werden sollen (diesen Wert könnt ihr natürlich variieren, und wenn auf dieser Seite ebenso viele Artikel angezeigt werden sollen wie auf allen anderen Seiten, dann könnt ihr die Zeile auch ganz weglassen, weil dann der im Dashboard eingestellte Wert greift).
Nun beginnt der Loop: wenn unsere Variable den Wert rechts hat, dann bekommt das Div die Klasse boxrechts zugewiesen. Im Div enthalten sind die Artikelüberschrift sowie der Auszug des Beitrags.
Anschließend endet der Ausgabeteil des ersten Beitrags, und mt Hilfe von PHP wird dem nächsten Div die Klasse boxlinks zugewiesen.
Der Fall, dass der Besucher eine nichtexistente Adresse angibt, wird am Ende mit einer entsprechenden Fehlermeldung abgefangen.

<div class="artikelbox">
<?php $box = rechts; ?>
<?php query_posts('showposts=2'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post();  ?>
<?php if ($box == rechts) ?>
<div class="post box<?php echo $box;?>" id="post-<?php the_ID(); ?>">
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
</div>
<?php if (($box==rechts) ? $box=links : $box=rechts); endwhile; ?>
<?php else: ?>
Sorry, diese Seite existiert nicht.
<?php endif; ?>
</div>

Nun zum Stylesheet – hier haben die beiden Klassen boxlinks und boxrechts die gleiche Formatierung, aber der neuere Artikel könnte zum Beispiel durch eine kräftigere Farbgebung hervorgehoben werden. Das float: right; lässt den neueren Artikel rechts statt links stehen; ein float: left; kehrt diese Anzeige um.

.artikelbox { clear: both; }
.boxlinks, .boxrechts { width: 39%; float: right; padding: 0 10px; }

Ein Danke geht an das Tutorial “Artikel in Spalten aufteilen” von Monika auf texto.de, deren Vorgehensweise ich hier als Grundlage verwendet und etwas umgebaut habe.

Nachdem das Ergebnis der Umfrage klar gezeigt hat, dass bei euch Interesse an einem Ask me besteht, habe ich einen Account auf formspringme eingerichtet. :)
Ihr findet ihn ab sofort unter formspring.me/neontrauma.

Dort könnt ihr eure Fragen rund um neontrauma.de & das Webdesignen loswerden.

Für Tutorialwünsche nutzt aber bitte weiterhin das Wunschbuch und postet Fragen zu bestimmten Tutorials direkt als Kommentar.

Im heutigen Tutorial geht es darum, wie man so eine zwei- oder auch mehrspaltige Navigation codet, wie ihr sie hier auf dem Bild (übrigens ein Screenshot meiner PersonalSite eden-existiert.de) seht. Live und in Farbe gibt’s auch eine Demo des hier verwendeten Beispielcodes.

Entgegen einer weitverbreiteten Technik sollte man für zweispaltige Menüs oder Layouts jedoch keine Tabelle einsetzen, sondern kann das auch ganz locker mit Divs und Listen realisieren. Warum Tabellen für Layoutangelegenheiten doof und böse sind, erspare ich mir an dieser Stelle mal zu erklären. ;)

Was wir brauchen, ist ein Div-Container mit zwei unsortierten Listen (ul) darin, wobei jeder Menüpunkt als ein Listenpunkt (li) angelegt wird.
Dadurch, dass wir den beiden Listen eine feste Breite sowie der linken ein float: left zuweisen, entsteht ein zweispaltiges Menü.

im HTML

Unser HTML-Code:
<div class="menu">
<ul>
<li><a href="#" title="eins">eins</a></li>
<li><a href="#" title="zwei">zwei</a></li>
</ul>
<ul>
<li><a href="#" title="drei">drei</a></li>
<li><a href="#" title="vier">vier</a></li>
</ul>
</div>

im CSS

… und im Stylesheet:
.menu {
width: 400px;
}

.linke-spalte {
width: 200px;
float: left;
}

.rechte-spalte {
width: 200px;
margin-left: 200px;
}

.menu li a {
display: block;
}

eine Extrawurst für den Internet Explorer

Damit das Ganze auch im lieben Internet Explorer vor der Version 8 funktioniert, müssen im Head-Bereich der Seite noch Conditional Comments eingefügt werden, deren Anweisungen nur von den jeweligen IE-Versionen umgesetzt werden. Eine genauere Erläuterung, was Conditional Comments sind und weshalb wir sie hier benötigen, habe ich im Artikel “der Box-Modell-Fehler” beschrieben.
<!--[if lte IE 8]>
<style type="text/css">
.menu { width: 405px; }
</style>
<![endif]-->

Styling

Nun noch etwas Kosmetik:
Einen Rahmen oder sonstiges Styling könnt ihr der Menubox verpassen, indem ihr das Div ansprecht, beispielsweise so:
.menu { width: 400px; border: 2px solid #ccc; margin: 50px; }

Um den Leser darüber zu informieren, ob er mit dem nächsten Klick die aktuelle Webseite verlassen wird oder nicht, kann man externe Links gesondert kennzeichnen. Eingebürgert hat sich eine kleine Grafik hinter dem Link, was dann beispielsweise so aussehen kann:

allwissende.muellhal.de

Der “Trick” dahinter ist, dass dem Link eine rechts platzierte Hintergrundgrafik zugewiesen wird. Damit der Linktext aber neben und nicht auf dem Bild steht, wird dieser mit padding-right eingerückt.

den Link ansprechen

Da natürlich nicht sämtliche Links einer Webseite als extern gekennzeichnet werden sollen, reicht es nicht, die obige Formatierung im Stylesheet einfach dem a-Element zuzuweisen. Sonst würden ja alle, also auch die seiteninternen Links, gekennzeichnet werden.
Es gibt zwei verschiedene Möglichkeiten, lediglich externe Links anzusprechen:

1. über eine Klasse

Man weist allen externen Links die Klasse “extern” zu:
<a title="die allwissende Müllhalde" href="http://allwissende.muellhal.de" class="extern" >allwissende.muellhal.de</a>
Im CSS wird .extern dann formatiert:
a.extern { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px; padding-right: 13px; }
Der Nachteil dieser Methode ist natürlich, dass man jeden zu kennzeichnenden Link um diese Klasse erweitern muss, was bei umfangreicheren Projekten mit viel Arbeit verbunden ist.

2. über den absoluten Pfad

Die zweite Technik erfordert keinerlei Änderungen im HTML. Sie besteht darin, im Stylesheet sämtliche Links anzusprechen, deren href-Attribut mit “http:” beginnt:

a[href^="http:"] { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px;padding-right: 13px;}

Hier kommt es allerdings zu Problemen, wenn man auch interne Verlinkungen absolut statt relativ angegeben hat – diese werden dann ebenfalls als extern gekennzeichnet. Danke an Fabian für den Hinweis, dass man dieses Problem umgeht, indem man die eigene Domain für eine gesonderte Formatierung angibt:

a[href^="http://domain.de"] { background: none; margin: 0; padding: 0;}

Hier auf neontrauma.de wird euch an mehreren Stellen angezeigt, wie viele Beiträge es beispielsweise in einer Kategorie gibt oder wie viele Treffer eine Suchabfrage lieferte.
In diesem Tutorial erkläre ich euch, wie man diese verschiedenen Informationen über die Artikelanzahl ausgeben lässt.

Sidebar: Anzahl der Artikel in einer Kategorie

Wenn ihr eure Kategorien in der Sidebar über das entsprechende Widget auflisten lasst, das bei WordPress standardmäßig mitgeliefert wird, dann müsst ihr dort einfach das Häkchen bei “Zeige Artikel-Zähler” setzen. Das Gleiche gilt für das von dem Plugin My Category Order (das euch eine beliebige Anzeigereihenfolge der Kategorien ermöglicht) stammende Widget.

Sofern ihr auf Widgets verzichtet und die Kategorie-Anzeige via Code in einem eurer Templates steuert, also so:
<?php wp_list_categories(); ?>
… verwendet den entsprechenden Parameter show_count:
<?php wp_list_categories('show_count=1'); ?>
1 bedeutet, dass die Anzahl der Artikel angezeigt wird; 0 (der Standardwert) unterdrückt dies.

Kategorieseite: Anzahl der enthaltenen Artikel

Um auch auf der Übersichtsseite der jeweiligen Kategorie anzuzeigen, wie viele Artikel in ihr enthalten sind, schnappt euch eure category.php. Sofern ihr diese Seite noch nicht haben solltet, kopiert einfach die index.php und benennt sie um in category.php. Ab sofort ist für die Anzeige der Kategorien dieses Template zuständig.
Fügt zwischen der Seitenüberschrift und dem Loop Folgendes ein:
Die Kategorie <?php echo single_cat_title(); ?> enthält <?php $this_category = get_category($cat); echo $this_category->category_count." Artikel"; ?>
Hier wird auch gleich noch einmal der Name der betreffenden Kategorie mit ausgegeben.

Anzahl der Suchergebnisse

Auch hierfür verwenden wir wieder eine spezifische Templatedatei, die search.php. Solltet ihr in eurem Theme über diese noch nicht verfügen, legt sie analog zur oben beschriebenen Vorgehensweise an.
Zwischen Seitenüberschrift und Loop fügt ihr nun ein:
<?php $NumResults = $wp_query->found_posts; echo $NumResults; ?> Treffer für die Suche nach <?php the_search_query(); ?>.

Zusätzlich zu der Zahl der Suchergebnisse wird auch der Suchterm angezeigt.

Anzahl der Artikel eines Autors

Um auszugeben, wie viele Artikel ein Autor bereits verfasst hat, nehmen wir passenderweise die Datei author.php (sofern nicht vorhanden, siehe oben ;) ). Aufrufen könnt ihr diese Autorenseite übrigens über http://domain.de/author/autorenname (domain und autorenname müsst ihr natürlich an eure Seite anpassen :) ).

Zunächst müssen wir bestimmen, von welchem Autoren die Artikel gezählt werden sollen.
<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>
Jetzt erfolgt die Ausgabe:
<?php echo $curauth->display_name; ?> hat <?php the_author_posts(); ?> Artikel verfasst.

Sofern ihr diese Informationen nicht auf einer alleinstehenden Seite ausgeben wollt, sondern innerhalb des Loops (also zum Beispiel bei den Beitragsinformationen unterhalb eines Artikels), braucht ihr $curauth nicht. Hier wird der betreffende Autor automatisch durch den Loop des jeweiligen Artikels ausgewählt. Es reicht also:
<?php the_author(); ?> hat <?php the_author_posts(); ?> Artikel verfasst

Anzahl sämtlicher Artikel

Mit einer weiteren Prise PHP könnt ihr auch ausgeben, wie viele Postings euer Blog insgesamt enthält. Für den Fall, dass ihr diese Information nicht via Template anzeigen lassen wollt, sondern in einer über das Dashboard verwalteten statischen Seite, in einem Artikel oder Textwidget, benötigt ihr ein Plugin wie Exex-PHP, was die Ausführung von PHP dort erlaubt.
<?php
$count_posts = wp_count_posts( 'post' );
echo 'Mein Blog enthält ' . $count_posts->publish . ' Postings.';
?>:

Viel Spaß damit!