如何为WordPress中的特定元素或函数执行CSS和JS

Question

我有一个WordPress WooCommerce网站

我想为我的WooCommerce结账页面中的特定功能执行引导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' );
}

问题是引导程序CSS和js也会影响我的WooCommerce结账页面中的其他表单字段。

我只想在函数的选择框中使用。我如何才能只为函数中的选择框加载这个css和js，而不会影响我的其他WooCommerce签出表单字段。

请在这方面帮助我。

Answer 1

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

我会加载您需要的样式，然后用新样式检查元素，并将您在检查器中看到的所有样式复制到新样式表，删除引导文件并查询新样式。然后尝试添加jquery——基本上是一样的方式。