Zwei Loops

Es gab zwar einen älteren Codeschnipsel, aber der war inzwischen stark veraltet und – was viel schlimmer war – damit funktionierte die Paginierung “Ältere Artikel” am Ende der Seite nicht mehr. Es musste also etwas Neues her. Einige Recherchen später bin ich dann bei den “Multiple Loops” im WordPress-Codex fündig geworden. Damit geht es:

1
2
3
4
5
6
7
8
9
10
11

<?php $my_query = new WP_Query('posts_per_page=1');
	while ($my_query->have_posts()) : $my_query->the_post();
		$do_not_duplicate = $post->ID;?>
		<!-- Hier der Startbeitrag... -->
	<?php endwhile; ?>
 
<!-- alle anderen Artikel... -->
<?php while (have_posts()) : the_post(); 
	if( $post->ID == $do_not_duplicate ) continue; ?>
		<!-- hier die gekürzten Artikel... -->
<?php endwhile; ?>

Das ist schon mal ok so. Die Seitennummerierung funktioniert damit.
Wichtig hier: $do_not_duplicate verhindert, dass der bereits im ersten Loop aufgerufene neueste Artikel im zweiten Loop nochmal angezeigt wird.

Problem

Allerdings steht dann der aktuellste Beitrag auf jeder der nummerierten Seiten an oberster Stelle. Der soll aber ab “Seite 2″ nicht mehr auftauchen. Es muss also abgefragt werden, ob die Startansicht ohne Seitennummer (http://www.expertinnen-web.de) aufgerufen wurde oder die Seite eine Paginierung hat (http://www.expertinnen-web.de/page/2/), also $paged ist.

Lösung

Dieser Schnipsel hat es dann dann gebracht:

   $paged = $wp_query->get( 'paged' );
   if ( ! $paged || $paged < 2 ) :

Es wird abfragt, ob die Seite nicht paginiert ! $paged oder "Seite 1" $paged < 2  ist. Nur dann wird der zusätzliche Loop für den Startartikel aufgerufen. Wichtig: Hier am Ende das endif; nicht vergessen!

Und so sieht dann alles zusammen aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
$paged = $wp_query->get( 'paged' );
if ( ! $paged || $paged < 2 ) :
 
$my_query = new WP_Query('posts_per_page=1');
	while ($my_query->have_posts()) : $my_query->the_post();
		$do_not_duplicate = $post->ID;?>
		<!-- Hier der Startbeitrag... -->
	<?php endwhile; endif; ?>
 
<!-- alle anderen Artikel... -->
<?php while (have_posts()) : the_post(); 
	if( $post->ID == $do_not_duplicate ) continue; ?>
		<!-- hier die gekürzten Artikel... -->
<?php endwhile; ?>

Und jetzt klappt es mit der wesentlich kürzeren Startseite, die damit nicht nur mobil schneller lädt  *freu*.

So sieht’s aus

Und so geht’s

Artikel erstellen und dort, wo die Galerie sein soll auf  “Bild einfügen” klicken. Dann mehrere Bilder hochladen. WordPress erstellt daraus automatisch eine Galerie, die unter “Mediathek” bearbeitet werden kann. Man kann einen Bildtitel vergeben, eine Bildbeschriftung, noch eine Beschreibung und – nicht vergessen – den alt-Text für das Bild. Die Bildbeschriftung steht übrigens in der Übersicht, die Beschreibung nur in der Einzelansicht. So kann man die Textanzeige fürs Layout steuern, z.B. kurzer Text in die Beschriftung, längerer Text in die Beschreibung.

Ein Blick in den Quellcode zeigt, dass hier ein Short-Tag eingebaut wurde. Für diese Galerie sieht das so aus:

[ gallery columns="4" ]*.

*(Leerzeichen direkt hinter und vor [ ] weglassen!)

Und damit die Einzelansichten im Seitenlayout bleiben, ist in den Galerie-Optionen “Anhang-Seite” ausgewählt. Mit “Bilddatei” wird nämlich nur das nackte Bild in Einzelansicht angezeigt. Je nach ausgewähltem Theme ist die Einzelansicht in der Datei image.php auch schon angelegt. Ein Beispiel findet man im Standard-Theme “Twenty-Eleven”. Sonst muss man selbst Hand anlegen.

Dabei kann man dann auch das Manko bei dieser Art der Galerieanzeige ausgleichen: Die “Anhang-Seiten” sind nämlich völlig eigenständig, d.h. es gibt keinen Backlink zum Artikel. Wer dem Nutzer den Weg zurück erleichtern will, kann folgenden PHP-Snippet in die image.php einfügen:

<?php // if there is a parent, display the link (back to article)
$parent_title = get_the_title($post->post_parent);
if ( $parent_title != the_title(' ', ' ', false) ) {
   echo '← zurück zu <a href="' . get_permalink( $post->post_parent ) . '" title="' . $parent_title . '">"' . $parent_title . '"</a>';
} ?>

Es gibt übrigens noch eine Reihe weiterer Optionen, die im Galerie-Tag stehen können. Ein ausführliches Tutorial dazu gibt es bei www.elmastudio.de. Hier steht auch, wie man das Lightbox-Plugin für die WP-Galerie nutzen kann.

Nachtrag

Da ich Twentyeleven nicht nutze, war mir bisher nicht aufgefallen, dass hier die image.php den o.g. Link zum Artikel bereits hat. Der funktioniert allerdings nicht, denn die Meta-Zeile ist per position: absolute an den Kopf von article gerückt. Die CSS-Klasse dazu lautet .entry-meta und steht in Zeile 1088.
Die Lösung: einfach einen hohen z-index z.B. 9999 hinzufügen. Dann klappt’s auch mit dem Link.

Da stellen wir eine PHP-Datei auf den Server, die diese Zeile enthält:

echo $_SERVER["PATH_TRANSLATED"];

Aufrufen und Pfad in die .htaccess kopieren. Fertig. Fast fertig – die PHP-Datei bitte löschen, braucht ja keiner zu wissen, wie der Pfad heißt.

POSH ist eine Aktion mit einer Wiki-Plattform, die uns Plain Old Semantic HTML ans Herz legt. Das Wiki ist eine wahre Fundgrube: Wer sich hier durcharbeitet und die (garnicht so neuen) Erkenntnisse bei seinen Websites umsetzt, ist auf dem besten Weg ins Web 3.0. Wenn das nicht POSH ist?

(Gefunden bei R. Johansson, 456 Berea Street)

Anders als beim Original wird das exanto-Skript in einen eigenen Ordner gepackt. Finde ich ja nicht schlecht, bei mir war dann nur leider im Backend die Seite mit den Optionen nicht mehr da.
Abhilfe brachte eine kleine Änderung in intouch.php:

• Im Abschnitt // display options tab in wp-admin steht an 4. Stelle nur intouch-options.php.
• Mit intouch/intouch-options.php war dann auch das Admin-Panel für die Formular-Konfiguration wieder da.

• Einen eigenen (kostenlosen) Account z.B. bei YouTube kreieren
• Einloggen und ein selbstgedrehtes Video hochladen
• Den unter Embed gelisteten Code kopieren und im eigenen Blog in einen Artikel einfügen

Veröffentlichen und fertig? Noch nicht, denn so ist der hereinkopierte Code leider nicht XHTML-valide:

<object width=”xxx” height=”xxx”><param name=”movie” value=”http://…”></param><embed src=”http://…” type=”application/x-shockwave-flash” width=”xxx” height=”xxx”></embed></object>
muss geändert werden.

• Das schliessende Tag </param> muss gelöscht und stattdessen das Tag direkt geschlossen werden: <param … />
• Das Tag <embed> gibt es laut W3C nicht mehr, die Daten gehören stattdessen ins Tag
  <object …>, die Source-Angabe als data=”…”, type=”…” kann komplett kopiert werden, width und height dagegen können wegfallen, weil sie bereits im Tag <object …> definiert sind

Der Code sieht also am Ende so aus:
<object width=”xxx” height=”xxx” data=”http://…” type=”application/x-shockwave-flash”><param name=”movie” value=”http://…” /></object>

Jetzt ist fertig.

Beispiel:
Die Typoscript-Anweisung ACT.wrap = <strong>|</strong> erzeugt für den aktiven Link in einem TMENU diesen Link: <strong><a xxx>Link</a></strong>. Normalerweise müsste die Verschachtelung aber so aussehen: <a xxx><strong>Link</strong></a>.

Obwohl <strong> den eingeschlossenen Text auch ohne spezielle CSS-Formatierung von selbst fettet, bleibt hier die Wirkung aus. Sie wird von der vorhandenen Formatierung für den normalen Link überschrieben.
Effekt: Der Link ist nicht fett und die Kennzeichnung des Aktivstatus bleibt aus. Das gleiche gilt auch für ein umschließendes <span> dem z.B. eine Klasse .bold zugeordnet wird.

Was hilft dagegen?
Da die o.g. Links in Typo3 dynamisch von System generiert werden, lässt sich die Formatierung nicht an die richtige Stelle schreiben. Also kann man das nur mit CSS ausbügeln. Für das Strong-Beispiel ginge das beispielsweise so:

CSS-Code:
strong a {
font-weight: bold;
}

Der Fettdruck von “strong” wird durch das nachfolgende “a” mit dem Normalformat überschrieben. Um das aufzuheben, benötigt der Link “a” innerhalb von “strong” eine neue, eigene Formatierung. Gleiches gilt für andere Element-Verschachtelungen wie “span” oder “p”.

Fazit:
Auch ohne eine explizite Klassenzuweisung, lassen sich verschachtelte Elemente allein per CSS stylen. Das ist insbesondere bei mehrfach verschachtelten Linklisten innerhalb von Textmenüs interessant und verschlankt den Quellcode enorm. Das Stichwort hier heisst “Kontext sensitiv”.

Funktioniert eigentlich ganz gut, bis auf die 5er Internet Explorer. Hier bleibt das Hover-Bild leider stehen, wenn es einmal mit der Maus berührt wurde. Stuart Robertson zeigt dazu einen Workaround (:hover bekommt ein border:none). Bei mir hat es allerdings nicht geholfen.

Was mir auffiel: Die meisten meiner Buttons funktionieren auch im IE5 problemlos. Sie sind aber im Gegensatz zum Tutorial von Robertson nicht im Basisbild integriert. Ich habe wie bei einem Mouseover jeweils eine On- und Off-Ansicht, also auch im “a:link” ein Hintergrundbild definiert. Nur ein Button tanzt aus der Reihe, er hat nur den On-Status, also genauso wie in o.g. Vorbild. Das brachte mich auf eine alternative Lösung: Ich habe jenem Button ebenfalls ein Off-Bild spendiert – allerdings nur ein 1-Pixel-Transparent-Gif. Dieser eine Pixel genügt, um den Effekt im IE5 auszuschalten.

Heureka.