Soporte » Plugins y Hacks » Hacks » Agregar css y jq de forma correcta

  • Camilo

    (@camilo517)


    Hola buenas, necesito ayuda a la hora de encolar js y css
    En este proyecto los tenian añadidos en el header.php , pero no es la forma correcta de que WordPress los lea, ya que cargan todos en todas las páginas etc

    He creado esto https://prnt.sc/lg1611

    Pero los timepicker no me funcionan correctamente y algunos js tampoco cargan bien

    (Ya se que en la linea 08 me sobran los () )

    Si alguien me puede ayudar se lo agradecería. gracias

Viendo 7 respuestas - 1 de 7 (de 7 total)
  • kallookoo

    (@kallookoo)

    Hola,

    Es un child theme?
    Si lo es deberias usar get_stylesheet_directory_uri si el css, js estan en el child theme.

    Que errores exactamente tienes?

    Te recomiendo que uses wp_register_ en vez de wp_enqueue_ para que el WordPress sepa que existen y despues los añades con wp_enqueue_ dependiendo de la condicional que quieras usar como por ejemplo is_product otra cosa que me he fijado es que no añades algunos como dependencias y eso podria ocasionar algun problema.
    Por ejemplo slick-theme.css necesita slick.css asi que se deberia declarar como una dependencia al igual que los datepicker, etc… De ahi que primero los registres y luego los añadas.

    Camilo

    (@camilo517)

    Hola @kallookoo
    No es un child theme

    Los errores es que no se visualiza correctamente
    ¿Como puedo hacer lo de wp_register_ y darles dependecia en ese script?

    Gracias

    kallookoo

    (@kallookoo)

    Mira! para los scripts tienes un ejemplo muy claro aqui: https://developer.wordpress.org/reference/functions/wp_register_script/#comment-2647

    Para el css no veo un ejemplo pero es exactamente igual. Usas wp_register_style para las dependencias y usas wp_enqueue_style para el css y añades las dependencias previamente registradas.

    Sino quieres tambien es valido usar solo el wp_enqueue_ lo importante es que declares las dependencias para que asi el WordPress añada los archivos jerarquicamente.

    Otra cosa, pero ya es mas personal es que en vez de llamar tanto a la function get_template_directory_uri es que declares una variable y uses la variable.
    Algo como esto:

    
    function un_nombre_unico() {
     $base_uri = get_template_directory_uri();
     wp_register_script( 'unico-nombre', $base_uri . '/js/unico-nombre.js' );
    }
    

    Duda! Cuando dices que no se visualizan correctamente te refieres a que la url no es correcta?

    Camilo

    (@camilo517)

    Gracias por tu ayuda
    Pero como puedo declarar las dependencias? Porque creo que hay esta el fallo

    Que por ejemplo el timepicker no se muestra, sale bugeado, basicamente no hace su funcion

    kallookoo

    (@kallookoo)

    Veamos @camilo517,

    Tanto el wp_register_ como el wp_enqueue_ tiene un parametro para especificar las dependencias. Tu mismo codigo que pusistes antes veras que hay un array( 'jquery' ) estas declarando el jquery como dependencia.

    Cuando registras o añades un js o css usas un «handle» que se refiere a un nombre unico para identificar el archivo. Es el primer parametro de la function que sirve entre otras cosas para poder usarlo en el parametro de dependencias de otra function.

    Revisa el enlace y veras que lo entenderas.

    Yo! no se otros nunca suelo poner codigos para que solo hagais copy&paste, por varios motivos, uno de ellos es para que se aprenda un poco, independientemente del tipo de usuario, no digo que seais unos expertos pero si no entendeis o aprendeis los conceptos de cierto codigo un dia os encontrais con que hicisteis tanto copy&paste que no sabreis el motivo de porque el WordPress no funciona.
    Te explico esto ultimo por la impresion que me da tu ultimo mensaje ya que en el ejemplo que puse y creo que si lo hubieses leido un poco lo hubieses hecho.

    Camilo

    (@camilo517)

    En ningun momento hice copy&paste porque el codigo ese no existe jaja
    Lo cree buscando en la documentación

    Me he explicado mal, mi pregunta es ¿como puedo declarar una dependencia mia? es decir yo ahi declaro la dependencia al jquery de WordPress, pero lo que no se es como hacerlo para un js o css mio

    Perdona

    kallookoo

    (@kallookoo)

    Mira este ejemplo:

    
    wp_register_script( 'uno', 'uno.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'dos', 'dos.js', array( 'uno' ), '1.0', true );
    wp_register_script( 'tres', 'tres.js', array( 'dos' ), '1.0', true );
    wp_register_script( 'mio', 'mio.js', array( 'tres' ), '1.0', true );
    
    wp_enqueue_script( 'mio' );
    

    Registro 4 archivos, los 3 primeros son dependencias y el ultimo es donde tengo mi codigo.
    La primera y como necesito jquery lo pongo para que cargue el jquery como dependencia obviamente.
    El resto, yo lo hago asi, pongo como dependencia del dos el uno y asi sucesivamente.

    Otra seria asi:

    
    wp_register_script( 'uno', 'uno.js', array( 'jquery' ), '1.0', true );
    wp_register_script( 'dos', 'dos.js', array( 'jquery', 'uno' ), '1.0', true );
    wp_register_script( 'tres', 'tres.js', array( 'jquery' 'uno', 'dos' ), '1.0', true );
    wp_register_script( 'mio', 'mio.js', array( 'jquery', 'uno', 'dos', 'tres' ), '1.0', true );
    

    De esta manera le dices al WordPress que ‘mio’ necesita todos los puestos, pero vamos que hace lo mismo que el primer ejemplo ya que cada uno es dependiente del otro.

Viendo 7 respuestas - 1 de 7 (de 7 total)
  • El debate ‘Agregar css y jq de forma correcta’ está cerrado a nuevas respuestas.