Wordpress，作者简介字段的下拉选择菜单

Question

这里是 Wordpress 新手，在搜索了两天没有任何成功之后！，我试图在前端为菜单中的每个选定选项显示不同的颜色。我使用此代码在用户个人资料

中创建菜单

<table class="form-table">
<tr>
        <th><label for="dropdown">Job Stats</label></th>
        <td>
            <?php 
            //get dropdown saved value
            $selected = get_the_author_meta( 'user_job_stats', $user->ID ); //there was an extra ) here that was not needed 
            ?>
            <select name="user_job_stats" id="user_job_stats">
                <option class="available" value="available" <?php echo ($selected == "available")?  'selected="selected"' : '' ?>>Available</option>
                <option class="busy" value="busy" <?php echo ($selected == "busy")?  'selected="selected"' : '' ?>>Busy</option>
</select>
            <span class="description">Select Stats.</span>
        </td>
    </tr>
</table>

我用这段代码在前端显示它们

<div class="job-stats">
<?php if (!empty(get_the_author_meta('user_job_stats', $curauth->ID))) { ?>
        <dt><?php echo $curauth->user_job_stats; ?></dt>
<?php } ?>
</div>

我想做的是当用户选择一个选项时 ex:Busy 我想将“忙碌”选项的背景色设为红色 IN FRONT END 并且选项 "Available" 背景颜色在前端为绿色。有什么帮助吗？

Answer 1

使用 CSS 的伪 class 设置相关标签的样式。

<style>
    .available:checked { background: green; }
    .busy:checked { background: red; }
</style>



<table class="form-table">
<tr>
        <th><label for="dropdown">Job Stats</label></th>
        <td>
            <?php 
            //get dropdown saved value
            $selected = get_the_author_meta( 'user_job_stats', $user->ID ); //there was an extra ) here that was not needed 
            ?>
            <select name="user_job_stats" id="user_job_stats">
                <option class="available" value="available" <?php echo ($selected == "available")?  'selected="selected"' : '' ?>>Available</option>
                <option class="busy" value="busy" <?php echo ($selected == "busy")?  'selected="selected"' : '' ?>>Busy</option>
</select>
            <span class="description">Select Stats.</span>
        </td>
    </tr>
</table>

对于前端：

<style>
dt.available { background: green; }
dt.busy { background: red; }
</style>
<div class="job-stats">
<?php if (!empty(get_the_author_meta('user_job_stats', $curauth->ID))) { ?>
        <dt class="<?php echo $curauth->user_job_stats ?>"><?php echo $curauth->user_job_stats; ?></dt>
<?php } ?>
</div>

Wordpress，作者简介字段的下拉选择菜单

Wordpress, Dropdown Selection Menu for Author Profile field

php

wordpress

author