在Wordpress前端添加选择

Question

早上好。

我想在Wordpress前端选择中添加选择的样式。 我在特定页面中将CSS和JS排入队列：

function enqueue_chosen() {
  if ( is_page( 'my-page' ) ) {
    wp_enqueue_style( 'chosen_css', plugins_url('chosen/chosen.css') );
        wp_enqueue_script( 'chosen_js', plugins_url('chosen/chosen.jquery.js'), array('jquery'), '', true );
  }
}
add_action( 'wp_enqueue_scripts', 'enqueue_chosen' );

文件已正确排入队列。现在我如何在我的选择框中应用所选的样式？

感谢您的帮助！

Answer 1

下面是三个步骤，可将您的Wordpress页面中的任何选择框变成选定的类型选择框。

1. 将选定的库放入主题functions.php中

---

function my_enqueue_files() {
  wp_enqueue_style( 'chosen_styles', 'https://harvesthq.github.io/chosen/chosen.css', false );
  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'chosen_js', 'https://harvesthq.github.io/chosen/chosen.jquery.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_files' );

1. 将jQuery(document).ready(function...)放在页面底部的一个脚本中，然后将另一个脚本称为jQuery(document).ready(function...)。
   注意：这必须在两个脚本中。 摘要：

---

<script>
    jQuery(document).ready(function () {
      jQuery(".chosen-select").chosen({
          search_contains: true,
          no_results_text: "Nothing found for: ",
          width: "100%",
      });
    });
    $('select').chosen({

    allow_single_deselect: true
    });
    </script>`
    `<script>
    jQuery(document).ready(function(){
        jQuery(".chosen").chosen();
    });
    </script>

1. 在特定选择项上使用class='chosen'。

用于选择一项：

---

`<select class="chosen" style="width:200px;">
    <option>Choose...</option>
    <option>Option 1</option>
        .....

对于具有多个选择的选择：

<select class="chosen" multiple="true" style="width:400px;">
    <option>Choose...</option>
       ....

希望有帮助。

Answer 2

您的add_action( 'wp_enqueue_scripts', 'enqueue_' );未完成，因为您的功能被称为enqueue_chosen并且您已经在您的行动中写了enqueue_，请将其更改为：

add_action( 'wp_enqueue_scripts', 'enqueue_chosen' );

接下来，要使用chosen_css的样式，您可以转到wordpress主题自定义程序并编辑Additional CSS部分中的css：

你可以在那里写你的CSS，它将被应用到你的所有wordpress页面。