Powered by WordPress Footer entfernen

Wer das WordPress-Standardtheme Twenty Twenty-One nutzt, wird im Footer sicherlich schon die Zeile Powered by WordPress bemerkt haben. Wer diese Zeile im Footer störend findet, kann sie auf einfache Weise mit den WordPress-Bordmitteln beseitigen.

Der Footer im Theme Twenty Twenty-One

Dafür wird ein kleiner CSS-Schnipsel benötigt:

.site-info { display: none; }

Im WordPress-Backend findet sich im Menü unter Design -> Customizer die Möglichkeit einige Einstellungen des Themes vorzunehmen. Hier findet sich unter anderem der Punkt Zusätzliches CSS. Dort wird der CSS-Schnipsel eingefügt und das ganze abgespeichert. Damit ist die Powered by WordPress-Zeile im Footer Geschichte.

Beschriftung der Galerie unter WordPress ausblenden

Unter WordPress ist es möglich aus mehreren Bildern eine Galerie zu erstellen. Zusätzlich werden die hinterlegten Beschriftungen der Bilder ebenfalls angezeigt. Dies kann unter Umständen das Erscheinungsbild der Galerie stören.

Werden die Beschriftungen angezeigt, so leidet unter Umständen das Erscheinungsbild der Galerie

Um einem solchen Fall vorzubeugen, kann die Beschriftung in der Galerie ausgeblendet werden. Dafür muss die Datei style.css, welche zum aktiven Theme gehört, angepasst werden und folgender Block hinzugefügt werden:

.gallery-caption {
	display:none;
}

Nach der Anpassung werden Beschriftungen in der Galerie nicht mehr angezeigt.

Dark Mode auf Webseiten

In vielen Betriebssystemen wie z.B. macOS oder iOS zog in den letzten Versionen ein sogenannter Dark Mode ein. Bei diesem Modus werden die Elemente des Betriebssystems auf dunklere Farben eingestellt. Damit wird der Nutzer am Abend bzw. in der Dunkelheit nicht mehr so stark geblendet. Wird allerdings bei aktiviertem Dark Mode eine Webseite aufgerufen, welche von Haus aus mit hellen Farben arbeitet, so wird der Nutzer wieder geblendet. Mittlerweile können Webseiten sich allerdings dem gewünschten Farbschema anpassen. Dazu muss im CSS eine entsprechende Media Query definiert werden:

@media (prefers-color-scheme: dark) {
body {
    background-color: rgb(24, 26, 27);
    color: rgb(214, 211, 205);
}
}

Ist nun der Dark Mode im Betriebssystem aktiviert, wird das präferierte Farbschema übermittelt und kann dann CSS entsprechend umgesetzt werden.

seeseekey.net im Dark Mode

Wer die eigene Webseite mit einem dunklen Farbschema sehen möchte, kann dazu die Firefox-Erweiterung Dark Reader nutzen.

Dark Reader
Preis: Kostenlos

Mit dieser Erweiterungen können Webseiten automatisch in ihre dunklen Versionen überführt werden. Für die Entwicklung einer eigenen dunklen Variante können die neuen Farbwerte nun mittels der Entwicklertools des Browsers aus der Ausgabe der Erweiterung extrahiert werden.

WordPress-Themes und die GPL

Das Content Management System WordPress ist unter der GPL lizenziert und damit stellt sich die Frage, ob Themes unter WordPress ebenfalls unter der GPL lizenziert sind? Die kurze Antwort: Themes müssen unter der GPL lizenziert werden. Im Detail können bei der Frage allerdings Abstufungen vorgenommen werden. Die GPL definiert eine Reihe von Freiheiten:

Die Freiheit, das Programm auszuführen wie man möchte, für jeden Zweck (Freiheit 0).

Die Freiheit, die Funktionsweise des Programms zu untersuchen und eigenen Datenverarbeitungbedürfnissen anzupassen (Freiheit 1). Der Zugang zum Quellcode ist dafür Voraussetzung.

Die Freiheit, das Programm zu redistribuieren und damit Mitmenschen zu helfen (Freiheit 2).

Die Freiheit, das Programm zu verbessern und diese Verbesserungen der Öffentlichkeit freizugeben, damit die gesamte Gesellschaft davon profitiert (Freiheit 3). Der Zugang zum Quellcode ist dafür Voraussetzung.

Da die PHP-Dateien eines Themes die unter der GPL lizenzierten Schnittstellen von WordPress nutzen, muss das Theme ebenfalls unter der GPL lizenziert werden. Das Theme läuft niemals für sich alleine, sondern benötigt zwingend die entsprechenden WordPress-Schnittstellen. Sobald ein Theme distribuiert wird, muss es unter der GPL lizenziert werden.

Mit Themes lässt sich das Aussehen der Webseite anpassen

Mark Jaquith, einer der Entwickler von WordPress drückte das Ganze wie folgt aus:

Theme code necessarily derives from WordPress and thus must be licensed under the GPL if it is distributed.

Der Einwand, welcher ab und an vorgebracht wird, das mit einem GPL-Theme kein Geld verdient ist dabei haltlos. Die GPL verbietet es nicht mit GPL-Software Geld zu verdienen. So kann ein Ersteller eines Themes die Themes verkaufen. Natürlich könnte nun ein Käufer das Theme anderweitig bereitstellen, allerdings kann der Nutzer bei vielen Erstellern Updates der Themes und Support dazu kaufen. Dies stellt einen Mehrwert gegenüber eine Theme da, welches eventuell schon veraltet ist.

