AZ P51
Bastelanleitung: Wechselnde Themes zu Sonnenauf- und -untergang
Dienstag, 20. Dezember 2005, 16.25 Uhr
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« />Außerdem wird ein JavaScript eingefügt, das es den Seitenbesuchern erlaubt, das Theme per Mausklick wieder zu ändern:
<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« />[...]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:
<?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><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 }und style_night.css enthält:
img#day { background-color: black; border-color: #a0a0a0 }
img#night:hover { border: solid 1px red; cursor: pointer; background-color: #444 }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.)
Nr. 1
toadward » Blog Arc&hellip
Sonntag, 1. Januar 2006, 17.58 Uhr
[…] Zu finden bei Mymykrys Meinung. […]
Kommentieren
Zulässige HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed