/ 博客 / 109阅

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. 为何感觉每次修订代码的日期都是差不多的……😳

# 写于三年前,改于二年前
           

0

  1. This post has no comment yet

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注