Rettung naht gibt es vielleicht irgendwann: Im CSS Text Level 3 wird die Eigenschaft tab-size vorgeschlagen. Die Diskussion dazu findet man in der CSS-Mailingliste des W3C.

pre
{
    tab-size: 4; /* Nimm vier Leerzeichen! */
}

Das setzt freilich voraus, daß der Browser das Zeichen TAB im Shadow DOM in ein Pseudo-Element packt. Und das können derzeit nur Firefox und Opera. Mit einem Vendorpräfix.

pre
{
    -moz-tab-size: 4;
    -o-tab-size:   4;
    tab-size:      4;
}

Der Test, der auch andere Präfixe prüft, zeigt in Opera und Firefox das erhoffte Ergebnis:

WebKit (hier Chrome) und der IE 9 machen leider dieses:

Fazit: Taugt erstmal nur fürs Userstylesheet. Immerhin. In den nächsten zwei Jahren werden wir unseren Code weiterhin ein bißchen vorbereiten müssen und Tabs in Leerzeichen umwandeln – oder auf die ollen Nischenbrowser pfeifen.

Quälend langsam haben dann einzelne Browser ihre skurrilen Interpretationen der Regeln eingebaut. Da gab es eine Menge zu lernen und zu hacken. Jeder Browser hatte nicht nur Macken, die zu den Macken der anderen inkompatibel waren, sondern auch ein rasch wechselndes Set proprietärer Eigenschaften. Es hat Spaß gemacht, da herumzukurven, im Usenet oder auf Mailinglisten mit anderen Leuten zu tüfteln und zu testen.

Heute ist das weg. Mit den superkaputten Browsern ist auch das Gefühl verschwunden, beim Umgang mit CSS den Kopf zu brauchen. Klar, es gibt immer noch kleine Hacks und vorläufige proprietäre Implementationen. Meistens laufen die nur auf ein weiteres Snippet in der IDE hinaus. Aber früher, als man nicht einmal width schreiben konnte, ohne von mindestens drei Browsern eins in die Fresse zu kriegen, war das irgendwie … spannender.

CSS3 hat uns viele neue Eigenschaften gebracht aber kaum neue Konzepte. Viele Module sind nicht einmal kompatibel zueinander, und das Entwicklungstempo ist – so wirkt es auf mich – deutlich gesunken. Kein Wunder, ich verlöre angesichts dieses Wustes auch die Lust.

Manches nervt sogar. Ich habe die Nase voll von Schättchen und Verläufen, von abgelutscht aussehenden Ecken und Schrift mit Pseudo-Prägeeffekt. Kitsch. Hier wird das alles demnächst verschwinden.

Der Grund für das Fefe-Theme war nicht Fefe. Der Grund waren all die anderen Layouts, die ich in den letzten Jahren verfaßt habe. Bei denen ich zu viel Zeit mit zu leichtem Code verbringen mußte.

Ich bin, wie Aristoteles einst so schön gesagt hat, ein krummes Holz, das mal in die andere Richtung gebogen werden muß. Von mir selbst.

Das Theme verwendet kein Stylesheet, keine Tags oder Kategorien, keine Post-Titel, und mit Bildern kann man auch nicht viel anfangen. Es gibt zwei Widgetflächen – oben und unten – da kann man Text hineinsetzen, wenn man möchte. Einen Shortcode für den Einbau des Suchformulars habe ich auch erstellt: [searchform]. Damit kann man die Maske auf einer beliebigen Seite mitten im Text plazieren.

Vergleich Original und Theme

Die Sprache ist Englisch, es liegt aber eine deutsche Sprachdatei bei, und Andrey Savchenko, den einige sicher als Rarst von WordPress Answers kennen, hat die Übersetzung ins Russische besorgt. Cool.

Das Repository liegt natürlich auf GitHub: https://github.com/toscho/Fefe-Tribute-Theme

Die Version 1.0 herunterladen könnt ihr dort auch.

Verbesserungsvorschläge und Feature-Requests packt bitte in den Issue-Tracker, damit ich den Überblick behalte. Danke!

Gute Themes bieten dafür eine Option an, TwentyTen und auch TwentyEleven leider nicht. Die nachträgliche Entfernung ist umständlich, wenn man kein Child-Theme erstellen möchte.

Deshalb habe ich ein kleines Plugin geschrieben, das sowohl das Bild im Frontend entfernt als auch den Menu-Eintrag im Backend.

Plugin Remove Header Image

