Medianotions https://www.medianotions.de Studio für Webdesign Fri, 24 Feb 2017 06:37:29 +0000 de-DE hourly 1 https://wordpress.org/?v=4.7.2 WordPress: Standard-Editor-Farben ersetzen https://www.medianotions.de/webdesign-blog/wordpress/standard-editor-farben-ersetzen/ https://www.medianotions.de/webdesign-blog/wordpress/standard-editor-farben-ersetzen/#respond Thu, 23 Feb 2017 16:23:02 +0000 https://www.medianotions.de/?p=924 Der WordPress-Editor bietet die Möglichkeit an, Texten eine Farbe zuzuweisen: 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' ); […]

Der Beitrag WordPress: Standard-Editor-Farben ersetzen erschien zuerst auf Medianotions.

]]>
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');

Der Beitrag WordPress: Standard-Editor-Farben ersetzen erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/wordpress/standard-editor-farben-ersetzen/feed/ 0
JavaScript: Session-Daten mit JavaScript https://www.medianotions.de/webdesign-blog/javascript/session-daten-mit-javascript/ https://www.medianotions.de/webdesign-blog/javascript/session-daten-mit-javascript/#respond Thu, 23 Feb 2017 16:04:07 +0000 https://www.medianotions.de/?p=921 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(); }

Der Beitrag JavaScript: Session-Daten mit JavaScript erschien zuerst auf Medianotions.

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

Der Beitrag JavaScript: Session-Daten mit JavaScript erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/javascript/session-daten-mit-javascript/feed/ 0
jQuery: Events und Statusabfragen für responsives Webdesign https://www.medianotions.de/webdesign-blog/jquery/events-und-statusabfragen-fuer-responsives-webdesign/ https://www.medianotions.de/webdesign-blog/jquery/events-und-statusabfragen-fuer-responsives-webdesign/#respond Sun, 06 Nov 2016 16:02:12 +0000 https://www.medianotions.de/code-snippets/?p=516 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 […]

Der Beitrag jQuery: Events und Statusabfragen für responsives Webdesign erschien zuerst auf Medianotions.

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

Der Beitrag jQuery: Events und Statusabfragen für responsives Webdesign erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/jquery/events-und-statusabfragen-fuer-responsives-webdesign/feed/ 0
jQuery: HTML-Formular per AJAX senden https://www.medianotions.de/webdesign-blog/jquery/html-formular-per-ajax-senden/ https://www.medianotions.de/webdesign-blog/jquery/html-formular-per-ajax-senden/#respond Sat, 05 Nov 2016 15:05:15 +0000 https://www.medianotions.de/code-snippets/?p=511 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 […]

Der Beitrag jQuery: HTML-Formular per AJAX senden erschien zuerst auf Medianotions.

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

Der Beitrag jQuery: HTML-Formular per AJAX senden erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/jquery/html-formular-per-ajax-senden/feed/ 0
PHP: Zeilenanzahl großer Dateien ermitteln https://www.medianotions.de/webdesign-blog/php/zeilenanzahl-grosser-dateien-ermitteln/ https://www.medianotions.de/webdesign-blog/php/zeilenanzahl-grosser-dateien-ermitteln/#respond Wed, 09 Sep 2015 09:45:51 +0000 https://www.medianotions.de/code-snippets/?p=509 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;

Der Beitrag PHP: Zeilenanzahl großer Dateien ermitteln erschien zuerst auf Medianotions.

]]>
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;

Der Beitrag PHP: Zeilenanzahl großer Dateien ermitteln erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/php/zeilenanzahl-grosser-dateien-ermitteln/feed/ 0
WordPress: Sprache und Übersetzung in PHP anpassen https://www.medianotions.de/webdesign-blog/wordpress/sprache-und-uebersetzung-in-php-anpassen/ https://www.medianotions.de/webdesign-blog/wordpress/sprache-und-uebersetzung-in-php-anpassen/#comments Fri, 04 Sep 2015 08:49:21 +0000 https://www.medianotions.de/code-snippets/?p=497 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' […]

Der Beitrag WordPress: Sprache und Übersetzung in PHP anpassen erschien zuerst auf Medianotions.

]]>
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

