Buscador
Cómo cargar scripts JS y estilos CSS correctamente a WordPress

Cómo cargar scripts JS y estilos CSS correctamente a WordPress

Durante el desarrollo de nuestros plugins y temas en WordPress, constantemente nos enfrentamos a tener que añadir nuevos ficheros en CSS y Javascript. En esta guía te voy a enseñar la manera más óptima de referenciar estos nuevos ficheros y utilizarlos de la manera más correcta dentro de Wordress.

Cargar ficheros JS y CSS en WordPress correctamente. ¿Para qué sirve?

Cargar los ficheros JS y CSS correctamente en WordPress sirve, como en todos sitios, para que todo funcione correctamente. Imagínate el caso en el que subes un nuevo fichero css a tu tema, en la ruta:

http://midominio.com/wp-content/themes/miTema/assets/css/miFicheroCss.css

Y para que funcione en tu tema utilizas:

<link rel="stylesheet" href="http://midominio.com/wp-content/themes/miTema/assets/css/miFicheroCss.css" type="text/css" media="all">

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/miFicheroCss.css" type="text/css" media="all">

Esto va a hacer que se cargue todo correctamente, pero de manera externa al funcionamiento de WordPress. Me explico: tú has hecho que se cargue el fichero, pero no le has dicho a WordPress que cargue el fichero, por lo tanto WordPress no conoce tu fichero. ¿Qué repercusión tiene esto? A priori ninguna. Puedes utilizar el fichero en todo tu tema de WordPress. A posteriori sí que podemos encontrar bastante. ¿Cónoces los típicos plugins de WordPress que reducen la velocidad de carga de tu web? Pues no llegarían a tus archivos. ¿Por qué? Porque el plugin es WordPress, y WordPress no los conoce.

Si quieres empezar a hacerlo bien, te recomiendo borrar si lo has hecho como he explicado arriba, y comenzar a hacerlo así:

Cómo cargar ficheros js (javascript) en WordPress

Recuerda que cargar ficheros JS y CSS en WordPress funciona de diferente manera. Vamos a diferenciar dos partes en WordPress, la del backend (panel de administración) y la del frontend (tu web que se muestra a una visita). En WordPress, debemos añadir los ficheros CSS y JS a una cola de carga, y es esta la que procesa los archivos. Si estas desarrollando un plugin, pienso que te interesa que los ficheros se procesen en el panel de administrador. Si estás con un tema alcontrario, al frontend.

Entonces. Lo primero es definir una función de lo que vamos a hacer. Abre tu fichero functions.php y añade lo siguiente:

[cc lang=”php”]

function kwertyx_anadirJavascript() {

wp_enqueue_script( ‘kwertyx’, get_template_directory_uri() . ‘/assets/scripts/kwertyxJquery.js’ );

} add_action(‘wp_enqueue_scripts’, ‘kwertyx_anadirJavascript();

[/cc]

Array ( [0] => WP_Comment Object ( [comment_ID] => 1 [comment_post_ID] => 608 [comment_author] => kwertyx [comment_author_email] => danieldiaz@kwertyx.com [comment_author_url] => [comment_author_IP] => 79.146.26.209 [comment_date] => 2018-04-18 13:21:25 [comment_date_gmt] => 2018-04-18 13:21:25 [comment_content] => Comentario [comment_karma] => 0 [comment_approved] => 1 [comment_agent] => Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 [comment_type] => [comment_parent] => 0 [user_id] => 1 [children:protected] => [populated_children:protected] => [post_fields:protected] => Array ( [0] => post_author [1] => post_date [2] => post_date_gmt [3] => post_content [4] => post_title [5] => post_excerpt [6] => post_status [7] => comment_status [8] => ping_status [9] => post_name [10] => to_ping [11] => pinged [12] => post_modified [13] => post_modified_gmt [14] => post_content_filtered [15] => post_parent [16] => guid [17] => menu_order [18] => post_type [19] => post_mime_type [20] => comment_count ) ) )
  • kwertyxHace 1 año
    Comentario
Blog profesional de Daniel Díaz
Desarrollado en Wordpress
Volver Arriba