Question

Wordpress noob在这里，搜索了两天没有任何成功！我试图在菜单中为每个选定的选项显示前端的差异颜色。我使用此代码在用户配置文件中创建菜单

<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选项时我想让选项“Busy”的背景颜色为红色前端并且选项“可用”背景颜色为绿色IN FRONT END。有什么帮助吗？

Answer 1

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

<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，下拉选择菜单

1 个答案: