Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Integrar JavaScript en plantilla

Estas en el tema de Integrar JavaScript en plantilla en el foro de WordPress en Foros del Web. Estoy combinando materializecss sobre underscores para crear un tema de wordpress y tengo una llamada posiblemente errónea de materializecss Código: jQuery(document).ready(function($){ $(document).materialize(); ### LINEA ERROR ...
  #1 (permalink)  
Antiguo 28/03/2016, 11:20
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Integrar JavaScript en plantilla

Estoy combinando materializecss sobre underscores para crear un tema de wordpress y tengo una llamada posiblemente errónea de materializecss

Código:
jQuery(document).ready(function($){
	$(document).materialize(); ### LINEA ERROR ###
});
En este enlace esta el archivo JS:
https://cdnjs.cloudflare.com/ajax/li...rialize.min.js

Luego tendría que añadir lo siguiente y no tengo muy claro como hacerlo
Código:
jQuery( document ).ready(function(){
  $(".button-collapse").sideNav(); ### Igual copiando esta linea bajo la linea del error sea suficiente ###
})
Parte de mi functions.php
Código PHP:
/**
 * Enqueue scripts and styles.
 */
function materializecss_scripts() {
    wp_enqueue_style('materializecss-style',get_stylesheet_uri());
    wp_enqueue_style('materialize',get_stylesheet_directory_uri().'/css/materialize.css');
    wp_enqueue_style('materialize-icons',get_stylesheet_directory_uri().'/css/materialize-icons.css');
    wp_enqueue_script('materialize-js',get_template_directory_uri().'/js/materialize.css',['jquery'],'5',true);

    wp_enqueue_script( 'materializecss-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'materializecss-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'materializecss_scripts' );

/*Add MaterializeCSS footer */
function materializecss_footer() {
    ?>
    <script>
        jQuery(document).ready(function($){
            $(document).materialize();
        });
    </script>
<?php
}
add_filter('wp_footer','materializecss_footer');
gracias

Última edición por quico5; 28/03/2016 a las 11:25
  #2 (permalink)  
Antiguo 28/03/2016, 11:44
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Integrar JavaScript en plantilla

"wp_enqueue_script('materialize-js',get_template_directory_uri().'/js/materialize.css',['jquery'],'5',true);"

En la carpeta "js" no deberías tener un archivo con extensión .js ??

y en las dependencias manda un array('jquery')
__________________
velarde23.com - Soluciones Web
  #3 (permalink)  
Antiguo 28/03/2016, 11:59
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Integrar JavaScript en plantilla

Upss, buen ojo @siddartha23, gracias por el apunte

Ehmm, en JS estoy bastante verde... ¿y en las dependencias manda un array('jquery')?

Última edición por quico5; 28/03/2016 a las 12:08
  #4 (permalink)  
Antiguo 28/03/2016, 12:12
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Integrar JavaScript en plantilla

Cuando mencioné lo de las dependencias me refería al tercer parámetro de la función wp_enqueue_script(), prueba reemplazandolo por un array
__________________
velarde23.com - Soluciones Web
  #5 (permalink)  
Antiguo 28/03/2016, 12:19
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Integrar JavaScript en plantilla

OK, ya lo cambié, pero sigue el error

Código:
wp_enqueue_script('materialize-js',get_template_directory_uri().'/js/materialize.js',array('jquery'),'20130328',true)
  #6 (permalink)  
Antiguo 28/03/2016, 12:38
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 6 meses
Puntos: 39
Respuesta: Integrar JavaScript en plantilla

En tu caso tienes que comprobar que el 'wp_enqueue_scripts' se esté ejecutando luego del filter que le haces al 'wp_footer' sino vas a estar llamando a la función de materialize cuando el archivo js aún ni se ha cargado.

Te convendría cargar un archivo_general.js y pasarle como dependencias array('jquery','materialize-js'','cualquier_otra_dependencia')
__________________
velarde23.com - Soluciones Web
  #7 (permalink)  
Antiguo 28/03/2016, 13:15
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Respuesta: Integrar JavaScript en plantilla

Yo me estaba basando en el video en WPMarbella (https://youtu.be/52E-Fq07UnY?t=1138) donde el ponente llamaba a FOUNDATION así:

He probado a hacerlo con Foundation como dice el ponente y el fallo ya no se reproduce, aunque mi intención es usar materializecss
Código PHP:
/**
 * Enqueue scripts and styles.
 */
function materializecss_scripts() {
    wp_enqueue_style('materializecss-style',get_stylesheet_uri());
    
    #wp_enqueue_style('materialize',get_stylesheet_directory_uri().'/css/materialize.css');
    #wp_enqueue_style('materialize-icons',get_stylesheet_directory_uri().'/css/materialize-icons.css');
    #wp_enqueue_script('materialize-js',get_template_directory_uri().'/js/materialize.js',array('jquery'),'20130328',true);

    wp_enqueue_style('foundation',get_stylesheet_directory_uri().'/css/foundation.css');
    wp_enqueue_script('foundation-js',get_template_directory_uri().'/js/foundation.js',array('jquery'),'5',true);

    wp_enqueue_script( 'materializecss-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

    wp_enqueue_script( 'materializecss-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'materializecss_scripts' );

/*Add MaterializeCSS footer */
function materializecss_footer() {
    ?>
    <script>
        jQuery(document).ready(function($){
            $(document).foundation();
            //$(document).materialize();
            //$(".button-collapse").sideNav();
        });
    </script>
<?php
}
add_filter('wp_footer','materializecss_footer');
entonces dentro de un materialize_custom.js ??
Código:
array('jquery','/ruta/materialize-js')

Última edición por quico5; 28/03/2016 a las 13:27

Etiquetas: tema
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:20.