WordPress Shortcode(简码)介绍及使用详解

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

时间: 2024-10-14 00:53:29

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

C#调用外部DLL介绍及使用详解

一.      DLL与应用程序 动态链接库(也称为DLL,即为“Dynamic Link Library”的缩写)是Microsoft Windows最重要的组成要素之一,打开Windows系统文件夹,你会发现文件夹中有很多DLL文件,Windows就是将一些主要的系统功能以DLL模块的形式实现. 动态链接库是不能直接执行的,也不能接收消息,它只是一个独立的文件,其中包含能被程序或其它DLL调用来完成一定操作的函数(方法.注:C#中一般称为“方法”),但这些函数不是执行程序本身的一部分,而是根

linux Mysql 主从复制 原理介绍和步骤详解

大家好,我是霸王卸甲,今天我给大家带来的是linux数据库中的主从复制的简单介绍和步骤详解. 主从复制 mysql主从复制 灵活 一主一从 主主复制 一主多从---扩展系统读取的性能,因为读是在从库读取的: 多主一从---5.7开始支持 联级复制--- 用途及条件 mysql主从复制用途 实时灾备,用于故障切换 读写分离,提供查询服务 备份,避免影响业务 主从部署必要条件: 主库开启binlog日志(设置log-bin参数) 主从server-id不同 从库服务器能连通主库 主从原理mysql主

apache的介绍和安装详解

apache介绍 介绍: Apache:Apache HTTP Server是开源软件项目的杰出代表,基于标准的HTTP协议提供网页浏览服务.Apache可以运行在Windows,Linux,Unix等多种操作系统平台上 安装 apache默认在系统镜像里有,名为httpd包,可以用yum直接安装,也可以用源码包编译安装.源码包编译安装方式可以定制所需功能,加载特定的模块.所以生产环境下一般都是源代码编译安装 下面介绍怎么用源码报编译安装apache.版本为(httpd-2.4.4) 1)卸载系

logback介绍和配置详解

logback是java的日志开源组件,是log4j创始人写的,性能比log4j要好,目前主要分为3个模块 logback-core:核心代码模块 logback-classic:log4j的一个改良版本,同时实现了slf4j的接口,这样你如果之后要切换其他日志组件也是一件很容易的事 logback-access:访问模块与Servlet容器集成提供通过Http来访问日志的功能 本篇博客会讲解logback的使用.配置详解.以及logback简单的一个原理. 一.logback的使用 引入mav

【介绍+安装】Nginx的介绍和安装详解

Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器, 其性能与IMAP/POP3代理服务器相当.Nginx以其高性能.稳定.功能丰富.配置简单及占用系统资源少而著称. Nginx 超越 Apache 的高性能和稳定性,使得国内使用 Nginx 作为 Web 服务器的网站也越来越多. *基础功能 处理静态文件,索引文件以及自动索引: 反向代理加速(无缓存),简单的负载均衡和容错: FastCGI,简单的负载均衡和容错: 模块化的结构.过滤器包括gzipping, byte

Redis介绍以及安装详解

redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set --有序集合)和hash(哈希类型).这些数据类型都支持push/pop.add/remove及取交集并集和差集及更丰富的操作,而且这些操作都是原子性的.在此基础上,redis支持各种不同方式的排序.与memcached一样,为了保证效率,数据都是缓存在内存中.区别的是redis会周期性的把更新的数

日志组件slf4j介绍及配置详解

1 基本介绍 每一个Java程序员都知道日志对于任何一个Java应用程序,尤其是服务端程序是至关重要的,而很多程序员也已经熟悉各种不同的日志库如java.util.logging.Apache log4j.logback.但如果你还不知道SLF4J(Simple logging facade for Java)的话,那么是时候去在你项目中学习使用SLF4J了. SLF4J不同于其他日志类库,与其它日志类库有很大的不同.SLF4J(Simple logging Facade for Java)不是

Java枚举介绍及使用详解

在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的"数据集",春夏秋冬四个数据元素组成了四季的"数据集". 在java中如何更好的使用这些"数据集"呢?在jdk1.5之前我们或许会这样写: static class Grade { private Grade() { } public static final G

jQuery的介绍和选择器详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动画效果很难实现. 如下图所示: jQuery的出现,可以解决以上问题. 什么是 jQuery jQuery 是 js