Como cargar jQuery, Javascript y CSS en WordPress.org

jQuery Javascript y CSS en WordPress
jQuery Javascript y CSS en WordPress

Hola, buenas. Lo primero es lo primero. Hay que ser educaos. :)

El tema que hace que el destino o la casualidad nos haya conectado, es la forma correcta de cargar la librería jQuery, nuestros scripts Javascript, y nuestros estilos CSS en WordPress.

Ya. Ya sé que hay millones de blogs donde explican como hacerlo, pero en muchos de ellos te explican como cargar scripts y hojas de estilos de la forma convencional, incluso en WordPress, y eso es un graso error. No quiero menospreciar el trabajo de nadie, ya que sólo por el esfuerzo de intentar ayudar a los demás, se merecen un trocito de cielo (o más ancho de banda con conexión de fibra, que viene a ser lo mismo).  :)

La cosa es que cargar jQuery, nuestros scripts Javascript y nuestras hojas de estilo de forma convencional se haría así.

<head>
<link rel="stylesheet" href="css/estilos.css"  type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src='js/funciones.js'></script>
</head>

Este código de aquí arriba carga una hoja de estilos, jQuery siempre en su última versión desde el repositorio CDN de Google, y un archivo de funciones Javascript. Si prefieres cargar jQuery desde el repositorio CDN oficial de jQuery siempre en su última versión, tienes que sustituir la línea que carga jQuery por esta.

<script src='http://code.jquery.com/jquery-latest.min.js'></script>

Y por último, si prefieres cargar jQuery desde tu servidor, tienes que tener el archivo de jQuery alojado en tu servidor y sustituir la línea que carga jQuery por esta.

<script src='js/jquery-1.10.2.min.js'></script>

Esto es correcto si se cargan en una página convencional. Y cuando digo convencional, me refiero a que no esté construida con un CMS (sistema de gestión de contenidos, Content Managment System) como por ejemplo WordPress.

Cargarlos de esta forma en WordPress se haría así.

archivo: header.php

<head>
<link rel="stylesheet" href="css/estilos.css"  type="text/css">
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='js/funciones.js'></script>
</head>

Es igual que en una página tradicional, solo que dentro del archivo “header.php”.

Y funcionan correctamente en muchos o algunos casos. Así que puede ser que no. Y entonces te puedes romper los cuernos hasta averiguar lo que está fallando. Y digo esto, porque cargar nuestros scripts de esta forma puede darnos problemas con algún plug-in, ya que WordPress no tiene ningún control sobre nuestros scripts.

Es justamente ese el motivo de cargarlos de la siguiente manera, para que WordPress tenga constancia de lo que se está cargando, lo haga en el orden correcto, y no cargue el mismo script más de una vez.

archivo: functions.php

function incluir_scripts(){
    // nos aseguramos que no estamos en el area de administracion
    if( !is_admin() ){

	// Cargando Jquery desde el CDN (repositorio) de Google.
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
	wp_enqueue_script('jquery');

        wp_register_style('mis-estilos', get_stylesheet_directory_uri(). '/css/estilos.css');
        wp_register_script('script-1', get_stylesheet_directory_uri(). '/js/funciones.js', array('jquery'), '1', true );

        wp_enqueue_style('mis-estilos');
	wp_enqueue_script('script-1');
    }
}

add_action("wp_enqueue_scripts", "incluir_scripts");

De esta forma le decimos a WordPress lo que debe cargar y el orden en que debe hacerlo.

El orden en que se cargan los scripts es muy importante, imagínate que cargas un plugin de un calendario en jQuery, y tú has hecho algunas funciones en Javascript y jQuery para añadirle funcionalidades a ese calendario. Pues para que tus funciones funcionen, antes de cargarlas debería de haberse cargado el plugin del calendario, pero para que este funcione antes debería haberse cargado jQuery. En definitiva, que para que todo rule como se espera se tiene que cargar jQuery primero, después el plugin del calendario, y finalmente nuestras funciones.

Es bastante sencillo y claro.

Ahora le daremos una vuelta de tuerca para optimizar la carga de nuestros scripts y plugins jQuery, cargando sólo los necesarios según la página o post.

Algunos de nuestros scripts los usaremos en una página o post concreto, así que es absurdo e innecesario cargarlos siempre, haciendo la carga de la página más lenta y pesada. Sin ir más lejos, seguramente el calendario lo necesitamos sólo en una página, así que lo cargamos sólo en esa.

Lo ideal en estos casos es tener las funciones de cada página o post en un archivo fácilmente identificable, así lo cargaremos cuando este sea requerido.

Aunque también podemos decirle que lo cargue siempre excepto en la o las páginas que queramos. Imagínate que haces un script para mostrar un mensaje de una oferta o algo así, y quieres que se muestre en todas las páginas y posts excepto en la de “contacto” y la de “quién somos”. Entonces este código te será útil.

archivo: functions.php

function incluir_scripts(){
    // nos aseguramos que no estamos en el area de administracion
    if( !is_admin() ){
	$pagina_o_post = explode('/', $_SERVER['REQUEST_URI']);

	// Cargando Jquery desde el CDN (repositorio) de Google.
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
	wp_enqueue_script('jquery');

	if($pagina_o_post[1] != 'titulo-del-post-numero-1') {
            wp_register_script('script-1', get_stylesheet_directory_uri(). '/js/funciones-1.js', array('jquery'), '1', true );
            wp_enqueue_script('script-1');
        }

	if($pagina_o_post[1] == 'titulo-del-post-numero-2') {
	    wp_register_style('mis-estilos', get_stylesheet_directory_uri(). '/css/estilos.css');
	    wp_register_script('script-2', get_stylesheet_directory_uri(). '/js/funciones-2.js', array('jquery'), '1', true );
	    wp_register_script('script-3', get_stylesheet_directory_uri(). '/js/funciones-3.js', array('script-2'), '1', true );

            wp_enqueue_style('mis-estilos');
            wp_enqueue_script('script-2');
	    wp_enqueue_script('script-3');
	}

	wp_register_script('script-4', get_stylesheet_directory_uri(). '/js/funciones-4.js', array('jquery'), '1', true);
	wp_enqueue_script('script-4');
    }
}

add_action("wp_enqueue_scripts", "incluir_scripts");

Aquí tenemos como ejemplo, que jQuery se carga siempre (en todas las páginas).

El archivo “funciones-1.js” se carga en todas las páginas menos en la que se llame “titulo-del-post-numero-1″.

La hoja de estilos “estilos.css”, y los archivos “funciones-2.js” y “funciones-3.js” se cargarán solo en la página “titulo-del-post-numero-2″.

Y por último, el archivo “funciones-4.js” se cargará siempre (en todas las páginas).

Nada más. Solo advertirte que todos estos códigos son solo ejemplos, para usarlos en tus proyectos deberás adaptarlos cambiando las rutas y los nombres de archivo, y si cargas más o menos archivos.

Ya sabes como cargar jQuery, Javascript y CSS en WordPress.org de forma correcta y optimizada. ;-)

Espero que te haya servido de ayuda. Si es así comenta por favor.

if (visitante == "amigo" || visitante == "amiga") {
    alert("Un abrazo.");
} else {
    alert("Un saludo.");
}
Si te ha gustado, lo puedes compartir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>