Medianotions https://www.medianotions.de Studio für Webdesign Wed, 15 Mar 2017 16:22:02 +0000 de-DE hourly 1 https://wordpress.org/?v=4.7.3 Tipp: Firefox Developer Edition https://www.medianotions.de/webdesign-blog/tipp/firefox-developer-edition/ https://www.medianotions.de/webdesign-blog/tipp/firefox-developer-edition/#respond Wed, 15 Mar 2017 13:45:53 +0000 https://www.medianotions.de/?p=954 Sehr empfehlenswert: Von Mozilla gibt es eigens für Web-Entwickler die Firefox Developer Edition mit zusätzlichen Werkzeugen zur Analyse und Fehlersuche.

Der Beitrag Tipp: Firefox Developer Edition erschien zuerst auf Medianotions.

]]>
Sehr empfehlenswert: Von Mozilla gibt es eigens für Web-Entwickler die Firefox Developer Edition mit zusätzlichen Werkzeugen zur Analyse und Fehlersuche.

Der Beitrag Tipp: Firefox Developer Edition erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/tipp/firefox-developer-edition/feed/ 0
WordPress: Seitenweite Suche mit Omnisearch und Search Everything https://www.medianotions.de/webdesign-blog/wordpress/seitenweite-suche-mit-omnisearch-und-search-everything/ https://www.medianotions.de/webdesign-blog/wordpress/seitenweite-suche-mit-omnisearch-und-search-everything/#respond Fri, 10 Mar 2017 14:31:20 +0000 https://www.medianotions.de/?p=937 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: Tipp: Man muss Jetpack nicht zwingend mit WordPress.com verbinden, Omnisearch lässt sich auch im […]

Der Beitrag WordPress: Seitenweite Suche mit Omnisearch und Search Everything erschien zuerst auf Medianotions.

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

Schritt 2: Zusätzliche Post Types für die Suche aktivieren

Mit folgender Funktion in der functions.php lassen sich alle eigenen Post Types zur Omniserach Suche hinzufügen:

// Zusätzliche Post Types für Omnisearch
function mn_omnisearch_add_providers()
{
	// Prüfen ob die Omnisearch Klasse existiert
	if ( class_exists( 'Jetpack_Omnisearch_Posts' ) )
	{
		// Neue Post Types mit dem Post Types Slug hinzufügen
		new Jetpack_Omnisearch_Posts( 'aktionen' );
		new Jetpack_Omnisearch_Posts( 'produkte' );
		new Jetpack_Omnisearch_Posts( 'tarife' );
		new Jetpack_Omnisearch_Posts( 'partner' );
		new Jetpack_Omnisearch_Posts( 'widgets' );
		new Jetpack_Omnisearch_Posts( 'overlays' );
		new Jetpack_Omnisearch_Posts( 'inhalte' );
		new Jetpack_Omnisearch_Posts( 'templates' );
		new Jetpack_Omnisearch_Posts( 'tracking_codes' );
	}
}
add_action('omnisearch_add_providers', 'mn_omnisearch_add_providers');

Schritt 3: Search Everything installieren und konfigurieren

Damit sich die Suche nicht nur auf einige wenige Felder der Beiträge beschränkt, installieren wir im letzten Schritt das Plugin Search Everything und konfigurieren, welche Daten bei der Suche berücksichtigt werden sollen:

Search Everything

Ergebniss

Und so sieht am Ende das Ergebnis aus (auszugsweise):

Seitenweite Suche mit Omnisearch in Aktion (1)

Seitenweite Suche mit Omnisearch in Aktion (2)

Der Beitrag WordPress: Seitenweite Suche mit Omnisearch und Search Everything erschien zuerst auf Medianotions.

]]>
https://www.medianotions.de/webdesign-blog/wordpress/seitenweite-suche-mit-omnisearch-und-search-everything/feed/ 0
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