På sajten http://topp30.se listar jag och en del vänner och bekanta varje år våra favoritlåtar. Vi har sysslat med detta något nördiga listande i drygt tio år. Förra året började några av oss att bifoga listan i spotify-form, och inte bara text. I år har nästan alla 20 en spotifylista för sin årslista.

Länken till spotifylistan finns i varje inlägg som en vanlig textlänk, men den ligger ofta på olika ställen, har olika ankartext och kan vara lite svår att hitta. Därför la jag till en genererad spotifylänk som alltid hamnar på samma ställe, uppe till höger i varje inlägg. Lättare att hitta, mer konsekvent.

Detta kan man åstadkomma genom att lägga spotifylänken som ett ”eget fält”, ändra i varje template-fil på rätt ställe (index.php/archive.php/search.php etc.) och där läsa in spotify-fältet och visa länken, men det blir opraktiskt att underhålla, lätt att göra fel och lite fult.

En betydligt snyggare lösning är att använda WordPress filterfunktionalitet.

Steg 1:
Lägg spotifylänken som ett ”Eget fält” (för varje inlägg som har en spotifylista).

Steg 2:
Lägg till en funktion (i functions.php), som visar en länkad spotify-logga när det finns en lista tillgänglig.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function spotify_content($content) {
	global $post;
	$meta_key = 'spotify';
	$extra_info = "";
	$spotify_logo = get_bloginfo('template_url') . "/img/spotify.png";
	$meta_value = get_post_meta($post->ID, $meta_key, TRUE);
	if($meta_value != '') {
		$extra_info = <<<EOT
			<div class="spotify-link">
				<a href="$meta_value"><img src="$spotify_logo" alt="Lyssna på låtarna via Spotify" /></a>
			</div>
EOT;
	}
	return $extra_info . $content;
}

Steg 3:
Lägg till ett filter, som anropar spotify_content varje gång WordPress-funktionen the_content anropas. Det är the_content som visar texten i ett blogginlägg så den kommer definitivt att anropas från exempelvis single.php och index.php (det finns undantag, se längre ner)

add_filter( 'the_content', 'spotify_content' );

Steg 4:
Lägg till en css-klass i style.css som lägger din div som du vill ha den. Den allra enklaste varianten blir så här:

1
2
3

.spotify-link {
   float: right;
}

Och det var allt. Resultatet, med en klickbar spotify-logga för varje spotifierat inlägg blir så här:

topp30.se med automatisk spotifylänk

Observera att ibland används the_excerpt stället för the_content i mallarna. Det är när man bara vill visa ett utdrag ur inläggen istället för hela texten.
Om man vill ha spotify-länken även i dessa mallar så är det inte svårare än att man lägger in ett filter för the_excerpt också:

add_filter( 'the_excerpt', 'spotify_content' );