In den letzten Tagen nach Erscheinen der neuen WordPress-Version häuften sich in den Blogs die Artikel zum Thema Speichererhöhung in Verbindung mit der Fehlermeldung

Fatal error: Allowed memory size of … bytes exhausted …

WordPress Deutschland hat dazu am 16. Juni 2009 eine gute Erklärung in den FAQ veröffentlicht. Besonders der Trick mit der Sprachdatei ist interessant (senkt bei mir den Speicherverbrauch um 13%).
Am gleichen Tag wurde dazu ebenfalls ein kleiner Beitrag auf bueltge.de veröffentlicht.
Beide weisen auf das Plugin „WP-Memory-Usage“ von Alex Rabe hin, das

• die Version
• den verfübaren Speicher
• sowie den aktuellen Speicherbedarf der WordPress-Installation

anzeigt.
Dieses Plugin ermittelt mit den PHP-Funktionen memory_get_usage() den aktuellen Speicherverbrauch und mit ini_get(’memory_limit’) die Lokal zugewiesene Speichergröße.

An dieser Stelle möchte ich Ihnen gerne einen tieferen Einblick in die Materie bieten.

Der Arbeitspeicher (memory_limit) für die einzelnen Hosts auf dem Webserver wird an 2 Stellen festgelegt. Die erste allumfassende Einstellung erfolgt durch den Webhoster in der php.ini.
In dieser wichtigen Konfigurationsdatei sind sämtliche Einstellungen für den PHP-Server hinterlegt. Verständlicherweise unterbinden Web-Hoster den Zugriff auf diese Datei, da sich viele Benutzer einen Server teilen. Mietet man sich einen sogenannten Root-Server sieht das natürlich anders aus.
Dort wird (unter vielen anderen Einstellungen) der memory_limit eingestellt, welcher dann als sogenannter master value für den gesamten Server und den darauf befindlichen einzelnen Hosts die maximal zur Verfügung stehende Speichergröße für PHP-Scripte vorgibt.

Dieser Wert bzw. die gesamte php.ini kann mit der PHP-Funktion phpinfo() ausgelesen werden. Wenn Sie das gerne machen möchten, dann führen Sie folgende Schritte aus:

• Legen Sie im Backend-Bereich von Wordpress eine neue Seite mit dem Titel Backend und einem kurzen Text an
• Stellen Sie die Sichtbarkeit rechts oben in der “Veröffentlichen-Box” auf Privat (dadurch kann die Seite erstens nur von Ihnen und zweitens nur wenn Sie eingeloggt sind aufgerufen werden. Die php.ini sollte aus Sicherheitsgründen nur von Ihnen einsehbar sein)
• Fügen Sie nach dem Speichern der Seite folgendes in die page.php unterhalb des “Loop” Ihres Theme-Ordners ein:

   /* .../wp-content/themes/ihr_theme/page.php */
  <?php
  if(is_page('backend')){
  phpinfo();
  }
  ?>
   /* Speichern nicht vergessen!
  Anmerkung: Anstatt die page.php zu verändern,
  kann diese auch kopiert und umbenannt werden
  (backend.php).
  Diese kann dann als Template beim Neuanlegen
  der Seite ausgewählt werden.
  Dadurch halten Sie die page.php "sauber"
  und können in Zukunft noch weitere php-Scripte
  einfügen ...*/
  

• Rufen Sie nun die zuvor angelegte Seite auf, in dem Sie deren Permalink (z.B. http://ihre_domain/backend) in die Adresszeile Ihres Browser eingeben. Dazu müssen Sie sich wie schon erwähnt vorher eingeloggt haben (der Browser speichert das als Cookie ab).

Nun sollte die Seite mit der gesamten php.ini angezeigt werden. Suchen Sie dort (STRG+F) nach memory_limit. Es werden 3 Spalten angezeigt:

• Directive –> gibt den Namen an
• Local Value –> gibt den lokal verfügbaren maximalen Speicher an (… der Ihrer WordPress-Installation in Ihrem Host-Verzeichnis zur Verfügung steht)
• Master Value –> gibt den durch Ihren Webhoster freigegebenen bzw. vorgegebenen maximalen Speicher an (dieser Wert gildet auf dem gesamten Server für alle Hosts)

Somit wären wir auch schon bei der zweiten Einstellungsmöglichkeit, dem local value. Local value … master value? Etwas verwirrend, oder?! Ging mir zuerst genauso. Vor allem das Zusammenspiel bzw. die Abhängigkeit brachte mich etwas ins Grübeln.

Wenn der Webhoster das maximale Speicherlimit für alle Hosts auf dem Server schon durch den master value in der php.ini festgelegt hat (auf die ich keinen Zugriff habe), kann ich diesen Wert etwa Lokal in meinem eigenen Verzeichnis hochschrauben und mir so mehr Speicher zuschieben, als alle anderen zur Verfügung haben?

Richtig, genau so ist es!

Aber nür, wenn der Webhoster das auch zuläßt.
Dazu gibt es verschiedene Möglichkeiten. Eine wäre, in der wp-config.php die globale Variable WP_MEMORY_LIMIT neu zu setzen und ihr einen Wert zuzuweisen, der höher liegt als die Grundeinstellung von 32 MB (definiert in der wp-settings.php).

<?php
...
define('WP_MEMORY_LIMIT', '64M');
...
?>

Wobei die 65 MB nur ein Beispiel sind, ich konnte den Wert bei mir auch höher schrauben, …

… was mich etwas stutzig machte. Also habe ich mal bei meinem Webhoster nachgefragt und bekam folgende Antwort, die ich nur in Auszügen veröffentliche:

Hallo,

erst einmal möchte ich Ihnen mitteilen, dass ich bisher sehr zufrieden bin.
Und nun eine kleine Frage:
Ist es von Ihnen gewollt, dass der ‘memory_limit’ in der ‘php.ini’ lokal per htaccess oder ini_set() überschrieben werden kann?

Gruß
Jörg Mathuszczyk

Darauf kam folgende Antwort:

Hallo Herr Mathuszczyk,

vielen Dank für Ihre Anfrage.

Dies ist gewollt, da einige Scripte dies benötigen. Wenn sich dadurch jedoch feststellt, das besagter Kunde damit den Server überlastet müssen wir einschreiten.

Bei weiteren Fragen stehen wir Ihnen gern zur Verfügung.

…

An dieser Stelle noch mal vielen Dank an den Support für die (sehr) schnelle Antwort.

Kommen wir nun zu einer weiteren Möglichkeit, den memory_limit hochzusetzen.
Dazu benutzen wir die PHP-Funktion ini_set() und fügen diese an Stelle der zuvor genannten WP_MEMORY_LIMIT in die wp-config.php ein.

<?php
...
ini_set('memory_limit', '65M');
...
?>

Auch dies funktionierte bei mir ohne Probleme. Ist auch logisch, denn beim Setzen von WP_MEMORY_LIMIT wird haargenau die gleiche Funktion benutzt, um den memory_limit festzulegen. Dies geschieht per Zuweisung in der wp-settings.php.

<?php
/**
 * Used to setup and fix common variables and include
 * the WordPress procedural and class library.
 *
 * You should not have to change this file and allows
 * for some configuration in wp-config.php.
 *
 * @package WordPress
 */

if ( !defined('WP_MEMORY_LIMIT') )
	define('WP_MEMORY_LIMIT', '32M');

if ( function_exists('memory_get_usage') && ( (int) @ini_get('memory_limit') < abs(intval(WP_MEMORY_LIMIT)) ) )
	@ini_set('memory_limit', WP_MEMORY_LIMIT);

 ...

Eine dritte Möglichkeit ermöglicht das Speicherlimit in der .htacces-Datei festzulegen, indem dort folgendes eingefügt wird:

php_value memory_limit 65M

# BEGIN WordPress

RewriteEngine On
...

Dieser Weg war bei mir ebenfalls möglich, muss aber wiederum durch den jeweiligen Webhoster zugelassen werden.

Auch wenn es verlockend klingt, den Wert gleich um ein vielfaches hochzusetzen, rate ich davon dringend ab. Ein schlecht programmiertes oder fehlerhaftes Script (Plugin, …) könnte so den gesamten zur Verfügung stehenden Arbeitsspeicher “in Beschlag nehmen”, was den gesamten Server beinträchtigen würde. Aus diesem Grund empfehle ich einen eher kleinen Wert mit etwas Spielraum nach oben (65 MB sollten bei einem WordPress-Blog dicke ausreichen).
Ansonsten würde ich nach Plugins Ausschau halten, die “mächtig Hunger haben”. Eine schnelle Senkung kann durch die oben bereits angesprochene Deaktivierung der deutschen Sprachdatei in der wp-config.php erzielt werden.

define ('WPLANG', 'de_DE');
 /* hier 'de_DE' entfernen */
define ('WPLANG', '');

Durch diese Maßnahme wird das Backend von WordPress zwar wieder in Englisch angezeigt (Grundeinstellung), senkt aber den Ressourcenverbrauch um einiges. Wenn Sie nicht erst seit kurzem mit WordPress arbeiten, sollte das nicht weiter stören.

Bietet Ihr Webhoster von Haus aus nur wenig Arbeitspeicher und das Limit kann auch nicht lokal durch die genannten Maßnahmen erhöht werden, wäre ein Wechsel anzuraten. Dadurch treten auch in Zukunft solche Probleme gar nicht erst auf.

Auf vielen WordPress-Blocks befindet sich im Kommentarbereich eine Zeile mit Smileys.

…

Durch Anklicken können diese Smileys dann schnell und einfach in einen Kommentar eingebunden werden. So etwas wollte ich meinen Besuchern natürlich auch bieten und habe für Euch etwas recherchiert. Folgender Javascript-Block, den ich noch XHTML-Strict validiert habe, muss in Eurer comments.php unter (oder über) der <textarea></textarea> eingefügt werden.

<div class="smileys">
  <script type="text/javascript">
  /*<![CDATA[*/
    function SJB_appendSmiley(text) {
        var comment=document.getElementById('comment');
        comment.value=comment.value+' '+text;
    }

document.write('<a href="javascript:SJB_appendSmiley(\':wink:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_wink.gif" alt=":wink:" class="wp-smiley" title=":wink:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_neutral.gif" alt=":-|" class="wp-smiley" title=":-|" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-x\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mad.gif" alt=":-x" class="wp-smiley" title=":-x" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':twisted:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_twisted.gif" alt=":twisted:" class="wp-smiley" title=":twisted:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" title=":)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8-O\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_eek.gif" alt="8-O" class="wp-smiley" title="8-O" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':(\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" title=":(" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':roll:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_rolleyes.gif" alt=":roll:" class="wp-smiley" title=":roll:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-P\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_razz.gif" alt=":-P" class="wp-smiley" title=":-P" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':oops:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_redface.gif" alt=":oops:" class="wp-smiley" title=":oops:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-o\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_surprised.gif" alt=":-o" class="wp-smiley" title=":-o" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':mrgreen:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mrgreen.gif" alt=":mrgreen:" class="wp-smiley" title=":mrgreen:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':lol:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_lol.gif" alt=":lol:" class="wp-smiley" title=":lol:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':idea:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_idea.gif" alt=":idea:" class="wp-smiley" title=":idea:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-D\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_biggrin.gif" alt=":-D" class="wp-smiley" title=":-D" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':evil:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_evil.gif" alt=":evil:" class="wp-smiley" title=":evil:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':cry:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cry.gif" alt=":cry:" class="wp-smiley" title=":cry:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley" title="8)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':arrow:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_arrow.gif" alt=":arrow:" class="wp-smiley" title=":arrow:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-?\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_confused.gif" alt=":-?" class="wp-smiley" title=":-?" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':?:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_question.gif" alt=":?:" class="wp-smiley" title=":?:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':!:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');
document.write('</a> ');
/*]]>*/
</script>

