Insertar CSS y javascript en WordPress

Home » Blog » Insertar CSS y javascript en WordPress

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
}


Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

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

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 8 reseñas
Iñigo me ha asesorado con un problema que tenía para acceder a mi web y me ha salvado la vida, porque creía que había perdido todo el trabajo que llevaba haciendo años. Muchísimas gracias. Es gratificante encontarte con alguien que controla y te ayuda en los problemas que te pueden surgir.
Santutxu Zaharra
Santutxu Zaharra
11/06/2024
Gran profesional y muy competente, le contratamos para cambiar la web y mejorar el posicionamiento y gracias a su asesoramiento ha mejorado.
jorge martinez
jorge martinez
16/05/2024
Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.
erlantz rique
erlantz rique
19/02/2024
Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.
Jose Marlasca
Jose Marlasca
06/02/2024
Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.
Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024
Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%
Asier Hermoso
Asier Hermoso
03/01/2024
Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita ;) Un crack!!
itxaso zubia
itxaso zubia
15/12/2023
El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.
Fernando Cózar
Fernando Cózar
02/11/2023