Der Beitrag WordPress: Sprache und Übersetzung in PHP anpassen erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/wordpress/sprache-und-uebersetzung-in-php-anpassen/feed/ 1
WordPress: robots.txt dynamisch anpassen https://www.medianotions.de/webdesign-blog/wordpress/robots-txt-dynamisch-anpassen/ https://www.medianotions.de/webdesign-blog/wordpress/robots-txt-dynamisch-anpassen/#respond Thu, 13 Aug 2015 09:23:59 +0000 https://www.medianotions.de/code-snippets/?p=491 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"; } […]

Der Beitrag WordPress: robots.txt dynamisch anpassen erschien zuerst auf Medianotions.

]]>
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.

Der Beitrag WordPress: robots.txt dynamisch anpassen erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/wordpress/robots-txt-dynamisch-anpassen/feed/ 0
Tipp: Bilder in WordPress automatisch optimieren mit ShortPixel https://www.medianotions.de/webdesign-blog/wordpress/shortpixel-bilder-in-wordpress-automatisch-optimieren/ https://www.medianotions.de/webdesign-blog/wordpress/shortpixel-bilder-in-wordpress-automatisch-optimieren/#respond Thu, 21 May 2015 14:06:37 +0000 https://www.medianotions.de/code-snippets/?p=478 Mit dem Anbieter ShortPixel und dem dazugehörigen Plugin „ShortPixel Image Optimizer“ lassen Bilder in WordPress unkompliziert optimieren und die Ladezeiten der eigenen Website verbessern: Dabei werden nicht nur die Bildformate JPG, PNG und GIF unterstützt, sondern auf PDF-Datei komprimiert. Das Preismodell ist fair und beinhaltet auch ein kostenfreies Basiskonto mit dem sich immerhin 100 Bilder […]

Der Beitrag Tipp: Bilder in WordPress automatisch optimieren mit ShortPixel erschien zuerst auf Medianotions.

]]>
Mit dem Anbieter ShortPixel und dem dazugehörigen Plugin „ShortPixel Image Optimizer“ lassen Bilder in WordPress unkompliziert optimieren und die Ladezeiten der eigenen Website verbessern:

shortpixel.com

Dabei werden nicht nur die Bildformate JPG, PNG und GIF unterstützt, sondern auf PDF-Datei komprimiert. Das Preismodell ist fair und beinhaltet auch ein kostenfreies Basiskonto mit dem sich immerhin 100 Bilder im Monat optimieren lassen.

ShortPixel in der Medienübericht

Der Beitrag Tipp: Bilder in WordPress automatisch optimieren mit ShortPixel erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/wordpress/shortpixel-bilder-in-wordpress-automatisch-optimieren/feed/ 0
PHP: Mit strpos_all() alle Vorkommnisse in einem String finden https://www.medianotions.de/webdesign-blog/php/mit-strpos_all-alle-vorkommnisse-in-einem-string-finden/ https://www.medianotions.de/webdesign-blog/php/mit-strpos_all-alle-vorkommnisse-in-einem-string-finden/#respond Mon, 18 May 2015 07:11:42 +0000 https://www.medianotions.de/code-snippets/?p=476 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 […]

Der Beitrag PHP: Mit strpos_all() alle Vorkommnisse in einem String finden erschien zuerst auf Medianotions.

]]>
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');

Der Beitrag PHP: Mit strpos_all() alle Vorkommnisse in einem String finden erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/php/mit-strpos_all-alle-vorkommnisse-in-einem-string-finden/feed/ 0
Website-Zoom mit jQuery und CSS https://www.medianotions.de/webdesign-blog/jquery/website-zoom-mit-jquery-und-css/ https://www.medianotions.de/webdesign-blog/jquery/website-zoom-mit-jquery-und-css/#respond Sat, 11 Apr 2015 15:48:07 +0000 https://www.medianotions.de/code-snippets/?p=468 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: 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)) […]

Der Beitrag Website-Zoom mit jQuery und CSS erschien zuerst auf Medianotions.

]]>
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>

Der Beitrag Website-Zoom mit jQuery und CSS erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/jquery/website-zoom-mit-jquery-und-css/feed/ 0