¿Quieres empezar a profundizar más en WordPress?, entonces verás que no sólo se trata de instalar y configurar plugins y temas, sino que que posiblemente requieras hacer modificaciones y personalizaciones más avanzadas a nivel de código.
Generalidades
Como todo software moderno, WordPress se puede extender en funcionalidad y diseño, en cuanto a funcionalidad lo haces a través de plugins y para el diseño puedes construir temas.
Pero claro no siempre un plugin se adapta exactamente a lo que quieres o un tema no tiene exactamente el diseño que buscas, es en estos casos, si no tienes la opción de cambiar esto a nivel de configuración, busca hacerlo a través de código.
Cada caso puede ser diferente, sin embargo hay algunas generalidades que hay que tener en cuenta cuando quieres hacer modificaciones a nivel de código.
1- Modificaciones de Diseño
La mayoría de las veces las modificaciones que buscas son simplemente ajustes de diseño, por lo tanto puedes hacer estos cambios usando código CSS.
¿Cómo probar los cambios CSS?
Para probar los cambios puedes usar el Inspector de Código del Navegador.
En el caso de Firefox, tienes la opción de agregar nuevo archivo o adjuntar un archivo local, de esta última forma no perderás los cambios si refrescas accidentalmente el navegador.
En el caso de Google Chrome, puedes usar la funcionalidad de overrides, haciendo referencia a un archivo CSS cargado que se guardará en el disco, de esta forma no perderás los cambios.
¿En dónde colocar el código?
Los cambios en el Inspector de Código son temporales, tienes que guardar los cambios de forma permanente, tienes 3 opciones para agregar código CSS:
- A través de un tema hijo
Usar el archivo style.css del tema hijo para agregar los cambios - A través de la opción de Apariencia > Personalizar > CSS
Esta es una opción que incluye el tema para agregar código CSS como parte del documento HTML generado. - Usando un plugin de Snippets
Es posible igualmente usar un plugin de Snippets para agregar código CSS.
¿Qué tener en cuenta?
- Lo recomendable más que modificar el código CSS existente es agregar nuevo código.
- Si sólo quieres cambiar una parte del diseño, ten en cuenta cuando hagas modificaciones CSS ser lo más específico posible.
- Ayudarse de las clases generadas a nivel del body, de acuerdo a las clases CSS que genera WordPress
2- Modificaciones PHP
Si quieres cambiar el comportamiento del core de WordPress, de plugins o de temas, tienes que hacerlo a través de programación usando código en PHP.
Core de WordPress
En este caso sólo será posible hacer modificaciones a través de los Hooks
El código lo puedes agregar en el archivo functions.php del tema o usar algún plugin de snippets.
Temas
En el caso de los temas la mejor manera de hacer modificaciones es que uses un child theme y en este tema hijo sobrescribir los archivos del tema padre con las modificaciones deseadas
Plugins
Para los plugin hay dos opciones que puedes usar:
- Usar Hooks para hacer modificaciones.
- Algunos plugins permite hacer sobreescritura copiando los archivos al theme, por ejemplo WooCommerce, Sensei, etc.
- Si la modificación se realizará usando Hooks, podemos colocar el código en el archivo functions.php del tema hijo, la otra opción para colocar el código es usar algún plugin de Snippets.
- Si la modificación es a los archivos, podemos copiar los archivos al tema hijo y allí hacer las modificaciones.
- La ejecución de Hooks tienen prioridad, por lo tanto necesitamos tener en cuenta el parámetro de prioridad en las funciones add_action y add_filter.
- Habilitar el modo debug en WordPress.
- Podrías registrar un nuevo archivo javascript, tal como lo vimos en: Cómo agregar código javascript en WordPress
- La otra opción es a través de un plugin de Snippets
- Si registras un nuevo archivo es preferible que cargue al final.
- Puedes usar jQuery ya que WordPress carga esta librería por defecto.
¿En dónde colocar el código?
¿Qué tener en cuenta?
3- Modificaciones Javascript
Estas modificaciones son menos comunes, usualmente son realizadas cuando necesites cambiar alguna parte de diseño que no es posible con CSS o cuando quieras modificar funcionalidad del front-end de tu sitio.
¿Cómo probar los cambios Javascript?
Para detectar las modificaciones a realizar puedes usar el Inspector de Código del Navegador, por ejemplo a través de Google Chrome en la opción de overrides.
¿En dónde colocar el código?
Tienes algunas opciones, las principales que podrías considerar son:
¿Qué tener en cuenta?
Tenemos que tener en cuenta lo siguiente:
Conclusión
Como has podido ver existen modificaciones que puedes hacer a nivel de código tanto para diseño como para funcionalidad. Las modificaciones pueden ser usando CSS, PHP y Javascript, y en cada una de ellas tienes que tener en cuenta algunas consideraciones para realizar estas modificaciones de código correctamente.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Gracias. Dá gusto leerte
Genial, gracias por la información