Mein WordPress Testblog » wp-forecast 2.2 und eine Wettervorschau für die nächsten Tage

14.

Jan

2009

wp-forecast 2.2 und eine Wettervorschau für die nächsten Tage

Ich habe in letzter Zeit ein paar Anfragen bekommen, wie ich auf meiner Wettervorschauseite für unseren Frankfurter Stadtteil die Wettervorhersage für eine Woche gestaltet habe. Diese Vorschau habe ich schon vor einiger Zeit mit einer älteren Version von wp-forecast gemacht, und mit der Version war noch ein bißchen rumgefummel an einer Datei des Plugins notwendig. Mit der vor kurzem erschienenen Version 2.2 von wp-forecast ist das nun aber nicht mehr nötig, da sich jetzt bei Bedarf jeder einzelne Wert auf einfache Weise ausgeben lässt. So eine Wettervorschau funktioniert jetzt folgendermaßen:

Wer bereits eine ältere Version von wp-forecast installiert hat, macht ein Update auf die aktuelle Version 2.2 – ich habe dazu im Verzeichnis wp-forecast alles außer dem Verzeichnis icons und der Datei wp-forecast.css gelöscht und anschließend die Dateien der Version 2.2 hochgeladen. Wer wp-forecast bislang noch nicht genutzt hat, schaut am besten in die Referenz, um zu erfahren, wie die Installation abläuft.
Wenn bereits eine Wetteranzeige z.B. in der Sidebar vorhanden ist, muss in den Einstellungen von wp-forecast ein weiteres Widget angelegt werden, in dem der Ort angegeben wird, für den die Vorschau sein soll, und welche Werte erscheinen sollen, sowie die gewünschte Anzahl der Vorschautage ausgewählt werden.

Da für die Ausgabe der Wetterdaten PHP-Code ausgeführt werden muss und dies nicht ohne weiteres in WordPress-Artikeln oder -Seiten machbar ist, gibt es 2 Möglichkeiten, das zu realisieren: Entweder man installiert sich ein Plugin wie Exec-PHP, das die Ausführung von PHP-Code in Artikeln und Seiten erlaubt, oder man legt ein spezielles Seitentemplate für die Wetterseite an.
Exec-PHP ist zweifellos ein tolles Plugin, aber auch ein Thema für sich. Da die 2. Möglichkeit meiner Meinung nach die einfachere ist, stelle ich diese vor:

Um ein Seitentemplate zu erstellen wird eine Kopie der page.php gemacht und umbenannt in z.B. wetter.php. Ganz oben auf dieser Seite wird eingefügt:

1
2
3

<?php 
/* Template Name: Wetter */
?>

Anstelle von <?php the_content(); ?> wird nun die Wettervorhersage in dieses Template hineingebastelt. In Punkt 5.4 der wp-forecast Referenz stehen alle Angaben, die dafür benötigt werden. Los geht’s: Als erstes muss wp-forecast mitgeteilt werden, aus welchem Widget es die Daten holen soll. Bei mir ist das Widget B, deshalb schreibe ich in meine wetter.php:

1	<?php $b=wp_forecast_data("B"); ?>

Um nun z.B. die Temperatur des ersten Vorhersagetages auszugeben, schaue ich in der Referenz, was dort neben “Vorhersage Tags: Temperatur” steht, nämlich fc_dt_htemp_<tagnr>. Das <tagnr> muss ich durch den Tag ersetzen, für den die Ausgabe erfolgen soll – der aktuelle Tag ist 1, der erste Vorhersagetag ist 2, daher lautet der Befehl für die Ausgabe der Temperatur des ersten Vorhersagetags:

1	<?php echo $b['fc_dt_htemp_2'] ?>

Um mehrere Tage mit Wetterdaten aufzulisten, kann man z.B. eine Tabelle erstellen oder mit mehreren divs arbeiten. Ein Beispiel für eine Tabelle, in der das Datum des folgenden Tages, das Wettericon für tagsüber und nachts, die Kurzbeschreibung, die Temperatur sowie Windstärke und -richtung ausgegeben werden, sieht so aus:

<table class="wetter" border="0" style="width: 500px;" cellspacing="2" cellpadding="10">
 <tr>
    <th colspan="4">Morgen, <?php echo $b['fc_obsdate_2'] ?>:</th>
 </tr>
 <tr>
    <td>
        <?php echo '<img src="http://.../wp-content/plugins/wp-forecast/' . $b['fc_dt_icon_2'] . ' " />' ?>
    </td>
    <td>
        <strong>Tagsüber:</strong><br />
        <?php echo $b['fc_dt_desc_2'] ?><br />
        Höchsttemperatur: <?php echo $b['fc_dt_htemp_2'] ?><br />
        Wind: <?php echo $b['fc_dt_windspeed_2'] ?> aus <?php echo $b['fc_dt_winddir_2'] ?>
    </td>
    <td>
        <?php echo '<img src="http://.../wp-content/plugins/wp-forecast/' . $b['fc_nt_icon_2'] . ' " />' ?>
    </td>
    <td>
        <strong>Nachts:</strong><br />
        <?php echo $b['fc_nt_desc_2'] ?><br />
        Tiefsttemperatur: <?php echo $b['fc_nt_ltemp_2'] ?><br />
        Wind: <?php echo $b['fc_nt_windspeed_2'] ?> aus <?php echo $b['fc_nt_winddir_2'] ?>
    </td>
 </tr>
