Neulich stand ich vor einem spannenden Problem: Ein Freund wollte eine Zeile JavaScript und einen Link auf ein Stylesheet in den Header seines Themes bringen. Dieses Theme stammt aus dem Verzeichnis auf wordpress.org, und es sollte weiterhin automatisch aktualisiert werden. Ich konnte also nicht direkt hineinschreiben.
Nun hätte ich ein Child-Theme anlegen können, aber das fand ich dann etwas zu umständlich. Obendrein wäre das eine Speziallösung gewesen, und ich bin nun einmal Generalist.
Ich wollte eine Lösung, die ich wiederverwenden kann. Und ihr vielleicht auch.

Zeit für einen kleinen Zaubertrick.

Das Konzept

Im Kopfteil eines jeden Themes, das auf wordpress.org zugelassen wird, finden wir die Funktion wp_head. Diese löst eine gleichnamige Aktion aus. Wenn wir uns in diese Aktion einklinken, können wir tun, was immer uns beliebt. Zum Beispiel Text ausgeben.

Als Plugin wäre das ein Vierzeiler:

<?php
/* Plugin Name: Simple Head Insert */
add_action( 'wp_head', 'simple_head_insert' );
function simple_head_insert() { echo '<!-- Buh! -->'; }

Ganz nett, aber irgendwie … nicht gut genug. Es ist immer noch zu speziell, weil die Ausgabe fest im PHP-Code steht. Wenn die Ausgabe oder die Position geändert werden soll, muß das Plugin umgeschrieben werden. Das ist sehr fehleranfällig.

Jemand anderes möchte vielleicht Code im Backend einfügen. Der muß sich das Plugin im Grunde selbst neu schreiben.

Also habe ich mir gedacht: Dann hänge ich doch einfach an die Aktion widgets_init eine Funktion, die eine Instanz einer Klasse erzeugt, die für die Aktionen wp_head, wp_footer, admin_head und admin_footer eine weitere Funktion registriert, die wiederum den Inhalt einer ebenfalls registrierten Sidebar ausgibt, die man frei mit einem Widget befüllen kann, das ich in eine weiteren Klasse gepackt habe.

Klarsoweit?

Nicht? Dann kannst du dir den Code auf GitHub ansehen und herunterladen. Für die Eingabe des HTML-Codes habe ich eine einfachere Variante des nativen Text-Widgets geschrieben; sie heißt Unfiltered Text Widget.

150 Zeilen mehr als die erste Version, dafür um so mächtiger. Frank wird mich sicher noch ermahnen, daß ich doch eine Sprachdatei einarbeiten sollte. Keine Lust. Insgesamt finde ich den Code immer noch angenehm einfach und enorm flexibel zugleich. Ich bin ausnahmsweise und sicher nur für kurze Zeit mal zufrieden damit.

Einsatz

Jetzt wollen wir uns noch ansehen, wie man das verdammte Ding benutzt.

Zunächst laden wir es herunter, packen es ins Pluginverzeichnis und aktivieren es. Ja, sehr spannend.

Jetzt gehen wir auf »Design/Widgets«, und da haben wir vier neue Sidebars und ein neues Widget namens »Unfiltered Text«.

Wir klappen zur Probe mal die Box für den »Front End Header« auf und ziehen das neue Widget hinein. Das können wir übrigens überall benutzen, auch in anderen Sidebars.

In das Eingabefeld schreiben wir ein Script:

<script>alert('Buh!');</script>

Und dann rufen wir das Frontend unserer Website auf:

Faaaantastisch! Jetzt kann uns nichts mehr bremsen.

• In den Footer des Frontends können wir den Tracking-Code des Analyse-Tools unserer Wahl eingeben – und schon geht das Gezähle los.
• In den Header des Backends können wir schreiben:

  <style>#footer{display:none}</style>

  Und – zack! – ist der Footer weg.

• Wir können den JavaScript-Code des Plugins Icon to Link einbauen.
• Wer so richtig Spaß haben will, schreibt sich dies in beide Header:

  <style>body{display:none}</style>

Für weitere kreative Ideen und die obligatorischen … Verbesserungsvorschläge stehen euch die Kommentare offen.

Anpassen

Für Hacker habe ich zwei Filter eingebaut, die eine Kombination des Plugins mit dem eigenen Theme erlauben:

1. 'magic_widgets_actions' übergibt einen Array mit den Aktionen. Den können wir per Filter in der functions.php frei ändern:

   add_filter( 'magic_widgets_actions', 'change_magic_widget_actions', 10, 1 );
   function change_magic_widget_actions( $arr )
   {
       // Add
       $arr['loop_start'] = 'Post List Start';
       // Remove
       unset( $arr['admin_footer'] );
       // Rename
       $arr['admin_head'] = 'HTML-Kopf Administration';
       return $arr;
   }

   Mehr Aktionen findet ihr im Codex, bei Adam R Brown und auf der-design.com.

   Ich habe mich auf die vier oben genannten Aktionen beschränkt, um die Widgetliste im Backend übersichtlich zu halten. Im Prinzip können wir aber auch 40 oder 400 Aktionen ansprechen.

2. Den Namen Unfiltered Text können wir über den Filter 'magic_widgets_name' ändern (I18n für Arme!).

Fehlt was? Funktioniert alles?

Weitere Artikel dazu hier im Blog

• WordPress-Tutorial: Ein Framebreaker-Plugin schreiben
• WordPress-Tutorial: Eigenes Widget schreiben
• WordPress: Parallele Widgets
• WordPress-Plugin: Backend Style Enhancements

Um den IE im Stylesheet gesondert anzusprechen, brauchen wir weder Hacks im CSS noch eine zusätzliche Datei oder gar (pfui!) eine serverseitige Browserweiche. Wir müssen nur das Element <html> über Conditional Comments anpassen. Diese Idee hatte Paul Irish schon 2008.

Ich habe das neulich in einem WordPress-Theme eingesetzt und mag es so sehr, daß ich künftig all meine Themes damit ausrüsten werde.
Ein wenig umständlich: Die Sprachattribute werden in WordPress mit der Funktion language_attributes() erzeugt – und die hat ein fest eingebautes echo, das man nicht abschalten kann. Ich will nun nicht drei Meter Code in der header.php stehen haben, deshalb habe ich mir zwei kleine Funktionen gebaut. Die Funktion get_language_attributes() ist obendrein etwas schlanker als das Original, und sie gibt das Attribut dir nur aus, wenn der Text von rechts nach links läuft. Andernfalls ist es an dieser Stelle überflüssig.

Doch zum Code, er gehört in die functions.php:

<?php
/**
 * html5 start tag + language attribute + conditional tags for IE Win
 * @link   http://paulirish.com/?p=88
 * @param  bool $print
 * @return void|string
 */
function htmlstart($print = TRUE)
{
    $out  = '<!Doctype html>';
    $lang = get_language_attributes();
    $ies  = array (
        6 => 'lte6 lte7 lte8'
    ,   7 => 'lte7 lte8'
    ,   8 => 'lte8'
    ,   9 => ''
    );

    foreach ( $ies as $n => $class )
    {
        $out .= "<!--[if IE $n]><html $lang class='ie ie$n $class lte9'><![endif]-->";
    }

    $out .= "<!--[if !IE]><!--><html $lang><!--<![endif]-->";

    if ( ! $print )
    {
        return $out;
    }

    print $out;
}

if ( ! function_exists('get_language_attributes') )
{
    /**
     * Returns the language attributes.
     *
     * Unobstrusive copy from the core.
     * Requires WP 3.0+
     *
     * @param string $doctype The type of html document (xhtml|html).
     */
    function get_language_attributes($doctype = 'html') {
        $output = is_rtl() ? 'dir="rtl"' : '';

        if ( $lang = get_bloginfo('language') )
        {
            $output .= ( ( get_option('html_type') != 'text/html'
                || $doctype == 'xhtml' )
                ? ' xml:' : '') . 'lang="' . $lang . '"';
        }

        return apply_filters('language_attributes', $output);
    }
}

Im Theme rufen wir die Funktion dort auf, wo früher die Doctype-Deklaration und das Start-Tag standen.
Die Ausgabe sieht (hier aufgehübscht) etwa so aus:

<!Doctype html>
<!--[if IE 6]>
    <html lang="de-DE" class='ie ie6 lte6 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 7]>
    <html lang="de-DE" class='ie ie7 lte7 lte8 lte9'>
<![endif]-->
<!--[if IE 8]>
    <html lang="de-DE" class='ie ie8 lte8 lte9'>
<![endif]-->
<!--[if IE 9]>
    <html lang="de-DE" class='ie ie9 lte9'>
<![endif]-->
<!--[if !IE]><!-->
    <html lang="de-DE">
<!--<![endif]-->

Nein, das ist kein sehr schönes Markup mehr. Aber so richtig schlimmes auch nicht. Obendrein validiert es.

Im Stylesheet können wir den Internet Explorer jetzt ganz einfach mit der passenden Klasse ansprechen:

