Cómo agregar select2 js en las opciones de tema del lado del administrador de wordpress

3 minutos de lectura

avatar de usuario
Ketán

He agregado Select2 js para proporcionar capacidades de búsqueda en las opciones desplegables de configuración de mi tema de wordpress para agregar búsqueda -> http://nimb.ws/1QW6id

He agregado el siguiente código a mi archivo de opciones de administrador:

<?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 } ?>

En el lado del administrador esto funciona, pero el código entra en conflicto con el menú de medios del lado del administrador. El menú multimedia se carga continuamente y no permite cargar nuevas imágenes. Cuando elimino el nuevo código, la funcionalidad multimedia comienza a funcionar correctamente.

¿Alguna idea sobre cómo solucionar este problema?

  • Enumere los errores que está recibiendo.

    – Antonio L.

    20 de febrero de 2018 a las 6:20

  • No se muestran errores en firebug. Pero el menú de medios del lado del administrador continúa mostrando la carga -> nimb.ws/CIfdo6

    – Ketán

    20 de febrero de 2018 a las 6:25

  • Sus enlaces están dirigiendo a sitios web no seguros. Utilice un proveedor de imágenes diferente si está intentando cargar una imagen para su revisión.

    – Antonio L.

    20 de febrero de 2018 a las 6:26

  • Por favor revise esta URL s.nimbus.everhelper.me/share/1485315/k76iddr67qkzev0esnqv

    – Ketán

    20 de febrero de 2018 a las 6:28

  • ¿Alguna actualización aquí?

    – Ketán

    20 de febrero de 2018 a las 7:16

avatar de usuario
Máximo Sarandí

Usar wp_enqueue_script función para incluir scripts. También elimine su llamada jquery. Usa dependencias.

Ver un ejemplo

Coloque este código en functions.php de su tema o en el archivo del complemento principal:

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' );

Esta acción incluirá bibliotecas select2 y jquery. Tercer parámetro de wp_register_script le dijo a WordPress que para que este script funcione bien, se debe incluir jquery core. Ver más detalles en portal de desarrolladores. Si establece el tercer parámetro en array('jquery') jquery core se incluirá antes de su complemento select2 automáticamente.

Que en su página, encabezado, archivo scrtip (donde desee) coloque JS con el complemento call select2:

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

  • Donde puedo poner este archivo. ¿Puede explicarme más usando mi código anterior? También en mi configuración de tema del lado del administrador de wordpress jquery.min.js no incluido. Sin ese select2 no funciona. Así que he agregado jquery.min.js a. Gracias.

    – Ketán

    20 de febrero de 2018 a las 9:51

  • Edité mi respuesta. Ver más detalles.

    – Máximo Sarandí

    20 de febrero de 2018 a las 10:05

  • <script type="text/javascript"> $(document).ready(function($) { $('.option-tree-ui-select').select2(); }); </script> Aquí se muestra el error en el elemento de inspección ReferenceError: $ no está definido

    – Ketán

    20 de febrero de 2018 a las 10:23

  • perlace $ a jQuery

    – Máximo Sarandí

    20 de febrero de 2018 a las 10:24

  • Ok, y también infórmeme dónde puedo agregar ese último código. Quiero incluir ese script en las opciones de tema del lado del administrador.

    – Ketán

    20 de febrero de 2018 a las 10:26


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad