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:

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 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í:

Bloque personalizado de HTML de Gutenberg

Bloque personalizado de HTML de Gutenberg

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:

Cómo editar un sólo bloque como HTML

Cómo editar un sólo bloque como HTML

Esto le permitirá editar el HTML sólo para ese bloque individual:

Ejemplo de edición de bloque de HTML

Ejemplo de edición de bloque de HTML

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:

Cómo acceder al editor completo de código en Gutenberg

Cómo acceder al editor completo de código en Gutenberg

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 -->.

Editing code in WordPress doesn't have to be hard! Check out this easy guide on how to tweak HTML, CSS, and PHP. 🤓Click to Tweet

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 HTML en el editor Clásico de WordPress

Cómo editar HTML en el editor Clásico de WordPress

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…

… 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:

La advertencia antes de acceder al editor de código dentro del dashboard

La advertencia antes de acceder al editor de código dentro del dashboard

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:

Editor de código de WordPress en el dashboard

Editor de código de WordPress en el dashboard

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.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? En Kinsta, comprobamos el estado de su sitio web cada 2 minutos y nuestros expertos en WordPress están disponibles las 24 horas, los 7 días de la semana. Eche un vistazo a nuestros planes.

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 editar HTML de WordPress a través de SFTP

Cómo editar HTML de WordPress a través de SFTP

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:

Cómo acceder al Personalizador de WordPress

Cómo acceder al Personalizador de WordPress

Luego, buscar la opción CSS Adicional en el Personalizador de WordPress:

Donde encontrar la opción de CSS Adicional en el Personalizador de WordPress

Donde encontrar la opción de 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:

Cómo editar CSS en el Personalizador de WordPress

Cómo editar CSS en el Personalizador de WordPress

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:

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!


Si le ha gustado este tutorial, entonces le va a encantar nuestro soporte. Todos los planes de hosting de Kinsta incluyen soporte 24/7 de nuestros ingenieros y desarrolladores de WordPress veteranos. Charle con el mismo equipo que ayuda a nuestros clientes de Fortune 500. Conozca nuestros planes