Wordpress 站点 - 向 PHP 中的现有图像添加 alt 属性

Wordpress site - adding alt attributes to existing images in PHP

我想了解如何向网站上已有的图片添加 alt 属性。我已经阅读了在 Whosebug 和 Wordpress.org 上可以找到的所有其他帖子,测试了多个函数,但运气不佳。任何帮助将不胜感激。

在我的 functions.php 文件中,这个函数存在,但它似乎没有做任何事情。

    /* add alt attributes to all images */

        function isa_add_img_title( $attr, $attachment = null ) {

        $img_title = trim( strip_tags( $attachment->post_title ) );

        $attr['title'] = $img_title;
        $attr['alt'] = $img_title;

        return $attr;
            }
        
add_filter( 'wp_get_attachment_image_attributes','isa_add_img_title', 10, 2 );

这是我以前实现的一个功能,但没有效果。

function addImageAlt($attribute){
    $imgAttribute = trim( strip_tags($attribute->post_title) );
    $totalAttribute["alt"] = $imgAttribute;
    return $totalAttribute;
}
add_filter("wp_get_attachment_image", "addImageAlt", 10, 5);

这里是模板代码,获取图片来源

    {
        extract($atts);

        if (!is_front_page()):
            wp_enqueue_script('slick', get_template_directory_uri() . '/assets/js/slick.min.js', array( 'jquery' ), '20160816', true);
            wp_enqueue_style('slick-css', get_template_directory_uri() . '/assets/css/slick.css');
        endif;

        $html = '<div class="brands-slider-wrapper">
                    <div class="brands-slider">';
                        $loop = new WP_Query(array( 'post_type' => 'zm_brands', 'posts_per_page' => $num_of_brands, 'order' => 'ASC', 'orderby' => 'meta_value' ));

                        if ($loop && $loop->post_count > 0) :
                            while ($loop->have_posts()) : $loop->the_post();
                                
                                
                                $imgsrc=wp_get_attachment_image_src(get_post_thumbnail_id(), 'brand-thumb');
                                $brand_thumbnail= $imgsrc[0] != "" ?  $imgsrc[0] : get_template_directory_uri() . '/assets/images/default-music-icon.jpg';
                                $html.='<div class="slide-brand">
                                            <div class="brand-logo-thumbnail">
                                                <a href="'.get_permalink().'">
                                                    <img src='.$brand_thumbnail.' alt="'.basename($brand_thumbnail).'" title="'.get_the_title().'">
                                                </a>
                                            </div>
                                        </div>';
                            endwhile; 
                        endif;
        
        $html .='</div>
                </div>';
        wp_reset_query();
        return $html;
    }

网站上滑块的图像来源似乎不同。

 $html .= '<div class="slide-instrument">
                                           <div class="instrument-category-thumbnail auto-height">
                                               <img src=' . $category_thumbnail . '" alt="' . $term->slug . '" title="' . $term->name . '">
                                           </div>
                                           <h4>' . $term->name . '</h4>
                                           <a href="' . get_term_link($term->slug, $taxonomy) . '"><span>View More</span></a>
                                       </div>';

您正在使用 wp_get_attachment_image_src 获取图像,上面的过滤器不同。

wp_get_attachment_image_src : 这仅用于图像 url。

wp_get_attachment_image :这已用于图像 url 以及 img 标签,因此如果您要使用 wp_get_attachment_image() 功能,那么您的过滤器将开始工作。

根据我的说法,您需要像这样更改模板代码:

$html.='<div class="slide-brand">
            <div class="brand-logo-thumbnail">
                <a href="'.get_permalink().'">
                    '.wp_get_attachment_image(get_the_ID()).'
                </a>
            </div>
        </div>';

我假设您在 get_the_ID()

中获取 ID

我假设你的函数与过滤器是正确的。

谢谢

我通过编辑 application.js 文件并添加此 jquery 函数

来解决这个问题
$('img').attr('alt', function(){
    var src = this.src.split('/').pop().split('.')[0];
    return src;
});

这只是为网站上的所有图片添加 alt 属性,不一定是最好的方法,但对我来说很管用。