Wie üblich – es gibt ein mindestens zwei Haken: Wenn im Theme nicht geprüft wird, ob überhaupt ein Bild vorhanden ist, ehe der Container dafür ausgegeben wird, bekommt man eine leere Fläche. Das ist dann eben ein Schrott-Theme. Davon gibt es leider zu viele.
Und die Seite im Backend ist immer noch erreichbar, wenn man die URL dahin kennt. Bilder kann man aber nicht mehr hochladen.

Als Beispiel für den Einsatz in der Praxis sei das Videoblog Drehlog genannt. Dort blogge ich mit ein paar Freunden ab und zu … tja … Videos.

Irgendwie werde ich das Gefühl nicht los, einen leichteren Weg übersehen zu haben … sei’s drum.

Die erste Antwort darauf sieht ganz pragmatisch aus: Ungeachtet des schlecht gewählten Namens eignet sich Germanix für viele Sprachen: Dänisch, Türkisch, Französisch oder Spanisch zum Beispiel.
Als de_DE.php wäre der Nutzen ohne Not reduziert, denn die benutzt WordPress ja nur, wenn in der wp-config.php eben diese Sprache angegeben wurde.

Die zweite – und mir wichtigere – Antwort fällt vielleicht eher unter Meinung, deshalb möchte ich vorausschicken, wie meine Sicht gefärbt ist: Ich schreibe pro Woche mindestens ein Plugin, oft zwei, manchmal drei. Pro Monat schreibe ich zwei bis drei Themes. Ich weiß also ein wenig, was wo am besten funktioniert. Oder ich bin eingefahren, wie immer man das sehen möchte.

Was ich nicht bin: perfekt. Ich mache Fehler, schreibe Bugs in meinen Code, die ich dann wieder repariere. Bei einem komplexen System, dessen Bestandteile (Core, Themes und Plugins) separat aktualisiert oder ersetzt werden, kann sich so ein Bug recht gut verstecken. Manchmal entsteht so ein Fehler auch durch fremden Code, der nicht sauber geschrieben wurde, oder durch das Aufeinandertreffen zweier an sich ganz harmloser Codes.

Beispiel: Ein Beitrag wird plötzlich ganz anders ausgegeben, als er geschrieben wurde. Oder der Permalink dafür leitet auf die Fehlerseite.
In solchen Fällen gehe ich wissenschaftlich vor: Ich ändere immer nur eine Variable, Schritt für Schritt, bis ich alle notwendigen Faktoren ermittelt habe. Dann weiß ich, wo ich suchen und flicken muß.

Programmieren ist zu 80% Debuggen, also muß das einfach sein.

Das heißt: Ich muß Code schnell und möglichst granular abschalten können. Als de_DE.php müßte ich zum Debuggen die Datei umbenennen, denn allein das Ändern der Sprache in der wp-config.php erfaßt zu viele weitere Faktoren. Das ist mir zu umständlich, obendrein vergesse ich es vielleicht.

Und für die Nutzer meines Plugins ist es noch umständlicher. Wer hat schon immer das FTP-Programm oder eine SSH-Shell geöffnet, wenn er an WordPress sitzt?

Als klassisches Plugin kann ich Germanix jederzeit einfach und isoliert abschalten.

Gleiches gilt auch für viele Hacks, die für die functions.php empfohlen werden. Wenn der eingebaute Code im Stylesheet oder in einer Template-Datei nicht berücksichtigt werden muß, dann gehört er in ein Plugin.
Dabei entsteht keine zusätzliche Last, nur die Liste der aktiven Plugins wird um einen Eintrag erweitert. Und wenn diese paar Zeichen dein System schon in Not bringen, dann ist das System kaputt.

Wenn dir jemand sagt, er habe Plugin-Funktionalität ohne ein Plugin, dann glaub es nicht. Nicht der Ort des Codes entscheidet darüber, ob er ein Plugin ist, sondern das, was er tut. Auch ich habe diesen Fehler schon begangen. Sorry.
Mein Dofollow-Code ist jetzt ein Plugin, der Code zur Kontrolle des Umbruchs im Titel auch.

Warum ist also Germanix ein Plugin? Weil es ein Plugin ist. Der Code benutzt die Plugin-API, er kann vom Theme komplett ignoriert werden, und er muß abschaltbar sein.

Weitere Lektüre

• WordPress-Plugin: Germanix
• WordPress als CMS: Hilfreiche Plugins
• WordPress-Tutorial: Ein Framebreaker-Plugin schreiben

Leider sieht sie dämlich aus: Hellgrau auf Mittelgrau, zeitgemäß verhunzt mit Schatten und abgerundeten Ecken. Kinkerlitzchen, CSS3 vom Schlimmsten.