<noscript><p>Wenn du Javascript aktiviert hättest, würden hier klickbare Smileys stehen <br /> You could see clickable smiley faces here if you had JavaScript activated.</p></noscript></div>

Über das div mit der Klassenbezeichnung (class=”smileys”) könnt Ihr die Zeile in Eurem Stylesheet positionieren (falls gewünscht).

Der Pfad zu jedem einzelnen Smiley-Bild muss noch durch Eure eigene Domain ersetzt werden.

document.write('<img src="http://deine_domain/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');

Wenn Ihr das nicht händig machen wollt, empfiehlt sich die Bearbeitung in einem Editor. Notepad++ bietet für solche Vorgänge unter Suche (STR+F) die Option Ersetzen.
Damit lassen sich auch in größeren Scripten einzelne Zeichen schnell und problemlos durch andere austauschen.

In allen Zeilen des beginnenen a-Tags müssen zudem die Hochkommata escaped werden.

document.write('<a href="javascript:SJB_appendSmiley(\' ... \')">');

Die Smileys (wie auch am Pfad erkennbar) befinden sich in dem Ordner …/wp-includes/images/smilies/…, der direkt im Root-Verzeichnis (1. Ebene) Eurer WordPress-Installation liegt. Werft dort einfach mal einen Blick hinein.
Den dort könnt Ihr auch weitere bzw. andere Smilies einfügen. Dazu einfach etwas im Netz stöbern. Eventuell kreiert jemand ja auch einen Satz eigener Smileys und stellt diese dann anderen zur Verfügung.

Sobald Ihr dort eigene Smileys hinzugefügt habt, müssen diese dem WordPress-System noch “bekannt” gemacht werden:

• Öffnet dazu bitte ebenfalls im wp-includes-Ordner die functions.php
• Drückt dort die Tastenkombination “STRG+F”, so dass sich das “Suchen”-Fenster öffnet und gebt dort $wpsmiliestrans = array ein
• Dadurch gelangt Ihr zu einem Array, in dem allen einzelnen Smiley-Images (aus dem zuvor angesprochenen smilie-Ordner) ein individueller Text zugeordnet wird.

  

• Der gleiche Text wird beim Anklicken eines Smileys an die Funktion SJB_appendSmiley übergeben und in den Kommentarbereich eingefügt.
  
  

  document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
  

• Wordpress tauscht diesen Text dann durch das jeweilige im $wpsmiliestrans-Array zugewiesene Smiley aus
• Für jeden Eurer eigenen Smileys, die Ihr zuvor im smilie-Odner abgespeichert habt, legt Ihr hier nun nach dem gleichen Schema eine eigene Zeile an:
  
  

  ...
   ':neuer_smiley:' => 'neuer_smiley.gif',
  ':neuer_smiley2:' => 'neuer_smiley2.gif',
  ':neuer_smiley3:' => 'neuer_smiley3.gif',
  ...
  

• Der Javascript-Block in der comments.php muss natürlich um jedes neu hinzugefügte Smiley erweitert werden:
  
  

  document.write('<a href="javascript:SJB_appendSmiley(\':neuer_smiley:\')">');
  document.write('<img src="http://eure_domain/wp-includes/images/smilies/neuer_smilie.gif" alt=":-x" class="wp-smiley" title=":neuer_smilie:" />');
  document.write('</a> ');
  

Jetzt sollte klar geworden sein, wie es funktioniert.

Mich persönlich sprechen diese ‘manto-smileys’ besonders an, die nur noch mit GIMP (oder Photoshop) auf eine akzeptable Größe reduziert werden müßten.
Als ich diese das erste mal gesehen habe, dachte ich nur:”Wie geil ist das denn!”. Allerdings sagt die Seite nichts über die Lizenzbestimmungen des chinesischen Designers aus …!

Web 2.0 ist in aller Munde. Nachrichten werden zwischen einzelnen Webseiten ausgetauscht (Stichwort Abonnementdienste wie RSS/Atom). Weblogs schießen wie Pilze aus den Boden. Dynamische Webseiten (DHTML) sowie DOM-Scripting sind in der heutigen Zeit zum Standard geworden. Menüs klappen auf, Texte werden eingeblendet, Seiteninhalte lassen sich einfach verschieben … überall bewegt sich etwas.

