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ß!

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);			
		});
	});
});

PHP: Zeilenanzahl großer Dateien ermitteln

Auf Linux/Unix-Systemen lässt sich die Zeilenanzahl (sehr) großer Dateien mit exec() und wc -l ermitteln:

$logfile_location='logs/my_logfile.txt';
if(file_exists($logfile_location)) $logfile_lines=intval(exec("wc -l ".$logfile_location));
else $logfile_lines=0;

WordPress: Sprache und Übersetzung in PHP anpassen

Die Spracheinstellungen lassen sich in WordPress nicht nur über die Einstellungen sondern auch über den Filter add_filter(‘locale’, …) in den functions.php dynamisch anpassen. Die folgende Funktion zum Beispiel setzt Französisch als Sprache für die Website wohingegen der WordPress-Adminbereich auf deutsch ausgegeben wird:

// WordPress Locale setzen
function set_locale_frontend($locale)
{
	if(is_admin()) return 'de_DE';
	else return 'fr_FR'
}
add_filter('locale', 'set_locale_frontend');

Das kann für Multisite-Übersetzungen sehr praktisch sein, wenn man den Adminbereich nicht in der Übersetzungssprache bedienen will.

Mit der Funktion load_textdomain() lässt sich wiederum eine weitere Übersetzung laden:

echo(__('Hallo Welt!', 'meine_text_domain')); // Bonjour tout le monde!

load_textdomain('medianotions', get_stylesheet_directory().'/languages/en_GB.mo');

echo(__('Hallo Welt!', 'meine_text_domain')); // Hello world!

Bezüglich erstellen und bearbeiten von Übersetzungsdateien ist das Plugin Loco Translate das Mittel der Wahl:

Loco-Translate

WordPress: robots.txt dynamisch anpassen

Die robots.txt wird in WordPress dynamisch erzeugt. Die einfachste Möglichkeit diese anzupassen ist, eine statische robots.txt in das Root-Verzeichnis der WordPress-Installation anzulegen. Die andere, flexiblere Möglichkeit ist in der functions.php mit folgendem Filter zu arbeiten:

// robots.txt anpassen
function robots_mod( $output, $public )
{
	if($public)
	{
		$output .= "Allow: /*.js$\n";
		$output .= "Allow: /*.css$\n";
	}
	
	return $output;
}
add_filter('robots_txt', 'robots_mod', 10, 2);

Damit ist es möglich die Ausgabe der robots.txt mit einer eigenen Logik zu verknüpfen:

// robots.txt anpassen
function robots_mod( $output, $public )
{
	if($_SERVER['HTTP_HOST']=='hide-from-search-engines.com') $output = "Disallow: /\n";
	
	return $output;
}
add_filter('robots_txt', 'robots_mod', 10, 2);

Performance-Tipp: Die robots.txt wird von Suchmaschinen zum Teil sehr oft aufgerufen. Falls das verwendete Caching-Plugin die robots.txt nicht abdeckt und man keine dynamische Anpassung benötigt, bietet es sich an die robots.txt als statische Text-Datei im Webroot-Verzeichs zu hinterlegen.

PHP: Mit strpos_all() alle Vorkommnisse in einem String finden

Mit dieser Funktion lassen sich alle Vorkommnisse in von $needle in $haystack finden. Zurückgegeben wird ein Array mit den Positionen:

function strpos_all($haystack, $needle)
{
	$lastPos = 0;
	$positions = array();

	while (($lastPos = strpos($haystack, $needle, $lastPos))!== false) {
	    $positions[] = $lastPos;
	    $lastPos = $lastPos + strlen($needle);
	}

	return $positions;
}

// Aufruf
$str_positions=strpos_all('a', 'abcd ab abcdefg abcde');

Website-Zoom mit jQuery und CSS

Mit der CSS-Eigenschaft transform: scale() und etwas jQuery lässt sich ziemlich gut das ein- und auszoomen einer Website simulieren. Das ist für alle praktisch, die Ihren Benutzern entsprechende Buttons auf ihrer Website anbieten wollen. Hier unsere Lösung:

<!-- Trigger -->
<ul id="zoom_triggers">
	<li><a id="zoom_in">Vergrößern</a></li>
	<li><a id="zoom_out">Verkleinern</a></li>
	<li><a id="zoom_reset">Zurücksetzen</a></li>
</ul>

<script>
	jQuery(document).ready(function($)
	{
		// Zoom-Level setzen
		var zoom_level=100;

		// Click-Events
		$('#zoom_in').click(function() { zoom_page(10, $(this)) });
		$('#zoom_out').click(function() { zoom_page(-10, $(this)) });
		$('#zoom_reset').click(function() { zoom_page(0, $(this)) });

		// Zoom-Funktion
		function zoom_page(step, trigger)
		{
			// Nur zwei Schritte ein- beziehungsweise ausblenden
			if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

			// Zoom berechnen / zurücksetzen
			if(step==0) zoom_level=100;
			else zoom_level=zoom_level+step;
			
			// Zoom per CSS setzen
			$('body').css({
				transform: 'scale('+(zoom_level/100)+')', // Zoom anpassen
				transformOrigin: '50% 0' // Ausgangspunkt für transform scale setzen
			});

			// Seitenbreite am Zoom anpassen
			if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
			else $('body').css({ width: '100%' });

			// Trigger deaktivieren / aktivieren (per CSS entsprechend optisch kennzeichnen)
			if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
			else trigger.parents('ul').find('.disabled').removeClass('disabled');
			if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
			else $('#zoom_reset').addClass('disabled');
		}
	});
</script>
Seite 1 von 41234