.ie8
{
    top:        10px;
}
.lte7
{
    top:        15px;
}

Das kann ich mir viel besser merken als Kommentarhacks oder Spielereien mit ungültigen Selektoren und Eigenschaften.

Mehrere Internet Explorer auf einem Windows kann man sich mit der Utilo IE Collection einrichten. Zum Testen der Conditional Comments habe ich im Labor eine kleine Seite eingerichtet: CC-Test.

Meine Sprache

Ich bin kein viel versprechendes Talent. Aber ein vielversprechendes … nun, lassen wir das. Will sagen: Mich hat die Reform der deutschen Rechtschreibung im Jahre 1996 nicht überzeugt. Die Reformen der Reform ebensowenig. Deshalb halte ich mich heute überwiegend an die klassische Orthographie, die seit dem letzten amtlichen Eingriff 1901 ganz allmählich durch den allgemeinen Sprachgebrauch entwickelt wurde.
Und gerade weil ich den Gedanken einer organischen Entwicklung so mag, halte ich mich nicht immer genau an die Regeln von 1995: Ich übertrete sie, wenn mein Sprachgefühl mir dazu rät.

Im Großen aber muß ich meine Sprache für Maschinen als de-DE-1901 kennzeichnen — der RFC 3066 verlangt es so.

Sprachausgabe in WordPress

In WordPress wird die Sprache des Blogs in der Datei wp-config.php angegeben:

define ('WPLANG', 'de_DE');

Dann holt sich das CMS automagisch die passende Sprachdatei namens de_DE.mo. Deshalb bringt es mir nichts, die präzise Sprache in der wp-config.php zu setzen: Eine Datei de_DE_1901.mo existiert ja leider nicht, und ich möchte auch nicht nach jeder Aktualisierung den Dateinamen hinterherrennen müssen.

Macht nichts.

In der Ausgabe für den Leser, im Frontend also, wird die Sprache nur an zwei Stellen angegeben: Im lang-Attribut des Elementes html:

<html lang="de-DE-1901">

Und im Feed, beispielsweise in der Datei /wp-includes/feed-atom.php:

xml:lang="<?php echo get_option('rss_language'); ?>"

Im Theme kann man diese Angabe entweder konkret in den Code schreiben oder die Funktion language_attributes() verwenden:

<html <?php language_attributes(); ?>>

Diese Funktion gibt die Schreibrichtung und die Sprache aus. Da ltr der Standardwert für das Attribut dir ist, kann das hier weggefiltert werden.

Die beiden Filter, die wir ansprechen müssen, lauten 'language_attributes' und 'pre_option_rss_language'.

Code zum Anpassen

Ich habe mir dafür eine kleine Klasse geschrieben, die ich in der functions.php des Themes einfach per require aufrufe:

Download class.Toscho_Language_Filter.php

<?php
/**
 * Adjust the public visible language declarations.
 *
 * @author "Thomas Scholz" http://toscho.de
 * @version 1.0
 */
class Toscho_Language_Filter
{
    /**
     * @var string
     */
    public static $lang = 'de';

    /**
     * Pseudo constructor.
     *
     * @param  string $lang The language according to …
     * @link   http://www.evertype.com/standards/iso639/iana-lang-assignments.html
     * @return void
     */
    public static function setup($lang = 'de-DE-1901')
    {
        self::$lang = $lang;

        add_filter(
            'language_attributes'
        ,   array ( __CLASS__, 'html' )
        );
        add_filter(
            'pre_option_rss_language'
        ,   array ( __CLASS__, 'get_lang' )
        );
    }

    /**
     * Returns the language string.
     * @return string
     */
    public static function get_lang()
    {
        return self::$lang;
    }

    /**
     * Output for language_attributes().
     * We drop the 'dir' attribute.
     *
     * @return string
     */
    public static function html()
    {
        return 'lang="' . self::$lang . '"';
    }

}
// Adjust this to your needs.
Toscho_Language_Filter::setup('de-DE-1901');

Wer mag, kann die Funktion setup() auch mit einer eigenen Kreation aufrufen. Dann muß man ein -x- davorsetzen, wie Ian Hickson das in den Spezifikationen zu HTML5 macht: lang="en-US-x-hixie".
Über den Nutzen möchte ich lieber nicht diskutieren.

Mehr davon

• WordPress-Dashboard: ›Approved‹ nicht ›Genehmigt‹
• WordPress: Auszug mit bestimmter Zeichenzahl
• PHP-Funktion Genitiv

