In dem zweiten Teil des Artikel der Serie “WordPress Tweaks” möchte ich auf folgende Themen eingehen:

• Das More-Tag bändigen
• Codehighlighting mit dem WP-Syntax Plugin
• Next- und Previouslinks über den Artikeln anpassen

Das More-Tag bändigen

WordPress bietet die Möglichkeit, dass man einen Artikel durch ein spezielles Tag, das More-Tag (<!–more–>) in zwei Teile unterteilt: Eine Einleitung und den restlichen Artikel. Ich finde dieses Vorgehen sehr angenehm und habe mir angewöhnt, eine kurze Einleitung mit einem Umfang von etwa 50-70 Wörtern zu schreiben, auf die dann der eigentliche Artikel aufbaut. In der Übersicht erhält der Benutzer nun nach der Einleitung einen Link, über den er zum vollständigen Artikel gelangt. Den Text für diesen Link (”Lies den Rest des Artikels”) fand ich nicht sehr gelungen, weshalb ich ihn kurzer Hand auf ein schlichtes “Mehr…” geändert habe.

Dazu habe ich im Hauptindex-Template (index.php) und Archiv (archives.php) die Ausgabe des Artikels ein wenig angepaßt, die Zeile:

<?php the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>

habe ich in:

<?php the_content(__('<span class="moretag">Mehr…</span>')); ?>

geändert. Alternativ könnte man natürlich auch die Sprachdatei anpassen, was ich vielleicht in einem folgenden Artikel beschreiben werde.

Wenn der Benutzer nun auf den link “Mehr” klickt, gelangt er wie bereits geschrieben zum vollständigen Artikel. WordPress übergibt dabei aber leider einen HTML-Anker, über den der Browser in dem Artikel zum Ende des More-Tags springt. Dies ist bei Einleitungen in dem oben beschriebenen Umfang nicht wirklich hübsch, weshalb ich nach einem Weg gesucht habe, dieses Verhalten zu unterbinden. Eine Option dafür gibt es leider nicht, aber auf dem Blog “My Digital Life” ist beschrieben, wie man das Verhalten anpassen kann:

http://www.mydigitallife.info/2005/11/16/disable-auto-go-to-jump-to-read-more-tag/

In der Datei “wp-includes/post-template.php” wird in der Funktion “get_the_content” das More-Tag generiert (im MyDigitalLive-Blog steht noch die alte Datei wp-includes/template-functions-post.php). Hier löschen wir einfach den Teil, der dem Link den Anker zufügt, d.h. die Zeile:

$output .= ' <a href="'. get_permalink() . "#more-$id\" class=\"more-link\">$more_link_text</a>";

wird zu:

$output .= ' <a href="'. get_permalink() . "\" class=\"more-link\">$more_link_text</a>";

Dabei ist zu beachten, dass Änderungen im WordPress-Source-Code bei einem Update verloren gehen. Es empfiehlt sich daher, sich Notizen über alle Änderungen zu machen, oder - so wie ich es hiermit tue - die Änderungen in den Blog zu schreiben .

Codehighlighting mit WP-Syntax Plugin

WordPress ermöglicht einem zwar sehr komfortabel Text zu bearbeiten und zu formatieren, wenn man jedoch Quelltext einfügen und erleutern möchte, gelingt einem das mit dem WordPress-Editor nur bedingt gut. Der Code wird an den unmöglichsten Stellen umgebrochen und an farbige Hervorhebungen wie man es von seiner Enwticklungsumgebung (z.B. Vsual Studio) gewohnt ist, ist gar nicht erst zu denken.

Abhilfe schafft hier das Plugin WP-Syntax von Ryan McGeary, dass hier herunter geladen werden kann:

http://wordpress.org/extend/plugins/wp-syntax/

