WordPress hacks & snippets: browserspecifikt indhold, kode & styles via shortcodes

29-08-14 brianbrandt 0 kommentarer

Læs videre hvis du er nysgerrig om mulighederne for browserspecifikt indhold i WordPress..

wpdk browserspecifikt indhold browserspecifik kode browserspecifikke styles i WordPress

Vil du gerne kunne afvikle browserspecifik kode, browserspecifikke styles, eller vise andet browserspecifikt indhold, i WordPress?

At opsætte mekkanismen til at kunne definere browserspecifikt indhold, er heldigvis nemt nok og jeg vil nu vise dig hvordan selv kan gøre det.

[obs]Det er generelt bedst, at bygge hjemmesider op så de virker i alle browsere, uanset hvad…[/obs]

Hvorfor er det så interessant?

[browser-ikon]

Det at bygge hjemmesider op så de virker i alle browsere, uanset hvad, er dog ikke altid muligt eller praktisk, da browserne fortolker siders indhold en smule forskelligt og har egne regler for hvordan bestemte elementer skal se ud. F.eks. ser scrollbarre og knapper med “flueben” forskelligt ud mellem browsere, hvilket ikke altid er det lige fedt hvis du går efter bestemt design i en anden stil.

Ligesom i sidste blogindlæg, hvor vi kiggede på det med at hente forskelligt indhold til mobile enheder og desktop computere – læs blogindlægget her – så kan det også være gunstigt at vise forskellige ting, afhængigt af den besøgendes browser, i forhold til performance. F.eks. kunne det være meget smart at kunne hente et logo i stor opløsning på en browser i en enhed med Retina-skærm (iPhone, iPad, MacBook, osv.) – hvorimod det ville være spild af båndbredde på en enhed, der ikke har så høj opløsning i skærmen.

Din browser er [browser]…

 

PS. Browserlogoerne i dette blogindlæg er hentet fra: https://github.com/alrra/browser-logos

[obs]Som med så meget andet på nettet, virker denne metode ikke altid med Internet Exploder. Det afhænger lidt hvilken WordPress version du har og hvilken IE version du har. Så metoden er IKKE 100% idiotsikker…[/obs]

 

Koden

Koden består af to nye shortcodes, et indholdsfilter og et par CSS-klasser.

Disse snippets er beregnet til filen “functions.php” i dit theme.

/* funktion der finder ud af hvilken browser der bruges og tilføjer det som den første klasse til html body og som en global variabel */
/* du kan så definere browserspecifikke styles, ved henvise til den klasse der har browserens navn */
function wpdk_browser_style($body_style) {
		global $is_lynx, $is_gecko, $is_IE, $is_macIE, $is_winIE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone, $wpbrowser;
		if($is_lynx){$body_style[0] = 'lynx';}//Lynx
		elseif($is_gecko){$body_style[0] = 'firefox';}//Firefox
		elseif($is_opera){$body_style[0] = 'opera';}//Opera
		elseif($is_NS4){$body_style[0] = 'ns4';}//Ns4
		elseif($is_safari){$body_style[0] = 'safari';}//Safari
		elseif($is_chrome){$body_style[0] = 'chrome';}//Chrome
		elseif($is_IE){$body_style[0] = 'ie';} //Internet Exploder
		elseif($is_winIE){$body_style[0] = 'winie';} //Internet Exploder i Windows
		elseif($is_macIE){$body_style[0] = 'macie';} //Internet Exploder på Mac
		else{$body_style[0] = 'ukendt';}//Dunno
		if($is_iphone) $body_style[0] = 'iphone'; //iPhone
		$wpbrowser = $body_style[0];
		return $body_style;
	}
add_filter('body_class','wpdk_browser_style');
/* shortcode der henter hvilken browser der bruges fra den nye globale variabel */
function wpdk_browser($atts){
	global $wpbrowser;
	return $wpbrowser;
}
add_shortcode('browser', 'wpdk_browser');
/* shortcode der viser et browser-ikon */
/* eksempel på browserspecifikt indhold */
function wpdk_browser_icon($atts){
	$browser_icon = '<div class="browser-icon"></div>';
	return $browser_icon;
}
add_shortcode('browser-ikon', 'wpdk_browser_icon');

 

Dette snippet er beregnet til filen “style.css” i dit theme.

.browser-icon {
	height: 256px;
	width: 256px;
	display: block;
	position:relative;
	top:-20px;
	float: right;
	margin: 0px;
	background-repeat: no-repeat;
	background-position: center top;
}
.lynx .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/lynx.png');}
.firefox .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/firefox.png');}
.opera .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/opera.png');}
.ns4 .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/ns4.png');}
.safari .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/safari.png');}
.chrome .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/chrome.png');}
.ie .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/ie.png');}
.winie .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/winie.png');}
.macie .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/macie.png');}
.ukendt .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/ukendt.png');}
.iphone .browser-icon {background-image: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/iphone.png');}

 

 

Det, der sker, er at vi opretter funktioner, der returnerer noget HTML, når de kaldes. Disse funktioner hægtes så på listen over de ting WordPress kigger efter, når den løber igennem indholdet i dit indlæg/side.

Disse shortcodes bruges ved at skrive: [browserSLET] og [browser-ikonSLET]

Grunden til at jeg skriver SLET, er at ellers ville WordPress fortolke koden, da ovenstående kode-eksempel er en del af dette indlægs indhold og da jeg bruger de shortcodes for at generere citat-bokse på dette site. Dvs. slet “SLET” fra koden… 🙂

[obs-hacks]

[obs-backup]