Das ist mir ein wenig zu umständlich; deshalb habe ich in meiner Klasse ›XWP‹, die zusätzliche Templatetags erzeugt, folgenden kleinen Schnipsel eingebaut, den ich von Joost de Valk abgeguckt habe:

    /* Generates comment moderation links.
     *
     * @author Joost de Valk
     * @link   http://yoast.com/wordpress-functions-supercharge-theme/
     * @param  int $id Comment id - use get_comment_ID()
     * @return void
     */
    public static function delete_comment_link($id)
    {
        if ( ! current_user_can('moderate_comments') )
        {
            return;
        }

        global $post;

        $redirect = get_permalink( $post->ID );

        $links = array (
            'delete'  => 'cdc',
            'spam' => 'cdc&dt=spam',
            'edit' => 'editcomment'
        );

        $return = '<span class="comment_admin">';

        foreach ( $links as $name => $param )
        {
            $return .= "<a href='"
                    . admin_url("comment.php?c=$id&action=$param&redirect_to=$redirect")
                    . "'>$name</a>";
        }

        print $return . '</span>';

        return;
    }

In der comments.php rufe ich die Funktion innerhalb des Kommentarloops auf:

XWP::delete_comment_link( get_comment_ID() );

Das erzeugt etwa dieses Markup:

<span class="comment_admin">
  <a href='/wp-admin/comment.php?c=905&action=cdc&redirect_to=/2010/beispiel/'
     >delete</a>
  <a href='/wp-admin/comment.php?c=905&action=cdc&dt=spam&redirect_to=/2010/beispiel/'
     >spam</a>
  <a href='/wp-admin/comment.php?c=905&action=editcomment&redirect_to=/2010/beispiel/'
     >edit</a>
</span>

Mit ein wenig CSS aufgepeppt …

.comment_admin
    {
        float:              right;
        font:               .9em/1 Calibri;
        text-align:         center;
    }
.comment_admin a
    {
        color:              #444;
        background:         #f9f9f9;
        text-decoration:    none;
        border:             1px solid #bbb;
        border-radius:      4px;
        box-shadow:         0 2px 3px rgba(0,0,0,0.2);
        display:            inline-block;
        width:              3em;
        margin:             4px;
        padding:            4px 15px;
    }
#content .comment_admin a:hover
    {
        background:         #666;
        color:              #fff;
        border:             1px solid #222;
    }

… sieht das Ergebnis dann so aus:

Nach einem Klick landet man in der Bearbeitungsmaske im Backend, dann erst wird der Kommentar per Knopfdruck gelöscht oder als Spam markiert.

Mehr so’n Zeug:

• Administrator mit PHP herausfinden
• Moderationsfalle offenlegen
• No no no nofollow

Denn wenn wir Twitter per Webinterface erleiden, sehen wir schnell: Mit Umlauten in Hashtags kommt Twitter schlecht zurecht, ebenso mit URLs, denen kein Leerzeichen vorangeht. Und so richtig viele Protokollbezeichner kennt der Parser auch nicht.

Wollen wir also einen Twitterfeed per RSS einbinden, müssen wir die Links selbst erzeugen. Auf Twegolicious, wo ich nur meine eigene Timeline einbinde, entferne ich auch noch meinen Nutzernamen.

Der einzelne Tweet sieht im Quelltext so aus:

<item>
    <title>toscho: Informieren statt Sperren: http://toscho.de/p1609 #gebloggt</title>
    <description>toscho: Informieren statt Sperren: http://toscho.de/p1609 #gebloggt</description>
    <pubDate>Tue, 19 Jan 2010 21:44:21 +0000</pubDate>
    <guid>http://twitter.com/toscho/statuses/7960752682</guid>
    <link>http://twitter.com/toscho/statuses/7960752682</link>
</item>

title und description unterscheiden sich also nicht. Ich finde, daß man zumindest in einem von beiden den Nutzernamen hätte entfernen können …

Den Feed hole ich mit SimplePie, und den einzelnen Tweet werte ich mit dieser Funktion auf:

