Hacks & snippets: Shortcodes der kun er synlige på enten mobil eller desktop browser

18-08-14 brianbrandt 0 kommentarer

Jeg vil vise dig hvordan du kan bygge shortcodes, der viser en besked KUN på bestemte enheder ved at bruge WordPress-funktion wp_is_mobile().

Beskeden vises enten kun på mobile enheder eller kun på desktop enheder – uden brug af CSS breaks. Dvs. i modsætning til f.eks. kun at “skjule” indholdet med CSS på mobile enheder, så hentes det slet ikke fra serveren, hvorved overførselen af data formindskes.

Eksempel:

[mobil]

Hejsa mobilbruger!

Denne boks bliver kun hentet for mobil-brugere…

Denne boks bliver ALDRIG hentet for desktop-brugere…

mobil[/mobil]
[desktop]

Hejsa desktop-bruger!

Denne boks bliver kun hentet for desktop-brugere…

Denne boks bliver ALDRIG hentet for mobil-brugere…

desktop[/desktop]

Ovenstående besked ser forskellig ud efter hvilken enhed du bruger for at læse denne blogpost. Prøv at besøge denne side både på en mobil enhed og en desktop enhed for at se forskellen.

KUN på mobile enheder

Nogle gange kan det være interessant at kunne levere indhold, der kun er synligt på mobile enheder. F.eks. en opfordring om at besøge siden på en enhed med en større skærm – eller links til mobiloptimeret indhold.

Men hvorfor er det interessant?

  1. Performance – her er der færre hestekræfter
  2. Performance – her er der lavere skærmopløsning
  3. Performance… – her er der ofte langsom netforbindelse
  4. Kontekst – i hvilken sammenhæng bliver indholdet vist?
  5. Målgruppe – hvem henvender indholdet sig til?

KUN på desktop enheder

Nogle gange kan det være interessant at kunne levere indhold, der ikke er synligt på mobile enheder, men kun på en egentlig computer. F.eks. en tung video eller et billedegalleri med mange store billeder – eller links til indhold der ikke er mobiloptimeret.

Men hvorfor er det interessant?

  1. Kontekst – i hvilken sammenhæng bliver indholdet vist?
  2. Målgruppe – hvem henvender indholdet sig til?
  3. Performance – her er der flere hestekræfter at arbejde med, en hurtige netforbindelse og større skærmopløsning

Koden

Koden består af to nye shortcodes og en CSS-klasse, vi genbruger fra en tidligere shortcode.

Den styling jeg har valgt at bruge her er ikke strengt nødvendig, men den hjælper med til at illustrere hvor indholdet starter og slutter – i forhold til sidens øvrige indhold.

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

/* Shortcode for besked med egen tekst, KUN synlig for mobile brugere */
/* Brug: [mobilSLET] EGEN TEKST HER [/mobilSLET] */ 
function wpdk_mobil_egen_tekst( $atts, $content = null ){
	if( wp_is_mobile() ) { //dette er en mobil
    	return '<div class="besked">' . $content . '</div>';
	} else { //dette er IKKE en mobil
		// gør ingentin
	}
}
/* Shortcode for besked med egen tekst, KUN synlig for desktop brugere */
/* Brug: [desktopSLET] EGEN TEKST HER [/desktopSLET] */ 
function wpdk_desktop_egen_tekst( $atts, $content = null ){
	if( !wp_is_mobile() ) { //dette er IKKE en mobil
    	return '<div class="besked">' . $content . '</div>';
	} else { //dette er en mobil
		// gør ingentin
	}
}
/* Tilføj vores shortcodes til listen over ting WordPress "lytter" efter */
/* add_shortcode( NAVN_PAA_SHORTCODE , NAVN_PAA_FUNKTION ); */ 
add_shortcode( 'mobil', 'wpdk_mobil_egen_tekst' );
add_shortcode( 'desktop', 'wpdk_desktop_egen_tekst' );

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

.besked{
    background-color: #FFFFE0;
	background: url('http://wpdk.dk/wp-content/themes/WPDK-theme/images/bg_pattern_yellow.jpg');
	border: solid 1px;
    border-color: #E6DB55;
	padding: 10px;
	border-radius:3px;
	margin-top:40px;
	margin-bottom: 40px !important;
}

 

 

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.

Denne bruges ved at skrive: [mobilSLET]DIN BESKED HER[/mobilSLET] eller [desktopSLET]DIN BESKED HER[/desktopSLET]

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]