<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jonas Nordström &#187; shortcodes</title>
	<atom:link href="http://jonasnordstrom.se/tag/shortcodes/feed/" rel="self" type="application/rss+xml" />
	<link>http://jonasnordstrom.se</link>
	<description>Teknik och media</description>
	<lastBuildDate>Mon, 30 Jan 2012 00:23:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>WordPress shortcodes &#8211; enkelt exempel</title>
		<link>http://jonasnordstrom.se/wordpress-shortcodes-enkelt-exempel/</link>
		<comments>http://jonasnordstrom.se/wordpress-shortcodes-enkelt-exempel/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 08:16:32 +0000</pubDate>
		<dc:creator>jonas</dc:creator>
				<category><![CDATA[wordpress]]></category>
		<category><![CDATA[shortcodes]]></category>
		<category><![CDATA[spotify]]></category>
		<category><![CDATA[topp30.se]]></category>

		<guid isPermaLink="false">http://jonasnordstrom.se/?p=289</guid>
		<description><![CDATA[I WordPress 2.5 introducerades shortcodes men det är nog många som fortfarande inte vet riktigt vad det är och vad man kan använda det till.
Shortcodes tillåter dig exempelvis att skriva &#91;gallery&#93; direkt i ett blogginlägg, och så visas alla bilder som hör till det inlägget som en liten kontaktkarta. 
Man kan givetvis definiera egna ...]]></description>
			<content:encoded><![CDATA[<p class="wp-flattr-button"></p><p>I WordPress 2.5 introducerades <a href="http://codex.wordpress.org/Shortcode_API">shortcodes</a> men det är nog många som fortfarande inte vet riktigt vad det är och vad man kan använda det till.<br />
Shortcodes tillåter dig exempelvis att skriva &#91;gallery&#93; direkt i ett blogginlägg, och så visas alla bilder som hör till det inlägget som en liten kontaktkarta.<br />
Man kan givetvis definiera egna shortcodes, genom att skriva en funktion i ett plugin eller i functions.php och sen koppla en shortcode till den funktionen.</p>
<h3>Exempel 1</h3>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> bloginfo_shortcode<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$atts</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #990000;">extract</span><span style="color: #009900;">&#40;</span>shortcode_atts<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
        <span style="color: #0000ff;">'key'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span>
    <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$atts</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">return</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #000088;">$key</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_shortcode<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'bloginfo'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'bloginfo_shortcode'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Funktionen add_shortcode registrerar en ny shortcode, och i exemplet ovan betyder det att om man skriver &#91;bloginfo&#93; i ett inlägg, så kommer funktionen bloginfo_shortcode() att anropas. Just i det här exemplet ska man dessutom skicka med en parameter, det ser ut så här: &#91;bloginfo key=&#8221;template_url&#8221;&#93;<br />
(Exemplet kommer från <a href="http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress/">Blue Anvil</a>)</p>
<h3>Exempel 2</h3>
<p>Jag har i ett tidigare inlägg visat hur man kan <a href="http://jonasnordstrom.se/automatisk-spotifylank-i-wordpress/">koppla en spotifylista till en wordpress-post</a>, en metod som jag använder på http://topp30.se.<br />
Jag vill utnyttja det faktum att listorna nu ligger som egna fält, och skapa en sida med alla spotifylistor i en lång (nåja) HTML-lista.<br />
Steg ett är att definiera en funktion som hämtar alla inlägg med &#8221;spotify-fält&#8221; och sen generera en lista av dem.<br />
Nästa steg är att koppla en shortcode till den funktionen.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">// [spotifylist] - shortcode function
function spotify_sc_func($atts) {
   ob_start();
?&gt;
   &lt;ul id=&quot;spotifylist&quot;&gt;
   <span style="color: #000000; font-weight: bold;">&lt;?php</span>
   <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
   <span style="color: #000088;">$querystr</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;
    SELECT wposts.* 
    FROM <span style="color: #006699; font-weight: bold;">$wpdb-&gt;posts</span> wposts, <span style="color: #006699; font-weight: bold;">$wpdb-&gt;postmeta</span> wpostmeta
    WHERE wposts.ID = wpostmeta.post_id 
    AND wpostmeta.meta_key = 'spotify' 
    AND wposts.post_status = 'publish' 
    AND wposts.post_date &lt; NOW() 
    ORDER BY wposts.post_type, wposts.post_date DESC
    &quot;</span><span style="color: #339933;">;</span>
&nbsp;
   <span style="color: #000088;">$pageposts</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$wpdb</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">get_results</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$querystr</span><span style="color: #339933;">,</span> OBJECT<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$pageposts</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$pageposts</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
         <span style="color: #000000; font-weight: bold;">&lt;?php</span> setup_postdata<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	 <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$spotify</span> <span style="color: #339933;">=</span> get_post_custom_values<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;spotify&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
         &lt;li&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>: &lt;a href='<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$spotify</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>'&gt;spotify&lt;/a&gt; | &lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;text&lt;/a&gt;&lt;/li&gt;
      <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endforeach</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">else</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
      &lt;h2 class=&quot;center&quot;&gt;Not Found&lt;/h2&gt;
      &lt;p class=&quot;center&quot;&gt;Sorry, but you are looking for something that isn't here.&lt;/p&gt;
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
&nbsp;
   &lt;/ul&gt;
   <span style="color: #000000; font-weight: bold;">&lt;?php</span>
   <span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <span style="color: #990000;">ob_get_contents</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #990000;">ob_end_clean</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #b1b100;">return</span> <span style="color: #000088;">$output</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
add_shortcode<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'spotifylist'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'spotify_sc_func'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Nu återstår bara att skapa en sida som använder vår nya shortcode.<br />
<img src="http://jonasnordstrom.se/wp-content/uploads/2010/01/Bild-27-580x440.png" alt="" title="sida med shortcode" width="580" height="440" class="alignnone size-medium wp-image-295" /></p>
<p>Och resultatet ser blir <a href="http://topp30.se/spotifylistor/">det här</a></p>
<p><a href="http://jonasnordstrom.se/wp-content/uploads/2010/01/Bild-26.png"><img src="http://jonasnordstrom.se/wp-content/uploads/2010/01/Bild-26-580x405.png" alt="" title="topp30 - spotifylistor" width="580" height="405" class="alignnone size-medium wp-image-296" /></a></p>
<p>Läs också <a href="http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/">Mastering WordPress Shortcodes</a> på Smashing Magazine.</p>
]]></content:encoded>
			<wfw:commentRss>http://jonasnordstrom.se/wordpress-shortcodes-enkelt-exempel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

