Meine Leidenschaft gilt dem Subtilen, dem unaufdringlichen Detail. Deshalb fange ich leere Suchanfragen ab, oder ich vergrößere die Eingabefelder im Kommentarformular, sobald sie fokussiert werden.

Heute habe noch so ein Detail nachgerüstet. Wenn ich einen Artikel mittels Überschriften in mehrere Abschnitte eingeteilt habe, dann lasse ich per Plugin ein Inhaltsverzeichnis erstellen. Dabei werden alle Überschriften mit einer id versehen, die dann als Sprungziel dient. Bis hierhin nichts Neues; so verfahre ich schon lange. Heute aber habe ich den Nutzwert der id-Attribute erhöht.

CSS pur – nur für Auserwählte

In meinem Userstylesheet lasse ich mir interne Anker gerne zeigen:

h1[id]:hover:after,
h2[id]:hover:after,
h3[id]:hover:after,
h4[id]:hover:after,
h5[id]:hover:after,
h6[id]:hover:after
    { /* Findet interne Links, falls ich mal auf
       einen Abschnitt in einer Seite linken will. */
        content:            " #" attr(id);
        font:               bold 14px/1 Consolas;
    }

Das könnte ich hier auch einbauen. Leider hat aber Mozilla an dieser Stelle einen unangenehmen Bug, der erst zehneinhalb Jahre alt ist und deshalb noch nicht repariert wurde: Generated Content kann nicht kopiert werden. Ihr sähet also einen Text, den ihr nicht erreichen könnt. So etwas biete ich nicht an.

Javascript macht’s möglich

Zu den vielen Vorteilen eines Javascript-Frameworks gehört, daß ich mich um die Bugs und Besonderheiten der einzelnen Browser kaum noch kümmern muß. Seit dem letzten kleinen Redesign setze ich hier jQuery ein, und damit läßt sich das Problem sehr elegant lösen.

Man kann in jQuery meistens ganz normale CSS-Selektoren benutzen, um Elemente auszuwählen. Beispielsweise füllt jQuery('h2[id], h3[id]') einen Array mit allen Überschriften zweiter und dritter Ordnung, die ein Attribut id besitzen.

Mit each() schlendert man dann gemütlich jeden Treffer ab und löscht, ersetzt oder bearbeitet ihn, bis die Finger bluten. Und das mache ich jetzt auch:

<script defer>
jQuery(document).ready(function hpoint()
{
    jQuery('h2[id], h3[id]').each(function jumplink()
    {
        // Klasse setzen
        jQuery(this).addClass('haslink');
        // Link ankleben
        jQuery(this).append(
            '&#160;<a class="hpoint noprint" href="#'
            + jQuery(this).attr("id")
            + '" title="Direkter Link auf diese Position">#</a>'
        );
    });
});
</script>

Jetzt haben also alle anspringbaren Überschriften einen Link, mit dem jeder etwas anfangen kann.

CSS zur Feinarbeit

.hpoint:link,
.hpoint:visited
    {
        color:              #ccc;
        text-decoration:    none;
    }
.haslink:hover .hpoint,
.haslink:focus .hpoint,
.haslink:target .hpoint
    {
        color:              #059;
    }

Das Script sollte irgendwo am Ende der Seite stehen oder ausgelagert werden. jQuery selbst muß natürlich vorher eingebunden werden.

Wie findet ihr das? Lästig, nützlich, oder verbesserungsbedürftig?

$posts_per_page = (int) get_user_option( 'edit_per_page', 0, false );

Die Funktion get_user_option() wiederum bietet einen Filter an:

apply_filters("get_user_option_{$option}", $result, $option, $user);

Und daraus folgt dieser kleine Eintrag in der functions.php, mit dem ich künftig 100 Artikel sehe, ohne die Datenbank anzufassen:

add_filter('get_user_option_edit_per_page',
    create_function('','return 100;'));

Das kann man noch an eine Abfrage des Userlevels binden, wenn man möchte. Mir reicht es so.

Strenggenommen gehört so eine Modifikation natürlich nicht ins Theme, sondern in ein Plugin. Andererseits möchte ich dafür nicht extra ein zusätzliches Plugin laden. Kompromisse, wohin man sieht …

Und noch strenger gesehen ist diese Option bereits vorhanden: In den Optionen der Artikelansicht. Dort findet sie aber kaum jemand, deshalb setze ich sie global.

Mich stört es nicht, einige Kunden aber schon.