function format_tweet($content, $user = NULL)
{
    $uri_schemes = array (
        'mailto', 'news', 'nntp', 'callto', 'ed2k', 'irc', 'ssh', 'svn',
        's?ftps?', 'https?' );
    $regex['url'] = '(' . implode('|', $uri_schemes)
            . ')://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?';
    $regex['username'] = "@([a-zA-Z_\d]+)";
    $regex['hashtag']  = "([^\pL]){0,1}(#([-_\pL\d]+))";

    if ( ! is_null($user) )
    {
        // Usernamen + ': ' aus Text entfernen
        $content = substr( $content, ( strlen($user ) + 2 ) );
    }
    // Hyperlinks umwandeln
    $content = preg_replace(
        '~' . $regex['url'] . '~u', '<a href="${0}">${0}</a> ', $content);
    // Usernamen verlinken
    $content = preg_replace(
        '~' . $regex['username'] . '~u',
        '<a class="user" href="http://twitter.com/${1}">${0}</a>',
        $content);
    // Hashtags verlinken
    $content = preg_replace(
        '~' . $regex['hashtag'] . '~u',
        ' ${1}<a class="tag" href="http://twitter.com/search?q=%23${3}">${2}</a>',
        $content);

    return $content;
}

Das hätte ich wesentlich kompakter schreiben können, aber die Übersicht geht vor.

Aus dem oben gezeigten Quelltext wird per …

echo format_tweet($item, 'toscho');

… dieses Markup:

Informieren statt Sperren:
<a href="http://toscho.de/p1609">http://toscho.de/p1609</a>
<a class="tag"
    href="http://twitter.com/search?q=%23gebloggt"
>#gebloggt</a>

In einem Projekt, das ich hier nicht nennen kann, habe ich Feeds zu bestimmten Suchworten eingebunden. Um Spam herauszufiltern, habe ich die Hashtags und die URLs eines Tweets gezählt, und den Tweet beim Überschreiten bestimmter Grenzen verworfen. Das funktioniert zwar nicht sehr zuverlässig, aber wer darauf verzichtet, holt sich schnell viel Schund auf die eigene Seite.

Im April 2009 habe ich gezeigt, wie man in WordPress mit Bordmitteln kurze URLs für Seiten und Artikel erzeugt: Blog-Adresse plus »?p=« plus Post-Id. Das funktioniert einfach und schnell. Nicht.

Formatkrieg

Meine Grundidee war: Ich habe nur einen Ort für die Logik des Verfahrens – die functions.php. Das stellte sich als zu naiv heraus, als die ersten kaputten Crawler aufschlugen, die das Fragezeichen mit einem urlencode() vorbehandelten. Requests auf /%3F=762 sind eben etwas anderes als auf /?=762.

Jetzt mußte ich doch einen zweiten Ort anfassen: die .htaccess.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Dann versagte auch die URL-Erkennung bei Twitter: Verlinkt wurde nur der Teil bis zum Fragezeichen, alles dahinter fiel weg.
Also habe ich die Kurz-URLs auf das Format /p762 umgestellt und die .htaccess angepaßt:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Auftritt Rivva-Bot: Der hat das neue Format um einen Slash / ergänzt, die Fehlerseite bestaunt – und dann blieb er weg. Kein Problem:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)/?$
RewriteRule ^.* /?p=%1 [L,R=301]

Markup

In einem sehr fruchtbaren Ideen-Pingpong (vulgo: Dialog) mit Bernhard Häussner haben wir die perfekte Notation für die Bekanntgabe des Shortlinks gefunden: Ein separater HTTP-Header samt meta-Element:

<meta http-equiv="X-Short-URI" content="http://toscho.de/?p=762">

Interessiert kein Schwein. Am 14. August schuf WordPress.com Tatsachen und verstetigte die sehr schlechte Lösung rel="shortlink" (Referenz). Schade.

Jetzt könnte die URL also so angegeben werden:

<link rel="shortlink" href="http://toscho.de/?p=762">

Opera: Shortlink im Infopanel

PHP-Code

Ich habe den Code zur Ausgabe in WordPress in eine kleine Klasse mit statischen Methoden gegossen – des armen Mannes Namensraum. Verzeiht mir.

<?php
/**
 * Class Short_URI: Short-URIs erzeugen und ausgeben.
 * @author Thomas Scholz <http://toscho.de>
 * @see http://microformats.org/wiki/rel-shortlink
 * @license GPL 3 <http://www.gnu.org/licenses/gpl.html>
 * @version 1.3
 *
 */
class Short_URI {

    /**
     * Kurz-URI
     * @var string
     */
    protected static $short_uri      = NULL;

    /**
     * Sendet einen Link-HTTP-Header
     * @param bool $headonly Nur bei HEAD-Requests senden?
     * @return void
     */
    public static function send_header($headonly = TRUE)
    {
        if ($headonly and ('HEAD' != $_SERVER['REQUEST_METHOD']) )
        {
            return;
        }
        if ( ! self::prepare() )
        {
            return;
        }
        header('Link: <' . self::$short_uri . '>; rel="shortlink"');
        return;
    }