Es werden Techniken eingesetzt, die Web-Anwendungen wie Desktop-Anwendungen aussehen lassen (Stichwort Ajax). Rein statische Seiten fristen in den Weiten des Internet nur noch ein Schatten-Dasein.
Und wenn wir ehrlich sind, haben wir uns daran gewöhnt.

Wir erwarten, das Webprogrammierer -und Designer die Seiten so gestalten, das sie attraktiv und „usability“ daher kommen. Das Webseiten auch körperlich beeinträchtigten Menschen zugänglich sind (Stichwort Barrierefreiheit) und nach Möglichkeit in jedem Browser … zumindest einigermaßen … ähnlich aussehen.

Es können Videos und Fotos betrachtet, Musik gehört und Spiele gespielt werden. Animationen, erstellt mit Java, Flash, Javascript oder als GIF-Bild, lassen Webseiten „leben“ (wenn sie uns nicht gerade stören).

Und da ich von diesen Dingen einfach fasziniert bin, habe ich mich daran gesetzt, dem Stylesheet meines Blogs mit Hilfe von PHP ebenfalls etwas Dynamik einzuhauchen.

Anleitung dynamisches Stylesheet
Zuerst muss die Endung der normalen Stylesheet-Datei …

style.css

… durch …

style.css.php

… ersetzt werden.
Eingebunden wird die neue dynamische Stylesheet-Datei wie gewohnt im Head-Bereich der Seite:

<!DOCTYPE html PUBLIC …
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="pfad_zur_datei/style.css.php" />
  </head>
  <body>
  ...
  </body>
</html>

Nun wird im neuen Stylesheet innerhalb eines PHP-Blocks der Content-type angegeben, da der Server beim Parsen sonst davon ausgeht, dass es sich hierbei um eine gewöhnliche HTML-Datei handelt. Dazu wird im Kopf der css.php-Datei folgendes deklariert:

<?php
  header('Content-type: text/css');
   /*
    An dieser Stelle wird der Quellcode eingefügt.
    Mehr dazu später …
   */
?>

/* Begin Typography & Colors */

body {

	font-size: 62.5%; /* Resets 1em to 10px */

	font-family: Arial, Helvetica, Sans-Serif;

	background: #063164; 

	color: #999;

	text-align: center;

	}
…

Nun „weiß“ der Server Bescheid, gibt die PHP-Datei als CSS-Datei an den Browser und dieser kann die Datei anschließend richtig interpretieren.

Erklärung

<?php
 …
?>

Da mir diese Webseite neben dem Bloggen auch als „Bastelstube“ dient (siehe auch mein Kolophon), um Webtechniken anzuwenden, hatte ich mir überlegt, die Hintergrundfarbe beim ersten Aufruf der Seite zufällig aus einem Pool von Hintergrundgrafiken generieren zu lassen. Diese sind bereits als PNG-Dateien auf dem Webspace hinterlegt und werden über den Name eingebunden.

   bg_hellgruen.png
   bg_blau.png
   bg_beige.png
   ...

Dazu legte ich zunächst ein Array an, in das die Namen derjenigen Grafiken einfügte wurde, die später angezeigt werden sollen.

$farben = array('weiss', 'schwarz', 'blau', 'gruen',
        'beige', 'hellblau', 'hellgruen', 'rose',
        'sand', 'grau_gruen');

Aus diesem wird ein zufälliges ausgewählt

 $zufall = array_rand($farben, 1);/* ... die 1 kann bei einem
Wert auch weggelassen werden */
 $zufalls_farbe = $farben[$zufall];

und danach in einem switch-Kontrollblock die Textfarbe an die jeweilige Hintergrundfarbe angepasst, um einen ausreichenden Kontrast zu garantieren.

switch ($zufalls_farbe) {
    case 'weiss':
     $_SESSION['textcolor'] = '#222';
        break;
    case 'beige':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellblau':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'oliv':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'rose':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellgruen':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'sand':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'grau_gruen':
      $_SESSION['textcolor'] = '#222';
        break;
    default:
      $_SESSION['textcolor'] = '#aaa';
        break;
  }

Anstatt des switch-Kontrollblocks kann natürlich auch eine if-Abfrage eingesetzt werden. Ich habe dies lediglich auf diese Art gelöst, um wieder mal mit der switch-Syntax zu arbeiten. Hinsichtlich der Geschwindigkeit dürften sich beide Möglichkeiten (auch bei größeren Datenmengen) nicht wesentlich unterscheiden (unter Programmierern führt dieser Aspekt gern zu ausufernden Diskussionen –> kürzer, schneller …).

Um die einmal ausgewählte Hintergrundfarbe während des Besuchs beizubehalten, wird noch eine Session-Variable erstellt. In dieser wird beim ersten Einlesen der css.php-Datei ebenfalls die zufällig generierte Hintergrundfarbe gespeichert.

 $_SESSION['color'] = $zufalls_farbe;

Dies wurde für die Textfarbe bereits schon im switch realisiert.
Normalerweise legt der Browser die CSS- Datei (und noch einige andere Dateien, z.B. Grafiken) im eigenen Cache-Speicher ab und ein erneutes Einlesen ist bei Seitenwechsel nicht mehr nötig. Dadurch kann die Webseite nach dem ersten Aufruf schneller geladen werden.

Da dies aber nicht garantiert ist (was mir meine Erfahrungen auch bestätigen), wird bei jedem Einlesen überprüft, ob diese Session-Variable existiert. Sollte dies der Fall sein, erfolgt keine erneute Auswahl der Hintergrundfarbe, sondern es wird dann der gespeicherte Wert der Session-Variable verwendet. Dafür wird der gesamte Quellcode in eine Abfrage eingeschlossen, welche direkt überprüft, ob die Session-Variable bereits existiert.

if(!isset($_SESSION['color'])) {
...
}
/* Nur wenn die SESSION-Variable noch nicht (!)
existiert, wird eine neue Farbe ausgewählt
*/

Nun werden die gefüllten Variablen an den jeweiligen Stellen im normalen Stylesheet-Bereich eingefügt und mit dem echo-Befehl ausgegeben.

#header {
	background: transparent url('images/layout/bg_<?php
        if(isset($_SESSION['color'])) echo $_SESSION['color'];
        else echo 'bg_weiss'; ?>.png') repeat-y top center;
        /* Der else-Block dient nur als Beispiel
        und dürfte nicht ausgeführt werden*/
	}
...

#content {
	font-size: 1.35em;
        color:<?php if(isset($_SESSION['textcolor'])) echo $_SESSION['textcolor']; else echo '#222'; ?>;
	}
...

Durch diese Maßnahme bekommt jeder Besucher der Seite beim ersten Aufruf eine zufällige Hintergrundfarbe, die auch bei Seitenwechsel erhalten bleibt (es sei denn, es wird ein anderer Hintergrund über den Einstellungen-Button gewählt).

Aber anstatt der Hintergrundfarbe könnte auch der body-Hintergrund geändert werden. In dem PHP-Bereich kann das ganze Potenzial dieser Scriptsprache eingesetzt werden, um das Stylesheet den eigenen Bedürfnissen dynamisch anzupassen.
Auch eine Darstellung, welche an die jeweilige Tageszeit angepasst wird bzw. von dieser abhängig ist, kann so leicht realisiert werden (time-Funktion von PHP).

 /* H - Stunde im 24-Stunden-Format (00-23 ) */
if (date("H")>8 && date("H")<20){
$background = "#ffffff";
    $color = "#000000";
  } else {
    $background = "#000000";
    $color = "#ffffff";
  }

Doch es traten auch Probleme auf. Die Stylesheet-Anpassungen für die -Browser der Redmonder habe ich direkt im Stylesheet stehen und nicht wie sonst üblich über eine Browserweiche (Conditional Comments ) als zusätzliches Stylesheet eingebunden.
Die Separierung erfolgt über die “Holzhammer-Methode” mit dem !important-Hack:

/* Beispiel */
.navigation {
	display: block;
	text-align: center;
        /* 'Normale' Browser führen diese Zuweisung aus ... */
	margin-top: 10px !important;
        /* ... während der IE !important nicht kennt und diese
        Zuweisung interpretiert */
        margin-top:0px;
        /* Dies wird dann wieder von allen ausgeführt */
	margin-bottom: 60px;
	}

