por

Hace poco me pasó a mí mismo que, tras aplicar un tema bastante chulo en una instalación de WordPress, este dejaba el editor o caja de escritura, donde se escriben y redactan los posts, limitado o acotado a un ancho demasiado estrecho para mi gusto. No me refiero al diseño de la propia caja, sino a la zona usable o “escribible”.

Ejemplo de un editor de WordPress con el ancho reducido

Ejemplo de un editor de WordPress con el ancho reducido

A mí me parece un incordio, bastante molesto, y sobre todo un desperdicio de espacio. ¿Por qué narices iba a querer una zona de escritura tan estrecha? Si quisiera hacerla estrecha, bastaría con redimensionar la ventana del navegador, ¿no?

En este pequeño artículo vamos a ver cómo podemos cambiar el ancho del editor o caja de escritura de WordPress. Además ya veréis que es muy sencillo.

Como decía al principio, este cambio del ancho viene dado al aplicar un tema nuevo, ya que esto conlleva nuevos estilos (incluido el del propio editor). Concretamente, los estilos relacionados con el editor de WordPress se definen en el fichero editor-style.css . Si buscas dentro de la carpeta del tema que tengas activo, en wp-content/themes/mitema , seguro que encuentras un fichero editor-style.css . Pues este archivo de estilos CSS es el responsable del cambio del ancho del editor de WordPress, y por tanto será el que tengamos que modificar.

Para hacer esto utilizaremos un tema hijo, ya que no es recomendable modificar directamente un tema, sino crear un tema hijo que contenga las modificaciones que queramos hacer al tema original o tema padre. De esta forma nos aseguramos de poder aplicar (cuando toque) las actualizaciones que se vayan publicando del tema original (o padre), sin miedo a perder los cambios que nosotros mismos hayamos hecho.

Hace muy poco expliqué en este mismo blog la forma correcta de crear un tema hijo en WordPress, que resumiendo sería:

  1. Creamos la carpeta del tema hijo: wp-content/themes/temapadre-child
  2. Dentro de esta carpeta creamos un fichero style.css con el código:
    /*
    * Theme Name: Temapadre Child
    * Template: temapadre
    */
    
    @import url("../temapadre/style.css");

Ni que decir que debemos cambiar los nombres de las carpetas y de los temas que aparecen en el ejemplo por los que correspondan en nuestro caso.

Una vez creado nuestro tema hijo, creamos dentro un fichero editor-style.css para poder modificar el ancho del editor. El ancho del editor de WordPress, o más bien la zona escribible dentro del editor, se define con la clase CSS .mceContentBody , por lo que sólo tendremos que definir esta propiedad en nuestro editor-style.css del tema hijo, de esta forma:

.mceContentBody {
   max-width: 100%;
}

Aplicando un ancho del 100% nos aseguramos de que todo el ancho disponible en el editor sea “escribible”.