/ HTML 5

修改WP caption短标签输出代码

在WordPress后台中,我们如果从自带的媒体库中插入图片,且图片标题(caption)不为空时,WordPress会创建[-caption-]这个标签,在编辑器的代码视图中,将会出现类似的代码(注:为禁止程序 解析而加入短标签中的-):

[-caption id="attachment_37" align="aligncenter" width="500"]<a class="colorbox" title="&#20174;WP&#23186;&#20307;&#24211;&#20013;&#25554;&#20837;&#22270;&#29255;" 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="&#20174;WP&#23186;&#20307;&#24211;&#20013;&#25554;&#20837;&#22270;&#29255;" src="http://static.csspod.com/images/2010/08/Add_image_on_WP_media_lib.png" width="500" height="415" /></a> &#20174;WP&#23186;&#20307;&#24211;&#20013;&#25554;&#20837;&#22270;&#29255;[/caption-]

[caption id="attachment_28" align="aligncenter" width="500"]插入图片时删除caption短标签 插入图片时删除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&#20013;&#30340;URL Rewrite&#27169;&#22359;" src="http://static.csspod.com/images/2010/08/URL-Rewrite-on-IIS.jpg" width="480" height="334" /> </a></figure>IIS&#20013;&#30340;URL Rewrite&#27169;&#22359;
只需修改函数,复写默认的输出函数,代码如下(添加到插件或者主题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 scriptIE Print Protector。此外,我们可能还需要为新引入的HTML 5元素定义样式。