php 使用HTML5 figure&figcaption,microdata和wai-aria属性改进WordPress标题短代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 使用HTML5 figure&figcaption,microdata和wai-aria属性改进WordPress标题短代码相关的知识,希望对你有一定的参考价值。

<?php
/**
 * Improves the WordPress caption shortcode with HTML5 figure & figcaption, microdata & wai-aria attributes
 *
 * Author: @joostkiens
 * Licensed under the MIT license
 *
 * @param  string $val     Empty
 * @param  array  $attr    Shortcode attributes
 * @param  string $content Shortcode content
 * @return string          Shortcode output
 */
function my_img_caption_shortcode_filter( $val, $attr, $content = null ) {
  extract( shortcode_atts( array(
  	'id'      => '',
		'align'   => 'aligncenter',
		'width'   => '',
		'caption' => ''
	), $attr ) );
	
	// No caption, no dice...
	if ( 1 > (int) $width || empty( $caption ) )
		return $val;
 
	if ( $id )
		$id = esc_attr( $id );
     
	// Add itemprop="contentURL" to image - Ugly hack
	$content = str_replace('<img', '<img itemprop="contentURL"', $content);

	return '<figure id="' . $id . '" aria-describedby="figcaption_' . $id . '" class="wp-caption ' . esc_attr($align) . '" itemscope itemtype="http://schema.org/ImageObject" style="width: ' . (0 + (int) $width) . 'px">' . do_shortcode( $content ) . '<figcaption id="figcaption_'. $id . '" class="wp-caption-text" itemprop="description">' . $caption . '</figcaption></figure>';
}
add_filter( 'img_caption_shortcode', 'my_img_caption_shortcode_filter', 10, 3 );

以上是关于php 使用HTML5 figure&figcaption,microdata和wai-aria属性改进WordPress标题短代码的主要内容,如果未能解决你的问题,请参考以下文章

正确使用 HTML5 标签:img, picture, figure 的响应式设计

html5中的<figure>标签可以用于背景图片吗?

HTML5 1.11 figure/figcaptio

csscss3总结

[html5] 学习笔记-html5增强的页面元素

html5新特性笔记