</table>

(Der Pfad bei “img src” muss natürlich entsprechend angepasst werden.)
Das ergibt so etwas:
Wettervorschau

Um einen weiteren Tag darunter hinzuzufügen, kann die Tabelle (bzw. die Zeile <tr>) einfach kopiert werden. Die Zahl “2″ wird dann jeweils durch “3″, “4″ … “9″ ersetzt, je nachdem, wieviele Tage man anzeigen möchte.

Zum Schluss wird noch eine neue Seite angelegt, auf der die Wettervorschau zu sehen sein wird. Im Kasten “Attribute” neben dem Schreibfenster muss unter “Template” das neu erstellte Template “Wetter” gewählt werden. Inhalte braucht die Seite nicht, denn die sind ja bereits im Template festgelegt – einfach die leere Seite abspeichern und publizieren.

Das Design des Tabelleninhalts lässt sich auch beeinflussen: Im Tabellencode steht hinter table die Klasse class="wetter", dadurch können die einzelnen Tabellenelemente einfach gestylt werden. Um z.B. die Schriftgröße zu ändern, schreibt man in die style.css:

1
2
3

.wetter td {
 font-size: 0.85em;
}

Ich habe zur Demonstration auch hier im Blog so eine Wettervorschauseite angelegt, ein Link dazu findet sich im Menü links unter der Wetteranzeige, und auch hier.

Und übrigens – Hurra, in der neuen Version von wp-forecast werden die Einstellungen beim Deaktivieren nicht mehr automatisch gelöscht!

Einsortiert unter Plugins

Bookmarken bei: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.

10 Kommentare

10 Kommentare:

1

Hallo Barbara,
bin gerade etwas verunsichert…
Bist Du der Zeit etwas voraus, oder gibt es tatsächlich schon eine Version 2.3 von dem Plug-In?
Wie auch immer, die Wetterseite ist toll geworden.

Kommentar von funkygog
Sonntag, 18. Januar 2009, 19:27
2

Hallo Gorden,
hatte ich noch gar nicht bemerkt 8O Laut tuxlog.de ist es Version 2.2, aber in der Pluginverwaltung taucht bereits 2.3 auf. Also ist es wohl 2.3.

Kommentar von Barbara
Sonntag, 18. Januar 2009, 19:46
3

Berichtigung: Ich hatte hier eine Vorabversion zum Testen, dadrin steht 2.3. Aber die aktuelle Version ist 2.2, also hattest du doch Recht. Ich habe meinen Artikel jetzt angepasst.

Kommentar von Barbara
Montag, 19. Januar 2009, 9:12
4

Hi.. kann man denn auch die Position des Icon verändern? Ich wollte es gerne auf der rechten Seite anzeigen. Nure habe ich bisher die richtige Stelle im Code nicht gefunden.

Kommentar von Sebastian
Donnerstag, 5. Februar 2009, 10:21
5

Sebastian, wie meinst du das – einfach den Text links neben dem Icon statt rechts? Dann nimm mein Beispiel von oben und vertausche die Tabellenzellen mit dem img und dem Text.

Kommentar von Barbara
Donnerstag, 5. Februar 2009, 10:35
6

hi Barbara,

where do you write this line code ? :
⇒ Noch mehr Wetter

thank you

Kommentar von jean pierre
Sonntag, 1. März 2009, 7:21
7

heu, this line code

<h4><a href="http://barbarajany.de/wp1-5/wettervorschau/"><span style="font-size: 1.2em; font-weight: bold;">⇒</span> Noch mehr Wetter</a></h4>

Kommentar von jean pierre
Sonntag, 1. März 2009, 7:23
8

Hi Jean Pierre, the code is in my sidebar.php underneath the code for wp-forecast (I don’t use widgets).

Kommentar von Barbara
Sonntag, 1. März 2009, 9:59
9

hi Barbara,

how do you add the days of the date (monday, tuesday ect…) in you meteo page and in your meteo column bar ? i precise, i have 9 days in my meteo page

i don’t use widgets also.

thank you

Kommentar von jean pierre
Donnerstag, 25. Juni 2009, 14:33
10

Hi Jean Pierre,
wp-forecast uses the settings under Settings -> General.
My settings are l, j. F Y to get Freitag, 26. Juni 2009.

Kommentar von Barbara
Freitag, 26. Juni 2009, 8:58