竹炉山房

去年的这两天写了《将figcaption标签作为图片alt属性》。

将figcaption标签作为图片alt属性

在最后一段留了尾巴：

如部分图片已插入alt会造成一定混乱。以上代码未相应修改。

其实是代码本身有逻辑问题，加上php偏重静态，只能放弃。

今日找到更好的办法，很简单，使用JavaScript一劳永逸的解决上述缺陷和不足。

1、新建alt.js，放入theme的文件夹下，比如theme/build/js/。

/* Auto Add Image Alt Attribute (JS) */
window.$ = jQuery;
$(document).ready(function(){
$('figure img').each(function() {
    var $img = $(this);
    var alt = $img.next("figcaption").text();
    $img.attr('alt', alt);
    })
})

2、wp引用js。

function pm_load_static_files(){
    wp_enqueue_script( 'alt', get_template_directory_uri() . '/build/js/alt.js');
}
add_action( 'wp_enqueue_scripts', 'pm_load_static_files' );

假使图片未设置figcaption属性，比如<ruby></ruby>项下的图片，可加入if判断句。

/* Auto Add Image Alt Attribute (JS) */
window.$ = jQuery;
$(document).ready(function(){
$('.grap img').each(function() {
    var $img = $(this);
    var alt = $img.next("figcaption").text();
	if (!alt) {
		var alt = $img.next().next("rt").text();
	}
    $img.attr('alt', alt);
    })
})

p.s. 为何感觉每次修订代码的日期都是差不多的……😳