Spanish (Español) translation by José Francisco Sánchez (you can also view the original English article)
En este tutorial aprenderás a editar HTML en WordPress de tal manera que puedas modificar temas con cualquier personalización deseada. ¡Vamos!
En WordPress, el HTML está en archivos PHP
Es posible que te estés disponiendo a realizar cambios a un tema por primera vez, y también es posible que sepas que necesitas aprender a editar código HTML en WordPress.
Sin embargo, el primer obstáculo con el que puedes encontrarte es que si estás buscando los archivos .html que contienen ese código, no vas a encontrar ninguno en un tema de WordPress.
Eso es debido a que, en su lugar, en un tema WordPress todo el contenido HTML está dentro de los archivos .php.
PHP es el código que hace "dinámicos" a los sitios WordPress, es decir, les permite cambiar su contenido sobre la marcha cuando se agregan o cambian publicaciones (posts), en contraposición de ser "estáticos", donde el contenido permanece igual a menos que se realice una edición manual de los archivos.
La mayoría de los archivos .php en un tema de WordPress contienen parte de ese código PHP dinámico, mezclado con código HTML regular. En resumen, son como los archivos HTML normales, pero con algunos pequeños fragmentos de PHP responsables de hacer que su sitio sea dinámico.
Así que a pesar de que no verás ningún archivo .html, hay un montón de código HTML que se encuentra dentro de los archivos .php de un tema.
Temas de WordPress gratuitos y de pago
Si los cambios que necesitas hacer a tu tema actual están más allá de tu zona de confort, vale la pena echar un vistazo a los temas gratuitos y premium de WordPress disponibles en Themeforest.
Pero si estás seguro de que quieres empezar a editar las cosas tú mismo, ¡volvamos a ello!
Cómo editar HTML en el Editor de temas integrado de WordPress
Así que ahora sabes que necesitas editar HTML en los archivos PHP de un tema, pero la siguiente pregunta es: ¿cómo lo haces realmente?
La forma más fácil es a través del editor de código de tema que viene integrado en WordPress.
Para acceder a él, ve a Appearance > Editor (Apariencia > Editor) en la barra lateral izquierda del área de administración.
Una vez allí, a la derecha, verás una lista de todos los archivos que contiene el tema actualmente activo. Haz clic en cualquiera de ellos y se abrirá en el área de edición.
Ahora puedes llevar a cabo los cambios en el área de edición, y luego hacer clic en el botón Update File (Actualizar Archivo) cuando hayas terminado. Esto hará cambios inmediatamente en el sitio en vivo, así que asegúrate de que no hayas cometido ningún error antes de guardar.
Nota: en algunos sitios el editor de temas puede estar deshabilitado por motivos de seguridad. Si no ves el editor, pregúntale a la persona que administra el sitio si está deshabilitado. Si es así, es posible que prefieras usar uno de los otros métodos descritos en este tutorial.
Borra Tus Cachés
Después de editar el HTML del tema de WordPress, es posible que encuentres que incluso cuando actualizes tu sitio se vea igual. Si esto sucede es probablemente una señal de que la versión anterior de tu sitio se está cargando ya sea desde la caché de tu navegador, o potencialmente de un plugin de caché (caching plugin) en WordPress. Asegúrate de borrar estas cachés y tus cambios deberán aparecer.
Descargar, Editar Sin Conexión, Cargar
En lugar de usar el editor de temas, otra opción es descargar manualmente el archivo que deseas cambiar, editar su HTML sin conexión y, a continuación, volver a cargarlo.
Para ello necesitarás un cliente FTP (protocolo de transferencia de archivos), como FileZilla, por ejemplo, y detalles de la conexión FTP para el hospedaje. La mayoría de los hosts proporcionarán esta información en un correo electrónico de bienvenida e incluirán detalles en su documentación sobre cómo encontrar tus credenciales de acceso de nuevo más adelante.
Una vez que utilices estas credenciales para conectarte a tu host a través de FTP, puede navegar para encontrar tus archivos de tema.
Primero buscas el directorio raíz que contiene todo el sitio. Si solo tienes un sitio en tu alojamiento, es probable que sea un directorio denominado www o public_html. Si tienes varios sitios, es probable que sea un directorio que coincida con tu nombre de dominio. No hay una regla fija sobre exactamente en qué directorio estará tu sitio, aunque si te quedas atascado es posible que debas pedir ayuda a tu host.
Una vez en el directorio de tu sitio, busca el sub-directorio denominado wp-content. Dentro de ese hay un directorio denominado themes (temas), y dentro de él encontrarás un directorio con un nombre que coincida con el nombre de tu tema.
Navega dentro de esa carpeta para encontrar el archivo que quieres editar y, a continuación, usa el cliente FTP para descargar una copia en tu ordenador. Ahora puedes editarlo en cualquier editor de texto de tu elección. Aunque es posible usar un editor de texto simple como el Notepad para su edición, es mucho más fácil y menos probable que cause errores si usas un editor de código diseñado con propositos específicos, como los gratuitos VS Code o Atom.
Cuando hayas realizado los cambios, utiliza el cliente FTP para volver a cargar el archivo en la misma ubicación. Se te preguntará si quieres sobrescribir la versión existente del archivo, y mientras estés seguro de que no has cometido errores en tu archivo editado, puedes seguir adelante y hacerlo.
Editar A Través De Una Conexión Remota
En lugar de realizar un proceso manual de carga y descarga para la edición HTML sin conexión, puedes automatizar la parte de descarga y carga a través de una conexión remota. Para ello necesitarás detalles de la conexión SFTP (protocolo de transferencia de archivos seguros). Estos pueden ser realmente los mismos que los detalles de la conexión FTP. Comprueba que el host permita conexiones remotas.
También necesitarás un editor de código capaz de trabajar en archivos de forma remota y guardar los cambios directamente en el host. Hay muchos para elegir, pero para darte un ejemplo, el que uso personalmente para codificar en el iPad se llama simplemente Code Editor.
Una vez que hayas proporcionado al editor tus detalles SFTP, debes ser capaz de conectarte a su host y navegar para hallar tus archivos de tema. Desde allí debes ser capaz de abrir los archivos en el editor, modificarlos, y cuando guardes tus cambios deben ir directamente a tu sitio en vivo.
Editar Completamente Sin Conexión con XAMPP
Otra opción es que en lugar de editar el tema instalado en tu sitio en vivo, ejecutes una instalación sin conexión de WordPress y realices toda tu edición de temas allí. Todavía tendrías que cargar manualmente los cambios, ya sea a través de FTP, copiando y pegando en el editor de temas, o reinstalando todo el tema.
Sin embargo, si estás planeando hacer modificaciones extensas esta sigue siendo la mejor manera, porque no tienes tiempo de carga o descarga del cual preocuparte cada vez que salves, y si cometes errores no afectarán a tu sitio en vivo.
Tenemos otro artículo sobre cómo instalar WordPress localmente con XAMPP para iniciarte por esta ruta.
Considera la posibilidad de usar un tema secundario
También vale la pena considerar la creación de un tema secundario en lugar de hacer ediciones HTML directamente a tu tema principal. Esto ayuda a aislar el tema principal de los errores y conserva los cambios cuando se actualiza tu tema principal.
¡Ya estás listo para intentarlo!
Ahora tienes disponible una colección de diferentes enfoques sobre cómo editar HTML en temas de WordPress. ¡Diviértete personalizando a tu gusto!
By