Ich habe diesen Quatsch mal aufgeräumt, die Farben auf die des Betriebssystems umgestellt und ein Plugin daraus gemacht:

Admin Bar In System Colors

Das kann hoffentlich jede und jeder gut lesen.

Forks, Fragen oder Fer Verbesserungsvorschläge?

Umfangreiche Browsertests habe ich noch nicht gemacht – keine Zeit! – und vielleicht sollte ich das Standardstylesheet komplett ersetzen, statt es zu überschreiben. Auch über die feste Höhe samt Pixelschriftgröße werde ich sicher nochmal nachdenken. Und die kleine Grafik für aufklappbare Menus kann man kaum noch erkennen …

Weiterlesen

• WordPress-Plugin: Backend Style Enhancements
• WordPress: Grundeinstellungen per Plugin setzen
• WordPress: Administrator mit PHP herausfinden
]]> http://toscho.de/2011/wordpress-adminbar-in-systemfarben/feed/ 19 http://toscho.de/2011/wordpress-umleitung-upgrade-php-beheben/ http://toscho.de/2011/wordpress-umleitung-upgrade-php-beheben/#comments Thu, 24 Feb 2011 07:30:58 +0000 Thomas Scholz http://toscho.de/?p=1784 Eben habe ich ein Blog auf Version 3.1 aktualisiert. Danach wurde ich immer auf wp-admin/upgrade.php?_wp_http_referer=%2Fwp-admin%2Findex.php umgeleitet, wenn ich auf den Link zum Dashboard – /wp-admin/index.php – geklickt habe.
Ein direkter Aufruf der Adresse /wp-admin/ (ohne index.php) hingegen klappte problemlos.

Eine kurze Suche im Quellcode ergab den Auslöser: In der /wp-admin/admin.php steht eine Abfrage, ob die Datenbank aktualisiert wurde. Steht der Wert db_upgraded in der Optionstabelle nicht auf FALSE, so wird die Umleitung erzeugt, die dann eigentlich den Wert nach dem ersten Aufruf korrekt setzen sollte. Warum das nicht klappt, kann ich noch nicht sagen, aber die Lösung liegt jetzt auf der Hand:

1. Rufe /wp-admin/options.php auf. Diese URL mußt du vermutlich per Hand eingeben.
2. Suche nach dem Eintrag db_upgraded und setze eine 0 (Null) hinein.
3. Drücke auf »Änderungen übernehmen«. Fertig.
]]> http://toscho.de/2011/wordpress-umleitung-upgrade-php-beheben/feed/ 6 http://toscho.de/2011/wordpress-plugin-magische-widgets/ http://toscho.de/2011/wordpress-plugin-magische-widgets/#comments Wed, 05 Jan 2011 14:19:56 +0000 Thomas Scholz http://toscho.de/?p=1768 Download auf wordpress.org

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
]]> http://toscho.de/2011/wordpress-plugin-magische-widgets/feed/ 17 http://toscho.de/2010/wordpress-plugin-icon-to-link/ http://toscho.de/2010/wordpress-plugin-icon-to-link/#comments Tue, 28 Dec 2010 17:39:07 +0000 Thomas Scholz http://toscho.de/?p=1759 Die Icons über dem Editor in WordPress sparen zwar Platz, verstanden werden sie leider nicht immer. Müde dieser Art Support habe ich kleines Plugin verzapft, das aus den Icons klassische Textlinks macht: Plugin Icon to Link auf GitHub.

So wirkt es:


Und das ist der gegenwärtige alte Code, den man im Archiv herunterladen kann:

<?php
/*
Plugin Name: Icon to Link
Plugin URI: http://toscho.de/2010/wordpress-plugin-icon-to-link/
Description: Changes upload icons in the edit screen into text links.
Version: 0.3
Author: Thomas Scholz
Author URI: http://toscho.de
*/

add_action( 'admin_head', 'itb_change' );
function itb_change()
{   ?>
<script type="text/javascript">jQuery(document).ready(function($){
    $('a#add_image').text( '<?php _e('Image'); ?>' );
    $('a#add_video').text( '<?php _e('Video'); ?>' );
    $('a#add_audio').text( '<?php _e('Audio'); ?>' );
    $('a#add_media').text( '<?php _ex('File', 'column name' ); ?>' );
});</script>
    <?php
}

Auf zwei Details sei hingewiesen: Dazu braucht man kein jQuery. Aber da es ohnehin geladen wird, habe ich es um der Kürze gleich verwendet.
Und der Text File wird seltsamerweise nicht übersetzt, obwohl er genau so in der Sprachdatei steht. Das finde ich noch heraus …
File wird nur ersetzt, wenn man den passenden Kontext angibt, hier column name.

Update 29.12.

Ich habe das Javascript jetzt in eine separate Datei ausgelagert, einen Filter für die Namen eingebaut und sichergestellt, daß der Code nur auf Seiten mit einem Editor und dort erst am Seitenende geladen wird.

PHP-Code

<?php
/*
Plugin Name: Icon to Link
Plugin URI: http://toscho.de/2010/wordpress-plugin-icon-to-link/
Description: Changes upload icons in the edit screen into text links.
Version: 0.4
Author: Thomas Scholz
Author URI: http://toscho.de
*/

add_action( 'admin_init', 'itb_change' );
function itb_change()
{
    // Load the script on editor pages only.
    if ( empty ( $GLOBALS['pagenow'] )
        or ! ( 'post.php' == $GLOBALS['pagenow']
            or 'post-new.php' == $GLOBALS['pagenow'] )
    )
    {
        return;
    }

    $handle  = 'icon-to-links';

    wp_register_script( $handle, plugins_url( 'itl.js', __FILE__ ), 'jquery', '0.4', TRUE );
    wp_enqueue_script( $handle );

    // Localize
    $text = array (
        'image' => __( 'Image' )
    ,   'video' => __( 'Video' )
    ,   'audio' => __( 'Audio' )
    ,   'file'  => _x( 'File', 'column name' )
    );
    // To change the names, add a filter for 'itl_names'.
    $text = apply_filters( 'itl_names', $text );
    wp_localize_script( $handle, 'i2l', $text );

    return;
}

/**
 * Sample filter:

add_filter( 'itl_names', 'change_itl_names', 10, 1 );
function change_itl_names( $names )
{
    $names['image'] = 'Foto';
    return $names;
}

*/

Javascript (itl.js)

jQuery(document).ready(function($){
    $('a#add_image').text( i2l.image );
    $('a#add_video').text( i2l.video );
    $('a#add_audio').text( i2l.audio );
    $('a#add_media').text( i2l.file  );
});

]]> http://toscho.de/2010/wordpress-plugin-icon-to-link/feed/ 10 http://toscho.de/2010/apache-fehlerseiten-testen/ http://toscho.de/2010/apache-fehlerseiten-testen/#comments Mon, 20 Dec 2010 08:00:59 +0000 Thomas Scholz http://toscho.de/?p=1756 Mit der Direktive ErrorDocument können wir dem Apachen sagen, welche Datei oder Nachricht er bei welchem Statuscode ausgeben soll.

ErrorDocument 403 /403.php
ErrorDocument 401 /401.php
ErrorDocument 410 "<h1>Wech! Pech!</h1>"

Aber wie testen wir die? Den Status 404 können wir einfach durch eine falsche Adresse auslösen; 401 kommt aber erst, wenn wir an einer Authentifizierung gescheitert sind. Ganz bestimmt wollen wir nicht für jeden Fehler einen separaten Test bauen, das dauert viel zu lange.

Die Antwort: mit mod_rewrite.

RewriteCond %{QUERY_STRING} ^status=401$
RewriteRule ^ - [L,R=401]
RewriteCond %{QUERY_STRING} ^status=403$
RewriteRule ^ - [L,R=403]
RewriteCond %{QUERY_STRING} ^status=404$
RewriteRule ^ - [L,R=404]
RewriteCond %{QUERY_STRING} ^status=410$
RewriteRule ^ - [L,R=410]
RewriteCond %{QUERY_STRING} ^status=500$
RewriteRule ^ - [L,R=500]



Rufen wir jetzt eine beliebige Adresse auf und hängen den gewünschten Statuscode an, so liefert der Server brav unsere Fehlerseite.

• example.com/?status=403 gibt uns also die 403.php,
• example.com/?status=410 den Text Wech! Pech! und
• example.com/?status=500 den Serverfehler.

Mit zwei kleinen Bookmarklets, die wir als Lesezeichen speichern, können wir jetzt fröhlich unsere Testcodes abklettern:

Letzte Ziffer + 1 · Letzte Ziffer - 1

Wenn alles so aussieht wie gewünscht, sollten wir die Regeln natürlich wieder entfernen. Es genügt völlig, wenn nur wir testen.

Weitere Lektüre

• Logfiles analysieren
• WordPress und .htaccess: Request säubern
• Zugriff verboten: Wie man Skripte gegen HTTP-Aufrufe sperrt
• Authentifizierung mit PHP und UTF-8
]]> http://toscho.de/2010/apache-fehlerseiten-testen/feed/ 2