Diese Art, IE-Bugs zu beheben, sollte eigentlich nicht verwendet werden ( … um das Grund-Stylesheet sauber zu halten). Da ich jedoch bisher nicht viele Anpassungen vornehmen mußte, habe ich es auf diese (nicht besonders elegante Weise) gelöst.
Nach Umänderung meines Stylesheets zu einer PHP-CSS-Datei mit Content-Type-Deklaration wurde ich auch sofort bestraft und der Hack funktionierte aus mir unerklärlichen Gründen nicht mehr. Als Folge wurde meine Seite 3 Tage lang etwas “zerissen” im IE angezeigt, bis ich es als Firefox-Nutzer endlich gemerkt hatte. Dadurch wurde ich mal wieder daran erinnert, dass in der Programmierung umfangreiche Tests unabdingbar sind.
Nun hätte ich mein Grund-Stylesheet ändern und die IE-Anweisungen auslagern können. Ich entschied mich aber dafür, den PHP-Teil in eine separate Datei zu schreiben und zusätzlich in die Seite einzufügen. So können zukünftige weitere Schritte überschaubarer realisiert werden.

Ich hoffe, diese Einführung in dynamische Stylesheets war hilfreich für eigene Projekte.

Hier noch mal der gesamte Quellcode

<?php
session_start(); /* ... muss am Anfang eingefügt werden */
/* error_reporting(E_ALL)  und ini_set('display_errors', 'On') zur Fehlersuche */
error_reporting(E_ALL);
ini_set('display_errors', 'On');
header('Content-type: text/css');

/* Zufallshintergrund */
if(!isset($_SESSION['color'])) {

  $farben = array('weiss', 'schwarz', 'blau', 'gruen', 'beige', 'hellblau', 'hellgruen', 'rose', 'sand', 'grau_gruen');
  $zufall = array_rand($farben, 1);/* ... die 1 kann bei einem Wert auch weggelassen werden */
  $zufalls_farbe = $farben[$zufall];

  switch ($zufalls_farbe) {
    case 'weiss':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'beige':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellblau':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'oliv':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'rose':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'hellgruen':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'sand':
      $_SESSION['textcolor'] = '#222';
        break;
    case 'grau_gruen':
      $_SESSION['textcolor'] = '#222';
        break;
    default:
      $_SESSION['textcolor'] = '#ccc';
        break;
  }
  $_SESSION['color'] = $zufalls_farbe;
}
?>

#header {
	background: transparent url('images/layout/bg_<?php
             if(isset($_SESSION['color']))
                 echo $_SESSION['color'];
             else
                 echo 'bg_weiss'; ?>.png') repeat-y top center;
	}

#container_inside {
	background: transparent url('images/layout/bg_<?php
             if(isset($_SESSION['color']))
                 echo $_SESSION['color'];
             else
                 echo 'bg_weiss'; ?>.png') repeat-y top center;
	}

#content {
	font-size: 1.35em;
        color:<?php
            if(isset($_SESSION['textcolor']))
               echo $_SESSION['textcolor'];
            else
               echo '#222'; ?>;
	}

Im dritten Teil möchte ich Ihnen nun einen Scroll Top Link ohne Verwendung von jquery zeigen. Dies ist vor allem dann wichtig, wenn Sie sich mit der Programmierung beschäftigen und etwas hinter die Kulissen schauen wollen. Oder aber, Sie suchen lediglich eine „schlanke“ Möglichkeit für einen Scroll Top Link.

Natürlich kann ich hier nicht den Komfort bieten, wie dies ein ausgewachsenes Framework wie zum Beispiel jquery mit all seinen Funktionen ermöglicht. Aber das will ich auch gar nicht. Mein Anliegen beschränkt sich auf schlichten, funktionierenden und besonders schlanken Code, mit dem sich ein Scroll Top Link realisieren lässt (309 Byte).
Hierbei gehe ich wieder Schritt für Schritt vor, damit Sie mir auch folgen können, wenn Sie sich noch nicht so gut in der Programmierung auskennen.

1. Scroll Top Link modifizieren
Zunächst muss der Scroll Top Link in unserer Webseite modifiziert werden. Es reicht nun nicht mehr aus, diesem lediglich eine ID zuzuweisen und dann einfach über die click-Funktion von jquery zu „horchen“, ob dieser betätigt wurde. Wir erinnern uns …

