So fügen Sie select2 js in den Theme-Optionen der WordPress-Admin-Seite hinzu

Ich habe Select2 js hinzugefügt, um Suchfunktionen in den Dropdown-Optionen meiner WordPress-Designeinstellungen bereitzustellen, um Suche hinzuzufügen -> http://nimb.ws/1QW6id

Ich habe meiner Admin-Optionsdatei den folgenden Code hinzugefügt:

<?php if(is_admin()) { ?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
  $(document).ready(function($) {
    $('.option-tree-ui-select').select2();
});
</script>

<?php } ?>

Auf der Admin-Seite funktioniert dies, aber der Code steht im Konflikt mit dem Admin-seitigen Medienmenü. Das Medienmenü lädt kontinuierlich und lässt das Hochladen neuer Bilder nicht zu. Wenn ich den neuen Code entferne, beginnt die Medienfunktion ordnungsgemäß zu funktionieren.

Irgendwelche Ideen, wie man das beheben kann?

Verwenden wp_enqueue_script Funktion zum Einbinden von Skripten. Entfernen Sie auch Ihren jquery-Aufruf. Verwenden Sie Abhängigkeiten.

Siehe ein Beispiel

Platzieren Sie diesen Code in der functions.php Ihres Themes oder in der Haupt-Plugin-Datei:

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );

Diese Aktion umfasst select2-Bibliotheken und jquery. Dritter Parameter von wp_register_script sagte WordPress, dass für dieses Skript, das gut funktioniert, jquery core enthalten sein sollte. Weitere Details finden Sie unter Entwicklerportal. Wenn der 3. Parameter auf eingestellt ist array('jquery') jquery core wird automatisch vor Ihrem select2-Plugin eingebunden.

Dann platzieren Sie JS in Ihrer Seite, Kopfzeile, Scrtip-Datei (wo Sie möchten) mit dem call select2-Plugin:

<script type="text/javascript">
  $(document).ready(function($) {
      $('.option-tree-ui-select').select2();
  });
</script>