如何在自定义WordPress主题中添加对客户端提供的alt文本的支持?

问题描述 投票:0回答:1

我正在建立主题,并且通过ACF在网站上显示图像。我正在尝试获取客户端上载图像时输入的替代文本。我知道图像返回格式应该设置为图像数组或ID,而不是URL。我的很早以前就被设置为URL,我在检查代码时难以修改代码以反映替代文本。这是我当前显示职员直放站的功能。

function meetOurTeamListing() {
    if(have_rows('meet_our_team')):
        while(have_rows('meet_our_team')): the_row();
            $staffImage = get_sub_field('staff_image');
            $staffName = get_sub_field('staff_name');
            $staffTitle = get_sub_field('staff_title');
            $staffBio = get_sub_field('staff_bio');

            $html = 
            '
            <div class="myBtn staff-item">
                <img src="'.$staffImage.'" />
                <p class="staff-name">'.$staffName.'</p>
                <p class="staff-title">'.$staffTitle.'</p> 
            </div>    

            <!-- The Modal -->
            <div class="myModal modal">

            <!-- Modal content -->
            <div class="modal-content">    
                <div class="modal-header">
                    <span class="close">&times;</span>

                    <div class="modal-header-text">
                        <p class="modal-name">'.$staffName.'</p>
                        <p class="modal-pipe">|</p>
                        <p class="modal-title">'.$staffTitle.'</p>
                    </div>    
                </div>
                <img src="'.$staffImage.'" />
                <div class="modal-body">'.$staffBio.'</div>
            </div>

            </div>
            ';

            echo $html;

        endwhile;
    endif;  
}

显然,子字段需要转换为图像阵列,但是仅将无线电选择器从“图像URL”切换为“图像阵列”会破坏前端的图像。在这种情况下,如何动态地从WP数据库中实现替代文本?

wordpress alt custom-theme
1个回答
0
投票

问题已解决。谢谢妮可!

我的问题是,当设置拍摄图像的自定义字段时,我将它们设置为图像URL。如果您只想快速显示图像,这很好,因为它只返回一个字符串。它应该设置为Image Array。这将导致主题模板中可访问的键/值对(即alt文本)的逐项列表。

要显示设置为图像数组的图像,请使用以下语法:

<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />

这仅在我的PHP函数内部起作用。另外,可以在HTML的模板文件中使用以下代码:

<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
© www.soinside.com 2019 - 2024. All rights reserved.