...
$('a#top').click(function(){
...

Denn (richtig!), wir verwenden kein jquery mehr und müssen nun alles selber programmieren. Dazu benötigen wir zunächst einen so genannten event-Handler, mit dem auf ein Anwender-Ereignis, in unserem Fall der Klick auf den Scroll Top Link, eingegangen werden kann. Und dieser heißt, welch Zufall , onclick-Event-Handler.

(Anmerkung)

Dieses onclick-Ereigniss verbinden wir nun mit unserem Scroll Top Link:

 <a href='#' id='top' title='Nach oben' onclick='toTop()'> </a> 

Wenn nun der Benutzer auf dieses Element „klickt“, dann wird durch das onclick-Ereignis die Funktion toTop() angesprochen/ aufgerufen, die wir nun programmieren werden.

2. Scroll Top Funktion programmieren
In unserer Scroll Top Funktion müssen wir zunächst feststellen, ob sich unsere Webseite bereits am oberen Punkt oder aber weiter unten befindet. Um dies feststellen zu können, benutzen wir das pageYOffset-Objekt, welches die momentane vertikale Position unserer Seite beinhaltet. Wie immer kocht der Internet-Explorer der Redmonder sein eigenes Süppchen und dort lässt sich die vertikale Position mit document.body.scrollTop ermitteln.
Nachdem nun anhand der aktuellen Position festgestellt werden kann, ob gescrollt werden muss/ kann, kommt nun die Javascript-Funktion scrollBy() zum Einsatz.

/* Javascript-Funktion scrollBy() mit Parameter */ 
scrollBy(0, -20);

Dieser Funktion können Parameter übergeben werden, welche die Seite um eine angegebene Anzahl von Pixeln scrollen lässt. Dabei spricht der erste Parameter die x-Achse und der zweite Parameter die y-Achse unserer Webseite an.
Die x-Achse würde nun den Wert 0 erhalten, da wir ja nach oben scrollen wollen. Der y-Achse geben wir den Wert -20, so dass die Seite um 20 Pixel nach oben scrollt (sofern sie noch nicht oben angelangt ist).
Jetzt werden Sie sich eventuell fragen, warum nur 20 Pixel … ich möchte doch ganz nach oben. Das ist richtig, aber wir möchten einen Scroll-Effekt erzielen und nicht sofort oben ankommen. Dazu ist es nötig, immer wieder 20 Pixel nach oben zu scrollen, was letztendlich den Eindruck erzeugt, dass die Seite langsam nach oben gleitet. Dazu ist es wiederum nötig, dass sich die Funktion solange selber aufruft, bis das obere Ende unserer Webseite erreicht wurde. Betrachten wir dazu den nötigen Quellcode:

/*<![CDATA[*/
/* Unsere scrollTop-Funktion */
function toTop() {
/* Variable für die aktuelle Position deklarieren */
var seitenposition = 0;
/* Aktuelle Position ermitteln */
if (typeof window.pageYOffset != 'undefined') { /* Für normale Browser   ... */
   seitenposition = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined'
&& document.compatMode != 'BackCompat'){ /* ... und für den IE */
   seitenposition = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   seitenposition = document.body.scrollTop;
}

/* Wenn sich die Seite nicht oben befindet (Seitenposition größer 0) … */
if (seitenposition > 0) {
    scrollBy(0, -20); /* ... dann scrolle um 20 Pixel nach oben  … */
    setTimeout("toTop()", 5); /* ... ‘warte’ kurz und rufe die Funktion wieder auf ! */

 }
/*]]>*/

Achten Sie bitte da drauf, dass vor pageYOffset das oberste Objekt der Objektfamilie, “window”, mit aufgeführt wird. Selfhtml.org sagt hier zwar aus, dass dieses Objekt auch weg gelassen werden darf, …

window oder self können auch weggelassen werden.

… ich kann Ihnen aber versichern, dass dies zum Beispiel auf den IE7 nicht zutrifft (Fehler: ‘pageYOffset’ ist undefiniert).
Die einzelnen Werte für den Scroll-Schritt und die Wartezeit können Sie Ihren Vorstellungen anpassen.
Damit ist unsere selbstprogrammierte scrollTop-Funktion fertig und muss nur noch als Javascript-Datei in unsere Webseite integriert werden.


Wirklich fertig? Wenn Sie sich Teil 1 und Teil 2 durchgelesen haben, dann müsste Ihnen aufgefallen sein, dass ein wichtiger Schritt noch fehlt.
Genau! Um das „springen“ vor dem animierten „nach oben gleiten“ zu unterdrücken, müssen wir noch das href-Attribut unseres Scroll Top Links entfernen.
Hierfür bedarf es einer weiteren Funktion:

/*  Nodes/Attribute entfernen */
function removeAttribute() {
/* Wenn der ScrollTop Link vorhanden ist (HTML-Elementzugriff über id-Attribut) ... */
  if(document.getElementById('top')){
      /* ... dann speichere den Rückgabewert (Element-Objekt) in der Variablen d ... */
      var d = document.getElementById('top');
      /* ... schaue nach, ob das href-Attribute (bzw. das Attributknoten-Objekt) vorhanden ist ... */
      if(d.getAttributeNode('href')){
           /*  ... und wenn ja, speichere wiederum den Rückgabewert (des Attributknoten-Objekts) in der Variablen href … */
           var href = d.getAttributeNode('href');
           /* ... und entferne diesen Attributknoten von unserem Scroll Top Link (Element-Objekt) */
           d.removeAttributeNode(href);
      }
   }
}
/* Diese Funktion wird automatisch aufgerufen, sobald die gesamte Seite vollständig geladen wurde (window.onload)! */

window.onload=removeAttribute;

Durch diese Funktion wird über das DOM (Document Object Model) gezielt auf das href-Attribut unseres Scroll Top Links zugegriffen und dieses letztendlich entfernt ( … oder vielleicht besser gesagt, aus dem DOM-Baum ausgehängt. Denn im Quelltext ist es weiterhin vorhanden …).
Hier genauer auf das Document Object Model einzugehen, würde den Rahmen dieses Tutorials sprengen.

(Ich möchte sofort eine kurze und einfache Erklärung)

Dennoch möchte ich Ihnen eine kurze und einfache Erklärung liefern .
Betrachten Sie Ihre Webseite als einen Baum mit Stamm, den Ästen, den Blättern …!
Der Baum als Gesamtbild entspricht dabei dem obersten Objekt, dem window (das gesamte Browserfenster). Innerhalb unserer removeAttribut-Funktion könnte man das window-Objekt noch mit aufführen:

      var d = window.document.getElementById('scrolltop');

Dies ist aber an dieser Stelle nicht notwendig und kann weggelassen werden, da hier direkt das document-Objekt folgt. Dieses Ausgangsobjekt unseres Element-Baumes entspricht dem Stamm (Inhalt des Browserfensters), über den alle folgenden (HTML-) Elemente erreicht werden können.
Die einzelnen Elemente, Attribute und Eigenschaften einer Webseite können nun über entsprechende Funktionen (Methoden) angesprochen und verändert werden. Auf unser Baum-Beispiel bezogen würde das folgendermaßen aussehen:
Über unser Gesamtbild des Baumes (window) kann über den Stamm (document) und über die Äste (HTML-Elemente wie a, p, div, span, …) auf deren Blätter (href, title, alt, style, …) zugegriffen werden. Hierzu existieren verschieden Wege, um dies zu bewerkstelligen. Es kann über den Namen …

 ... name=’scrolltop’ ...
... document.getElementsByName(’scrolltop’)[0] ...

… die ID …

... id=’scrolltop’ ...
... document.getElementByID(’scrolltop’) ...

… oder eine Klasse …

... class=’scrolltop’ ...
... document.getElementsByClassName(’scrolltop’) ...

… in Verbindung mit dem so genannten Knotenpunkt …

... getAttributeNode('href') ...

… ein bestimmter Teil eines Elementes angesprochen werden.
Dazu „hangeln“ Sie sich praktisch von oben nach unten durch. Dafür ist es natürlich notwendig, die bereitstehenden Funktionen (Methoden) zu kennen. Sollte Ihr Interesse geweckt sein, dann finden Sie unter Javascript/DOM umfangreiche Informationen.

Aber anstatt das href-Attribut zu entfernen, gibt es noch eine einfachere Lösung. Und zwar indem wir unserem Scroll Top Link nach dem Aufruf der toTop-Funktion ein return false; anhängen.

 <a href='#' id='top' title='Nach oben' onclick='toTop(); return false';> </a> 

Dadurch wird das href-Attribut nicht mehr ausgeführt.
Es reicht also aus, unsere toTop-Funktion, wie schon in Scroll Top Link Teil1 beschrieben wurde, entweder direkt (CDATA nicht vergessen) oder als externe Javascript-Datei in den Header unserer Webseite einzufügen.
Nun haben sie drei Möglichkeiten, Ihre Webseite um einen Scroll Top Link zu erweitern.
Ich hoffe, dass Sie mir auf Grund der vielen Umwege nicht böse sind. Aber so erhalten Sie einen tieferen Einblick in das Thema.
Falls Ihnen die Tutorials Spaß bereitet haben und verständlich waren, würde ich mich über ein kurzes Feedback freuen.

Wie angekündigt nun der Scroll Top Link mit der jQuery.scrollTo-Funktion von Ariel Flesler (… hier noch mal die Demo-Seite) .

Hierzu laden wir uns zunächst die neueste Version (momentan scrollTo-1.4.2) besagter scrollTop-Funktion herunter.
Dann entpacken wir die gezippte Datei in einen beliebigen vorher erstellten Order auf unserem PC und schieben die nun verfügbare Javascript-Datei auf unseren Webspace. Bei lokal installiertem Webserver in das entsprechende Verzeichnis auf unserem Rechner … zum Beispiel beim xampp in “c:/xampp/htdocs/…/scrollto-1.4.2-min.js“.
Anschließend folgt fast die gleiche Prozedur, die schon im ersten Teil beschrieben wurde. Unter der bereits eingefügten jquery.js im Head-Bereich Ihrer Webseite binden wir zunächst die soeben heruntergeladene scrollTo.js ein.

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery.js -->
<script src=‘http://code.jquery.com/jquery-latest.js‘ type=‘text/javascript‘></script>

<!-- ... und die scrollTo.js -->
<script src=‘http://ihre_domain.de/wp-content/themes/ihr_theme/js/jquery.scrollTo-1.4.2-min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Anschließend öffnen wir wieder einen Editor unserer Wahl und erstellen eine Datei mit folgendem Inhalt:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */
/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(event){
        /* ... unterdrücke die normale Funktion des a-Tags  ... */
        event.preventDefault();
        /* ... und scrolle nach oben! */
        $.scrollTo( 0, 4000);
        /* ... hier wird jetzt anstatt der animate-Funktion
            aus dem ersten Teil die scrollTo-Funktion eingefügt */
   });
});
/*]]>*/

Diese speichern Sie dann wieder, wie in Teil 1 beschrieben, unter einem beliebigen Namen ab und ermöglichen den Zugriff, in dem Sie diese wiederum in Head-Bereich einbinden.

(Hinweis)

 /* ### MEINE JAVASCRIPT FUNKTIONEN ### */
 /* --- SCROLLTO --- */
$(document).ready(function(){
   $('a#top').click(function(event){
        event.preventDefault();
        $.scrollTo( 0, 4000);
   });
});
 /* --- SCROLLTO ENDE --- */

 /* --- WEITERE FUNKTION --- */
…
 /* --- WEITERE FUNKTION ENDE --- */

