您的位置:首页»WordPress 教程, 进阶使用»  精通 WordPress 短代码

精通 WordPress 短代码

从 WordPress2.5 开始,WordPress 就已经开始支持 ShortCode(站趣-分享建站的乐趣将其翻译为短代码),比如我们就可以使用 gallery(请自行加上[])标签调用 WordPress 原生相册,并且可以用属性控制标签。当然,正如 WordPress 的灵活性,我们也可以自定义属于自己的 ShortCode,注意,千万不要山寨 gallery。
什么是WordPress Shortcodes(短代码)?
WordPress ShortCode(短代码) ,是一种类似于论坛的 UBB 代码的功能,可以尽可能地减少XHTML代码数量,详细内容及正确解释详见官方文档。其使用方法非常简单,你只要在发布文章或是修改文章时,切换编辑器到HTML模式,输入预先定义的 shortcodes ,并用 “[]” 包围就可以了。例如:只要输入 [show_adsense] 就可以在文章中显示 AdSense 广告,或者输入[show_post_count] 后,就可以显示博客的文章数量。
创建一个简单的WordPress Shortcode(短代码)
创建一个 WordPress 短代码是一件非常容易的事,只要你了解一些 PHP 语言,会写基本的PHP函数,那么你就会写WordPress 短代码了。首先,让我们一起来创建一个众所周知的 “Hello, World” 吧。

  1. 创建一个自定义函数,用以输出 “Hello, World” 字符串,你可以复制下面的代码到你的 functions.php 文件中:
  2. function hello() {
    return ‘Hello, World!;
  3. 转换函数为 WordPress 短代码
  4. 使用 WordPress 内置的 add_shortcode() 函数,就可以将我们自定义的任何函数转换为 WordPress 短代码

    add_shortcode(’hw’, ‘hello’);

    代码注释:函数中的第一个参数是短代码(shortcode) 名称,你在文章中使用的也就是它了;第二个参数是定义过的函数名称。

  5. 使用 WordPress 短代码
  6. 创建或编辑文章/页面时,将编辑器切换到 HTML 源代码模式,输入以下代码:

    [hw]

这样,一个简单的 WordPress 短代码便创建成功了,您是否也摩拳擦掌、跃跃欲试呢?仅了解这点还不够,继续往下看吧。
创建一个高级 WordPress 短代码:
我们在前面提到,WordPress 短代码可以使用参数属性,那么,下面我们一起来让我们的 WordPress 短代码添加参数。下面我们以创建一个 URL 为例,详细讲解如何为 WordPress 短代码添加参数、属性:

  1. 创建自定义函数 myUrl
  2. 打开主题中的 functions.php 文件,粘贴以下函数到其中:

    1
    2
    3
    4
    5
    
    function myUrl($atts, $content = null)
    { extract(shortcode_atts(array(
    "href" => 'http://'
    ), $atts));
    return '<a href="'.$href.'">'.$content.'</a>';
  3. 转换函数为 WordPress 短代码
  4. add_shortcode("url", "myUrl");
  5. 使用这个 url WordPress 短代码
  6. 创建或编辑文章/页面时,将编辑器切换到 HTML 源代码模式,输入以下代码:

    [url href="http://eachsite.org/"]站趣-分享建站的乐趣[/url]

    当文章或页面发布后,这个短代码会显示名为“站趣-分享建站的乐趣”的链接,并指向http://eachsite.org/

代码注释:若要正常运行,短代码必须处理两个参数:$atts 和 $content。$atts是简码属性,上例中,属性为href,且包括了URL链接。$content是简码内容,位于域名和子目录之间(即www.example.com和“/subdirectory”之间)。正如以上显示,我们给$atts 和 $content都设置了默认值。
有了这两个基本案例做底,我们就可以做一些高级应用啦。

  1. 创建“发送到 Twitter 的 WordPress 短代码
  2. 问题解析:很多人或许很喜欢在文章底部添加“发送到 Twitter”链接,但这些技巧有一个缺陷,就是我们无法控制其不在某篇文章中显示,很高兴的是,本文介绍的 WordPress 短代码就能使链接只出现在我们想要其出现的日志中,这是不是正是你需要的呢?
    解决方案:老两步,在 functions.php 文件中创建 twitter 短代码

    1
    2
    3
    4
    
    function twitt() {
    return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';
    }
    add_shortcode('twitter', 'twitt');

    使用这个 twitter 短代码:
    创建或编辑文章/页面时,将编辑器切换到 HTML 源代码模式,输入以下代码:

    [twitter]
  3. 创建 “RSS订阅” WordPress 短代码
  4. 问题解析:获取 RSS 订阅的一个较好途径就是在首页放置一个精致漂亮的“RSS feed订阅”图示。但是,我们其实并不想在主题中增加繁琐的代码,况且,使用 WordPress 短代码可以在任意位置显示 Rss 订阅图标,何乐而不为呢?!
    解决方案:同样,我们需要创建函数并把其转换成 WordPress 短代码,然后把其放到 functions.php 文件中。

    1
    2
    3
    4
    
    function subscribeRss() {
    return<div class=”rss-box”><a href=”http://eachsite.org/feed/”>Enjoyed this post? Subscribe to my RSS feeds!</a></div>’;
    }
    add_shortcode(’sub’, ’subscribeRss’);

    当然,出嫁的闺女怎能这样不加修饰呢,来点 CSS 样式吧:

    1
    2
    3
    4
    5
    6
    
    rss-box{
    background:#F2F8F2;
    border:2px #D5E9D5 solid;
    font-weight:bold;
    padding:10px;
    }
  5. 控制 Google Adsense 广告显示位置
  6. 问题解析:我们使用 Google Adsense 广告的办法是在 single.php、sidebar.php 或 header.php 插入广告代码,但是,这样的大锅饭会严重影响 eCPM,有经验的同学可能知道在热门文章中展示广告就可以很好解决这个问题。
    解决方案:同样,打开 functions.php 文件创建 Adsense 短代码,记得把JavaScript代码换成自己的 Google AdSense 代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    function showads() {
    return<div id=”adsense”>
    <script type="text/javascript"><!--
    google_ad_client = "pub-xxxxxxxxx";
    /* 468x60, created 2/3/09 */
    google_ad_slot = "5000200284";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script></div>;
    }
    add_shortcode(’adsense’, ’showads’);
  7. 嵌入 RSS 文章
  8. 问题解析:也许您非常需要在某篇文章中显示其他博客的文章,那么,使用 WordPress 短代码解决问题吧。
    解决方案:同样,打开 functions.php 文件创建短代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
        //This file is needed to be able to use the wp_rss() function.
        include_once(ABSPATH.WPINC./rss.php’);
        function readRss($atts) {
        extract(shortcode_atts(array(
        “feed” => ‘http://’,
        “num” =>1,
        ), $atts));
     
        return wp_rss($feed, $num);
        }
        add_shortcode(’rss’, ‘readRss’);

    使用方法:

    [rss feed="http://eachsite.org/feed/" num="5"]

    代码注释:feed属性(attribute)即是要嵌入的feed URL,num即是要显示的条目数量。

  9. 使用 WordPress 短代码添加相关文章功能
  10. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    function sc_list($atts, $content = null) {
    extract(shortcode_atts(array(
    "num" => '5',
    "cat" => ''
    ), $atts));
    global $post;
    $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
    $retour='<ul>';
    foreach($myposts as $post) :
    setup_postdata($post);
    $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
    endforeach;
    $retour.='</ul> ';
    return $retour;
    }
    add_shortcode("list", "sc_list");

    使用方法:

    [list num="3" cat="1"]

    代码注释:cat 为分类 id,num 为文章数量。

  11. 获取文章中的图像
  12. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    
    function sc_postimage($atts, $content = null) {
    extract(shortcode_atts(array(
    "size" => 'thumbnail',
    "float" => 'none'
    ), $atts));
    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
    foreach( $images as $imageID => $imagePost )
    $fullimage = wp_get_attachment_image($imageID, $size, false);
    $imagedata = wp_get_attachment_image_src($imageID, $size, false);
    $width = ($imagedata[1]+2);
    $height = ($imagedata[2]+2);
    return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
    }
    add_shortcode("postimage", "sc_postimage");

    使用方法:

    [postimage size="" float="left"]
  13. 在 WordPress Widgets 中使用短代码
  14. Widgets 以其方便性迅速风靡起来,能在 WordPress Widgets 中使用 WordPress 短代码,无疑是一件激动人心的事情。添加以下代码到主题 functions.php 文件中:

    add_filter(’widget_text’, ‘do_shortcode’);

    代码注释:在 widget_text() 函数中添加一个过滤器以执行 do_shortcode() 功能,它会使用 API 执行 WordPress 短代码。这样,我们就可以添加一个 Widgets Text 并输入相应的 WordPress 短代码就可以啦。

本文译自 Mastering WordPress Shortcodes
站趣译文:精通 WordPress 短代码
注:翻译本文的同时,发现有多位同学也在翻译这篇 WordPress 教程,每个人的理解角度不一样,大家可以相互借鉴。

6个评论

  • Reply 1 aunsen

    February 7th, 2009 at 00:42

    有演示就好了,唉!

    • Reply 2 辐射鱼

      February 7th, 2009 at 09:38

      写文章的时候用,咋演示哦?

  • Reply 3 qq2009

    February 7th, 2009 at 19:43

    感觉要是wp能更加兼顾cms该有多好。。。

    • Reply 4 辐射鱼

      February 7th, 2009 at 21:01

      或许 WordPress3.0 正是你需要的吧
      每开发一个新版本,WP 开发团队都会做一个投票,届时把你喜欢的功能投上去吧

  • Reply 5 welee

    February 14th, 2009 at 14:17

    我之前看到这功能也觉得会很有用,只是还没去深入了解,这篇文章让我看得更明白,感谢辐射鱼!

    你这里有不少有用资源,很棒哦!

    • Reply 6 辐射鱼

      February 14th, 2009 at 15:15

      呃,我们正在准备一本电子书–《WordPress 从入门到精通》。欢迎出谋划策哈