Auf der Suche nach einem Plugin, womit ich Google Maps Datenschutzkomfort einbinden kann, fand ich nur gute Lösungen die kostenpflichtig waren. Kurzerhand habe ich mich hingesetzt und einen Shortcode geschrieben. Wenn du mehr über Shortcodes und vorhandene Shortcodes von WordPress erfahren möchtest, findest du hier die Dokumentation von WordPress.

Aufbau

Geplant ist, dass der Shortcode erst Google Maps auf die Seite lädt, wenn dies auch erlaubt wird. Ebenso sollen alle wichtigen Punkte selber gesetzt werden z.B. URL, ID, Breite, Höhe, Hintergrundfarbe, Schriftfarbe, Buttonfarbe, Buttonschriftfarbe und der Link zur Datenschutzrichtlinie.

Edit der FUNCTIONS.PHP

Als erstes öffnen wir die Functions.php. Dies kann man mittels FTP tun oder direkt im Dashboard. Ich zeige dir den weg mittels Dashboard.

Wir navigieren im Seitenmenü zu Design und warten bis das PopUp Menü sich öffnet. Hier wählen wir Theme-Datei-Editor aus.

Nun siehst du als erstes die Style.css. Auf der rechten Seite kannst du nun die Theme-Funktionen auswählen. Nachdem du diese ausgewählt hast scrolle bis zum Ende der Datei und füge folgendes hinzu:

function load_session(){
  if(!session_id()){
    session_start();
  }
}
add_action('init', 'load_session');

Diese Funktion erlaubt es uns, das wir eigene Cookies benutzen können. Wir setzen selber einen Cookie, damit der Nutzer nach einem neu laden der Seite nicht wieder die Sperre bestätigen muss.

Nun kommen wir zur eigentlichen Funktion:

function create_dsgvo_maps( $atts ) {

$atts = shortcode_atts( array(
      'url' => "#",
	  'id' => "maps",
	  'width' => "100%",
	  'height' => "320px",
	  'bg_color' => "#e6e6e6",
	  'ft_color' => "#444",
	  'bt_color' => "#222",
	  'bt_ft_color' => "#fff",
	  'dsgvo' => "#",
	  
      ), $atts);
    $output = '<iframe src="'.$atts["url"].'" id="'.$atts["id"].'" frameborder="0" style="border:0; width: '.$atts["width"].'; height: '.$atts["height"].'; display: block;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>';
    $fail_to_load = '
	<div id="'.$atts['id'].'" style="background-color: '.$atts['bg_color'].'; width: '.$atts['width'].'; height: '.$atts['height'].'; display: block; border-radius: 5px; position: relative;">
		<div style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);">
			<p style="color: '.$atts["ft_color"].'; font-weight: bold; text-align: center;">
				Aus Datenschutzgründen, haben wir Google Maps eingeschränkt.</br><a href="'.$atts['dsgvo'].'" style="color: '.$atts['ft_color'].';">Mehr Erfahren.</a>
				<form method="post" autocomplete="off">
					<input type="hidden" name="id" value="'.$atts['id'].'">
					<input type="submit" name="allow_maps" value="Erlauben" style="background-color: '.$atts['bt_color'].'; border: none; padding: 15px; border-radius: 5px; color: '.$atts['bt_ft_color'].'; text-align: center; width: 100%; cursor: pointer;">
				</form>
			</p>
		</div>
	</div>';
	if(isset($_POST['allow_maps'])){
		$_SESSION['allow_maps'] = true;
		echo '<meta http-equiv="refresh" content="0; URL=?#'.$_POST['id'].'">';
	}
	if(isset($_SESSION['allow_maps'])){
		return $output;
	}elseif(!isset($_SESSION['allow_maps'])){
		return $fail_to_load;
	}
}
add_shortcode( 'maps', 'create_dsgvo_maps' );

Defaultvalues des Shortcodes

Syntax

Die Einbindung des Shortcodes erfolgt so. Hierbei werden nur die Defaultvalues geladen.

[maps]

Möchte man nun eigene Attribute setzen kann man dies wie folgt:

[maps url="google.com/embed" id="karte_startseite" width="60%" height="420px" dsgvo="/datenschutz"]

In diesem Beispiel wird die URL auf Google geleitet, die ID auf "karte_startseite" gesetzt, eine Breite von 60% angegeben, eine Höhe von 420px festgelegt und auf die Datenschutzerklärung verwiesen im Verzeichnis "/datenschutz".