Webdesign-Blog

Hier finden sich vor allem Tipps, Tricks und Code-Schnipsel aus unserem Arbeitsalltag, die (in der Regel) nicht dutzendfach bei Google auftauchen, wenn man danach sucht. Viel Spaß!

Tipp: Sehr gute automatische Übersetzungen mit DeepL

Die Übersetzungsautomaten von Google uns Microsoft sind ja so gut wie jedem bekannt, nicht zu letzt wegen dem einen oder anderen Lacher der aufkommt wenn man sich dort ganze (Ab)Sätze übersetzen lässt. Ganz ohne Lacher, dafür aber mit erstaunlich guten Übersetzungen überzeugt das neue Übersetzungs-Tool DeepL.

 

WordPress: Benutzer per PHP anlegen

Manchmal kommt es vor, dass man die FTP-Zugangsdaten zu einer Website hat, aber keinen WordPress-Zugang. Der Kunde kennt sich nicht aus und der Webdesigner, der die Seite mal vor langer Zeit erstellt hat, ist nicht mehr greifbar. In so einem Fall leistet diese kleine PHP-Funktion in den functions.php sehr gute Dienste:

function add_admin_user()
{
	$login = 'myself';
	$passw = 'very#secret';
	$email = 'my@mail.io';

	if ( !username_exists( $login )  && !email_exists( $email ) ) {
		$user_id = wp_create_user( $login, $passw, $email );
		$user = new WP_User( $user_id );
		$user->set_role( 'administrator' );
	}
}
add_action('init','add_admin_user');

JavaScript: URL-Parameter abfragen

Mit dieser kleinen Funktion lassen sich in JavaScript URL-Parameter / Query-Strings abfragen:

// URL-Parameter abfragen
function getUrlParameterByName(name, url)
{
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
}

alert(getUrlParameterByName('mein-url-parameter'));

PHP: ZIP-Archive extrahieren

Trotz immer schneller werdenden Internet-Verbindungen dauert das Hochladen von Verzeichnissen mit tausenden von Dateien und Unterverzeichnissen, wie das zum Beispiel bei kompletten WordPress-Installationen oder komplexen Themes der Fall ist, immer noch seine Zeit.

Deutlich schneller ist es, statt dessen ein ZIP-Archiv hochzuladen. Falls man auf dem Server keine SSH-Zugang hat, lässt sich die ZIP-Datei mit folgendem kleinen PHP-Skript zu extrahieren.

<?php 
// Dateiname bestimmen (muss hier im selben Verzeichnis liegen)
$file="meine-datei.zip";

// Absoluten Pfad bestimmen
$path=pathinfo(realpath($file), PATHINFO_DIRNAME);

// ZIP-Datei öffnen und prüfen
$zip=new ZipArchive;
$res=$zip->open($file);
if ($res===TRUE)
{
	// ZIP-Datei extrahieren
	$zip->extractTo($path);
	$zip->close();

	// Erfolgsmeldung
	echo("<h2>Erfolg :-)</h2>");
	echo("<p><code><strong>$file</strong></code> erforgreich in das Verzeichnis <code><strong>$path</strong></code> endpackt.</p>");
}
// Fehlermeldung
else
{
	echo("<h2>Fehler :-(</h2>");
	echo("<p><code><strong>$file</strong></code> konnte nicht geöffnet werden.</p>");
}

WordPress: Seitenweite Suche mit Omnisearch und Search Everything

Leider verfügt  WordPress über keine seitenweite Suche, die in allen Post Types gleichzeitig sucht. Das ist aber vor allem bei großen Seiten sehr praktisch. Zum Glück lässt sich diese Funktion relativ einfach mit den Plugins Jetpack Omnisearch und Search Everything nachrüsten:

Schritt 1: Jetpack installieren

Jetpack installieren und Omnisearch aktivieren:

Jetpack Omnisearch

Tipp: Man muss Jetpack nicht zwingend mit WordPress.com verbinden, Omnisearch lässt sich auch im Development Mode verwenden. Dazu einfach die Zeile define('JETPACK_DEV_DEBUG', true); in die wp-config.php einfügen.

mehr lesen…

WordPress: Standard-Editor-Farben ersetzen

