WordPress短代码开发

首页 论坛 WordPress讨论区 综合技术 WordPress短代码开发

标签: 

该主题包含 8 个回复,有 1 个参与人,并且由  super12 年, 10 月 前 最后一次更新。

正在查看 9 个帖子 - 1 至 9 (共计 9 条)
  • 作者
    帖子
  • #150

    super
    会员

    @super

    会做wordpress主题的人应该都知道,使用include(TEMPLATEPATH. “xxx.php”)这样的PHP代码可以调用xxx.php中的内容,从而让主题结构更有条理性。

    但可能很多人不知道WordPress短代码(WordPress ShrotCode API), 它从WordPress 2.5开始应用,可以让开发设计人员通过简单的函数集合创建宏代码来生成内容。代码形式类似于论坛普遍支持的UBB代码:

    Quote:
    [pargallery]

    更重要的是WordPress短代码是支持属性的,类似:

    Quote:
    [pagallery id="123" size="medium"]

    对于我个人为说,最近才听说这个东西,且用”(“和”{“用习惯了,还不打算去深究这个东西。且WordPress的模板代码也不算复杂,除非要拿它来做大型站点,否则似乎也不需要。

    下面是WordPress啦(精通WordPress简码)翻译自SM(Mastering WordPress Shortcodes)的一篇文章,详细的介绍了如何使用WordPress短代码。

    #460

    super
    会员

    @super

    创建简码非常简单。如果你知道如果编写基本的PHP函数,你也就了解了如何创建WordPress简码。我们首先来创建一个众人皆知的“Hello, World”吧。

    打开主题中的functions.php文件。如不存在此文件,请立即创建。

    首先创建会返回“Hello World”字符串的函数,并把其粘贴到functions.php文件中。

    Quote:
    function hello() {

    return ‘Hello, World!’;

    }

    使用add_shortcode()函数把字符串转化为简码,把以下代码粘贴到hello()函数中,然后保存并关闭functions.php文件:

    Quote:
    add_shortcode(‘hw’, ‘hello’);

    简码已创建成功,我们可以在日志和页面中使用它了。使用时,只要把编辑器切换到html模式并输入以下内容即可:

    Quote:
    [hw]

    大功告成!当然,这只是最最基本的简码,但它也足以说明创建简码是多么简单的一件事!

    创建高级简码

    正如以上所说,简码中可以包含属性,这非常有用,例如,它可以赋予函数参数。接下来,我们将共同了解如何创建可以显示URL的简码,正如使用诸如VBulletin 和PHPBB论坛的用户使用BBCode一样

    打开主题中的functions.php文件。粘贴以下函数到其中:

    Quote:
    function myUrl($atts, $content = null) {

    extract(shortcode_atts(array(

    “href” => ‘http://’

    ), $atts));

    return ”.$content.”;

    }

    把函数转化成简码:

    Quote:
    add_shortcode(“url”, “myUrl”);

    简码创建成功,现在就可在日志和页面上使用了。

    Quote:

    日志保存后,简码会显示名为“bbpress”的链接,并指向http://bbpress.muonzi.com。

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

    既然已经知道如何创建和使用简码,接下来我们就继续了解杀手级的可立即使用的简码吧。

    #461

    super
    会员

    @super

    1.创建“发送到 twitter”的简码

    问题:许多人似乎都比较喜欢我的十个杀手级Hack技巧中所介绍的“发送到Twitter”技巧,包括我本人也非常喜欢,但它有一个缺陷:如果把代码粘贴到single.php文件中,“发送到Twitter”链接将出现中所有的日志中,这可能并不是大家想要的结果。若能控制这个技巧,使链接只出现在我们想要其出现的日志中将十分有用。不用着急,方法十分简单:

    解决方案:将要使用的简码十分容易创建,只要把“发送到Twitter”hack中的代码转化成PHP函数即可。复制以下代码到functions.php文件中:

    Quote:

    function twitt() {

    return ‘<div id=”twitit”>ID).’” title=”Click to send this page to Twitter!” target=”_blank”>Share on Twitter</div>’;

    }

    add_shortcode(‘twitter’, ‘twitt’);

    使用此简码,只需把编辑器切换到HTML模式,输入:

    Quote:
    [twitter]

    然后,“发送到Twitter”链接就会只出现放置简码的位置。

    #462

    super
    会员

    @super

    2.创建“RSS订阅”简码

    问题:我们已经知道获取RSS订阅的一个较好途径就是在首页放置一个精致漂亮的“RSS feed订阅”图示。但是,我们其实并不想在主题中使用硬码,这样我们对显示内容就失去了控制权。为此,我们在此将创建“RSS订阅”简码,这样你就可在任意位置显示订阅图示了。

    解决方案:同样,我们需要创建函数并把其转换成简码,然后把其放到functions.php文件中。记得把示例中的feed URL换成自己的URL!

    Quote:
    function subscribeRss() {

    return ‘<div class=”rss-box”>Enjoyed this post? Subscribe to my RSS feeds!</div>’;

    }

    add_shortcode(‘subscribe’, ‘subscribeRss’);

    设计显示框:你或许注意到了div元素中含有rss-box类,它是为了让你能够定制显示框的样式。以下是“RSS订阅”显示框可应用的CSS样式,把其复制到style.css文件中即可:

    Quote:
    .rss-box{

    background:#F2F8F2;

    border:2px #D5E9D5 solid;

    font-weight:bold;

    padding:10px;

    }

    #463

    super
    会员

    @super

    3.定制Google AdSense位置

    问题:许多博主都在使用Google AdSense,在主题文件如sidebar.php 添加AdSense编码非常容易,但有经验的网络营销师都明白访客点击最多的还是嵌入在文章内部的广告。

    解决方案:若在日志或页面中嵌入AdSense广告,需创建以下简码:

    打开functions.php文件并复制以下代码。记得把javascript代码换成自己的AdSense代码。

    Quote:
    function showads() {

    return ‘<div id=”adsense”><script type=”text/javascript”><!–

    google_ad_client = “pub-XXXXXXXXXXXXXX”;

    google_ad_slot = “4668915978″;

    google_ad_width = 468;

    google_ad_height = 60;

    //–>

    </script>

    <script type=”text/javascript”

    src=”http://88.198.60.17/images/mastering-wordpress-shortcodes/http://pagead2.googlesyndication.com/pagead/show_ads.js”>

    </script></div>’;

    }

    add_shortcode(‘adsense’, ‘showads’);

    保存functions.php文件后,可使用以下简码在日志和页面定制AdSense显示位置:

    Quote:
    [adsense]

    注意AdSense代码被adsense div元素包装,这样我们就可以在style.css文件中设计其样式。

    代码注释:以上代码用来显示AdSense广告。当把简码插入日志中时,它就会返回AdSense广告。这一切都非常简单,同时也节省了大量时间。

    #464

    super
    会员

    @super

    4.嵌入RSS阅读器

    问题:许多读者似乎也非常喜欢我之前在Smashing杂志发布的8 RSS Hacks for WordPress”。现在,就让我们一起运用对RSS和简码的了解来在日志和页面中嵌入RSS阅读器。

    解决方案:与以上类似,把以下代码复制到主题中的function.php文件中:

    Quote:
    //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’);

    为了使用简码,输入:

    Quote:
    [rss feed="http://feeds.feedburner.com/wprecipes" num="5"]

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

    #465

    super
    会员

    @super

    5.使用简码从WordPress数据库中提取文章

    问题:幻想过直接从WordPress编辑器中调用一系列相关文章吗?当然,“相关文章”插件可以为我们检索文章,但是使用简码我们就可从特定类别中轻松获取任何数量的文章。

    解决方案:把以下代码复制到functions.php文件中:

    Quote:
    function sc_liste($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=’

      ‘;

      foreach($myposts as $post) :

      setup_postdata($post);

      $retour.=’

    • ‘.the_title(“”,”",false).’
    • ‘;

      endforeach;

      $retour.=’

    ‘;

    return $retour;

    }

    add_shortcode(“list”, “sc_liste”);

    然后,在切换到HTML模式后,复制以下内容到WordPress编辑器中:

    Quote:
    [liste num="3" cat="1"]

    接着系统将从ID为1的类别中提取3篇文章。关于如何获取特定类别的ID,可参考这里。

    代码注释:系统提取参数并创建全局变量$posts后,sc_liste()函数使用了get_posts(),numberposts, order, orderby和category参数以从类别Y中获取X篇最新日志。完成后,系统就会以无序的HTML列表形式显示日志。

    #466

    super
    会员

    @super

    6.获取日志中的最新图像

    问题:WordPress可以很容易的操纵图像。但是如何使其更加简单呢?使用稍微复杂一点的简码就可自动获取日志中的最新图像了。

    解决方案:打开functions.php文件,并把以下代码复制其中:

    Quote:
    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”);

    接着,在切换到HTML模式后,复制以下内容到WordPress编辑器中:

    Quote:
    [postimage size="" float="left"]

    代码注释:sc_postimage()函数首先提取了简码属性,然后它使用get_children(), wp_get_attachment_image() 和wp_get_attachment_image_src()这些WordPress函数检索图像。完成后,系统就会返回图像并插入到文章内容中。

    #467

    super
    会员

    @super

    7.在侧边栏微件中添加简码

    问题:即使大家非常喜欢此文,如果本文到此停止,大家也难免有点泄气,因为它还未解决WordPress默认情况下不允许在侧边栏微件中使用简码这一难题。可喜的是,接下来就将介绍一些小技巧以提升WordPress性能并在侧边栏微件中使用简码。

    解决方案:打开functions.php文件,并把以下代码复制其中:

    Quote:
    add_filter(‘widget_text’, ‘do_shortcode’);

    大功告成!

    代码注释:这次操作非常简单:在widget_text()函数中添加一个过滤器以执行do_shortcode()功能,它会使用API执行简码。这样,在侧边栏微件中就可使用简码了

正在查看 9 个帖子 - 1 至 9 (共计 9 条)

抱歉,回复评论必需登录。