Mientras que WordPress hace que sea sencillo para los que no son programadores el administrar un sitio, probablemente llegue ese momento en donde uno querrá editar código en WordPress para tener un poco más de control sobre como luce o funciona su sitio.
Para ayudarle a hacer esto, este artículo le mostrará que tan seguro es editar código en WordPress de varias formas:
- Editando HTML de WordPress para Publicaciones o Páginas Individuales
- Editando el código HTML/PHP de su Tema
- Agregando CSS Personalizados a su Sitio
Si ya sabe lo que quiera, puede dar clic en uno de los enlaces anteriores para ir directamente a esa sección en específico. Si no es así, ¡sigamos editando!
Cómo puede editar el código de WordPress:
Para obtener un mayor control sobre el aspecto y las funciones de su sitio de WordPress, puede editar su código de WordPress para personalizar diferentes áreas:
- El nuevo editor de bloques y el editor clásico le permiten editar el código HTML para publicaciones o páginas individuales.
- Si desea editar el código core de su tema de WordPress, use un tema secundario.
- Considere usar un plugin para administrar los fragmentos de código que agregue al archivo <head> o functions.php de su tema.
- Si solo desea agregar CSS personalizado, puede usar el área de CSS adicional en el Personalizador de WordPress o un plugin como «CSS simple».
Cómo Editar HTML de WordPress para Publicaciones/Páginas Individuales
Empecemos con la forma más simple para editar HTML de WordPress – accediendo al código fuente para publicaciones individuales de WordPress, páginas u otro tipo de publicaciones.
Puede hacer esto en el nuevo editor de bloque de WordPress (Gutenberg), y también en el clásico y más viejo editor de TinyMCE.
Cómo Editar HTML de WordPress en el Editor de Bloque (Gutenberg)
Hay algunas formas con las que puede trabajar con HTML en Gutenberg.
Primero, si usted sólo quiere agregar su propio código HTML a una pieza de contenido, le recomendaría no intentar editar todo el código fuente de su publicación, ya que esto hace todo más complicado.
En su lugar, usted sólo tiene que usar el bloque dedicado de HTML personalizado y pegar el HTML que quiere usar ahí:
Sin embargo, también habrán tiempos en donde usted tendrá que editar directamente el HTML de un bloque distinto. Por ejemplo, si usted quiere agregar un tag de nofollow a un enlace en el editor de bloque, usted necesitará editar el HTML de ese bloque.
Hay dos formas para hacer esto…
Primero, puede dar clic en las opciones para un bloque individual y elegir la opción de Editar como HTML:
Esto le permitirá editar el HTML sólo para ese bloque individual:
O si quiere editar el HTML para toda su publicación, usted puede acceder al Editor de Código del menú desplegable principal de Herramientas y Opciones. O, también puede utilizar este atajo de teclado para cambiar entre edición de código y edición visual – Ctrl + Shift + Alt + M:
Tenga en mente que, en el editor completo de código, usted tendrá que trabajar alrededor de estas anotaciones para los bloques – p.e. <!-- wp:paragraph -->.
Cómo Editar HTML de WordPress en el Editor Clásico (TinyMCE)
Si aún está usando el editor Clásico de WordPress (TinyMCE), usted puede editar HTML para toda su publicación yendo a la pestaña de Texto:
Cómo Editar el Código Fuente en su Tema de WordPress
Ahora, vayamos a un tema más grande, nos referimos a cómo editar el código en su tema de WordPress. Todo está en juego aquí, así que necesitamos cubrir todas las preguntas preliminares antes de adentrarnos al cómo hacerlo.
¿Por qué está en juego todo? Bueno, esto es simple, ¡es porque usted rompería su sitio si hace algo mal aquí!
En lanzamientos recientes, WordPress ha hecho que sea mucho más difícil que usted haga esto de forma accidental, pero editar el código fuente de su sitio es algo que siempre le abrirá las puertas a estos problemas, así que lo mejor es estar siempre seguro.
Utilice un Tema Child (niño) para Cualquier Edición de Código Directa
Si planea editar directamente cualquier código en los archivos de su tema, usted necesita usar un Tema Child en lugar de editar el tema “padre”.
Sin un Tema Child, cualquier cambio en el código que haga será sobreescrito la próxima vez que actualice el tema. Cuando usted actualice un tema child, sin embargo, usted podrá actualizar rápidamente el tema padre sin perder los cambios que haya hecho en el tema child.
Me gustaría que aprendiera más sobre los beneficios de los temas child, y también como crear uno, chequee nuestra guía completa sobre los temas child de WordPress.
Considere Utilizar un Plugin en Lugar de Editar el Código de un Tema Child
Si está planeando modificar como funciona su tema, es probable que necesite trabajar editando directamente el código fuente de su tema child.
Sin embargo, si usted quiere editar el código en WordPress por alguna razón distinta – como agregar un script de rastreo a la sección <head> de su sitio o agregar un snippet a el archivo de functions.php de su tema – podría irle mejor si utiliza un plugin en lugar de lo otro.
Por ejemplo, el Encabezado, Pie de página e inyecciones de la publicación hace que sea sencillo inyectar snippets de código cuando es necesario. Y considerando que estos snippets de código son todos segregados en la interfaz del plugin, también es más sencillo administrarlos en el futuro.
Similarmente, si usted está agregando snippets de código que podrían ir en su archivo de functions.php, el plugin gratuito Code Snippets podría ser una gran opción.
En resumen, si usted quiere editar el código en WordPress para agregar snippets a su tema…
- Sección
<head> - Archivo
functions.php
… entonces usted debería considerar utilizar un plugin en lugar de editar directamente los archivos de sus temas, ya que será más simple administrar estos snippets y asegurar que estos no serán sobre escritos cuando usted actualiza su tema.
Si usted necesita hacer otras ediciones, veamos cómo puede editar el código fuente de su tema.
Utilice el Editor de Código dentro del Dashboard de WordPress
Si usted está planeando en editar el código directamente, le recomendamos ampliamente que haga un respaldo de su sitio antes de hacerlo (sea su sitio entero o el archivo que esté editando).
Una vez que haya hecho eso, usted podrá acceder al editor de código de tema en su dashboard, yendo a Apariencia -> Editor de Tema. Aquí, WordPress le dará primero una advertencia similar a lo que aprendió anteriormente:
Luego, usted podrá utilizar la barra lateral a su derecha para navegar entre distintos temas y el mismo editor de código para hacer ediciones actuales:
Utilice SFTP para Editar Código en WordPress
Como una alternativa al editor de código dentro del dashboard, usted también puede editar archivos de tema a través de SFTP. Hay dos beneficios a este enfoque.
- Puede utilizar su editor de código preferido.
- Si accidentalmente rompe algo, usted puede arreglar de inmediato el problema. En contraste, si usted edita código a través del dashboard de WordPress, siempre habrá una probabilidad que pueda romper algo que le bloquee su acceso al dashboard de WordPress, lo que quiera decir que usted necesita conectarse a través de SFTP para arreglar el problema (aunque de nuevo – esto es menos probable debido a cambios reciente).
Aquí tiene la forma para conectarse a su sitio a través de FTP.
Una vez que haya hecho, navegue al folder de su tema – …/wp-content/themes/child-theme-name. Encuentre el archivo que quiera editar y de clic derecho sobre este. La mayoría de los programas FTP le darán una opción para editar el archivo, y automáticamente descargarán de nuevo el archivo una vez que haya hecho los cambios.
Sin embargo, le recomendamos que descargue una versión original del archivo a su escritorio antes de hacer los cambios. De esta forma, usted podría subir de nuevo esa versión original si accidentalmente rompe algo:
Cómo Agregar CSS Personalizado a WordPress
Si sólo quiere agregar CSS personalizado a WordPress, en lugar de editar el código HTML o PHP de WordPress, usted no necesita utilizar el editor de código dentro del dashboard o los métodos de SFTP.
En lugar, usted puede utilizar el Personalizador de WordPress. Más allá de ser una opción más simple, otro beneficio de elegir este método es que usted podrá ver una vista previa de los cambios en tiempo real.
Para empezar, vaya a Apariencia -> Personalizar en el dashboard de WordPress:
Luego, buscar la opción CSS Adicional en el Personalizador de WordPress:
Que abrirá el editor de código donde uno puede agregar su CSS deseado. Mientras agrega CSS, la vista previa en vivo de su sitio automáticamente se actualizará de acuerdo a estos cambios:
Otra buena opción para agregar CSS es el plugin Simple CSS de Tom Usborne. Le da una opción similar en el Personalizador de WordPress, y también le permite agregar CSS personalizado a publicaciones individuales o páginas a través del meta box.
Finalmente, si quiere agregar un montón de CSS personalizado – como cientos o miles de líneas – otra opción es crear su propio hoja de estilo CSS personalizada y utilizar wp_enqueue_scripts para agregarlo a su tema.
Resumen
Si usted quiere editar una publicación o página individual de WordPress, con el nuevo editor de bloque y el editor clásico le da opciones para editar directamente HTML.
Por otro lado, si quiere editar el código fuente del tema de WordPress, hay algunas cosas a considerar:
- Siempre utilice un tema child en lugar de hacer ediciones de código directamente a su tema padre.
- Considere utilizar un plugin para administrar snippets que usted agrega al <head> o archivos funciones.php, ya que estos plugins pueden ofrecer un método más manejable..
Si aún necesita hacer ediciones directas de código después de esas consideraciones, usted puede editar el código fuente de su tema child de su dashboard de WordPress yendo a Apariencia -> Editor de Tema. O, usted puede conectarse a su sitio a través de SFTP y editar el código de esta forma.
Finalmente, si usted quiera agregar CSS personalizado, usted no necesita editar el código del tema. En lugar, usted puede sólo utilizar el área CSS Adicional en el Personalizador de WordPress o un plugin como Simple CSS.
¿Alguna otra pregunta sobre cómo editar código en WordPress? ¡Pregunte por favor en los comentarios!
