Lo más normal es que al escribir un post desde WordPress, la caja de escritura se adapte al ancho de la pantalla, lo cual puede ser mucho en determinadas pantallas.

Esto provoca que la diferencia de maquetación entre el editor y cómo queda una vez publicado sea demasiada, obligándote a utilizar Vista previa con frecuencia. ¿Cómo ajustar el ancho para que sea lo más fiel posible a cómo queda publicado?

Hay varios modos de conseguirlo:

editor-style.css

Si eres el webmaster de tu blog y, por tanto, tienes acceso a cambiar y modificar la configuración y los archivos, esta es tu mejor opción.

Seguramente conozcas style.css, la hoja de estilos CSS de tu theme, pero es posible que hayas pasado por alto editor-style.css, presente en algunos themes y que se aplica al cuadro de edición de posts.

¿Pero cómo saber si tu tema soporta esta función «tal cual»? Para ello puedes revisar los archivos de tu tema, en busca de editor-style.css, editor.css o sucedáneos…

Otra forma es mirar el código fuente de la ventana de escritura de nuevo post de tu WordPress, en busca de la siguiente línea:

content_css:"...content/themes/tema/css/editor.css"

Una vez tengas localizado el archivo a modificar, llega el momento de editarlo con tu programa favorito (de hecho, con el Bloc de notas tienes más que suficiente).

Aquí lo único que tienes que hacer es añadir un ancho máximo a tu editor WYSIWYG. El valor dependerá de tu tema, aunque es común que ronde los 600 píxeles. Insértalo en html .mceContentBody.

html .mceContentBody {
 width: 594px;

Graba el archivo y prueba. ¿Alguna diferencia?

Si utilizas WordPress 3.0, y tu theme no soporta esta función, la puedes añadir manualmente. Edita el archivo functions.php de tu theme, e incluye lo siguiente:

add_editor_style()

Ten en cuenta que, en dicho caso, deberás crear el archivo editor-style.css desde cero por ti mismo. Una buena idea es utilizar tu style.css de base, de modo que tenga las mismas tipografías, etc.

Estilos personalizados

Si no tienes acceso a realizar estas modificaciones (WordPress.com o quizá sólo eres un escritor y no el administrador) todavía hay algo que puedes hacer.

Sin realizar ningún cambio físico en la web, puedes decirle a tu navegador que utilice unos estilos distintos para la página web que quieras. Es posible en casi todos los navegadores, de un modo u otro, pero una forma fácil y rápida de lograrlo es mediante extensiones.

En Firefox, Stylish es uno de los más conocidos, y lo puedes complementar con Stylish custom, que añade más funciones.

Una vez instalado, deberás crear un nuevo estilo. Es importante que especifiques la dirección de tu WordPress en @-moz-document url-prefix, pues de lo contrario lo aplicará a todo Internet…

Añade después todos los estilos que quieras, acordándote de añadir !important para asegurarte de que los cargará con prioridad sobre la hoja de estilos por defecto que pudiera tener tu WordPress de por sí.

[poll id=»12″]