WordPress 3.5: Ungenutzte Grafiken entfernt, mehr CSS3 Farbverläufe

Zusammen mit Helen, Scott und Andrew haben wir die letzten Tage an einen Punkt für WordPress 3.5 gearbeitet: Ungenutzte Grafiken, die seit Versionen mit geschleppt werden, entfernen und die vermehrte Verwendung von CSS3 Farbverläufen (Gradients). Dieser Punkt ist nun abgehakt.

Warum dieser Schritt? Der Punkt der ungenutzten Grafiken sollte klar sein. Warum mehr einpacken, als man braucht? Das WordPress Paket ist damit um ein paar Bytes geschrumpft.

Die Liste der entfernen Grafiken ist lang. Plugin Autoren sollten deswegen auch mal kurz draufschauen, ob sie nicht eine der Grafiken derzeit nutzen.
Wenn doch sollte gegebenenfalls eine Kopie das Plugin eingebunden werden. Die Liste:

  • wp-admin/images/archive-link.png
  • wp-admin/images/blue-grad.png
  • wp-admin/images/button-grad-active.png
  • wp-admin/images/button-grad.png
  • wp-admin/images/ed-bg-vs.gif
  • wp-admin/images/ed-bg.gif
  • wp-admin/images/fade-butt.png
  • wp-admin/images/fav-arrow-rtl.gif
  • wp-admin/images/fav-arrow.gif
  • wp-admin/images/fav-vs.png
  • wp-admin/images/fav.png
  • wp-admin/images/gray-grad.png
  • wp-admin/images/loading-publish.gif
  • wp-admin/images/logo-ghost.png
  • wp-admin/images/logo.gif
  • wp-admin/images/menu-arrow-frame-rtl.png
  • wp-admin/images/menu-arrow-frame.png
  • wp-admin/images/menu-arrows.gif
  • wp-admin/images/menu-bits-rtl-vs.gif
  • wp-admin/images/menu-bits-rtl.gif
  • wp-admin/images/menu-bits-vs.gif
  • wp-admin/images/menu-bits.gif
  • wp-admin/images/menu-dark-rtl-vs.gif
  • wp-admin/images/menu-dark-rtl.gif
  • wp-admin/images/menu-dark-vs.gif
  • wp-admin/images/menu-dark.gif
  • wp-admin/images/required.gif
  • wp-admin/images/screen-options-toggle-vs.gif
  • wp-admin/images/screen-options-toggle.gif
  • wp-admin/images/toggle-arrow-rtl.gif
  • wp-admin/images/toggle-arrow.gif
  • wp-admin/images/upload-classic.png
  • wp-admin/images/upload-fresh.png
  • wp-admin/images/white-grad-active.png
  • wp-admin/images/white-grad.png
  • wp-admin/images/widgets-arrow-vs.gif
  • wp-admin/images/widgets-arrow.gif
  • wp-includes/images/upload.png

CSS3 Gradients

Die CSS3 Farbverläufe sind meiner Meinung nach eine positive Neuerung in CSS3.
Es erspart die lästige Erstellung von zusätzlichen Grafiken, schont die Bandbreite und reduziert die Anzahl der HTTP-Anfragen.

Und genau diese Performance-Steigerung ist der Grund dafür, dass WordPress 3.5 nun vermehrt CSS3 Farbverläufe nutzt.

Um die Umsetzung einheitlich zu gestalten, haben wir uns dafür noch eine kleine Syntax überlegt. Vielleicht kann der Eine oder Andere diese für sein nächstes Projekt gut gebrauchen.

