Siempre que ampliamos una aplicación web se requiere de ficheros extra para aportar diseño o aportar funcionalidad, vamos a revisar como se añaden estilos y javascript en WordPress. La forma es idéntica tanto para plugins cómo para los temas lo único que cambia es el fichero que en los segundos se hará en functions.php
Añadir estilos CSS
En primer lugar vamos a revisar las funciones que debemos usar para añadir nuestros css.
wp_register_style('id_micss', plugins_url('css/style.css',__FILE__ ), '', '1.0', 'screen');
wp_enqueue_style('id_micss');
En primer lugar registramos nuestro css:
- id_micss: Identificador del estilo.
- plugins_url(‘css/style.css’,__FILE__ ): Es la URL del css, en este ejemplo estamos dentro de un plugin, si estaríamos en themes, podriamos usar get_template_directory_uri().
- »: Aquí podemos índica si nuestro css depende de algún otro. Es importante para que WordPress no cargue el nuestro primero.
- 1.0: Es la versión de nuestro css. Para evitar el cacheo de navegadores se suele cambiar la versión con cada bloque de cambios de diseño.
- screen: Es el tipo de css, se usa para separar los css de pantalla de los de impresión.
Y en segundo lugar metemos nuestro css en la cola de WordPress.
Añadir javascript
La forma de añadir javascript es muy parecida a los estilos:
wp_register_script( 'mi_script', get_template_directory_uri().'/js/mijs.js', array( 'jquery'), '1.0.0', true );
wp_enqueue_script('mi_script');
- mi_script: Identificador del script.
- get_template_directory_uri().’/js/mijs.js’: Ruta al script, en este caso dentro de un tema.
- array( ‘jquery’): Hace reverencia a una dependencia, en este caso le indicamos a WordPress que primero cargue jquery, porque si no nuestro js no funcionara.
- 1.0.0: La versión del script.
- true: Este campo indica la ubicación del script. True indica que se cargue en el footer. Siempre que sea posible deberíamos cargar los scripts en el footer.
Y en segundo lugar metemos nuestro script en la cola de WordPress.
Cargar estilos y script en el front y backend
Ahora solo falta indicarle a WordPress que cargue estas funciones y para ello contamos con 2 posibilidades, cargarlo para el frontend:
add_action( 'wp_enqueue_scripts','cargar_css_js');
function cargar_css_js(){
//mis css y js
}
Y la otra cargar estilos y scripts en el admin:
add_action( 'admin_enqueue_scripts','cargar_css_js');
function cargar_css_js(){
//mis css y js
}