Temas (V) Crear un tema, Conectar el CSS y el JS con WordPress
Ya hemos diseccionado nuestra plantilla, pero aun no lee el CSS que le tenemos preparado, es más ahora mismo no podríamos leer tampoco ningun archivo javascript, pero no nos preocupemos, en esta parte vamos a aprender a Conectar el CSS y el JS con WordPress.
Cargando archivos CSS
Lo primero que tenemos que hacer es crear un archivo llamado functions.php y ponerlo en la raíz de nuestro tema, este archivo nos permite insertar todo el contenido que queramos ejecutar al modo programación php.
De este modo lo primero que vamos a hacer en él va a ser unir la nuestra hoja de estilo, style.css con nuestro tema, ya que de momento lo único que está haciendo es que wordpress reconozca el tema.
Para cargar nuestra hoja de estilos debemos de introducir el siguiente fragmento de código dentro de nuestro archivo functions.php
function load_styles(){ wp_register_style('estilo_tema', get_stylesheet_uri(), '', '1.0', 'all'); wp_enqueue_style('estilo_tema'); } add_action('wp_enqueue_scripts', 'load_styles');
El nombre de la función es arbitrario y podemos poner el que queramos, pero debe de coincidir con la acción add_action que carga la cola de scripts (wp_enqueue_scripts) con el nombre de la función.
Dentro de la función usamos la función nativa de WP llamada wp_register_style() que usa varios parámetros.
- nombre de la hoja de estilo: arbitrario
- ubicación por medio de la función get_stylesheet_uri(): que nos permitirá marcar la localización de donde proviene nuestra hoja de estilo.
- definimos si la hoja de estilos depende de otra
- versión de la hoja de estilos
- medio al que se va aplicar; pantalla, impresión… al querer que sea para todo usamos all
Pero de momento solo lo hemos registrado no lo hemos añadido, para ello se usa la función wp_enqueue_style() que recibe como argumento el nombre que le hayamos puesto a la hoja de estilo.
Ahora bien, aunque WordPress ya sabe lo que tiene que hacer, no sabe donde hacerlo, de modo que necesitamos irnos al archivo header.php y eliminar el enlace a la hoja de estilo para sustituirlo por la siguiente línea:
<?php wp_head();?>
Esta función le dice a WordPress que es aquí donde tiene que cargar los scripts.
También podemos aprovechar que hemos usado esta función para incluir en footer.php la siguiente línea antes del cierre del body.
<php wp_footer();>
Estas dos funciones indican donde tienen que cargar funciones de cabecera o de jquery…
De este modo nuestro archivo header.php quedaría así:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Voyager</title> <?php wp_head();?> </head> <body> <header> <img src="http://www.creabytes.com/media/servicios-logo.png" atl="logo"> <h3>Slogan</h3> </header> <nav> aqui viene el navegador </nav> <main> <section id="cuerpo">
Y el archivo footer.php de esta forma:
</main> <footer>El footer!!!</footer> <?php wp_footer(); ?> </body> </html>
Con esto ya podemos ver como se ha cargado nuestra hoja de estilos, y como aparece la barra superior de administración si estamos logueados en el sistema, dando la primera funcionalidad de WordPress…
Cargando archivos JS
Una vez que ya hemos visto como se cargan los archivos css es muy fácil entender como se cargan los archivos js, de hecho vamos a cargar dos archivos dentro de una carpeta llamada js para poder extrapolarlo a la inclusión de más archivos o incluso introducir archivos de frameworks de JavaScript…
Lo primero que debemos de hacer es crear nuestros archivos dentro del tema, tal y como vimos en la entrada de la estructura del tema, de este modo vamos a crear una carpeta llamada js y dos archivos llamados js.js y js2.js (Sí, ya lo se, no me he quebrado la cabeza con los nombres…)
Bien una vez que tenemos nuestros archivos creados, lo que haremos será irnos a nuestro archivo functions.php y añadir el siguiente código:
function leer_scripts(){ wp_register_script( 'js', get_template_directory_uri() . '/js/js.js', array( 'jquery' ), false, true ); wp_register_script( 'js2', get_template_directory_uri() . '/js/js2.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'js' ); wp_enqueue_script( 'js2' ); } add_action( 'wp_enqueue_scripts', 'leer_scripts' );
Como de costumbre ya en WP vemos que debemos de añadir nuestra acción introduciendo esta vez el parámetro wp_enqueue_scripts que se encarga de poner en la cola de carga los scripts que necesitemos y como segundo argumento le pasamos el nombre de la función que va a registrar y poner en la cola los archivos.
Una vez dentro de la función de carga (leer_scripts()) registramos los scripts por medio de la funciones wp_register_script que acepta varios parámetros como anteriormente vimos, pero a nosotros nos interesan ahora mismo los dos primeros:
- El nombre que le vamos a dar al archivo para registrarlo
- La dirección relativa de donde se encuentra nuestro archivo, utilizando get_template_directory_uri() para colocarnos en el directorio del tema y desde ahi, por medio del encadenamiento de cadenas llegar hasta el archivo en cuestión.
Finalmente debemos de poner en cola los scripts por medio de wp_enqueue_script() que recibe como argumento el nombre del archivo que queremos poner en la cola tal y como ha sido registrado más arriba.
Esto puede parecer muy complejo, pero una vez se entiende es algo mecánico, además de permitirnos agregar de forma sencilla tantos archivos como deseemos e ir haciendo nuestro tema dinámico.
En la siguiente entrada vamos a ir haciendo que nuestra cabecera y nuestro pie se vayan volviendo dinámicos, tomando ahora sí ya datos desde nuestro WordPress!!!
otra vez yo, lo siento ya encontré problemas, en cuanto lo solucione te vuelvo a felicitar o a realizar aportes, saludos
Dime que problema te ha aparecido y tal vez pueda ayudarte.
Gracias Miguel, solo que no me carga con los archivos js de Bootstrap, (entre ellos bootstrap.min, jquery, y jquery.min) estuve analizando varios códigos y nomas no, incluso cambie los nombres, probé uno a uno, finalmente opte por mirar una de las plantillas desarrolladas con este framework para ir desglosando cada linea de código) si tu ya has realizado proyectos similares, te agradeceria que en un futuro subieras un ejemplo con un index con un simple alert, y functions.php, para comprobar el jquery, te agradezco por todo, y en cuanto pueda recomiendo tu pagina, gracias, de igual manera si encuentro resultados los posteo
Yo tengo una plantilla desarrollada con bootstrap, pero los archivos que puedo hacer que lean por medio de CDN lo hago directamente.
Aún así en esa plantilla tengo varios js incluidos, te muestro como los tengo en el archivo functions.php:
//registro de los js de livicons
function leer_scripts(){
wp_register_script( 'raphael', get_template_directory_uri() . '/js/raphael-min.js', array( 'jquery' ), false, true );
wp_register_script( 'livicons', get_template_directory_uri() . '/js/livicons-1.3.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'raphael' );
wp_enqueue_script( 'livicons' );
}
add_action( 'wp_enqueue_scripts', 'leer_scripts' );
Pero en bootstrap te encontrarás con otro problema mayor que este y es con los menús, ya que no son compatibles de forma natural…
Disculpa por responder hasta ahora, ya probé algunas de las cosas que mencionas, (CDN) actualmente estoy pasando un sitio estático a wordpress solo por agregarle el blog, y como mencionas si se encuentran muchos problemas, pienso que la voy a culminar aunque quede como frankestein, pero al final, en unas semanas te muestro el resultado y observaciones para que me des tu punto de vista, saludos y estamos en conctacto, hasta ahora como menciono he probado y han funcionado los archivos css, js y font mediante los CDN y tambien modificando su ruta, es decir aunque estén en la misma raiz del tema no se llega a ellos de esta forma, esto lo mire al insertar una imagen por medio de sus herramientas para luego seguir su ruta, saludos y todas las suertes del mundo
me alegro que te funcionase, espero que el proyecto se realice correctamente. Un saludo…
Muchas Gracias, todos los tutos están desfasados, el tuyo es perfecto, lastima que no te pueda dar estrellas, felicidades por tu post
Muchas gracias, la verdad que intento ir haciendo publicaciones de forma mas o menos periódica, pero el trabajo no me permite más.