php - 如何在 WordPress 中为特定元素或功能执行 CSS 和 JS

Question

我有一个 WordPress WooCommerce 网站

我想在我的 WooCommerce 结帐页面中为特定功能执行 Bootstrap CSS 和 js。我的代码是

if( current_user_can('administrator')) {
function display_customers_list() {
// query array
$args = array(
    'role' => 'outlet'
);
$customers = get_users($args);
if( empty($customers) )
return;

echo'<br>';
echo'<h3>Display Customer List</h3>';
echo '<form action="" method="POST">';
echo'<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_name[]" title="Select Customer">';
foreach( $customers as $customer ){
    echo '<option value="'.$customer->data->ID.'">'.$customer->data->display_name.'</option>';
}
echo '</select>';
echo '<input type="submit" value="Select Customer">';
echo '</form>'; 


echo'<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">';
echo'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" />';
echo'<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>';
echo'<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>';
echo'<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>';

}   
add_filter( 'woocommerce_before_checkout_form', 'display_customers_list' );
}

问题是 Bootstrap CSS 和 js 也会影响我的 WooCommerce 结帐页面中的其他表单字段。

我只想在我的功能选择框中使用。我如何才能仅为函数中的选择框加载此 css 和 js，并且它不会影响我的其他 WooCommerce 结帐表单字段。

请在这方面帮助我。

Answer 1

您不能仅对选择框或其他 html 元素使用 bootstrap css 或 js，除非您有特定元素的特定 css 和 js。 您可以使用 wp_enque_script() 和 wp_enque_style 等函数在具有 is_page() 条件的特定页面上显示。但它肯定会影响整个页面，而不仅仅是特定元素。

我会加载你需要的样式，然后用新样式检查元素并将你在检查器中看到的所有样式复制到新样式表，删除 Bootstrap 文件并查询新样式。 然后尝试添加 jquery - 基本相同的方式。