Curso Plugins WordPress #9. Añadir nuestro propio CSS

Bienvenidos a la novena entrega del curso de plugins para WordPress. Un curso que tiene el objetivo de aprender a programar plugins para WordPress.

Hoy veremos cómo crear y añadir nuestra propia hoja de estilos a WordPress, ya sea para modificar lo que muestra nuestro plugin, o cualquier otro elemento.

Esto es especialmente importante si nuestro plugin muestra algo en el frontend, o sea, en la web que ve el usuario. En el caso que sea así, seguramente querremos darle un formato y estilo. Veamos cómo.

Registrar y poner "en cola" una hoja de estilos en WordPress

Lo primero que haremos será crear una hoja de estilos, o sea, crearemos nuestro style.css con el código CSS que queramos. Pero claro, simplemente con esto no nos vale. A continuación tendremos que registrarlo con wp_register_style, y finalmente "ponerlo en cola" con wp_enqueue_style. Veamos cómo:

Esta es la mejor forma de hacerlo. Cierto es que hay algunos caminos más rápidos, pero a la vez más chapuceros, como colocar los estilos inline en el head, hacer un link manual o incluso saltándose el wp_register_style, pero son formas más pobres de hacerlo, que en algunos casos nos darán error.

Dicho esto, ya véis que el funcionamiento es muy simple. Sólo tenéis que crear un archivo CSS con vuestro código, y luego lo registráis (para decirle a WordPress que existe), y lo ponéis en cola (para decirle a WordPress que lo aplique).

Importante tener en cuenta que en este caso lo hemos aplicado a todas las páginas de la web, pero que en el caso que nuestro CSS solo sea aplicable en ciertas páginas, deberíamos eliminarlo de ahí a través de condicionales, para no sobrecargar la web con CSS inútiles. ¡Veremos más de eso en el curso intermedio y avanzado!

Bien, pues ya tenéis material para investigar y hacer pruebas, o sea que adelante, imaginación al poder. Nos vemos en la siguiente clase, la última del curso básico. ¡Hasta entonces!

• Curso Plugins WordPress #1. Introducción
• Curso Plugins WordPress #2. Action Hooks
• Curso Plugins WordPress #3. Filter Hooks
• Curso Plugins WordPress #4. Custom Post Types
• Curso Plugins WordPress #5. Taxonomías personalizadas
• Curso Plugins WordPress #6. Crear Widget Areas
• Curso Plugins WordPress #7. Ubicaciones de menús
• Curso Plugins WordPress #8. Shortcodes
• Curso Plugins WordPress #9. Añadir nuestro propio CSS
• Curso Plugins WordPress #10. Hacer plugins sin escribir código