Bis das behoben ist, kann man sich mit einem kleinen Workaround in der functions.php des Themes aushelfen:

add_filter(
    'ngettext',
    create_function(
        '$t,$s,$p',
        'return "Approved"== $p?"Genehmigte":$t;'),
    10, 3);

Keine Schlamperei, sondern Absicht: Dashboard wird weiterhin nicht ins Deutsche übersetzt. Auch diesen Bug kann man leicht reparieren, ohne die Sprachdatei anzufassen, wie auch das Submitted on:

if ( ! function_exists('toscho_translations') )
{
    function toscho_translations($str)
    {
        // Diesen Array bei Bedarf um weitere Übersetzungen erweitern.
        $trans = array (
            'Dashboard'     => 'Übersicht',
            'Submitted on'  => 'Eingereicht am'
        );

        foreach ( $trans as $original => $translation )
        {
            $str = str_replace($original, $translation, $str);
        }

        return $str;
    }
    add_filter('gettext', 'toscho_translations');
}

Und so sieht das Ergebnis aus:

Download Toschos Basic Settings.

<?php
/*
Plugin Name: Toscho's basic settings
Plugin URI: http://toscho.de/2010/wordpress-grundeinstellungen-per-plugin-setzen/
Description: Some useful default configuration settings. See 'wp-admin/options.php' for more options.
Version: 0.3
Author: Thomas Scholz
Author URI: http://toscho.de
*/

function set_toscho_defaults()
{
    global $wpdb;
    $o = array(
        'avatar_default'            => 'blank',
        'avatar_rating'             => 'G',
        'category_base'             => '/thema',
        'comment_max_links'         => 0,
        'comments_per_page'         => 0,
        'date_format'               => 'd.m.Y',
        'default_ping_status'       => 'closed',
        'default_post_edit_rows'    => 30,
        'links_updated_date_format' => 'j. F Y, H:i',
        'permalink_structure'       => '/%year%/%postname%/',
        'rss_language'              => 'de',
        'timezone_string'           => 'Etc/GMT-1',
        'use_smilies'               => 0,
        'start_of_week'             => 1
    );

    foreach ( $o as $k => $v )
    {
        update_option($k, $v);
    }

    // Delete dummy post and comment.
    wp_delete_post(1, TRUE);
    wp_delete_comment(1);

    // empty blogroll
    $wpdb->query("DELETE FROM $wpdb->links WHERE link_id != ''");

    return;
}
register_activation_hook(__FILE__, 'set_toscho_defaults');

Dieses Plugin aktivieren, deaktivieren und löschen. Fertig.

Nachtrag: Dieses kleine Plugin hat jetzt auch seine eigene GitHub-Adresse: http://github.com/toscho/WordPress-Basic-Settings.

Zum Glück – und weil ich auf bequeme Technik abfahre – benutze ich Opera. Und WordPress. Also habe ich in den Einstellungen unter opera:config#ISP|Id ein paar Zeichen in die User-Agent-Kennung eingetragen, mit denen ich mich im PHP-Skript wiedererkenne.

Diese Zeichenkette benutze ich in meinem Theme und auch im Labor, wo man den eigenen User-Agent-String ansehen kann, um den Piwik-Code auszublenden.

Angenommen, die Zeichen wären ABC123DEF, dann sähe der Code so aus:

function piwik_code()
{
    // Das bin ich!
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'ABC123DEF' ) )
    {
        return;
    }

    $url = 'http' . (empty($_SERVER['HTTPS']) ? '' : 's') . '://p.toscho.de/';
    ?>
<script type="text/javascript" src="<?php echo $url; ?>piwik.js"></script>
<script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker("<?php echo $url; ?>piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script>
<noscript><p><img src="<?php echo $url;
?>piwik.php?idsite=1" alt=""></p></noscript>
<?php
    return;
}

Die Funktion piwik_code() rufe ich dann in der footer.php an passender Stelle auf. Und schon bin ich weg.

Nachtrag: Einen anderen Weg zeigt der Folgeartikel: Per Cookie aus der Statistik.

Ich benutze einen Schnipsel, den ich aus dem WordPress-Forum gepult und in eine Funktion gegossen habe:

/**
 * Prüft, ob der Administrator die Seite ansieht.
 * @author »Kafkaesqui« <http://guff.szub.net/>
 * @see http://wordpress.org/support/topic/153260#post-681600
 * @return bool
 */
