Muchas veces tenemos la idea equivocada de que si queremos modificar una parte de nuestro sitio web en WordPress debemos buscar un archivo HTML y allí buscar el código para hacer las modificaciones
En WordPress el código HTML que se muestra en el navegador se crea dinámicamente y por lo tanto no existe un archivo físico HTML que editar.
En este artículo veremos qué recomendaciones debemos tener en cuenta para editar código en WordPress, ya sea código PHP, Javascript o CSS.
¿Dónde esta el código HTML?
Como te había comentado el código HTML es un código creado dinámicamente desde código PHP con la información que hay en la base de datos.
La siguiente imagen describe este proceso de creación de HTML en WordPress
En el gráfico puedes observar que los archivos JS y CSS se envían directamente al navegador y es sólo el código PHP el que es interpretado y es el que forma el código HTML final.
¿Entonces cómo editar código en WordPress?
Como ya lo habrás sospechado, tendrías entonces que trabajar con archivos PHP, CSS y JS
- Usualmente harás modificaciones con código PHP cuando quieras cambiar la estructura HTML y editar o agregar funcionalidad a nivel de servidor. Es común hacer esto a través de los Hooks de WordPress.
- Harás modificaciones en los archivos CSS cuando quieras cambiar el diseño de tu sitio web por ejemplo: colores, tipos de letra, posicionamiento de elementos, etc.
- Las modificaciones de funcionalidad de tu sitio en el navegador las harás con javascript por ejemplo validaciones, efectos, controles HTML personalizados, etc.
Empezando con las modificaciones
Para hacer modificaciones en WordPress veremos dos formas, la primera de ellas es usando un tema hijo y la otra es usando un plugin de Snippets; pero antes veremos cómo instalar nuestro sitio web en el servidor.
– Instalación WordPress
Recuerda que ahora en clouding.io tienes una imagen pre-instalada de WordPress, la cual te facilitara el trabajo de instalar WordPress, ya que tendrás un sitio instalado con unos cuantos clics.
Lo puedes hacer desde Mis Servidores, crear un nuevo servidor, dar un nombre y luego seleccionar el origen del disco, seleccionar Apps y luego WordPress, tal como se muestra en la siguiente imagen.
Luego de instalar el servidor aparecerá una pantalla que mostrará un nuevo registro en la lista de tus servidores.
¡Listo, ya instalaste WordPress!, puedes ver de los detalles de tu instalación ingresando al enlace de tu sitio, verás que para WordPress por defecto te crea un usuario administrador con la clave similar a la clave de acceso al servidor.
– Modificaciones de código en un tema hijo
La instalación anterior nos creará un sitio web nuevo con el tema por defecto, para hacer nuestras modificaciones de código crearemos un tema hijo.
La ventaja de tener un tema hijo es que tendremos las modificaciones de código centralizadas y además no se perderán cuando actualicemos el sitio.
Puedes crear un tema hijo de manera manual, pero lo más práctico es hacerlo a través de un plugin, no te preocupes que una vez creado el tema hijo puedes eliminar el plugin.
Desde el menú Plugins, Añadir nuevo, busca por el texto: child theme
Luego de instalar y activar el plugin busca en el menú de Herramientas la opción de menú: Temas hijo.
Aparecerá la siguiente pantalla, desde aquí creas un nuevo tema hijo en base al tema activo, primero tienes que analizar el tema padre luego podrás configurar y crear el tema hijo
Luego de que el tema hijo esta creado tienes que asegurarte de que se encuentre activo, para esto puedes comprobarlo desde el menú de Apariencia, temas
Para agregar tus modificaciones de código entonces usarás ahora los archivos del tema hijo, puedes revisar los archivos que se han creado desde Apariencia, Editor de temas.
Como puedes ver en la siguiente imagen tienes por defecto un archivo style.css y un archivo functions.php, en estos archivos puedes agregar tu código CSS y PHP respectivamente.
Siempre agrega tu código adicional al final del archivo correspondiente.
Ten en cuenta que adicional a estos dos archivos puedes agregar también archivos Javascript adicionales como parte del tema hijo, lo puedes hacer usando código PHP, con la función de encolado de archivos de scripts
– Modificaciones de código usando un plugin de Snippets
La otra opción para agrega código a un sitio web WordPress es usar un plugin de Snippets, en este caso tendrás que mantener el plugin activo siempre que quieras que tu código tenga efecto.
Existen varios plugins para lograr esto, sin embargo uno de los más usados es Code Snippets, puedes instalarlo directamente desde WordPress, desde el menú Plugins, Añadir nuevo y buscar por el texto: Code Snippets
Luego de instalar y activar el plugin verás una nueva opción de menú llamada Fragmentos de código, el plugin por defecto te crea algunos fragmentos de código que puedes modificar para adaptar tu nuevo código.
Lo interesante de este plugin es que te permite crear fragmentos o Snippets CSS y Javascript a través de Hooks de WordPress, es decir a través de código PHP.
Algunas de las características más importantes de este plugin:
- Te da la opción de activar o desactivar un fragmento de código
- Puedes ejecutar código en la administración, en el front-end o en ambos.
- Puedes ejecutar el código sólo una vez
- Puedes definir una prioridad de ejecución
- Puedes agregar una descripción adicional del código, útil para documentarlo
- Puedes organizar tus Snippets con etiquetas
- Puedes exportar e importar tus Snippets.
Conclusión
Con Clouding.io, proveedor cloud de confianza, puedes instalar tu WordPress de manera simple, pero muchas veces necesitarás trabajar con código.
Puedes agregar código PHP, CSS, o Javascript a tu sitio web WordPress, y tal como hemos visto en este artículo, existen básicamente dos formas recomendadas para hacer esto, ya sea a través de un tema hijo o usando un plugins de Snippets.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
¡Excelente contenido! El blog es increíble.
Sigue así, adelante 🙂
Gracias Luis. Saludos.
El blog es una Maravilla.
Deseando que cree unos cursos mas extensos y que los ponga a la venta/suscripcion en alguna plataforma como Udemy etc….
Muchas gracias.
Hola Ruben, gracias por la sugerencia, sí, estoy evaluando hacer contenido de pago, espero tenerlo pronto. Saludos.
Jhon, Realmente increíble tu trabajo. Gracias
Gracias!
Creo que no es un buen trabajo este, cuando hablas de las características te limitaas a decir lo que cualquier ser humano puede leer, hablemos de la prioridad, ¿Por qué 10? es normal? 11 es superior o inferior? 0 existe? es máxima prioridad?
Hola, la prioridad por defecto de los Hooks es 10, si añades código una prioridad menor, por ejemplo 5, se ejecutará antes que el código por defecto que usan plugins o el propio WordPress para ese Hook. Si es una prioridad mayor a 10, por ejemplo 20 tu código se ejecutará después.