当前位置: 菠菜博 > WordPress > 文章正文

精通WordPress Shortcodes(下)

时间: 2009-02-04 / 分类: WordPress / 浏览次数: 816 次 / 3个评论 发表评论

在上一篇讲解 WordPress Shortcodes 的文章中,我们知道了什么是WordPress ShortCode 和其在WordPress中的基本应用。那么,现在我们就开始 WordPress Shortcode 的实际高级应用吧。

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

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

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

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’);

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

[twitter]

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

2.创建“RSS订阅”简码

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

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

function subscribeRss() {
return ‘<div class=”rss-box”><a href=”http://feeds.feedburner.com/wprecipes”>Enjoyed this post? Subscribe to my RSS feeds!</a></div>’;
}
add_shortcode(’subscribe’, ’subscribeRss’);

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

.rss-box{
background:#F2F8F2;
border:2px #D5E9D5 solid;
font-weight:bold;
padding:10px;
}

3.定制Google AdSense位置

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

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

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

    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’);

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

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

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

4.嵌入RSS阅读器

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

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

//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://feeds.feedburner.com/wprecipes" num="5"]

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

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

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

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

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=’<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_liste”);

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

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

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

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

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

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

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

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编辑器中:

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

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

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

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

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

add_filter(’widget_text’, ‘do_shortcode’);

大功告成!

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

如果你还不了解 WordPress ShortCode ,你可以先学习精通WordPress Shortcodes(上)这篇文章。

英文原文:Mastering WordPress Shortcodes

中文译文:精通WordPress简码

Del.icio.us 添加到Digg! 添加到Digg! 分享家:Addthis中文版

3个评论

  1. [...] 现在,我们知道了如何创建一个 WordPress Shortcode 了,那么,接下来就让我们参考一个骨灰级的 Shortcode 实际应用吧,在下一篇文章中我们将具体讲述,点击到精通WordPress Shortcodes(下)。 [...]

  2. 刀客
    2009/02/04 于 12:36:14

    看了原文,本来打算翻译的,搜到了你的文章,所以作罢。

  3. gowers
    2009/02/04 于 10:07:05

    恩,不错,twitter的那个就很好

发表评论

您的昵称 *

您的邮箱 *

您的网站