文档章节

WordPress Shortcode(短代码):完全指南

Specs
 Specs
发布于 2014/08/13 15:32
字数 2442
阅读 1274
收藏 7

Wordpress短代码

WordPress短代码的使用非常简单。比如说我们想显示给定的最新文章,我们可以使用类似下面的代码:

1
[ recent - posts ]

再进一步的,我们可以通过设定一个参数来控制现实的文章的数量:

1
[ recent - posts posts = "5" ]

更进一步的,我们可以为文章列表增加一个标题:

1
[ recent - posts posts = "5" ] Posts Heading [ / recent - posts ]

 1. 简单的短代码

本教程的第一部分,我们将创建下面这个短代码的代码:

1
[ recent - posts ]

创建的过程非常简单,不需要很高级的PHP知识。创建过程如下:

  1. 创建一个函数,当 WordPress 发现短代码的时候会调用此函数;
  2. 通过设置一个唯一的名称来注册短代码;
  3. 把注册的函数绑定到Wordpress的action上。

本教程的所有代码都可以直接放到 functions.php 中,也可以放在一个将包含在 functions.php 的单独的PHP文件中。

1.1 创建回调函数

当发现短代码的时候,它会被一个称作回调函数的一段代码所代替。所以我们先创建一个函数,从数据库中获取最新的文章。

1
2
3
4
5
6
7
8
9
10
function recent_posts_function ( ) {
   query_posts ( array ( 'orderby' = > 'date' , 'order' = > 'DESC' , 'showposts' = > 1 ) ) ;
   if ( have_posts ( ) ) :
       while ( have_posts ( ) ) : the_post ( ) ;
         $return_string = '<a href="' . get_permalink ( ) . '">' . get_the_title ( ) . '</a>' ;
       endwhile ;
   endif ;
   wp_reset_query ( ) ;
   return $return_string ;
}

如上所示,我们查询数据库,获取最新的文章,并返回一个带有链接的字符串。值得注意的是,回调函数并不打印任何内容,而是返回一个字符串。

1.2 注册短代码

现在,我们告诉Wordpress这个函数是一个短代码:

1
2
3
function register_shortcodes ( ) {
   add_shortcode ( 'recent-posts' , 'recent_posts_function' ) ;
}

当在文章的内容中发现短代码 [recent-posts] 时,将会自动调用 recent_posts_function() 函数,我们需要确保短代码的名字是唯一的,以避免重复。

1.3 Hook into WordPress

为了能够执行 recent_posts_function() 函数,我们需要把它绑定在 WordPress 的初始化钩子中。

1
add_action ( 'init' , 'register_shortcodes' ) ;

 1.4 测试短代码

简单的短代码已经准备好了,现在我们需要测试它是否能够正常运行。我们创建一个新的文章(或打开一个已存在的),把下面的代码加入到文章内容中的某个位置:

1
[ recent - posts ]

发布文章并在浏览器中打开,你将看到一个执行你最新文章的链接,如下图所示:

Wordpress短代码
2. 进阶短代码

 2.1 短代码参数

短代码非常灵活,因为它允许我们添加参数以使它们具有更多的功能。假定我们需要显示一定数量的最新文章。为了实现这个,我们需要给短代码增加额外的选择来指定显示最新的多少篇文章。

我们需要使用两个函数,第一个是Wordpress内置的 shortcode_atts() 函数,它把用户的短代码属性与本地属性结合在一起,并填充到所需要的位置。第二个是PHP的 extract() 函数,顾名思义,它提取短代码的各个属性。

