<?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; jonasnordstrom.se</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>Thu, 29 Jul 2010 18:21:56 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.1-alpha</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>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><div
style="clear:both"></div>]]></content:encoded> <wfw:commentRss>http://jonasnordstrom.se/wordpress-shortcodes-enkelt-exempel/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Served from: jonasnordstrom.se @ 2010-07-30 23:12:07 by W3 Total Cache -->