Irgendwie hatte ich schon länger mit den Hooks für wp_enqueue_style bzw. wp_enqueue_script herumexperimentiert, um die dort in die Warteschlange gestellten CSS- bzw. JavaScript-Dateien abzufangen und mit Hilfe von minify verkleinert auszugeben.

Sicherlich gibt es dafür schon ein fertiges Plugin, nur gefällt mir Methode von WP Minify die CSS- bzw. JavaScript-Dateien via regulärer Ausdrücke herauszufiltern irgendwie nicht so ganz und so habe ich nun eine erste (und zumindest für CSS-Dateien) lauffähige Version hier im Blog im Einsatz, die auf die Warteschlange zurückgreift. Wenn die weiteren Tests im produktiven Einsatz erfolgreich verlaufen, ich noch den einen oder anderen „Bug“ eliminiert habe und das Ganze auch noch für JavaScript-Dateien funktioniert, gibts vll. bald einen Patch für WP Minify oder ein neues Plugin von mir. Wobei, insgesamt bin ich auch von meiner Methode noch nicht so ganz überzeugt…

Ergebnis in meinem Blog: Statt 7 nur noch eine CSS-Datei, und auch die Größe ist von 34,6KB auf 18,5KB gesunken.

Schon vor längerer Zeit wurde bei WordPress die Funktion „wp_enqueue_style“ eingeführt, und von den Plugin/Theme-Entwicklern (inkl. mir) meist sträflich vernachlässigt. Mit WordPress 2.8 wurden Verbesserungen bzgl. der Einbindung von JavaScript bzw. CSS-Dateien eingeführt, so können nun (angeblich/ich konnte es noch nicht verifizieren, da dies nicht wirklich dokumentiert ist) die Dateien zusammengefasst/gepackt werden, was der Ladezeit der eigenen Seite zu Gute kommen würde, auch gibt es einen neuen Hook „wp_enqueue_scripts“, dieser ist nur beim Frontend (für den Adminbereich gab es schon einen passenden Hook) aktiv und eignet sich – wie der Name schon suggeriert – perfekt fürs Einbinden von JS/CSS-Dateien.

Aufgrund der Tatsache, dass der neue Hook erst ab WP 2.8 zur Verfügung steht, wird bei TinyCode die CSS-Datei bei Versionen < 2.8 wie bisher eingebunden, ab 2.8 wird die Warteschlange benutzt (um zumindest in Zukunft von der Vorteilen profitieren zu können).

Ein paar Hintergrundinformationen zum Laden von JavaScript/CSS-Dateien via Warteschlange gibt es hier (inkl. der Erklärung wie man JS-Dateien nun auch im Footer laden kann).

wp_enqueue_scripts

Da es seit kurzer Zeit bei meinem „Gallery Widget“ auch Shortcodes gibt, möchte ich hier mal ein „Praxis“-Beispiel zeigen. Möchte man z.B. auf einer Seite oder in einem Beitag 9 zufällige Bilder anzeigen, und diese automatisch auf dem vorhandenen Platz in mehreren Zeilen/Spalten anordnen, so bietet sich folgende vorgehensweise an.

1. Einfügen des Shortcodes + Div (via HTML-Modus des Editors) in der Seite/Beitrag:

<div class=“testClass“>
[ getGWImages max=9 order=random linkclass=’testClass‘ ]
</div>

2. Erweitern der CSS-Datei des verwendeten Themes:

/* TestClass */
.testClass {
overflow: hidden !important;
padding: 10px 5px !important;
}
.testClass ul {
float: left !important;
}
.testClass li {
list-style-type: none !important;
display: inline !important;
padding: 5px !important;
float: left !important;
margin: 5px !important;
width: 150px !important; /* Groesse der Vorschaubilder */
height: 150px !important; /* Groesse der Vorschaubilder */
}
.testClass li a img, .testClass li a:visited img {
border: solid 1px #fff !important;
}
.testClass li a:hover img {
border: solid 1px #000 !important;
}

Die Ergänzung um „!important“ ist nur dann wichtig, wenn schon andere Formatierungen vorgenommen wurden, die mit diesen Einstellungen nun zwingend „überschrieben“ werden.

Das wars dann auch schon. Ich überlege derzeit, ob ich für den CSS-Teil nicht eine neue Funktion im Plugin einbaue, damit das CSS innerhalb des Adminbereiches verändert werden kann und unabhängig von einer händischen Änderung der CSS-Datei möglich ist. Meine vorherige Überlegung weiterer Optionen zum Aufteilen der Bilder auf mehrere Spalten/Zeilen werde ich ersteinmal nicht weiterverfolgen, die CSS-Variante ist meiner Meinung nach die geschicktere.

Es wurde auch langsam Zeit, das Design aus dem Jahre 2000/2001 war einfach nicht mehr Zeitgemäss und auch das CMS (MGS Game Site, eine Eigenentwicklung) ist in die Jahre gekommen und so gab es gestern einen „Restart“ der Portalseite in „lupenreinem“ CSS-Design, allerdings nur oberflächlich betrachtet. Firefox hat am Design nichts auszusetzen, allerdings gibt es dennoch ein paar kleinere Fehler (z.B. target=“_blank“, oder der nicht passende Adsense/Affilinet-Code), was der „Validator des W3C auch zu recht bemängelt“. Nichtsdestotrotz wünsche ich viel Spass beim Entdecken des neuen unrealEXTREME.de.