扩展我们的回调函数,我们添加一个参数,它是一个数组,从中我们可以提取到我们需要获取的文章的数量。我们查询数据库,获取指定数量的文章,并返回一个列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function recent_posts_function ( $atts ) {
   extract ( shortcode_atts ( array (
       'posts' = > 1 ,
   ) , $atts ) ) ;
 
   $return_string = '<ul>' ;
   query_posts ( array ( 'orderby' = > 'date' , 'order' = > 'DESC' , 'showposts' = > $posts ) ) ;
   if ( have_posts ( ) ) :
       while ( have_posts ( ) ) : the_post ( ) ;
         $return_string . = '<li><a href="' . get_permalink ( ) . '">' . get_the_title ( ) . '</a></li>' ;
       endwhile ;
   endif ;
   $return_string . = '</ul>' ;
 
   wp_reset_query ( ) ;
   return $return_string ;
}

如果用户不指定该选项,1将是默认值。我们可以添加更多的属性,使短代码接受更多的参数。用这个增强的函数,我们可以指定调用最新文章的数量:

1
[ recent - posts posts = "5" ]

在浏览器中显示时,你将看到最新的五篇文章列表:

Wordpress短代码

2.2 短代码中添加内容

我们可以更进一步扩展我们的短代码,添加一些内容作为参数来传递,这将是最新文章列表的标题。为了实现此功能,我们需要在回调函数中增加第二个参数 $content ,并把它显示在列表前面的一个 <h3> 标签中。新的函数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function recent_posts_function ( $atts , $content = null ) {
   extract ( shortcode_atts ( array (
       'posts' = > 1 ,
   ) , $atts ) ) ;
 
   $return_string = '<h3>' . $content . '</h3>' ;
   $return_string . = '<ul>' ;
   query_posts ( array ( 'orderby' = > 'date' , 'order' = > 'DESC' , 'showposts' = > $posts ) ) ;
   if ( have_posts ( ) ) :
       while ( have_posts ( ) ) : the_post ( ) ;
         $return_string . = '<li><a href="' . get_permalink ( ) . '">' . get_the_title ( ) . '</a></li>' ;
       endwhile ;
   endif ;
   $return_string . = '</ul>' ;
 
   wp_reset_query ( ) ;
   return $return_string ;
}

这种短代码类似于一个HTML标签:

1
[ recent - posts posts = "5" ] This is the list heading [ / recent - posts ]

除了文章列表多了一个标题,其余的内容和上一个示例是一样的:

Wordpress短代码

3. 在任何地方显示短代码

3.1 在侧边栏小工具中使用短代码

默认情况下,侧边栏小工具是忽略短代码的,实例如下:

1
[ recent - posts posts = "5" ]

如果你把这段代码放在小工具里的时候,你将看到类似下面的结果

Wordpress短代码

我们可以通过一行代码来启用这个函数,为了使侧边栏小工具支持短代码,添加如下的代码:

1
add_filter ( 'widget_text' , 'do_shortcode' ) ;

现在不需要修改其他任何地方,刷新一下页面看看,侧边栏将会正确的显示:

Wordpress短代码

同样的,在评论中启用短代码:

1
add_filter ( 'comment_text' , 'do_shortcode' ) ;

在摘要中启用短代码:

1
add_filter ( 'the_excerpt' , 'do_shortcode' ) ;

4. TinyMCE编辑器增加短代码按钮

虽然短代码可以方便的为文章添加动态内容,但是这对于普通用户来说可能还是有点复杂,尤其是当参数比较多的时候。大多数用户对于类HTML代码并不熟悉,然而要使用短代码,他们必须记住具体的语法与参数,因为即使是一个小小的语法错误,都可能导致意想不到的结果。

要解决这个,我们可以给 TinyMCE编辑器增加一个按钮,使用户可以通过简单的单击来增加短代码。创建这个按钮仅需两个步骤:

  1. 为这个按钮创建一个JS文件
  2. 注册按钮与JS文件

4.1 通过JS文件创建按钮

