WordPress hacks&snippets – del 7 – Mere avanceret shortcode

25-04-14 brianbrandt 0 kommentarer

Hejsa!

Dette er syvende del, i en ny serie af blogindlæg, jeg vælger at kalde “WordPress hacks&snippets”. Denne serie henvender sig til dem, der har fået blod på tanden med selv at redigere i WordPress temaer og temafunktioner – i modsætning til at prøve at løse alt med plugins.

Se de øvrige dele af serien her:

WordPress hacks&snippets – del 1 – Personlig hilsen på login-side

WordPress hacks&snippets – del 2 – wp_head()

WordPress hacks&snippets – del 3 – jQuery via Google CDN

WordPress hacks&snippets – del 4 – Tøm skraldespanden automatisk

WordPress hacks&snippets – del 5 – Søg og erstat links i databasen

WordPress hacks&snippets – del 6 – Et par hurtige shortcodes

Kode snippet 7: Avanceret shortcode

Hack #7 tillader dig – via et par kode snippets – at lave din egen WordPress shortcode. Shortcoden danner så en citat-boks, med citat, navn, link og billede til den person, der har udtalt sig – hvilket kan være rart når man skal citere eksperter i sin blog. Nedenstående er et eksempel på hvordan det vil se ud:

[citat navn=”Brian Brandt” link=”http://clickstarter.dk/ehandel/kap3.php” billede=”http://brianbrandt.dk/wp-content/uploads/2007/08/brian-brandt-profil.jpg”]Det kan virkelig være en stor frustration, at skulle lave en kravspecifikation, for det bliver hurtigt teknisk – men ikke desto mindre, er den sindssyg vigtig. [/citat]

Men hvorfor er det interessant?

Fordi du så kan holde den mængde kode du bruger (og skal huske) inde i dine indlæg nede – især for elementer du bruger ingen og igen.

Plus du skal kun rette det ét sted, hvis du vælger at ændre formatteringen senere – i stedet for at skulle igennem alle dine indlæg for at det skal se ens ud.

Dette snippet er beregnet til filen “functions.php” i dit theme.


/* Shortcode for fancy citat boks */
/* Brug: [citatSLET navn="DEN_CITEREDES_NAVN" billede="URL_TIL_BILLEDE" link="URL"] CITAT TEKSTEN HER [/citatSLET] */
/* se bort fra SLET.. */ 
function wpdk_fancy_citat_boks( $atts, $content = null ){
	extract( shortcode_atts( array(
		/* NAVN_PAA_VARIABEL => STANDARDVAERDI_FOR_VARIABEL_HVIS_DEN_IKKE_DEFINERES */
			'navn' => 'Ukendt forfatter',
			'billede' => 'http://wpdk.dk/wp-content/themes/WPDK-theme/images/ukendt-forfatter.png',
			'link' => '',
		), $atts ) );

	$retur_streng = '';
	$retur_streng .= '<div class="fancy_citat_boks"><img src="'.$billede.'" alt="Billede af '.$navn.'"><div class="fancy_citat_boks_text"><p>'.$content.'</p><footer><cite>- ';
	if($link != ''){$retur_streng .=  '<a href="'.$link.'" target="_blank" >';}
	$retur_streng .=  $navn;
	if($link != ''){$retur_streng .=  '</a>';}
	$retur_streng .=  '</cite></footer></div></div>';
	return $retur_streng;
}
/* Tilføj vores shortcodes til listen over ting WordPress "lytter" efter */
add_shortcode( 'citat', 'wpdk_fancy_citat_boks' );

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

.fancy_citat_boks {
	width: 100%;
	min-height: 100px;
	position:relative;
	margin-top: 30px;
	margin-bottom: 20px;
	}
.fancy_citat_boks img {
	height: 100px;
	width: 100px;
	display: block;
	background-color: #FFF;
	float: left;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border: 1px solid #ccf;
	
	}
.fancy_citat_boks_text > p {
	font-weight: 100;
	font-style: italic;
	}
.fancy_citat_boks cite > p {
	font-weight: 100;
	font-style: normal;
	}
.fancy_citat_boks cite > a {
	font-weight: 100;
	font-style: normal;
	text-decoration: underline;
	color: #00789A;
	}
.fancy_citat_boks_text {
	background: none repeat scroll 0 0 #EEF;
    border: 1px solid #ccF;
    border-radius: 3px;
    float: left;
    min-height: 60px;
    margin-left: 20px;
    max-width: 81%;
    padding: 10px;
    position: relative;
}
.fancy_citat_boks_text:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 15px 10px 0;
	border-color: transparent #EEF;
	display: block;
	width: 0;
	z-index: 1;
	left: -14px;
	top: 23px;
}
.fancy_citat_boks_text:before {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 15px 10px 0;
	border-color: transparent #ccF;
	display: block;
	width: 0;
	z-index: 0;
	left: -16px;
	top: 23px;
}

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: [citatSLET]selve citatet[/citatSLET]

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… 🙂

Det giver følgende boks:

[citat]selve citatet[/citat]

De yderligere definitioner, så som den citeredes navn, link til hjemmeside og billede kan defineres på følgende måde:

[citatSLET navn=”” link=”” billede=””]selve citatet[/citatSLET]

…hvor den citeredes navn sættes ind imellem citationstegnene ved navn og hvor de øvrige to felter tager imod URLs for den citeredes hjemmeside eller citatets kilde og billede af den citerede.

Dvs. for at skabe citatboksen med Brian Brandt her øverst i artiklen, er det nok at skrive (minus SLET):

[citatSLET navn=”Brian Brandt” link=”http://clickstarter.dk/ehandel/kap3.php” billede=”http://brianbrandt.dk/wp-content/uploads/2007/08/brian-brandt-profil.jpg”]Det kan virkelig være en stor frustration, at skulle lave en kravspecifikation, for det bliver hurtigt teknisk – men ikke desto mindre, er den sindssyg vigtig. [/citatSLET]

..hvilket er supernemt. 🙂

[obs-hacks]

[obs-backup]