En la clase de hoy del curso de WordPress avanzado aprenderemos a agregar scripts y estilos propios, o a quitar los de otros themes o plugins.
9.1 - Agregar nuestros propios scripts (.js)
Hoy aprenderemos una técnica importantísima en WordPress: Agregar nuestros propios scripts de JavaScript. En ocasiones debemos añadir (o modificar) ciertos scripts que le dan funcionalidad nuestra web. Hay muchas formas de hacerlo mal, pero sólo una de buena. Vamos a verla paso a paso:
Ya lo veis, apenas 5 líneas de código que nos permiten vincular nuestro archivo de script fácilmente, para agregar, modificar o incluso eliminar scripts que nos puedan dar ciertos problemas. ¡Y ahora vamos a ver los estilos!.
9.2 - Agregar nuestros propios estilos (.css)
Vamos ahora a por el diseño, a por el estilo. ¿Qué ocurre si queremos modificar los estilos de un theme? ¿O de un plugin? ¿Dónde colocamos los nuestros? ¿Inline? No. ¿En el head? Tampoco.
La mejor forma de hacerlo es vincular nuestro archivo CSS personalizado, que complemente (o sustituya) a los estilos básicos. Veamos cómo se hace:
Una vez más, apenas 5 líneas de código que nos permiten modificar el estilo de cualquier theme o plugin, sin problemas en el caso que se actualicen, ya que nuestro código es independiente :)
Vamos a por la tarea del día, así lo veréis más facilmente:
- Script:
- Crear un archivo "hola.js" que haga saltar un saludo de bienvenida "Hola" a las visitas.
- Vincular ese script a nuestro WordPress, sólo en el front-end.
- Crear un archivo "hola-2.js" que haga saltar un saludo de bienvenida "Buenos días" a las visitas.
- Vincular ese script a nuestro WordPress, sólo en el front-end, pero primero eliminando (desregistrando) el anterior
- Estilo:
- Crear un archivo "estilos.css" que modifique el tamaño de la letra de nuestra web. Os recomiendo mirar el curso de CSS.
- Vincularlo a nuestro WordPress para sobreescribir el estilo que tiene por defecto, colocando las dependencias de los ya existentes, para que los cargue más tarde.
¡Bien, pues esto es todo! Nos vemos en la siguiente (y última) clase, en la que veremos una funcionalidad más, que nos abrirá un mundo de posibilidades más, e incluso quizás otro curso entero para desarrolladores de WordPress. Hasta entonces... ¡Muy buenos días!
Todos los capítulos de este curso:
- Curso de WordPress Avanzado #1: Modificar WordPress
- Curso de WordPress Avanzado #2: Custom Post Types
- Curso de WordPress Avanzado #3: Taxonomías
- Curso de WordPress Avanzado #4: Ubicaciones de menús
- Curso de WordPress Avanzado #5: Widget Areas
- Curso de WordPress Avanzado #6: Menús en la toolbar
- Curso de WordPress Avanzado #7: Métodos de contacto del usuario
- Curso de WordPress Avanzado #8: Crear shortcodes
- Curso de WordPress Avanzado #9: Scripts y estilos
- Curso de WordPress Avanzado #10: Hooks