Reisewarnungen des Auswärtigen Amts im eigenen WordPress Blog als Seite anbieten

Ein guter Tipp für alle Blogger zum Thema Reisen und  Tourismus: wer möchte nicht auch die jeweils aktuellen Reisewarnungen zum jeweiligen Reiseland anbieten?

Open Data Schnittstelle des Auswärtigen Amts

Das Auswärtige Amt bietet eine Open Data Schnittstelle an, mit der man ohne großen Aufwand die zum Reiseland passenden Reise- und Sicherheitshinweise darstellen kann.

Wichtiger Hinweis: Das Auswärtige Amt gestattet die Übernahme der Daten durch die Schnittstelle unter bestimmten Nutzungsbedingungen, die einzuhalten sind. Wendet euch zunächst mit eurer Anfrage and www.diplo.de/kontakt. Ihr erhaltet dann Instruktionen wie die Technische Dokumentation.

WordPress-Plugin „PHP Everywhere“

Hier mein Beispiel, wie ich die Daten über die Schnittstelle reinlese:

PHP Everywhere Widget
PHP Everywhere Widget

Ich habe das WordPress-Plugin „PHP Everywhere installiert. Dann habe ich eine neue Seite im WordPress angelegt mit einem Titel wie etwa „Reise- und Sicherheitshinweise des Auswärtigen Amts zu Italien“. Im Edit-Modus der Seite kann man rechts am Rand in der Box „PHP Everywhere“ den PHP-Code hinterlegen und im Body der Seite den Shortcode [php_everywhere].

Mein Code im PHPEverywhere Widget: hiermit lese ich die Reise- und Sicherheitshinweise des Auswärtigen Amts aus:

<?php
$_external_source = "https://www.auswaertiges-amt.de/opendata/travelwarning/";
$jsonobj = file_get_contents($_external_source);
$arr = json_decode($jsonobj, true);
$countriesSelectByName = array(); //new array for select option only, to be sorted
foreach($arr as $key => $value) {
$arr2 = $value; //multidimensionales array
foreach($arr2 as $key2 => $value2) {
$titleArray = explode(":", $value2["title"]); // get the country out of the title
$arrayX = array($titleArray[0], $key2);
array_push($countriesSelectByName, $arrayX);
//echo $key2 . " => " . $value2["title"] . "<br>";
}
}
sort($countriesSelectByName); // sort for select options by countries
$countryId = $_GET['country'];
echo '<form><select id="country" name="country">';
for($i = 2; $i < count($countriesSelectByName); ++$i){
echo '<option value="'.$countriesSelectByName[$i][1].'" ' . ( $countryId == $countriesSelectByName[$i][1] ? 'selected="selected"' : '' ) . ' >' . $countriesSelectByName[$i][0] . '</option>';
}
echo '</select>';
echo '&nbsp;<input type="submit" value="Weiter" style="border:1px solid #ccc">';
echo '</form>';
if($countryId){
echo("<h3>".$arr["response"][$countryId]["title"]."</h3>");
echo("<img src='".$arr["response"][$countryId]["flagUrl"]."' style='width:100px; float:left; margin:0 2em 0 0'>");
echo $arr["response"][$countryId]["content"];
}
?>
PHP Everywhere Shortcode
PHP Everywhere Shortcode

Dieser PHP-Code aus dem Widget wird durch den Shortcode [php_everywhere] in den Body der Seite eingesetzt und dort gerendert.

WordPress Plugin „Embed Code“

Zusätzlich zum Auslesen der Daten via PHP kann man dann das Styling der angezeigten Daten etwas aufmotzen.

EmbedCode Plugin: HEAD code für CSS Styles und jQuery
EmbedCode Plugin: HEAD code für CSS Styles und jQuery

Ich habe dazu das WordPress Plugin „Embed Code“ installiert. Damit kannst du für einzelne Seiten oder Beiträge individuellen Code für den Head-Bereich (vor dem </head> Tag) und im Footer (also nach dem Content, vor dem </body> Tag) definieren. Ich habe für die Seite in dem Feld „Head Code“ (zu finden in den Elementen unter dem Inhalts-Editor) einige CSS Styles definiert und mit JavaScript (jQuery) den DOM-Baum des Inhalts leicht modifiziert, um den Abschnitt „Aktuelles“ besonders hervorzuheben.

Der Code für EmbedCode Head Code: es werden CSS Style Definitionen festgelegt und die dazu benötigten Elemente im HTML DOM Baum werden via jQuery in den HTML-Code des Inhalts injiziert:

<style>
html {
scroll-behavior: smooth;
}

#aktuelles * { font-size:1.1em !important; }
#infoAuswAmt * { font-size:0.95em; }
#h2Aktuelles { font-size:x-large !important; color:red; }

</style>

<script>
$(document).ready(function(){

$("h2:contains('Aktuelles')" ).nextUntil("h2").wrapAll( "<div id='aktuelles' style='background-color:#faeeeb;'></div>" );

$("h2:contains('Aktuelles')" ).wrap('<div id="h2Aktuelles"></div>');

document.getElementsByTagName('h1')[0].scrollIntoView();

});

</script>

Beispiel

Hier sieht man im Beispiel,  wie die Seite dann gerendert dargestellt wird: https://www.urlaubs-reisetipps.de/reise-und-sicherheitshinweise?country=211322

Der URL-Parameter ?country=211322 übergibt dem Script die ID zum Land Italien und somit wird gleich die Info zu Italien aufgerufen.

Screenshot
Screenshot