.grad-to-top {	
	background: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(top, #fff, #000);
	background-image:    -moz-linear-gradient(top, #fff, #000);
	background-image:      -o-linear-gradient(top, #fff, #000);
	background-image: linear-gradient(to bottom, #fff, #000);
}

.grad-to-bottom {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000));
	background-image: -webkit-linear-gradient(bottom, #fff, #000);
	background-image:    -moz-linear-gradient(bottom, #fff, #000);
	background-image:      -o-linear-gradient(bottom, #fff, #000);
	background-image: linear-gradient(to top, #fff, #000);
}

.grad-to-bottom-with-color-stops {	
	background: #fff;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #000));
	background-image: -webkit-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:    -moz-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image:      -o-linear-gradient(bottom, #fff 0%, #000 100%);
	background-image: linear-gradient(to top, #fff 0%, #000 100%);
}

Unterstützt werden mit der Methode die Browser Firefox, Opera, Safari, Chrome und Internet Explorer 10.
(Link zur jsFiddle Demo.)

Zum Thema

Wohin mit den WordPress Codeschnipsel?

Da hat man mal wieder einen hilfreichen WordPress Codeschnipsel gefunden und stellt sich die Frage, wohin damit jetzt eigentlich?

schnipsel-image

Berechtigte Frage, denn es gibt viele Möglichkeiten. In diesem Artikel möchte ich auf 3 Varianten eingehen und kurz ihre Vor- bzw. Nachteile darstellen.

Variante 1: functions.php des Themes nutzen

Diese Variante ist wohl die weit Verbreiteste.
Codeschnipsel kopieren, functions.php des aktiven Themes öffen, Schnipsel an das Ende kopieren, speichern, fertig. Keine große Erklärung nötig; Schnelligkeit und Einfachheit sind somit die Vorteile.

Demgegenüber stehen allerdings ein paar Nachteile:
Wie dem folgendem Schnipsel aus der wp-settings.php zu entnehmen ist, wird die functions.php nicht immer geladen, immer dann nicht, wenn WP_INSTALLING definiert ist.

// Load the functions for the active theme, for both parent and child theme if applicable.
if ( ! defined( 'WP_INSTALLING' ) || 'wp-activate.php' === $pagenow ) {
	if ( TEMPLATEPATH !== STYLESHEETPATH && file_exists( STYLESHEETPATH . '/functions.php' ) )
		include( STYLESHEETPATH . '/functions.php' );
	if ( file_exists( TEMPLATEPATH . '/functions.php' ) )
		include( TEMPLATEPATH . '/functions.php' );
}

Bei mehreren Schnipseln in der functions.php kann auch schnell die Übersicht verloren gehen, außerdem könnten bei einer Aktualisierung des Themes die Daten wieder verloren gehen. Stichwort Child Themes.

Variante 2: Ein Must-Use Plugin nutzen

Ein Must-Use Plugin? MU Plugins, in der deutschen Übersetzung Obligatorisch, sind PHP Dateien im /wp-content/mu-plugins Verzeichnis, die automatisch geladen werden.

Die Codeschnipsel können somit entweder jeweils in eine Datei oder alle direkt in einer Datei abgespeichert werden.
Diese Art von Plugins braucht übrigens auch nicht den üblichen File Header.

Der Vorteil liegt hierbei also bei der Organisation bzw. besseren Übersicht.
Ein weiterer Vorteil gegenüber der vorherigen (und auch nächsten) Variante ist, dass die MU Plugins früh geladen werden.

Die MU Plugins werden grundsätzlich immer geladen, heißt, auch bei einer Multisite Installation mit mehreren Blogs. Möchte man einen Codeschnipsel nur für einen Blog nutzen, so muss die jeweilige Blog ID abgefragt werden, oder verwendet die nächste Variante.

Variante 3: Ein simples, seitenspezifisches Plugin nutzen

Diese Variante hat vor kurzem Samuel Wood aka Otto in seinem Blog unter „Creating a Site-Specific Snippets Plugin“ veröffentlicht.

Hiebei wird ein einfaches Plugin wie folgt angelegt:

  1. Erstelle zunächst ein neues Verzeichnis im Plugin Verzeichnis, zum Beispiel /wp-content/plugins/example.de.
  2. Erstelle in dem neuen Verzeichnis eine leere PHP Datei, der Dateiname ist beliebig.
  3. Danach benötigt das Plugin einen File Header:
<?php
/*
Plugin Name: Plugin für example.de
Description: Codeschnipsel für example.de
*/

In diesem Plugin können jetzt die Codeschnipsel abgelegt werden. Entweder ein Plugin für alle oder für jeden Schnipsel ein Plugin, was den Vorteil mit sich bringt, dass sich die einzelnen Schnipsel/Plugins später einfach deaktivieren lassen.

Das waren drei verschiedene Varianten, wie man seine Codeschnipsel in WordPress integrieren kann.
Im Endeffekt muss nun jeder selbst entscheiden, so wie er es persönlich am Besten befindet.
Aber vielleicht gibt es ja noch andere Varianten, diese können natürlich gerne in den Kommentaren mitgeteilt werden.