Wenn Sie den ersten Teil gelesen haben, dann werden Sie spätestens jetzt gemerkt haben, dass kein großer Unterschied zu diesem Scroll Top Link besteht. Nur dass bei diesem noch eine weitere Javascript-Datei herunter geladen und eingebunden werden muss.
Allerdings bietet die hier eingebundene scrollTo.js noch weitere Möglichkeiten zum animierten Scrollen, wie auf der Demo-Seite ersichtlich ist (hierfür ist die vollständige 8 KB-Version nötig).


Aber so schön diese auch anzusehen sind … mir ist der Sinn noch nicht so ganz klar geworden ist. Ein Einsatz wäre für mich eventuell bei einer Bildergallerie nützlich, um über ein Menü ein bestimmtes Bild anzusteuern.
Ein Unterschied besteht aber: Diese Scroll-Funktion passt sich der Seitenlänge an, wie ich beobachten konnte. Bei kurzen Seiten mit wenig Text wird langsamer gescrollt als bei längeren Seiten mit mehr Textinhalt, obwohl wie bei der animate-Funktion die Scroll-Geschwindigkeit festgelegt wurde.
Ich setze auf dieser Seite die hier vorgestellte Version ein, allerdings lässt sich die animate-Funktion mindestens genauso gut anpassen. Hierzu müssten lediglich einzelne animate-Funktionen gekoppelt werden. Die erste scrollt schnell bis zu einer vorgegebenen Stelle, zum Beispiel 300 Pixel unter dem oberen Rand. Anschließend folgt eine weitere animate-Funktion und scrollt etwas langsamer bis 200 Pixel unter dem oberen Rand usw.!

 /* Angepasstes Scrollen */
...
 $('html, body') .animate({scrollTop:300}, 2000).animate({scrollTop:200}, 2300).animate({scrollTop:100}, 2600).animate({scrollTop:0}, 3000);
...

Je näher ich mir das momentan anschaue, umso mehr gelange ich zu der Einsicht, nur noch die animate-Funktion einzusetzen und meinen Bedürfnissen anzupassen (wie dies bereits beim Videomodus geschehen ist).
Entscheiden Sie für sich selber, welche Möglichkeit Sie nutzen möchten!

Im folgenden dritten Teil zeige ich noch eine komplett eigenständig programmierte Version… ohne jquery und ohne die hier vorgestellte scrollTop.js!
Da ich persönlich noch weitere auf jquery basierende Funktionen auf meiner Seite implementiert habe, kommt dies für mich nicht in Betracht. Aber ich denke, dass der eine oder andere, der nur wenig Javascript auf seiner Seite einsetzt, seinen Nutzen daraus ziehen kann. Zudem lassen sich so einige KB sparen …!

Scroll Top Link (Teil 3)

Nachdem wir nun in der Einleitung zu diesem Tutorial das jquery-Framework eingebunden haben, erstellen wir als nächstes eine eigene Scroll Top Funktion, die auf der jquery-Funktion animate aufbaut.

Dazu öffnen wir zunächst eine neue Datei in einem Editor (zum Beispiel Notepad++) und kopieren folgenden Quellcode hinein:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */

/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(){
        /* ... entferne das href-Attribut ... */
        $(this).removeAttr('href');
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Der Quelltext dürfte sich durch die eingefügten Kommentare selbst erklären.
Das href-Attribut wird durch die removeAttr-Funktion entfernt, da die Seite sonst beim Betätigen des Scroll Top Links erst zum Top der Webseite springen würde, um dann anschließend (wieder unten beginnend) animiert nach oben zu scrollen. Sollte Javascript deaktiviert sein, wird das href-Attribut nicht entfernt und der Scroll Top Link funktioniert ebenfalls (ohne Animation) … sehr schön!

Anstatt das href-Attribut zu entfernen, kann man auch ein Klick-Ereignis anhängen.

Mit event.preventDefault() verhindert man die standardmäßige DOM-Ereignisaktion. Bei einem <a>-Tag mit href wäre das der normale Link Effekt, also das Weiterleiten zu einer anderen Seite.

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */
/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(event){
        /* ... unterdrücke die normale Funktion des a-Tags  ... */
        event.preventDefault();
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Sie sehen, in der Programmierung führen viele Wege nach Rom.

Übrigens, den Wert ’slow’ der animate-Funktion können Sie neben ‘middle’ oder ‘fast’ auch durch einen Zahlenwert ohne Hochkomma (Millisekunden, z.B. 5000) ersetzen und so die Scroll-Geschwindkeit Ihren Vorstellungen anpassen.

Diese Datei speichern Sie nun zum Beispiel als scrolltop.js ab und fügen diese ebenfalls in den Header Ihrer Seite unter der jquery.js ein (…).
Es besteht auch die Möglichkeit, den Quelltext direkt in den Head-Bereich einzufügen.

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery  -->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<!-- ScrollTop-Funktion -->
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
   $('a#top').click(function(){
        $(this).removeAttr('href');
        $('html, body'').animate({scrollTop:0},'slow')
   });
});
/*]]>*/
</script>
</head>
<body>
...

Das kann jedoch schnell unübersichtlich werden. Daher ist es anzuraten, alle Javascript-Dateien in einem eigenen Ordner unterzubringen.
Beachten Sie hierbei bitte, den Quellcode mit CDATA zu verpacken. Dem Validator wird dadurch mitgeteilt, dass es sich im CDATA-Tag um Text (Character Data) handelt, welcher nicht als XHTML anzusehen ist. Ältere Browser verstehen diesen Tag nicht, daher wird er einfach auskommentiert, was für den Validator wiederum keine Bedeutung hat.

Damit ist die erste Möglichkeit, einen animierten Scroll Top Link in die eigene Webseite einzufügen, abgeschlossen.
Noch mal die einzelnen Schritte:

• Den Scroll Top Link wie in der Einleitung im Fußbereich oder unter dem Inhalt platzieren
• Das jquery-Framework im Header der Webseite integrieren
• Unter vorigem Framework die erstellte ScrollTop-Funktion einfügen

Zum Schluss fügen Sie in Ihre CSS-Datei noch folgende Formatierung für unseren Scroll Top Link ein:

#top {
  cursor:pointer;
  margin:0;
  padding:3px;
  position:absolute;
  bottom:0;
  left:310px;
        /*oder 'right' , je nachdem, was Sie bevorzugen*/
 }

Die Werte für left oder right können Sie Ihren Bedürfnissen anpassen. Probieren Sie einfach selber etwas herum.
An dieser Stelle möchte ich noch erwähnen, das die animate-Funktion sehr viel mächtiger ist und es ermöglich, mehrere Eigenschaften auf einmal zu ändern (Sichtbarkeit, Rahmen, Farbe …). Der Bereich für die Einstellungen oder der Video-Modus auf dieser Seite sind ein gutes Beispiel dafür (nur verfügbar im IE8, Firefox und Opera bei aktiviertem Javascript!).

(Bei mir funktioniert es nicht!)

Scroll Top Link (Teil 2)

In diesem Tutorial möchte ich erklären, wie ein Scroll Top Link in die Webseite integriert werden kann.

Ein Scroll Top Link ermöglich es den Besuchern, nachdem sie die Seite fertig gelesen haben, bequem an den Seitenanfang zurück zu gelangen, ohne den Scrollbalken (oder die Nach-Oben-Taste) benutzen zu müssen. Dies gehört zum Usability und sollte auf keiner Seite fehlen, die viel Content und somit lange Seiten enthält. Dadurch wird dem Benutzer das Durchforsten der Webseite erleichert.

Dies kann auf 2 Arten realisiert werden. Bei der ersten springt die Seite direkt zum Anfang (Top) der Seite. Bei der zweiten Variante erfolgt dies animiert durch Javascript, dabei scrollt bzw. gleitet die Seite bis nach oben. Letzteres sieht elegant (smooth) aus und wird ihnen gefallen. Es erfordert jedoch aktiviertes Javascript im Browser.
Der Scroll Top Link in diesem Tutorial beinhaltet beide Möglichkeiten, funktioniert also mit (animiert ) wie auch ohne Javascript. Javascript-Funtionalitäten sollten stets eine Alternative bieten. Vor allem dann, wenn grundsätzliche Dinge wie zum Beispiel das Menü damit realisiert werden.

Da sich der Scroll-Top Link im unteren Bereich der Webseite befindet, bietet es sich an, diesen im Footer zu platzieren. Unter Wordpress wäre dieser in der (/wp-content/theme/dein_theme/) footer.php zu finden. Da in meiner Seite der Footer sehr schmall ist, habe ich den Scroll Top Link in der index.php nach den Loop gesetzt (… unter den Textbereich). Es besteht aber auch die Möglichkeit, den Link ständig im Blickwinkel (position:fixed) anzuzeigen. Dieser kann zum Beispiel automatisch eingeblendet werden, sobald der Benutzer beginnt nach unten zu scrollen.

Ob man sich für ersteres oder letzteres entscheidet, wird letztendlich durch die Zuweisungen im (Cascading) Stylesheet definiert. Dafür wird dem Link eine ID zugewiesen, über die er angesprochen werden kann.

<html>
<head>
<title>Scroll Top Link</title>
 </head>
<body>
<div id=“container“ >
	<div id=“header“>...</div>
	<div id=“navi“>...</div >
	<div id=“content“>...</div >
	<div id=“footer“>
        <a href=“#“ id=“top“ title=“Nach oben“ > </a> 
	</div>
</div>
</body>
</html>

Der so eingefügte Scroll Top Link wäre in dieser Variante bereits voll funktionsfähig. Es fehlt lediglich noch der Text (Nach oben) oder aber eine Grafik. Ein Beispiel dafür sieht man unten auf dieser Seite.
Im Internet finden sich teilweise Anleitungen, bei denen ein Anker im Header der Seite platziert wird:

<a name=“top“> </a>

Dieser wird dann über den Scroll Top Link angesprochen/ aufgerufen, um nach oben zu gelangen:

… <a href=“#top“ title=“Nach oben“ > </a> …

Oder der Header wird über die ID angeprochen:

… <a href=“#header“ title=“Nach oben“ > </a>  …

Eine weitere Lösung implementiert Javascript direkt im href-Attribut des a-Tags:

… <a href=“javascript:scroll(0,0)“ title=“Nach oben“ > </a> …

Welche Möglichkeit eingesetzt wird ist Geschmacksache. Die hier gezeigte Variante über href=“#“ ist wohl die einfachste. Letztere funktioniert nur bei aktiviertem Javascript und sollte vermieden werden.

Kommen wir nun nun zu unserer animierten Scroll Top Funktion.
Um diese zu realisieren, besteht die Möglichkeit, selbstständig etwas in Javascript zu programmieren oder aber ein Javascript-Framework einzusetzen. Neben Mootools, Script.aculo.us, Prototype, Dojo und anderen verweise ich hier auf jquery.

Dieses schlanke Framework hat sich etabliert und bietet eine große Anzahl unterschiedlichster Funktionen, um eine Webseite ansprechend gestalten zu können.
Um jquery nutzen zu können, muss das Framework zunächst in die Webseite integriert werden. Ich werde dies Schritt für Schritt erklären, damit auch Nutzer mit weniger oder keinen Kenntnissen zum Ziel gelangen.
Für den einfachen Weg binden Sie jquery direkt über die Herstellerseite von jquery oder über googleapis im Header Ihrer Seite ein:

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery Herstellerseite -->
<script src=‘http://code.jquery.com/jquery-latest.js‘ type=‘text/javascript‘></script>

<!-- ... oder googleapis -->
<script src=‘http://ajax.googleapis.com/ajax/lips/jquery/1.3.2/jquery.min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Für welche Quelle man sich dabei entscheidet ist wurscht. Ich bevorzuge die dritte Möglichkeit, in dem man sich die neueste jquery-Version von der Webseite des Herstellers herunterladet und in einem Ordner auf seinem eigenen Webspace entpackt. Diese bindet man anschließend wie eine von den beiden erstgenannten Möglichkeiten im Header der eigenen Webseite ein:

<!-- Lokal vorliegende jquery-Version einbinden -->
<script src=‘http://meinedomain.de/pfad_zum_ordner/jquery-min.js‘ type=‘text/javascript‘></script>

So fühle ich mich einfach wohler, zumal die Dateigröße von jquery nicht ins Gewicht fällt. Für Unerfahrene ist die Einbindung über eine der beiden erstgenannten Wege eventuell empfehlenswerter, da unproblematischer.
Nachdem das Framework nun verfügbar ist, stehen uns mehrere Möglichkeiten für das ScrollTop-Ereignis zur Verfügung

• Wir verwenden die schon vorhandene Animate-Funktion in Verbindung mit der scrollTop-Eigenschaft und schreiben uns eine eigene Funktion
• Wir verwenden jQuery.ScrollTo von Ariel Flesler (Demo)
• Wir verwenden kein Framework und programmieren uns unsere eigene ScrollTop-Funktion

Ich werde auf alle drei Möglichkeiten eingehen … allerdings zeigt die Uhr gerade 01:11 Uhr an und es wird Zeit ins Bett zu gehen. Ich wünsche eine gute Nacht, morgen geht es weiter!

Scroll Top Link (Teil 1)

In Bearbeitung …

Neben Themes und Widgets sind Plug-Ins wohl die beliebtesten Features eines jeden WordPress-Nutzers. Bei einem Plug-In oder Plugin handelt es ich um ein (meist) kleines Zusatzprogramm, das sich recht einfach in WordPress installieren lässt (englisch: plug in » schließen Sie an).

An dieser Stelle finden Sie eine Liste an ausgewählten Plug-In für WordPress, welche nach und nach ergänzt wird und Ihnen eine Vorstellung geben soll, was Programmierer sich alles einfallen lassen, um Ihre WordPress-Seite noch interessanter, sicherer und benutzbarer zu gestalten.
Eventuell haben Sie ein Plug-In gefunden oder gar programmiert, dass Ihrer Meinung nach einen Mehrwert für die WordPress-Gemeinde bietet und in diese Liste aufgenommen werde sollte? Dann würde ich mich freuen, wenn Sie mir eine kurze Nachricht mit Beschreibung und einem Link zu diesem Plug-In senden würden. Dies gilt natürlich auch für den Fall, dass ein hier vorgestelltes Plugin Probleme bereitet.

Vielen Dank!

(Anleitung für Plugin-Installation?)

// breadcrumb-navxt
<div class="breadcrumb">
<?php
if(function_exists('bcn_display')){
     echo "Sie sind hier: "; bcn_display();
}?>
</div>
/* zum Beispiel so in die header.php einfügen
( ... nach dem body-Tag )*/

// wp-pagenavi
 <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
/* zum Beispiel so in die index.php einfügen
( nach dem Loop und die standardmäßige Page-Navigation löschen )*/

<?php wp_head(); ?> // zum Beispiel in der header.php

• Akismet
  Beschreibung:
  Ein gutes Spam-Schutz-Plugin, welches standardmäßig bereits im neuen WordPress integriert ist (muss aktiviert werden).
  Probleme:
  Akismet schickt eine Menge Daten (der User) zum Abgleich an einen Server nach Amerika … das lässt mich hinsichtlich des Datenschutzes etwas “aufstoßen”.
  Info
• WP-SpamFree Anti-Spam
  Beschreibung:
  Ein weiteres Anti-Spam-Plugin, welches hier testweise zum Einsatz kommt.
  Probleme:
  Info
• Simple Trackback Validation
  Beschreibung:
  Dieses Plugin überprüft, ob Trackbacks zurückverlinken. Trackbacks werden automatisch gesetzt, wenn ein Link von anderen Seiten auf die eigene Seite verweist (was Grundvoraussetzung ist) und erhalten einen Link zurück zu dieser Seite. Spammer missbrauchen dies, um möglichst viele Links auf die eigene Seite zu lenken, löschen aber ihrerseits den Link auf die Zielseite. Simple Trackback Validation überprüft das und der Trackback wird je nach Einstellung nicht veröffentlich oder direkt gelöscht. Kommt hier auch zum Einsatz.
  Probleme:
  Info

• izioSEO
  Beschreibung:
  Diese SEO-Plugin setzte ich testweise selber auf dieser Seite ein und kann bisher nichts beanstanden.
  Probleme:
  Info