JS文件是通过 TinyMCE API 来注册 TinyMCE 插件的。我们在主题的 js 文件夹下创建 recent-posts.js ,并贴进去下面的代码(需要把图片文件也放在这里):

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
( function ( ) {
   tinymce . create ( 'tinymce.plugins.recentposts' , {
       init : function ( ed , url ) {
         ed . addButton ( 'recentposts' , {
             title : 'Recent posts' ,
             image : url + '/recentpostsbutton.png' ,
             onclick : function ( ) {
               var posts = prompt ( "调用文章数量" , "1" ) ;
               var text = prompt ( "列表标题" , "这里是文章列表标题" ) ;
 
               if ( text != null && text != '' ) {
                   if ( posts != null && posts != '' )
                     ed . execCommand ( 'mceInsertContent' , false , '[recent-posts posts="' + posts + '"]' + text + '[/recent-posts]' ) ;
                   else
                     ed . execCommand ( 'mceInsertContent' , false , '[recent-posts]' + text + '[/recent-posts]' ) ;
               }
               else {
                   if ( posts != null && posts != '' )
                     ed . execCommand ( 'mceInsertContent' , false , '[recent-posts posts="' + posts + '"]' ) ;
                   else
                     ed . execCommand ( 'mceInsertContent' , false , '[recent-posts]' ) ;
               }
             }
         } ) ;
       } ,
       createControl : function ( n , cm ) {
         return null ;
       } ,
       getInfo : function ( ) {
         return {
             longname : "Recent Posts" ,
             author : 'Specs' ,
             authorurl : 'http://9iphp.com' ,
             infourl : 'http://9iphp.com/opensystem/wordpress/1094.html' ,
             version : "1.0"
         } ;
       }
   } ) ;
   tinymce . PluginManager . add ( 'recentposts' , tinymce . plugins . recentposts ) ;
} ) ( ) ;

如下图所示,我们通过调用 tinymce.create() 创建了一个插件。代码中最重要的是 init() 函数,我们定义了一个名字,一个图标文件及 onclick() 事件处理程序。

在 onclick() 函数的前两行,弹出两个对话框让用户输入调用文章数量及列表标题两个参数,然后根据用户输入,把生成的短代码插入到编辑器中。

最后,TinyMCE插件通过 add() 函数添加到 PluginManager。现在我们已经成功的整合了 [recent-posts] 短代码到Wordpress中。

4.2 注册按钮及TinyMCE插件

创建完 JS 文件后,我们现在需要注册它和短代码按钮。所以我们创建两个函数并把它们绑定到合适的Wordpress过滤器中。

第一个叫做 register_button() 的函数把短代码添加到按钮数组中,在现有按钮和新按钮之间添加分割线。

1
2
3
4
function register_button ( $buttons ) {
   array_push ( $buttons , "|" , "recentposts" ) ;
   return $buttons ;
}

第二个函数 add_plugin() 指出JS文件的路径及文件名。

1
2
3
4
function add_plugin ( $plugin_array ) {
   $plugin_array [ 'recentposts' ] = get_template_directory_uri ( ) . '/js/recent-posts.js' ;
   return $plugin_array ;
}

下一步是添加包含前面两个函数的过滤器。register_button() 函数绑定到 mce_buttons 过滤器,这个会在编辑器加载插件的时候执行; add_plugin() 函数绑定到 mce_external_plugins 过滤器,当加载按钮的时候执行。

1
2
3
4
5
6
7
8
9
10
11
12
function my_recent_posts_button ( ) {
 
   if ( ! current_user_can ( 'edit_posts' ) && ! current_user_can ( 'edit_pages' ) ) {
       return ;
   }
 
   if ( get_user_option ( 'rich_editing' ) == 'true' ) {
       add_filter ( 'mce_external_plugins' , 'add_plugin' ) ;
       add_filter ( 'mce_buttons' , 'register_button' ) ;
   }
 
}

当用户没有对文章在可视化编辑器中编辑的权限时,前面的函数不会执行。

最后把函数勾到Wordpress初始化函数

1
add_action ( 'init' , 'my_recent_posts_button' ) ;

 4.3 按钮用法

为了检测代码是否正确,我们打开一篇新的文章,这时一个我们刚刚定义的按钮是不是已经出现在第一行的末尾了?如下图所示:

Wordpress短代码

点击按钮的时候,会弹出对话框让我们输入调用文章的数量:

