¿Has editado tu tema y se ha roto tu blog? ¿Cómo lo arreglas?

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Desde el Escritorio de WordPress es muy fácil acceder a un editor para modificar tu tema (Apariencia » Editor). Siempre he pensado que si es algo tan accesible, será para que se use, ¿no? Parece que el propio WordPress te invite a editar tu tema desde allí… ¡Pero no te dejes engañar! Hay que andar con mucho ojo con él. ¿Que por qué digo esto? Sigue leyendo…

Editor de WordPress

El problema con el editor es que es «propenso a errores» (en inglés «mistake prone»). Es decir, es muy fácil cometer errores (por ejemplo, cometer algún error sintáctico) y acabar rompiendo algo.

No tiene colores ni número de líneas

El editor de temas es una simple área de texto (textarea), con lo cual está muy por detrás de cualquier editores profesional de escritorio como, por ejemplo, Sublime TextCodaText Wrangler, Vim, etc. Cuestiones básicas como el resaltado de sintaxis (que ayuda un montón a la hora de diferenciar entre lo que es código y lo que es contenido), numeración de líneas, detección de errores sintácticos, o el autocompletado y autoindentado de código no están disponibles en el editor de WordPress.

Imagen del editor vim
Imagen del editor vim

Cambios grabados en piedra

El editor tiene un botón de «Actualizar archivo«. Pero no tienes versiones del código. No puedes ver cómo era el código antes de que cambiases las cosas, ni ver exactamente qué has cambiado ni cómo. Sí, de acuerdo, la combinación de teclas ctrl+z siempre está disponible y con ella deshaces los últimos cambios realizados. Pero si has guardado los cambios olvídate de deshacer los cambios anteriores al guardado. ¿No te parece muy peligroso trabajar así?

Sin contexto

Tal y como podemos leer en el Codex de WordPress sobre el editor de la apariencia,

Appearance → Editor
Among the many user editable files in a standard WordPress installation are a Theme’s Template and Stylesheet files. The Appearance Editor Screen allows you to edit those Theme files.

El editor de apariencia está precisamente para que lo toques, pero es que te falta el contexto. Tienes acceso a ciertos archivos pero no sabes la relación que hay entre ellos. Sabes que hay un tema, pero si todavía no estás muy familiarizado con WordPress, puedes pensar que está bien editar el tema directamente, en vez de crear un tema hijo.

La pantalla en blanco

Teniendo en cuenta que WordPress está desarrollado en PHP y que tienes acceso al archivo functions.php del tema desde el editor, cualquier error PHP que introduzcas puede causar que te quedes con la pantalla en blanco (the «white screen of death«).

En fin, para los que todavía estamos aprendiendo sobre el contenido de los archivos de WordPress y la relación entre ellos, utilizar el editor quizá no sea tan buena idea…

¡Se ha roto! ¿Cómo lo arreglo?

Supongamos que has tenido un ataque de euforia, te has animado a editar el código de tu tema y, por ejemplo, se te ha ocurrido cambiar el archivo functions.php. Hasta aquí, todo bien. Pero de repente vas a ver tu WordPress y está la página en blanco. ¿Pero qué…? ¿Cómo…?

Tranquilo, simplemente acabas de «romper» tu tema. Aunque en el Codex de WordPress te dicen que no te asustes (don’t panic!), yo sí que te recomiendo que llores un rato; a veces, es saludable ?. Fuera bromas y superado el bajón, veamos cómo lo arreglamos.

El primer problema que tenemos es que no sabemos qué está pasando exactamente. Una página en blanco nos indica claramente que algo falla, pero no nos ayuda a determinar qué. Así pues, lo primero que hay que hacer es editar el fichero wp-config.php de tu WordPress (a través del explorador de archivos de tu proveedor de hosting o usando un programa de FTP) para activar la notificación de errores y, así, tener un poco más de información. Para ello, simplemente sigue las instrucciones del Codex y conseguirás que la página en blanco se convierta en algo parecido a esto:

Parse error: syntax error, unexpected '<' in /.../functions.php on line 19

donde, ahora ya sí, sabemos qué fichero está fallando (functions.php), dónde (línea 19) y porqué (hay un carácter < donde no toca).

1. Instalación básica

En general, antes de animarte a tocar cualquier CSS, deberías tener instaladas en tu ordenador tres cosas:

  1. Estructura de archivos en local
    Duplicar en tu ordenador local la estructura de archivos que tienes en el servidor te permitirá trabajar de forma más eficiente y segura. Si tienes una réplica en local, podrás, por ejemplo, editar tranquilamente el fichero style.css (o cualquier otro) del tema antes de subirlo a producción.
  2. Editor de texto
    Si vas a tocar el código fuente de tu instalación WordPress, hazlo con un editor de verdad. Instala el editor que más te guste de los que he comentado arriba (o cualquier otro que te guste) y empieza a trabajar cómodamente.
  3. Cliente FTP
    Si seguiste los pasos para crear una nueva web de WordPress, seguro que ya tienes instalado un programa cliente FTP, com por ejemplo FileZilla. Con un programa como este podrás sincronizar fácilmente los ficheros que tienes en local (probablemente editados por ti) y los que están en el servidor.

Una vez tienes esta instalación básica, ya puedes empezar a arreglar el desaguisado.

2. Localiza el archivo que tocaste

Utiliza el cliente FTP para localizar el archivo en el servidor de hosting que ha provocado tu crisis. En el ejemplo anterior posiblemente sería algo del tipo public_html/wp-content/themes/nombre-del-tema/functions.php.

3. Corrige el error en el archivo

Abre el archivo con el editor y busca la línea de código donde el parser te ha indicado que se encuentra el error (en el ejemplo era la línea 19). Si no sabes qué es lo que has de buscar, quizá te pueda interesar leerte este artículo sobre los errores más comunes que puedes cometer al tocar el archivo functions.php (en inglés) de tu tema. Una vez corregido el error, graba los cambios.

4. Carga otra vez tu página web

Vuelve a cargar tu página web y…

…si has corregido el error correctamente, la página en blanco con el mensaje de error que te salía antes habrá sido reemplazada por tu página web original. ¡Yupi! Ahora simplemente desactiva los mensajes de error desde el fichero wp-config.php que te comentaba al principio del artículo y listo.

Conclusión

Lo más importante que deberías recordar es: ¡ni se te ocurra editar un fichero directamente desde el escritorio de WordPress! O, como mínimo, no lo hagas en el servidor de producción. Si te equivocas, la web de tu negocio o tu blog personal estarían caídos… y eso no queda demasiado bien.

De ahora en adelante recuerda que siempre deberías tener una copia de los archivos en local, que es esa copia en local la que hay que editar con un editor de código y que, cuando sepas que todo funciona (no estaría de más tener un WordPress instalado en tu máquina local), lo subes tranquilamente a tu web vía FTP.

Imagen destacada de Hildrim

4 comentarios en «¿Has editado tu tema y se ha roto tu blog? ¿Cómo lo arreglas?»

  1. Hola, les agradezco por este blog de soluciones.
    en mi caso, borre un par de imagenes de mi tema, con la esperanza de insertar otras denuevo, pero cuando lo intente, no encontré la manera de hacerlo.
    ya intente cambiar con otro tema y volver de nuevo al que me gusto, pero no se resetea, los cambios persisten.

    ¿que puedo hacer para restaurar el tema a su diseño original?

    Muchas gracias

    1. Contacta con el desarrollador del tema y pregúntale cómo hacerlo. Diferentes temas usan diferentes opciones y atributos para almacenar su configuración, así que, por desgracia, me temo que es algo en lo que no te podemos ayudar nosotros 🙁

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.