function is_boss()
{
    global $user_ID;

    if ( ! $user_ID or ! current_user_can('level_10') )
    {
        return FALSE;
    }
    return TRUE;
}

Level 10 hat nur der Adminstrator. Man kann diese Abfrage aber anpassen und auch die niederen Ränge mit speziellen Inhalten beglücken.
Lektüre: Roles and Capabilities.

Außerdem kann man noch FlipBack und FlipForward benutzen. FlipBack heißt: Man hält die rechte Maustaste gedrückt und klickt kurz auf die linke. FlipForward mag sich jetzt jeder selbst austüfteln …

Die Aktionen können noch mit Tastatureingaben kombiniert werden; sie bieten leidenschaftlichen Fummlern eine Menge Zeitvertreib.

Wie die kleinen Beispiele zeigen, bringt Opera hier einige Redundanz mit. Die Standardkonfiguration kennt zwei Aktionen für das Schließen eines Fensters, drei für das einfache Vor- und Zurückspringen innerhalb des Verlaufs (eine Seite), drei für das schnelle Zurückblättern (Einstiegsseite einer Domain) und sechs für das schnelle Vorwärtsblättern (automatisches Finden der nächsten Seite).

Wer soll sich das merken?

Mich stört vor allem die Möglichkeit, durch eine »verirrte« Geste versehentlich das Fenster zu schließen; außerdem brauche ich oft ganz andere Befehle. Deshalb habe ich eine sehr einfache Konfiguration erstellt, die ich in jede Neuinstallation importiere.

Download toscho.mouse.ini

Opera bietet eigenständig die Installation an. Das kann man jederzeit wieder aufheben; die Standardkonfiguration wird nicht überschrieben.

Die Mausgesten im Überblick

Das versehentliche Schließen ist hiermit nicht mehr möglich. Wer jetzt Lust auf eine eigene INI bekommen hat: Im Opera-Wiki wartet eine umfangreiche, kommentierte Liste aller verfügbaren Aktionen.

• Mach die Schrift ganz, ganz klein. Dann hast du mehr Platz für Werbung.
  Wer doch etwas lesen will, kann ja einfach ein bißchen näher heranrücken oder mit der Vergrößerungsfunktion seines Browsers herumfummeln. Macht jeder gerne.
• Packe alles in den Titel, das irgendwie wichtig sein könnte: Kategorien, wichtige Suchworte und ein bißchen Werbung.
  Wer ein Lesezeichen setzen will, kann ja selbst nacharbeiten, wenn ihm das nicht paßt. Oder darauf verzichten.
• Du brauchst kein Druckstylesheet. Und wenn doch, dann zumindest keinen Umbruch vor den Kommentaren. Laß unbedingt die Werbung drin; die ist so schön bunt und lockert den schwarzen Hintergrund auf.
• Verlinke einfach alles. Überall. Auf jeder Seite jede Kategorie, jedes Schlagwort, die 100 »beliebtesten« Artikel, die 100 am häufigsten kommentierten, 50 Werbepartner, deine Lieblingslinks und deine letzten 20 Tweets. Und die Seite, die der Leser gerade sieht. Dann findet er sie schneller wieder. Insgesamt wirkt deine deine Seite dann bestimmt sehr (wert)voll.
• Links sind zwar eine tolle Sache, sehen aber doof aus. Kein Problem: Per CSS kannst du Links prima in den Rest des Textes eingliedern. Bau einfach die Unterstriche aus, und gib besuchten Links die gleiche Farbe wie unbesuchten: die des Textes. Und schon sieht die Linkwüste ein bißchen freundlicher aus.
• Links auf fremde Seiten lassen sich übrigens sehr einfach mit dem Attribut target="_blank" vergolden. Wir wollen doch klarstellen, wer hier das Sagen hat, oder?
• Warum nur einen Statistikdienst? Der könnte irgendwann verboten werden, da ist es sicherer, gleich zehn zu benutzen – die können ja nicht alle rechtswidrig sein. Und wer dein Blog besucht, verzichtet doch automatisch auf seine Privatsphäre, denn es ist ja öffentlich. Ladezeit? Ach was. Heute hat doch jeder DSL.
• Du bist ein Genie, deine Artikel zeitlos gültig. Wozu also die Leser mit der Information verwirren, wann du einen Artikel geschrieben hast?
  Wenn du doch ein Datum verrätst, dann verstecke es gut. Direkt neben oder unter der Überschrift ist ein sehr schlechter Platz, da lenkt man nur von der Werbung ab.