Die Zip-Datei enthält den Ordner “wp-syntax”, der in das Verzeichnis “wp-content/plugins” kopiert werden muss. Anschließend kann das Plugin in WordPress aktiviert werden.  Um das Modul zu benutzen, muss man den Quellcode in ein spezielles HTML-Tag einschließen:

<pre lang="csharp">
 
// Some C# Code …
 
< /pre>

Achtung: Das Plugin verträgt sich nicht mit dem visuellen WordPress-Html Editor, weshalb ich stets zu erste den Artikel schreibe und anschließend den Quellcode in der HTML-Ansicht einfüge.

Die Farben für das Code-Highlighting sind dabei jedoch geschmackssache. Da wir Hauptsächlich in Micosoft .Net entwickeln ist für uns dass Visual Studio das Maß aller Dinge, und ich habe die Faben für das WP-Syntax Plugin entsprechend angepaßt. Die Anpassung erfolgt durch folgenden PHP-Code, den ich einfach im WordPress Template-Editor in die Vorlage “Einzelner Artikel” (single.php) über dem Bestehenden eingefügt habe:

<?php
add_action('wp_syntax_init_geshi', 'my_custom_geshi_styles');
 
function my_custom_geshi_styles(&amp;$geshi)
{
    $geshi-&gt;set_comments_style(1,'color: #008000;');
    $geshi-&gt;set_strings_style('color: #A31515;', false);
    $geshi-&gt;set_symbols_style('color: #000000;', false);
}
?>

Die zur Verfügung stehenden Set-Methoden sind hier beschrieben:

http://qbnz.com/highlighter/

Damit sind zumindest die wichtigsten Elemente angepasst, weitere Optimierungen sind aber sicher möglich (Komentare werden gerne angenommen ).

Next- und Previouslinks über den Artikeln anpassen

In dem WordPress standard-Template “Kubick” befinden sich über dem Artikel zwei Links, die einmal auf den vorherigen und einmal auf den nachfolgenden Artikel verweisen. Dabei wird der komplette Titel des Artikels ausgegeben, was insbesondere bei längeren Titeln sehr merkwürdig aussieht:

Da ich gerne längere Titel schreibe, habe ich beschlossen, statt dessen einfach die Texte “vorheriger Artikel” und “nächster Artikel” in kleiner Schrift auszugeben. Den Titel des Artikels habe ich als ToolTip mit in den Link genommen, so dass der Leser trotzdem die Möglichkeit hat, zu erfahren was ihn erwartet, wenn er auf “vorheriger Artikel” klickt (das Ergebnis kann man z.B. über diesem Artikel sehen).

Um den Text über den Artikeln zu ändern habe ich zunächst die Datei “single.php” im WordPress Template-Editor angepaßt:

 
<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>

wird zu:

<small>
	<div class="alignleft"><?php previous_post_link('&laquo; %link','vorheriger Artikel') ?></div>
	<div class="alignright"><?php next_post_link('%link &raquo;','nächster Artikel') ?></div>
</small>

Um den Tooltip mit dem Artikel-Titel zu erhalten mußte ich die Datei “wp-includes/link-template.php” anpassen. Hier habe ich folgende Anpassung in der Funktion “adjacent_post_link” vorgenommen und die Zeile:

$string = '<a href="'.get_permalink($post).'">';

in

$string = '<a href="'.get_permalink($post).'" title="'.$title.'">';

geändert.

Auch dies ist eine Änderung im WordPress-Source-Code, die bei einem Update wieder nachgezogen werden muß.  Aber vielleicht fließt diese meiner Meinung nach sehr sinnvolle Anpassung ja irgendwann in WordPress mit ein .

Dieser Artikel wurde am Sonntag, 29. Juni 2008 um 20:40 veröffentlicht und ist abgelegt unter PHP, WordPress. Du kannst die Antworten zu diesem Artikel mit Hilfe des RSS 2.0 Feeds verfolgen. Du kannst eine Antwort hinterlassen oder einen Trackback von deiner Seite aus senden.