WordPress中实现数据库人员循环生成按钮的方法

原代码的问题在于：你在foreach循环里只是不断覆盖$kantoor1变量，最终只会保留最后一条数据的值；而且返回的HTML里只写了一次按钮元素，自然只能显示最后一个人员。

修改思路：

• 初始化一个字符串变量存储所有按钮的HTML代码
• 在循环内逐个拼接每个人员的按钮代码
• 最后把拼接好的按钮代码插入到对应的HTML容器中

修改后的完整代码：

<?php 
function custom_dbnew_link()
{
    global $wpdb;
    $table_name = $wpdb->prefix . 'personeellijst';
    // 只查询需要的naam字段，比SELECT *更高效
    $retrieve_data = $wpdb->get_results( "SELECT naam FROM $table_name" );
    
    // 初始化存储按钮的变量
    $buttons_html = '';
    
    foreach ($retrieve_data as $retrieved_data){ 
        $naam = $retrieved_data->naam;
        // 把每个人员的按钮代码拼接到变量里
        $buttons_html .= '
        <button onclick="myFunction()" id="'. esc_attr($naam) .'" class="pasfotoselect">
            <div class="namediv leeg">
                <img decoding="async" src="/wp-content/personeel/pasfoto/'. esc_attr($naam) .'.jpg" class="personeelpasfoto" alt="Foto van '. esc_attr($naam) .'">
                <div class="pername">'. esc_html($naam) .'</div>
            </div>
        </button>';
    }   

    // 处理没有人员数据的情况
    if (empty($buttons_html)) {
        $buttons_html = '<p>暂无人员数据</p>';
    }

    return '
    <div id="roosterhtml" style="display:none;">
        <div id="testnav" class="navfoto">
            <div class="Personeel">Personeel fotos voor <div class="perfirstname" id="roosterfotos"></div></div>
            <div id="closefoto" class="closefoto">opslaan</div>
        </div>
        <div id="testnavcopy" style="display:none;" class="navfoto">
            <div class="Personeel">Personeel fotos voor <div class="perfirstname" id="roosterfotos2"></div></div>
            <div id="closefoto2" class="closefoto">opslaan</div>
        </div>
        <div class="fotobuttons2">
            <div class="buttonsarchief">
                <div id="newmembersbutton" class="buttonmembers active">In dienst</div>
                <div id="oldmembersbutton" class="buttonmembers">Uit Dienst (Inval)</div>
                <div id="addmembersbutton" class="buttonmembers">Nieuwe personeel Toevoegen</div>
            </div>
        </div>
        <div id="newmembers" class="fotobuttons">
            '. $buttons_html .'
        </div>
    </div>
    <script src="/wp-content/uploads/personeeldatabase.js"></script>
    ';
}
add_shortcode('custom_dbnew', 'custom_dbnew_link');
?>

额外优化点：

• 使用esc_attr()和esc_html()对数据库取出的姓名进行转义，避免XSS安全风险
• 把SQL查询改成只获取naam字段，减少不必要的数据读取
• 添加了空数据的处理逻辑，避免容器为空

内容的提问来源于stack exchange，提问作者Frank Stolp