• Teile deine Artikel in mehrere Seiten. Leser blättern gerne, denn das schafft so eine … literarische Atmosphäre. Außerdem verdienst du dann mehr Geld mit deiner Werbung.

Nächste Woche in dieser Sendung: Wie man seine Kommentatoren züchtigt.

Wirklich cool finde ich aber mehrere Widgets an derselben Stelle. So möchte ich vielleicht auf der Startseite andere Inhalte in der Sidebar haben als auf den Unterseiten. Oder neben Artikeln sollen bestimmte Hinweise stehen, die neben »statischen« Seiten keinen Sinn ergäben.

Sehen wir uns das erste Beispiel an, den superspeziellen Spezialinhalt für die Startseite.
Dazu registrieren wir zunächst zwei Widgets in der functions.php des Themes:

register_sidebar(
    array(
            'name'            => 'Right Sidebar Home',
            'before_widget'   => '<li id="%1$s" class="widget %2$s">',
            'after_widget'    => '</li>',
            'before_title'    => '<h2 class="widgettitle">',
            'after_title'     => '</h2>',
        )
);
register_sidebar(
    array(
            'name'            => 'Right Sidebar General',
            'before_widget'   => '<li id="%1$s" class="widget %2$s">',
            'after_widget'    => '</li>',
            'before_title'    => '<h2 class="widgettitle">',
            'after_title'     => '</h2>',
        )
);

Diese beiden Widgets sehen wir jetzt im Backend unter »Design/Widgets«.
Mit ein wenig Glück können wir sie dort auch bearbeiten.

Jetzt müssen wir sie im Theme (sidebar.php) einbauen; dazu brauchen wir die internen Conditional Tags. Hier is_front_page().

<ul>
<?php
if ( is_front_page() and !dynamic_sidebar('Right Sidebar Home') )
{
    if( !dynamic_sidebar('Right Sidebar General') )
    {
        wp_list_categories('show_count=0&title_li=<h2>Themen</h2>');
        ?>

        <li>
            <h2>Archiv</h2>
            <ul>
                <?php wp_get_archives('type=monthly'); ?>

            </ul>
        </li>
        <?php
    }
}
elseif ( !is_front_page() and !dynamic_sidebar('Right Sidebar General') )
{
    wp_list_categories('show_count=0&title_li=<h2>Themen</h2>');
    ?>

    <li>
        <h2>Archiv</h2>
        <ul>
            <?php wp_get_archives('type=monthly'); ?>

        </ul>
    </li>

    <?php
}
?>

</ul>

Was passiert jetzt? Erst fragen wir, ob wir gerade die Startseite ausgeben und ob das passende Widget ausgefüllt wurde. Trifft einer der beiden Punkte nicht zu, fragen wir nach dem Inhalt der allgemeinen Sidebar. Wurde auch die noch nicht ausgefüllt, geben wir »feste« Inhalte aus.

Dieses Prinzip können wir auf alle Ausgabetypen (Seiten, Archive, Suchergebnisse) ausdehnen; auch die »Verschachtelungstiefe« darf unbegrenzt tief wachsen. Das mag selten nötig werden; aber die Möglichkeit allein … rockt.

Der Themenutzer kann jetzt flexibler mit seiner Website umgehen, und wir sparen uns den schlimmsten Teil der Designarbeit: Das Justieren winziger, oft unbeständiger Details. Ein Gewinn für alle Seiten.

Opera ist installiert, aber wenn du eine URL anklickst, landet sie immer noch bei Firefox oder Konqueror? Das muß nicht sein.

1. Im Startmenu »Arbeitsfläche einrichten« öffnen.
2. Unter »Standard-Komponenten« jeweils für »Email-Client« und »Web Browser« mit dem Auswahlbutton […] Opera aus »Internet/Webbrowser« auswählen.
3. »Anwenden« klicken. Fertig.

Ab jetzt landet jede angeklickte URL bei Opera; Linux macht wieder Spaß. Das funktioniert natürlich auch mit jedem anderen Browser und E-Mail-Programm wie Firefox, Thunderbird, SeaMonkey, Epiphany oder Konqueror.

Mir ist eben aufgefallen, daß die Googlesuche zu dieser Frage nur Anleitungen für KDE 3 ausspuckt; Operas Wissenssammlung gar nichts.