在WordPress后台中,我们如果从自带的媒体库中插入图片,且图片标题(caption)不为空时,WordPress会创建[-caption-]
这个标签,在编辑器的代码视图中,将会出现类似的代码(注:为禁止程序 解析而加入短标签中的-):
[-caption id="attachment_37" align="aligncenter" width="500"]<a class="colorbox" title="从WP媒体库中插入图片" href="http://static.csspod.com/images/2010/08/Add_image_on_WP_media_lib.png"><img class="size-full wp-image-37 " title="Add_image_on_WP_media_lib" alt="从WP媒体库中插入图片" src="http://static.csspod.com/images/2010/08/Add_image_on_WP_media_lib.png" width="500" height="415" /></a> 从WP媒体库中插入图片[/caption-]
[caption id="attachment_28" align="aligncenter" width="500"] 插入图片时删除caption短标签[/caption]
add_filter( 'disable_captions', create_function('$a', 'return true;') );
过滤输出代码
可能有的用户并不想直接在插入编辑器的时候就移除短标签,而是想在主题中根据页面需要输出或不输出包裹图片的div。img_caption_shortcode($attr, $content = null)The Caption shortcode.
Allows a plugin to replace the content that would otherwise be returned. The
filter is 'img_caption_shortcode' and passes an empty string, the attr
parameter and the content parameter values.The supported attributes for the shortcode are 'id', 'align', 'width', and
'caption'.
引用文件的是官方对这个函数的说明,我们可以通过一个函数让短标签在前台不生成div标签。
add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );
同样可以放在主题functions.php中,或者放在插件里,这样前台就没有[caption]生成的div标签了。
这个过滤器可以结合条件语句使用,使过滤器只在特定页面激活。比如只有在首页的时候才激活过滤器:
if ( is_home() ) add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );
返回指定的HTML
有的时候,我们需要的不仅仅是删除多余的代码,而是希望按自己的需求输出代码。以CSSPod为例,我需要输出一个以HTML 5新元素、包裹的图片和标题组合,同时移除内联的样式。最终前台预想的代码为:<figure class="wp-caption aligncenter" id="attachment_28"><a href="http://static.csspod.com/images/2010/08/URL-Rewrite-on-IIS.jpg"> <img class="size-full wp-image-28" title="URL Rewrite on IIS" alt="IIS中的URL Rewrite模块" src="http://static.csspod.com/images/2010/08/URL-Rewrite-on-IIS.jpg" width="480" height="334" /> </a></figure>IIS中的URL Rewrite模块只需修改函数,复写默认的输出函数,代码如下(添加到插件或者主题functions.php中):
function csspod_img_caption_shortcode($attr, $content = null) {
// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
return $output;
extract(shortcode_atts(array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'caption' => ''
), $attr));
if ( 1 > (int) $width || empty($caption) )
return $content;
if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '">' . do_shortcode( $content ) . '' . $caption . '';
}
//Override default function
add_shortcode('wp_caption', 'csspod_img_caption_shortcode');
add_shortcode('caption', 'csspod_img_caption_shortcode');
为保证IE9以下版本能识别HTML 5的新元素,使用条件注释引入下面的脚本(放在functions.php中,也可以在主题header文件中直接加入):
function ltIE9_script() { echo "<!--[if lt IE 9]><script type='text/javascript' src='http://static.csspod.com/lib/html5.js?ver=1.5.1'></script><![endif]-->\n"; } add_action('wp_head', 'ltIE9_script');
关于这个脚本参见HTML5 enabling script及IE Print Protector。此外,我们可能还需要为新引入的HTML 5元素定义样式。