Wordpress短代码

输入完点击确定后,会弹出第二个对话框,让我们输入列表的标题:

Wordpress短代码

参数留空的话,不会出现在最后的代码中。最后,短代码会添加到编辑器中:

Wordpress短代码

 转自:Specs' Blog

本文转载自:http://9iphp.com/opensystem/wordpress/1094.html

共有 人打赏支持
Specs
粉丝 0
博文 8
码字总数 1934
作品 0
天津
程序员
私信 提问
加载中

评论(4)

Specs
Specs

引用来自“水人”的评论

谢谢~
Specs
Specs

引用来自“坚慧”的评论

非常清晰,赞
谢谢~
水人
水人
坚慧
坚慧
非常清晰,赞
WordPress打造气泡对话短代码 很新颖的小展示

WordPress打造气泡对话短代码,目前只做了左边气泡对话,我的理想实现是,左右对称形式 目前演示 小编最终效果: 由于时间很忙,做了一半先暂时抛开,有时间再完善剩下步骤…… 打造短代码的...

禄莱
2013/10/11
0
0
许剑锋/wp-videojj

WordPress Video++云解析HTML5播放器 使用Shortcode短代码制作的Video++视频插件,包含视频播放器短代码([videojj])和视频作者信息UP主短代码([upinfo])。 因为是HTML5播放器,PC和移动终...

许剑锋
2016/10/29
0
0
WordPress插件YITH WooCommerce Wishlist SQL注入漏洞

  作为我们对Sucuri防火墙定期研究审计的一部分,我们发现了一个愿望清单插件YITH WooCommerce Wishlist,存在SQL注入漏洞。据统计,该插件目前至少已被50000+的wordpress站点安装使用。 ...

FreeBuf
2018/01/20
0
0
用于创建网页程序的 PHP 库--BackPress

BackPress 是一个具有网页程序(或者说在线应用)核心功能的 PHP 库,它的是非常欢迎的 WordPress 开源程序的核心部分,也是 bbPress 和 GlotPress 等开源程序的核心部分。 它包括可用于创建...

匿名
2010/01/14
1K
0
WordPress 插件--jetpack wordpress plugin

Jetpack 是一款 WordPress 插件,可以让自建的 WordPress 站点拥有托管在 WordPress.com 上的站点类似的云端功能。Jetpack 将给个人博客用户带来非凡的体验,只要你是 WP 的用户那你就是 WP...

大胖森
2015/04/17
622
0

没有更多内容

加载失败,请刷新页面

加载更多

单点登录实现原理(SSO)

简介 单点登录是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统的保护资源,若用户在某个应用系统中进行注销登录,所有的应用系统都不能再直接访问保护资源,像一些...

echojson
12分钟前
0
0
介绍Python中6个序列的内置类型

1、Python中6个序列的内置类型分别是什么? Python包含6中内建的序列,即列表、元组、字符串、Unicode字符串、buffer对象和 xrange 对象。序列通用的操作包括:索引、长度、组合(序列相加)...

问题终结者
32分钟前
0
0
用python自制微信机器人,定时发送天气预报

0 引言 前段时间找到了一个免费的天气预报API,费了好段时间把这个API解析并组装成自己想用的格式了,就想着如何实现每天发送天气信息给自己。最近无意中发现了wxpy库,用它来做再合适不过了...

上海小胖
50分钟前
7
0
深入理解java虚拟机-垃圾收集器与内存分配策略

垃圾收集器与内存分配策略 引用计数法 就是给对象添加一个计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1,计数器为0的对象就是不可能再被使用的。 缺点:无法...

须臾之余
今天
8
0
Python+Appium自动化测试环境搭建

1.Android SDK 下载SDK并配置系统环境变量ANDROID_HOME。 2.Appium 2.1 直接下载安装 官网下载安装appium-desktop-setup.exe。 2.2 通过npm下载安装 appium本质是一个nodejs库所以要先安装n...

维他ViTa
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部