Der WordPress-Editor bietet die Möglichkeit an, Texten eine Farbe zuzuweisen:

WordPress: Standard-Editor-Farben

Nur leider stimmen diese Farben natürlich nicht mit den Farben der Website überein. Mit der folgenden PHP-Funktion lassen sich die Standard-Farbwerte entsprechend den Vorgaben des Corporate Designs ändern:

function modify_colors($content)
{
	// Farben zuordnen
	$array = array (
		'#ff0000' => '#de0202',
		'#3366ff' => '#006bad'
	);

	// Farben im Inhalt suchen und ersetzen
	$content=strtr($content, $array);

	return $content;
}
add_filter('the_content', 'modify_colors');

JavaScript: Session-Daten mit JavaScript

Vor allem bei Websites mit aktivem Caching, die nicht bei jedem Aufruf dynamisch neu erstellt werden, kann es praktisch sein, Nutzereingaben mit den JavaScript-Funktionen sessionStorage.setItem() und sessionStorage.getItem() zu sichern. Hier ein einfaches Beispiel:

// Beispiel: Verwendung sessionStorage.setItem()
$('#my_alert .close').click(function() {
	sessionStorage.setItem('popup', 'closed');
});

// Beispiel: Verwendung sessionStorage.getItem()
if(sessionStorage.getItem('popup')=='closed') {
	$('#my_alert').remove();
}

jQuery: Events und Statusabfragen für responsives Webdesign

Bei der Umsetzung komplexer responsiver Webdesigns sind CSS-Media-Queries oft nicht ausreichend um alle gewünschten Änderungen zu erfassen und entsprechende Anpassungen vorzunehmen. Mit der folgenden Funktion und den dazugehörenden Events lassen sich über erweiterte Regeln das responsive Verhalten einer Website bestimmen.

Events

  • $(document).ready(): Das Document Object Model ist verfügbar.
  • $(window).load(): Die Website ist komplett geladen.
  • $(window).resize(): Die Größe des Browser-Fensters wird verändert.
  • $(window).orientationchange(): Das Gerät wird vom Quer- zum Hochformat gedreht oder umgekehrt.
  • $('form').submit(): Ein Formular wurde gesendet.
jQuery(document).ready(function($)
{
	var window_width=null;
	var window_width_old=null;

	function update_responsive_settings(mode)
	{
		// Viewport dynamisch anpassen
		viewport = document.querySelector("meta[name=viewport]");
		if(mode=='orientationchange') viewport.setAttribute('content', 'width=device-width');
		if($(window).width()>420) viewport.setAttribute('content', 'width=1100');
		
		// Breite sichern
		window_width_old=window_width;
		window_width=$(window).width();

		// Breite prüfen und falls unverändert abbrechen
		if(window_width_old==window_width) return;

		// Aktionen entsprechend Breite
		if(window_width<=420)
		{
			mobile_nav('create'); // Beispielfunktion
		}
		else
		{
			mobile_nav('remove'); // Beispielfunktion
		}

		// Aktionen entsprechend Bereite und Modus
		if(window_width<=420 && mode=='load')
		{
			$('#my_box').fadeIn();
		}
	}
	update_responsive_settings('ready');
	$(window).load(function() { update_responsive_settings('load'); });
	$(window).resize(function() { update_responsive_settings('resize'); });
	$(window).bind('orientationchange', function() { update_responsive_settings('orientationchange'); });
	$('form').submit(function() { update_responsive_settings('form_submit'); });
});

jQuery: HTML-Formular per AJAX senden

So lässt sich ein bestehendes HTML-Formular samt aller Input-Felder mit jQuery per AJAX senden:

jQuery(document).ready(function($)
{
	$("#my_form").submit(function(event) {
		// Standard-Aktion abbrechen
		event.preventDefault();	

		// Formular per AJAX senden
		var form=$(this);
		$.ajax({
			type: 'POST',
			url: form.prop('action'),
			data : form.serialize(),
			dataType: 'json',
			encode: true
		}).done(function(data) {
			// Aktionen bei Erfolg
			console.log('done: '+data);
		}).fail(function(data) {
			// Aktionen bei einem Fehler
			console.log('fail: '+data);			
		});
	});
});
Seite 1 von 41234