WordPress 从 2.5 版本开始增加了一个类似 BBCode 标签的 Shortcode API,可以使用它在日志的内容中来给日志内容添加各种功能。Shortcode 这个接口非常容易使用,并且功能非常强大。

简单说 WordPress Shortcode 指的是一些使用[]包含的短代码,WordPress会识别这些短代码并根据短代码的定义输出为特定的内容。

Shortcode 类型

Shortcode API 支持几乎所有可能的组合形式:自关闭标签,开放标签,含有参数的标签等。

1
2
3
4
5
6
[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a href="http://example.com/">HTML Content</a<>/p>[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo="bar" id="123"]Some Content[/mycode]

Shortcode 基本概念

首先你要去定义一个函数,来处理你定义的 Shortcode,和它的属性参数以及引用的内容。

1
2
3
4
5
6
function my_shortcode_func($attr, $content) {
// $attr $key=>$value 的数组
// $content 是 shortcode 中包含的字符串
// 对 $attr 和 $content 进行处理
// 返回预期的值
}

然后把自己定义的 Shortcode 和其处理函数管理起来,以便 [mycode attr="value"]content[/mycode] 能够按照预期执行。

1
add_shortcode('mycode', 'my_shortcode_func')

Shortcode 相关的所有函数

WordPress 定义了以下和 Shortcode 相关的函数:

1
2
3
4
add_shortcode('mycode', 'function_name'); // 定义一个新的 Shortcode
remove_shortcode('mycode'); // 移除一个 Shortcode
remove_all_shortcodes(); // 移除所有的 Shortcode
$return = do_shortcode($content); // 应用 Shortcode 到内容而不输出

一个简单的 Shortcode 例子

以我爱水煮鱼写的 Antispambot ShortCode 插件为例,内容就是邮箱地址,有个参数 $link 为 1 时候,把邮箱显示可点击,参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
function antispambot_shortcode_handler($atts, $content='') {
extract( shortcode_atts( array(
'link' => '0'
), $atts ) );
 
if($link){
return '<a href="mailto:'.antispambot($content,1).'" title="mail to '.antispambot($content,0).'">'.antispambot($content,0).'</a>';
}else{
return antispambot( $content,0);
}
}
add_shortcode('email', 'antispambot_shortcode_handler');

使用 Shortcode 投放 Google Adsense 广告

把下面的代码保存到你当前的主题的 functions.php,或者上传到插件目录下并激活。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/*
Plugin Name: Shorcode for Google Adsense
Plugin URI: http://blog.wpjam.com/m/shortcode-google-adsense/
Description: 使用 Shortcode 投放 Google Adsense 广告
Version: 0.1
Author: Denis
*/
add_shortcode('adsense', 'adsense_shortcode');
function adsense_shortcode($atts) {
extract(shortcode_atts(array(
'type' => '468x60',
), $atts));
switch ($type) {
case '468x60' :
return
//468x60 的广告代码
case '300x250' :
return
//300x250 的广告代码
}
}

然后你就可以通过撰写文章的时候,在相应的位置输入 [adsense] 你的 468×60 的广告代码(默认的广告代码),如果你想插入 300×250 的广告代码,在文章内容中插入 [adsense type="300x250"],当然你也可以扩展上面的代码增加更多广告的格式和类型。

这样就可以想把广告插在文章中的哪个位置,就能插在哪个位置了,  非常方便。

在侧边栏 Widgets 中使用 Shortcode

Shortcode 很方便,但是只能用在日志内容中,那么如何在 WordPress 的侧边栏的 Widgets 中使用 Shortcode,在当前主题的 functions.php 中添加如下代码:

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

然后你在 WordPress 后台 > 外观 > Widgets 界面添加一个文本 Widget,然后插入博客中经启用 shortcode 即可。

在主题的文件中使用 Shortcode

如果你想用在主题文件中使用名为 [my_shortcode] 的 Shortcode,你只需要按照下面的方式使用do_shortcode() 函数即可:

1
<?php echo do_shortcode("[my_shortcode]"); ?>

解决 Shortcode 中自动添加的 br 或者 p 标签

我们在使用 WordPress Shortcode API 开发插件的时候,有个比较麻烦的问题,就是 WordPress 会自动在 shortcode 内添加 br 或者 p 标签,这样可能会打乱你的原先预想的 HTML 结构和布局。

造成这个问题的原因是 WordPress 默认的日志内容处理流程中,wpautop(将回车转换成 p 或者 br 标签的函数)是在 Shortcode 前面运行的。所以我们的解决方案也是非常简单,改变它们执行的顺序,在当前主题的 functions.php 文件中添加:

1
2
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

这样调整顺序之后,你的 shortcode 里面的内容,就不会有自动添加的 p 或者 br 标签,但是如果 shortcode 中部分的内容你又需要一些 p 或者 br 标签用来换行的话,你需要自己手动在自己 shortcode 处理程序中添加 wpautop 来处理了。

1
2
3
4
5
function bio_shortcode($atts, $content = null) {
$content = wpautop(trim($content));
return '<div class="bio">' . $content . '</div>';
}
add_shortcode('bio', 'bio_shortcode');

转:

https://www.wpdaxue.com/wordpress-shortcode.html

WordPress Shortcode(简码)介绍及使用详解的更多相关文章

  1. Nginx的介绍和安装详解

    [介绍+安装]Nginx的介绍和安装详解   == 介绍和安装 == Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器, 其性能与IMAP/POP3代理服务器相当.Nginx ...

  2. rsync的介绍及参数详解,配置步骤,工作模式介绍

    rsync的介绍及参数详解,配置步骤,工作模式介绍 rsync是类unix系统下的数据镜像备份工具.它是快速增量备份.全量备份工具. Sync可以远程同步,支持本地复制,或者与其他SSH.rsync主 ...

  3. Wordpress菜单函数wp_nav_menu各参数详解及示例

    Wordpress菜单函数wp_nav_menu各参数详解及示例   注册菜单 首先要注册菜单,将以下函数添加至function.php函数里   register_nav_menus(array( ...

  4. 2020你还不会Java8新特性?方法引用详解及Stream 流介绍和操作方式详解(三)

    方法引用详解 方法引用: method reference 方法引用实际上是Lambda表达式的一种语法糖 我们可以将方法引用看作是一个「函数指针」,function pointer 方法引用共分为4 ...

  5. UML简单介绍—类图详解

    类图详解 阅读本文前请先阅读:UML简单介绍—类图这么看就懂了 1.泛化关系 一个动物类: /** * 动物类 */ public class Animal { public String name; ...

  6. 探秘SpringAop(一)_介绍以及使用详解

    常用的编程范式 AOP 是什么 是一种编程方式,不是编程语言 解决特定问题,不能解决所有的问题 OOP的补充,不是代替 AOP 初衷 DRY: Don't repeat yourself(代码重复) ...

  7. AWVS12 介绍和安装详解 -- For Windows10

    一.AWVS介绍: Acunetix Web Vulnerability Scanner,简称:AWVS,是一个自动化的Web安全测试工具,它可以扫描Web站点和Web应用. AWVS可以快速扫描SQ ...

  8. ImageLoader_ _Universal-Image-Loader完全解析(一)之介绍与使用详解

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50439814 本文出自:[江清清的博客] (一).前言: 已经半个月 ...

  9. Android中9patch图片格式(xx.9.png)介绍与制作详解

    一:9patch图片介绍: android的.9.png是android系统中一种特殊的图片格式,专门用来用来处理图片大小变化后(如拉伸)的失真,不正常,如我们看到的qq聊天中的文字气泡,不管你输入的 ...

随机推荐

  1. 剑桥offer(51~60)

    51.题目描述 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回.注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. /* struct TreeLinkNode { ...

  2. SQL Server 2008设置主键为自增

    环境:SQL Server 2008 问题:设置主键,将主键设为自增. 解决:点击table->选中表->design->选中需要设置主键的字段,单击右键"设置主键&quo ...

  3. selenium - webdriver - ActionChains类(鼠标操作)

    ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 ActionChains 中存储的行为: context_click(): 右击: double_click() ...

  4. MYSQL性能察看

    http://fengbin2005.iteye.com/blog/1580214 网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步 ...

  5. C11性能之道:转移和转发

    1.move C++11中可以将左值强制转换为右值,从而避免对象的拷贝来提升性能.move将对象的状态或者所有权从一个对象转移到另一个对象,没有内存拷贝.深拷贝和move的区别如图: 从图可以看出,深 ...

  6. Enterprise Architect 13 : 需求建模 自动命名并计数

    如何给模型中的需求元素配置计数器以自动设置新创建元素的名称和别名: Configure -> Settings -> Auto Names and Counters 设置好后的效果图:

  7. nginx 状态监控

    通过查看Nginx的并发连接,我们可以更清除的知道网站的负载情况.Nginx并发查看有两种方法(之所以这么说,是因为笔者只知道两种),一种是通过web界面,一种是通过命令,web查看要比命令查看显示的 ...

  8. 01-QQ 3-最终重构版 Demo示例程序源代码

      源代码下载链接:01-QQ 3.zip292.5 KB // QQAppDelegate.h Map // //  QQAppDelegate.h //  01-QQ // //  Created ...

  9. 【bug】vue-cli 3.0报错的解决办法

    先上bug图片 bug说明:初装vue_cli3.0写了个组件,运行错误,显示如图, 代码提示:[Vue warn]: You are using the runtime-only build of ...

  10. textarea输入框实时统计输入字符数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...