Theoretisch können WordPress-Themes unter unterschiedlichen Lizenzen angeboten werden. Dies war beim Theme Thesis der Fall. Hier sind sämtliche PHP-Dateien unter der GPL lizenziert, während CSS- und JavaScript-Dateien proprietär sind. Interessant wird es bei Lizenzbedingungen, des Theme-Erstellers, welche gegen die GPL verstoßen. Technisch betrachtet dürften solche Themen nicht mit WordPress genutzt werden.

WordPress ist nicht das einzige System, bei welchem sie die Rechtslage so darstellt, so erklärt die FAQ des Content Management Systems Drupal:

Drupal modules and themes are a derivative work of Drupal. If you distribute them, you must do so under the terms of the GPL version 2 or later. You are not required to distribute them at all, however. (See question 8 below.)

Wie sieht, es in dem Fall aus das ein Theme erstellt wurde und dieses Theme auf der eigenen Webseite genutzt wird? Muss dieses Theme nun unter GPL bereitgestellt werden? Die Antwort darauf ist nein. Der Grund hierfür ist das, wenn ich ein unter GPL lizenziertes Produkt ausliefere, ich den Quelltext dazu veröffentlichen muss. Allerdings liefert WordPress keine Themes, sondern Webseiten aus. Deshalb muss der Quelltext des Themes nicht bereitgestellt werden. Wäre dies der Fall wären z.B. alle Dokumente welche mit LibreOffice erstellt werden auch unter der GPL lizenziert werden. Dazu noch einmal Mark Jaquith:

No. The GPL is triggered by distribution. Work-for-hire for a client is not distribution. In this case, they would have the copyright on the code. Distributing it would be up to them. As long as they didn’t distribute it, the GPL wouldn’t kick in. Your clients needn’t worry.

Geocoding in Verbindung mit einer Leaflet-App

Gestern schrieb ich in einem Artikel, wie Adressen aus Koordinaten mittels des Dienstes Nominatim, unter Zuhilfenahme von OpenStreetMap-Daten, ermittelt werden können. Mithilfe der freien Bibliothek Leafleat, kann dies nun in eine kleine Webapplikation gegossen werden.

Anhand der Geo-Koordinate wird die Adresse ermittelt und dargestellt.

Ziel ist es eine Applikation zu bauen, welche eine Karte darstellt und bei einem Klick auf diese Karte den Geocoding-Dienst anfragt. Sobald die Antwort vom Dienst eingetroffen ist, soll in einem Pop-up die Adresse dargestellt werden. Nachdem ein Grundgerüst in Form einer HTML-Datei erstellt wurde, werden dort die benötigten Bibliotheken (Leaflet und jQuery) eingebunden. Anschließend kann die Karte erzeugt werden. Damit diese im Vollbild dargestellt wird, findet sich eine entsprechende CSS-Definition in der Datei:

<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	html, body, #map {
		height: 100%;
	}
</style>

Anschließend kann der TileLayer angelegt werden und der Map zugewiesen werden:

// Options
var centerLatitude=53.49577;
var centerLongitude=13.30873;
var zoomLevel=15;

// Define layer
var openStreetMapLayer = new L.TileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});

// Define map
var map = L.map('map', {
	center: new L.LatLng(centerLatitude, centerLongitude),
	zoom: zoomLevel,
	layers: [openStreetMapLayer]
});

Für die Karte muss im nächsten Schritt ein Click-Event definiert werden, welches den AJAX-Request gegen den Geocoding-Dienst auslöst und den Marker erstellt. Der jeweilige Marker wird in eine separate Ebene gepackt und beim nächsten Klick wieder gelöscht und anschließend ein neuer Marker erstellt:

// Marker managment
var markerLayer;
map.on('click', function(e){

	// Console debug
	var coord = e.latlng;
	var lat = coord.lat;
	var lng = coord.lng;
	console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

	// Marker managment		
	if(markerLayer != undefined) {
		map.removeLayer(markerLayer);
	}
	
	markerLayer = new L.Marker(e.latlng);
	map.addLayer(markerLayer);

	// Call geocode api
	var request =	$.ajax({
		method: "GET",
		url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
	});

	request.done(function( json ) {
		console.log(json);
		markerLayer.bindPopup(json.display_name).openPopup();
	});
});

Am Stück sieht die Applikation wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet address encoder</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 100%;
		}
	</style>
	
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="map"></div>
	
	<script>
	        // Options
		var centerLatitude=53.49577;
		var centerLongitude=13.30873;
		var zoomLevel=15;
		
		// Define layer
		var openStreetMapLayer = new L.TileLayer(
				'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
				{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});
		
		// Define map
		var map = L.map('map', {
		    center: new L.LatLng(centerLatitude, centerLongitude),
		    zoom: zoomLevel,
		    layers: [openStreetMapLayer]
		});
		
		// Marker managment
		var markerLayer;
		map.on('click', function(e){

			// Console debug
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

			// Marker managment		
			if(markerLayer != undefined) {
				map.removeLayer(markerLayer);
			}
			
			markerLayer = new L.Marker(e.latlng);
       		map.addLayer(markerLayer);

			// Call geocode api
			var request =	$.ajax({
				method: "GET",
				url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
			});

			request.done(function( json ) {
				console.log(json);
				markerLayer.bindPopup(json.display_name).openPopup();
			});
  		});
	</script>
</body>
</html>

Alternativ kann der Quelltext heruntergeladen bzw. ausprobiert werden.