• All in One SEO Pack
  Beschreibung:
  Dieses ebenfalls sehr beliebte SEO-Plugin hatte ich als erstes installiert.
  Probleme:
  Info
• wpSEO
  Beschreibung:
  Ein häufig eingesetztes und meiner Recherche nach auch gutes SEO-Plugin … jedoch kommerzieller Natur!
  Probleme:
• Google XML Sitemaps
  Beschreibung:
  Durch dieses Plugin kommen Artikel schneller in den Index von Google
  Probleme:
  Info

• Breadcrumb NavXT
  Beschreibung:
  Eine sogenannte Breadcrumb-(Brotkrümel-)Navigation, die dem Besucher den momentanen Pfad zur aktuellen Seite zeigt. Dies erleichtert die Orientierung und sollte in jeder größeren Seite vorhanden sein.
  Probleme:
  Info
• WP-PageNavi
  Beschreibung:
  Eine verbesserte Seiten-Navigation
  Probleme:
  Info
• WP Landingssites_de
  Beschreibung:
  Dieses Plugin zeigt Besuchern, die von Suchmaschinen kommen, weitere relevante Artikel an. Sehr empfehlenswert und kommt auch hier zum Einsatz.
  Probleme:
  Info

• Link-Hover-Effect
  Beschreibung:
  Stufenloser (also nicht schlagartiger) Farbanimationseffekt von Hyperlinks sobald sich die Maus über dem Element befindet. Netter Effekt …
  Probleme:
  Das Plugin basiert auf dem jquery-Framework und behinderte bei mir leider die installierte Scroll-Top-Funktion (ebenfalls jquery).
  Info
• Fluency Admin 2.0
  Beschreibung:
  Schöneres Admin Menü …
  Probleme:
  Info

• WP-Polls
  Beschreibung:
  WP-Polls ist ein Plugin, mit dem Umfragen in die eigene Seite integriert werden können.
  Probleme:
  Info
• WP-Postratings
  Beschreibung:
  Nach Installation von WP-Postratings können Sie Ihre Artikel bewerten lassen. Dabei haben Sie die Auswahl, ob das Plug-In direkt auf der Startseite und/oder auf den Unter-Seiten (Single-Seiten) platziert wird.
  Probleme:
  Info

• WP-DB-Backup
  Beschreibung:
  Diese Plugin verspricht das unproblematische Speichern der Datenbank. Aufgrund der Downloadzahlen sollte es in Ordnung sein, dennoch werde ich es erst testen. Merke: Ein regelmäßiges Backup ist wichtig …
  Info
• WP-DBManager
  Beschreibung:
  Ein weiteres Plugin zu Datenbanksicherung, welches zusätzlich Optimierungs-, Reparatur-, Wiederherstellungoptionen bieten soll. Auch dieses werde ich erst testen …
  Probleme:
  Info

• Edit Comments XTBeschreibung:
  Dieses Plugin ermöglicht den Besuchern geschriebene Kommentare innerhalb einer Zeitspanne nachträglich zu ändern. Ein sehr zuvorkommendes Tool für den User.
  Probleme:
  Etwas problematische Installation, mit der Anleitung aber gut zu bewältigen.
  Info
• WP Ajax Edit Comments
  Beschreibung:
  Dieses Plugin ermöglicht dem Besucher ebenfalls, seinen Kommentar innerhalb einer Zeitspanne nachbearbeiten zu können. Einfach zu installieren und kommt auch hier zum Einsatz.
  Probleme:
  Info

• SEMMELSTATZ 3.1
  Beschreibung:
  SEMMELSTATZ ist ein Statistik-Plugin für Wordpress, das aus dem Array $_SERVER Informationen über die Besucher des Blogs ausliest, in eine eigene SQL-Tabelle schreibt und – entsprechend ausgewertet und aufbereitet – im Adminbereich (und nur dort) anzeigt. Kommt auch hier zum Einsatz.
  Probleme:
  Info

Eine große Anzahl an weiteren Plug-Ins können von der WordPress-Seite runtergeladen werden.

In den letzten 14 Tagen habe ich alles über Wordpress nachgelesen, durchgearbeitet und angewendet, was ich finden konnte.
Was mir da so über den Weg bzw. über den Bildschirm gelaufen ist erweckte in mir das Gefühl, die letzten 3-4 Jahre einen echten Web-Trend verschlafen zu haben. Das erste mal hatte ich vor ca. 2 ½ Jahren etwas von Wordpress in einer Fachzeitschrift gelesen, war aber nicht weiter darauf angesprungen. Ich meine mich erinnern zu können, dass ich damals sowas wie Baby-CMS gedacht habe und einfach weiterblätterte.
Das hätte ich vielleicht nicht tun sollen, denn meine bisherigen Erkenntnisse offerieren mir ein gut unterstütztes Blog-CMS mit einer großen Online-Community. Was andere mit ihren Blogs schon erreicht haben und welcher Spaß damit verbunden ist, seine Erfahrungen und Gedanken mit anderen zu teilen, da kommt man schon etwas ins Grübeln.
Na ja, da sage ich mir doch besser spät als nie und nachdem ich mich nun die letzten 4 Monate an einem eigenen CMS , aufbauend auf PHP, mySQL, Apanatschi, Template-Klasse, Datenbank-Klasse … versucht habe (was wunderbar funktionierte und sehr gut anzupassen war, aber auch sehr viel Zeit verschlang), entschloss ich mich vor einigen Tagen, das bisher erstellte nun auf Wordpress zu portieren und an der Blogomania teilzuhaben …!
Dafür installierte ich WordPress zunächst auf meinem eigenen Rechner unter xampp, was auch ohne Probleme zu bewerkstelligen war. Einfach die neueste Wordpress-Version downloaden, in einem Ordner entzippen und dann erst mal auf die beigefügte “liesmich”-HTML-Datei klicken, wodurch man auf die Webseite von WordPress gelangt und dort die leichtverständliche Installationsanweisung nachlesen kann.
Also eben schnell die

wp-config-sample.php

aus dem ersten Verzeichnis rausgesucht, in meinem Standard-Editor Notepad++ neuester Version (jetzt auch mit besserer Syntaxerweiterung) geöffnet und flugs die erforderliche Konfiguration für die Datenbank vorgenommen, die ich vorher über phpmyadmin im xampp angelegt hatte.
Diese wird dann im selben Ordner als wp-conf.php (ohne -sample) gespeichert und anschließend auf den Webspace geschoben. Bei mir unter …

C:\xampp\htdocs\wordpress

Den Ordner sollte man, wie mir meine bisherige Recherche schon verraten hat, besser umbenennen (blog, hanswurst, X3rUt54, …), um so schon sofort den ersten Schritt Richtung Sicherheit seines zukünftigen megaerfolgreichen Blogs zu tätigen.
Nun kann man im Browser seiner Wahl über

http://localhost/X3rUt54/wp-admin/install.php

die weiteren Schritte bewältigen, auf die ich hier nicht weiter eingehe, da es selbsterklärend und für jeden verständlich sein sollte.
Nachdem man sich seinen Benutzernamen und vor allem sein Passwort gut gemerkt hat, folgt das Einloggen in den Backgroundbereich von WordPress … quasi Betreten Sie dann als Captain die Brücke der Enterprise (großes Raunen).
Hier sollte man sich nun alles erst mal etwas genauer ansehen. Am Anfang erscheint es etwas beindrückend beeindruckend, was aber auch schnell wieder nachlässt, sobald man sich etwas umgeschaut hat. Es gibt einen Bereich, wo man Artikel (so wie dieser) oder eigenständige Seiten (Über_mich, Impressum, …) erstellen kann. Es können Benutzer angelegt (was aber erst einmal nebensächlich ist) oder Plugins (Spamschutz, Broadcrump, …) und Widgets (Tagwolke, Meta, …) installiert werden. Alles kein Hexenwerk und recht schnell zu verstehen.
Nachdem man sich nun schon etwas heimeliger fühlt, kann die Suche nach einem Theme beginnen, wenn einem die beiden vorgegebenen Standard-Layouts nicht zusagen … hier gibt es im Web eine große Anzahl an freien Themes zum Download.