时间戳

首页 > 解决方案 > 如何在 WordPress 中为特定元素或功能执行 CSS 和 JS

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

问题描述

我有一个 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 结帐表单字段。

请在这方面帮助我。

标签： phpcsswordpresstwitter-bootstrapwoocommerce

解决方案

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

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

推荐阅读