Dienstag, 20. Dezember 2005

Bastelanleitung: Wechselnde Themes zu Sonnenauf- und -untergang

Darius 16.25 Uhr Filed under: My WebLab

Mein Weblog wechselt zum Sonnenaufgang auf ein helles Design, nach Sonnenuntergang wieder auf ein dunkles (abhängig vom Sonnenstand bei mir). Wer ein bisschen etwas davon versteht, kann es leicht nachbasteln. Vielleicht fühlt sich ja sogar jemand inspiriert, ein Plugin für diese Aufgabe zu schreiben.

Mit PHP5 wäre die Berechnung der Sonnenauf- und -untergangzeiten ein Kinderspiel, denn PHP5 verfügt über die Funktionen date_sunrise() und date_sunset().
In der Online-PHP-Dokumentation hat aber jemand ein Skript veröffentlicht, das die gleiche Aufgabe für PHP4 erfüllt.

Das, was ich von dem Skript brauche, habe ich als kleine PHP-Datei mySuntimes.php in mein Theme-Verzeichnis gelegt und per include() in die header.php meines Themes einbezogen:<?php include get_template_directory().«/mySuntimes.php«; ?>Mein Skript gibt drei Variablen zurück, $myDaytime, $mySunrise und $mySunset. Die erste enthält entweder »day« oder »night«, die anderen beiden die Uhrzeiten des Auf- und des Untergangs. Da das Skript nicht zur Weitergabe gedacht ist, habe ich Längen- und Breitengrad fest vorgegeben.

Das Stylesheet meines Themes habe ich in drei Dateien aufgeteilt: style_day.css enthält ausschließlich die Farbangaben für die helle Variante des Blogs, style_night.css enthält die dunkle Alternative. Alle übrigen Angaben (Größen, Positionen, Schriftarten…) verbleiben in style.css. Die beiden erstgenannten CSS-Dateien enthalten zu Beginn eine Zeile@import "style.css";Damit werden die Angaben aus style.css in die beiden anderen CSS-Dateien jeweils einbezogen.

In der Datei header.php meines Themes wird je nach Tageszeit das eine Stylesheet eingestellt und das andere mit dem Zusatz »alternate« versehen. Im <head>-Bereich des Seitencodes steht also:<link rel="<?php if ($myDaytime==«night«) echo 'alternate '; ?>stylesheet« href=«http://url_of_my_theme/style_day.css« type=«text/css« media=«screen, projection« title=«Tag« />
<link rel=«<?php if ($myDaytime==«day«) echo 'alternate '; ?>stylesheet« href=«http://url_of_my_theme/style_night.css« type=«text/css« media=«screen, projection« title=«Nacht« />
Außerdem wird ein JavaScript eingefügt, das es den Seitenbesuchern erlaubt, das Theme per Mausklick wieder zu ändern:[...]
<?php wp_head();?>
<script type=«text/javascript«>
function CSSSelect(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(«link«)[i]); i++) {
if(a.getAttribute(«rel«).indexOf(«style«) != -1 && a.getAttribute(«title«)) {
a.disabled = true;
if(a.getAttribute(«title«) == title) a.disabled = false;
}
}
}
</script>
</head>
Damit dieses Skript aufgerufen werden kann, werden außerdem an geeigneter Stelle zwei kleine Grafiken, day.gif und night.gif angezeigt, die angeklickt werden können, um das Stylesheet zu wechseln:<body>
[…]
<div id=«DayNight«>
<img id=«day« xsrc=«http://url_of_my_theme/day.gif« width=«16″ height=«16″ alt=«Tag« title=«Sonnenaufgang <?php echo $mySunrise; ?> Uhr« onclick=«CSSSelect(‹Tag‹);return false;« />
<img id=«night« xsrc=«http://url_of_my_theme/night.gif« width=«16″ height=«16″ alt=«Nacht« title=«Sonnenuntergang <?php echo $mySunset; ?> Uhr« onclick=«CSSSelect(‹Nacht‹);return false;« />
</div>
[…]

Zur Positionierung (bitte Koordinaten nach eigenem Bedarf anpassen) der beiden Grafiken day.gif und night.gif wird style.css ergänzt:#DayNight { position: relative; top:110px; left:170px; z-index:10 }
img#night { padding: 2px; border: solid 1px }
img#day { padding: 2px; border: solid 1px; margin-right: 10px }

Außerdem soll das Symbol des jeweils aktiven Themes anders markiert werden als das andere. Deshalb enthält style_day.css z.B. folgende Angaben:img#night { background-color: black; border-color: #444 }
img#day { background-color: black; border-color: #a0a0a0 }
img#night:hover { border: solid 1px red; cursor: pointer; background-color: #444 }
und style_night.css enthält:img#day { background-color: black; border-color: #444 }
img#night { background-color: black; border-color: #a0a0a0 }
img#day:hover { border: solid 1px red; cursor: pointer; background-color: #444 }

Also, wie gesagt, das ist nur eine Bastelanleitung zum Selbertüfteln. Ich biete keinen Rundum-Support und keine Komplettlösung, aber wer etwas davon versteht, soll diese Anregung gerne aufgreifen und/oder weiterentwickeln. (Achtung: in obigen Code-Schnippseln sind u.U. falsche Anführungszeichen wiedergegeben.)

2 Comments »

  1. [...] Zu finden bei Mymykrys Meinung. [...]

    — Pingback by toadward » Blog Archive » tag- und nachtschicht am Sonntag, 1. Januar 2006 um 17.58 Uhr

  2. Ich weiß, der Artikel ist schon asbach … : -)
    Wäre es nicht besser gewesen, auch den Inhalt der mySuntimes.php hier anzugeben? Ich suche mir nämlich seit einer Woche im Netz einen Wolf und dachte, dass ich endlich fündig geworden bin. Da ich und vermutlich tausende von anderen Nutzern keinen Plan von PhP haben, wird uns diese halbe Bastelanleitung nicht weiterhelfen.

    — Comment by Christian am Montag, 20. Juni 2011 um 15.54 Uhr

RSS feed for comments on this post. TrackBack URL

Leave a comment