    public static function link_elem($echo = TRUE)
    {
        if ( ! self::prepare() )
        {
            return;
        }
        $link = '<link rel="alternate shortlink" title="Shortlink"'
                . ' href="' . self::$short_uri . '" />';

        if ( ! $echo)
        {
            return $link;
        }

        echo $link;
        return;

    }

    /**
     * Erzeugt einen Link zum Twittern der aktuellen Seite.
     * @param string|array $args
     * @return string
     */
    static function tweet_link($args = NULL)
    {
        $message_template = 'Lese gerade: %TITLE %URL von @toscho';
        $link_text        = 'Artikel twittern';
        $title_length     = 80;
        $class            = 'twitterlink';
        // Zum Ändern echo=0 übergeben.
        $echo             = TRUE;

        if ( ! is_null($args) )
        {
            if ( is_array($args) )
            {
                extract($args);
            }
            elseif ( is_string($args) )
            {
                parse_str($args);
            }
            else
            {
                trigger_error(
                    '$args muss ein Array oder ein String sein.',
                    E_USER_ERROR
                );
            }
        }
        global $post;

        $title       = trim($post->post_title);

        if ( isset ( $title[$title_length+2] ) )
        {// Verkürzen bei Bedarf
            $title = self::end_on_word(substr($title, 0, $title_length)) . ' …';
        }

        $message = str_replace(
            array('%TITLE', '%URL'),
            array($title, self::$short_uri ),
            $message_template
        );

        $link = '<a class="' . $class
            . '" href="http://twitter.com/home?status=' . urlencode($message)
            . '" title="' . $message . '">'
            . $link_text . '</a>';

        if ($echo)
        {
            echo $link;
            return;
        }

        return $link;
    }

    /**
     * Prüft, ob eine Short-URI erstellt werden soll
     * @return bool
     */
    public static function prepare()
    {
        if ( is_front_page() )
        {
            return FALSE;
        }
        if ( is_page() or is_single() or is_attachment() )
        {
            global $post;

            if ( is_null( self::$short_uri ) )
            {
                self::$short_uri =
                    rtrim(get_option('home'), '/') . '/p' . $post->ID;
            }
            return TRUE;
        }
        // Archive
        return FALSE;
    }

    /**
     * Entfernt unvollständige Worte am Ende eines Strings.
     * @see http://toscho.de/2009/php-funktion-end_on_word/
     * @param $str Zeichenkette
     * @return string
     */
    static function end_on_word($str)
    {
        $str = trim($str);

        // Nur ein Wort, wird also nicht gekürzt.
        if ( FALSE === strpos($str, ' ') )
        {
            return $str;
        }

        // Jedes Wort ein Eintrag im Array …
        $arr   = explode(' ', $str);
        // … letztes Stück wegwerfen …
        array_pop($arr);
        // … den String wieder herstellen und Kommas trimmen.
        return rtrim( implode(' ', $arr), ',;');
    }
}

Wer bis hierhin durchgehalten hat, darf sich das auch als …

WordPress-Plugin Short-URI herunterladen.

Den Tweetlink baut ihr innerhalb des Loops mit diesem Code ein:

do_action('tweet_link');

Oder so:

do_action('tweet_link', 'parameter=wert');

Die darin enthaltene Klasse könnt ihr natürlich auch einfach in die functions.php einbinden, um den Code direkt zu verwenden.

Ich habe ihn unter die GPL 3 gestellt (hallo Helmut!), damit ihr damit machen könnt, was immer ihr wollt. Er ist mir länger geraten, als ich erhofft hatte; das heißt: Er hat sicher auch mehr Fehler. Findet sie!

Ein großer Teil der HTML5-Spezifikation sieht aus, als werde bislang ungenormtes Browserverhalten schlicht dokumentiert. Aber der HTML-3.2-Geruch verfliegt, sobald wir unser Auge auf Formulare richten.

Mein Suchformular habe ich endlich ganz und gar auf die neuen Verhältnisse umgestellt.

Beispiel

<form
  method="GET"
  id="searchform"
  accept-charset="utf-8"
  action="/"
>
  <div>
    <input
      title="Suche"
      type="search"
      value="<?php the_search_query(); ?>"
      name="s"
      id="s"
      pattern=".+"
      required
    > 
    <input
      type="submit"
      id="searchsubmit"
      value="Suche"
    >
  </div>
</form>

Markup

Na, um das herauszufinden, braucht niemand einen Artikel. Ich möchte aber gerne meine Gründe mit euch diskutieren.

Auf das Element label verzichte ich. Das Eingabefeld hat ein title-Attribut, und der Button gleich danach trägt einen unmißverständlichen Text. Damit kommt auch der Nutzer eines Screenreaders gut zurecht.

Das Attribut accept-charset fungiert als redundante Sicherheitsleine. Ich gebe die Zeichenkodierung im HTTP-Header schon an, und im meta-Element steht sie auch.

Interessant wird endlich der Wert des Attributes type im ersten input-Element: search wurde von Apple durch die Hintertür in HTML5 eingeschmuggelt, sieht jetzt aber doch recht vernünftig aus.

Suchfeld in Safari 3

Das hat sich aber mit einigen Formatierungen gebissen, die hier und da auftauchten (insbesondere border, outline und background), und inzwischen beschränkt sich zumindest die Windowsversion auf eine Lupe und einen Pfeil.

Suchfeld in Safari 4

Browser, die diesen Attributwert nicht kennen, unterstellen automatisch type="text".

Wenn jemand schon etwas gesucht hat, dann steht der Suchbegriff natürlich im Feld, damit derjenige seine Anfrage bei Bedarf verbessern kann.

Sonst steht nichts darin. Kein Fülltext. An diesem Punkt laufen viele Gestalter leicht in eine Falle: Vor vielen, vielen Jahren gab es ein paar Screenreader, die Eingabefelder nur dann erkannten, wenn Text darin stand. Die haben sich verständlicherweise nicht lange gehalten. Deutlich länger freilich blieb die Idee, so ein Text sei hilfreich.

Der Text muß automatisch verschwinden, wenn man den Fokus ins Feld legt – sonst zwingt man den Besucher zu umständlichen Löscharbeiten. Also darf er nur per Javascript eingefügt werden, denn nur so funktioniert das automatische Löschen. Wer ohne Javascript auf die Seite kommt, hätte andernfalls ja doch die Löscherei von Hand zu erledigen.

Die Funktion des Feldes muß also schon ohne Javascript klar erkennbar sein. Ist das nicht der Fall, muß man das Formular entsprechend reparieren.

Wenn also ohne Javascript schon alles klar ist, brauchen wir auch den Fülltext nicht. Ich habe noch keine Seite gesehen, auf der dieser Text irgendeinen erkennbaren Mehrwert gebracht hat.

Das Attribut pattern beschreibt mit einem regulären Ausdruck, welche Zeichen erwartet werden. Hier möchte ich mindestens eines, denn sonst vergeudet der Leser nur seine Zeit.
Dieses Attribut ist im Grunde redundant, denn das nächste – required – verlangt auch mindestens ein Zeichen. Ich habe beide eingebaut, um denjenigen zu helfen, deren Browser nur eins erkennt.

Diese Attribute erzwingen eine clientseitige Validierung der Eingabe auch dann, wenn der Leser Javascript ausgeschaltet hat.

Der Absendebutton hat kein Attribut name. So wird dessen Wert auch nicht übertragen, und die URL für die Suche bleibt hübsch übersichtlich.

Javascript

Das Suchformular habe ich mit einer kleinen Funktion aufgepeppt:

function addEvent(target, eventType, functionRef, capture) {
    if (typeof target.addEventListener != "undefined") {
        target.addEventListener(eventType, functionRef, capture);
    } else if (typeof target.attachEvent != "undefined") {
        target.attachEvent("on" + eventType, functionRef);
    } else {
        eventType = "on" + eventType;
        if (typeof target[eventType] == "function") {
            var oldListener = target[eventType];
            target[eventType] = function() {
                oldListener();
                return functionRef();
            };
        } else {
            target[eventType] = functionRef;
        }
    }
}
function checkSearch() {
    var sform           = document.getElementById("searchform");
    var s               = document.getElementById('s');
    s.setAttribute('autosave', 'toscho.de');
    s.setAttribute('results', '15');
    var submit          = document.getElementById('searchsubmit');
    sform.onsubmit = function() {
        if ( '' == this.s.value ) {
            alert('Wenn Sie nach nichts suchen, werden Sie nichts finden.');
            s.focus();
            return false;
        }
        return true;
    };
}
addEvent(window, 'load', checkSearch);

Die erste Funktion addEvent() habe ich aus dem Javascript-Buch von SitePoint. Den Rest habe ich mir selbst zusammengeschustert. Ihr seht bestimmt, was ich alles besser machen kann.

Hier werden zunächst diese beiden Zeilen relevant:

s.setAttribute('autosave', 'toscho.de');
s.setAttribute('results', '15');

Die helfen den Nutzern webkit-basierter Browser wie Safari oder Google Chrome. Sie sagen: Merke dir automatisch die letzten 15 Einträge, und ordne sie der Domain toscho.de zu. Im Screenshot aus Safari 3 oben sieht man solch einen gespeicherten Ausdruck.
Das ist praktisch bei langen Worten oder solchen, die man leicht falsch schreibt. Noch praktischer wäre eine Methode, die Suchausdrücke ohne Treffer aus der Liste heraushalten könnte. Soweit ich weiß, gibt es die noch nicht. Korrigiert mich bitte!

Kurz darauf kommt noch eine kleine Kontrolle auf leere Einsendungen. Nicht jeder benutzt schließlich einen modernen Browser, der die neuen Attribute schon unterstützt.

Links

• HTML5: Formulare
• Anne van Kesteren: Improve your forms using HTML5!
• Dave Hyatt: [Introducing] The Search Field (in Webkit)

Leider stört ein Bug dabei die Empfänger dieser Mails: Antwortet man mit HTML auf eine Textnachricht, dann ist der Textteil dieser Antwort nur eine Kopie der Ursprungsnachricht. Er enthält nicht den Antworttext.
Wer die Textdarstellung bevorzugt, sieht die »richtige« Antwort nicht.

Hat man also (versehentlich) den HTML-Modus beim Schreiben eingestellt, dann empfehle ich dringend, dieses wieder abzustellen. So geht es:

1. Gehe auf »Extras/E-Mail- und Chatkonten«.
2. Markiere das E-Mailkonto, und klicke auf »Bearbeiten«.
3. Im Reiter »Postausgang« nimm den Haken aus »HTML-Formatierung vorziehen« und drücke »OK«. Fertig.

Beim Schreiben einer E-Mail kann man zwischen den beiden Modi auch wechseln; die entsprechenden Buttons stehen rechts oben:

Am besten sollte der Name des Blogs vor dem des Artikels stehen, aber das geht leider nicht: Die Reihenfolge ist im RSS-Template festgeschrieben.

Immerhin kann man einen Filter auf den Titel legen und den Blognamen dahinter setzen.
In die functions.php des aktuell verwendeten Themes schreiben wir:

add_filter('the_title_rss', 'rss_title_suffix');
function rss_title_suffix($str)
{
    if ( is_feed() AND is_singular() )
    {
        return $str . ' - ' . get_bloginfo('name');
    }
    return $str;
}

Aus dem Titel …
Kommentare zu: PHP: Funktion sanitize_ip

… wird jetzt …

Kommentare zu: PHP: Funktion sanitize_ip - toscho.design

Das ist nicht perfekt, aber besser als vorher.

Update 1 (10.10.2009)

Peter Westwood hat mich auf eine bessere Fährte gelenkt. Die neue Fassung sieht so aus:

add_filter('gettext', 'rss_title_prefix');

function rss_title_prefix($str)
{
    if ( is_feed() AND is_singular() )
    {
        return str_replace('Kommentare zu:', get_bloginfo('name') . ' - Kommentare zu:', $str);
    }
    return $str;
}

Ergebnis:
toscho.design - Kommentare zu: PHP: Funktion sanitize_ip

Update 2 (10.10.2009)

Zwei Mails später habe ich nun einen Code, der in jeder Sprache funktioniert. Danke nochmal an Peter Westwood und an Frank Bültge.

if ( !function_exists('rss_title_prefix') )
{
    function rss_title_prefix($translation, $original, $domain)
    {
        if ( ( 'default' == $domain )
            && ( 'Comments on: %s' == $original ) )
        {
            return get_bloginfo('name') . ' - ' . $translation;
        }
        return $translation;
    }
    add_filter('gettext', 'rss_title_prefix', 10, 3);
}

Update 3 (09.02.2010)

Inzwischen hat sich der Originaltext von Comments on: zu Comments for geändert, daher muß das jetzt so aussehen:

if ( !function_exists('rss_title_prefix') )
{
    function rss_title_prefix($translation, $original, $domain)
    {
        if ( ( 'default' == $domain )
            && ( 'Comments for %s' == $original ) )
        {
            return get_bloginfo('name') . ' - ' . $translation;
        }
        return $translation;
    }
    add_filter('gettext', 'rss_title_prefix', 10, 3);
}

Das kommt, wie gesagt, in die functions.php, oder man benutzt den Code als Plugin:

Download Plugin »Feed title plus blogname«.