Cómo hacer que el editor de WordPress se parezca a su sitio

Aunque WordPress está a punto de convertirse en una aplicación con plenos derechos, el editor de publicaciones humildes sigue siendo el campo de la interfaz en el que la mayoría de los usuarios gastan a sus usuarios. Es una parte del backend que ha sufrido mejoras significativas en los últimos años, el reciente cruce a la versión 4.0 de TinyMCE en WordPress 3.9 es un punto culminante, pero todavía hay mucha mejora. Uno de los problemas más comunes que tienen los usuarios del editor es la necesidad de cambiar constantemente entre los modos de edición y vista previa para ver cómo se verá realmente el contenido en vivo.
En este artículo, abordaremos exactamente este problema y detallaremos cómo personalizar el editor de texto de WordPress para que se vea y funcione como su diseño front-end. ¿Por qué me gustaría personalizar el editor? Cuando estás ocupado lanzando un boceto inicial de una publicación o página, el aspecto final del texto es lo último que tienes en mente. Lo que importa es descender sus pensamientos y, como dijo Steven Pressfield tan elegantemente, para cubrir el lienzo. Sin embargo, a medida que avanza al trabajo serio de edición y revisión, el hecho de que su contenido exista en un contexto se vuelve cada vez más importante. Por lo general, esto se manifiesta como una fuerte adicción al botón de vista previa construida.
Seamos claros: no hay nada de malo en el botón Vista previa. Es una pieza fantástica de funcionalidad que tienes a mano. Si simplemente ingresa para actualizar una línea o dos en un artículo, es una excelente manera de verificar los cambios antes de presionar la publicación. Si tiene que darle a un artículo una corrección exhaustiva antes de enviarlo para su revisión, es tan útil. Donde está muy lejos de ser ideal está en el corte diario para hacer un proyecto principal. De hecho, cuando se trabaja en una pieza de forma larga a través de una conexión de distancia potencialmente lenta, puede convertirse rápidamente en un problema importante por dos razones importantes: cambiar el contexto significa ingresar a un surco. Una vez que estés en él, quieres quedarte allí. Debe cambiar constantemente entre ventanas del navegador y varios contextos visuales es un asesino para la concentración y el flujo.
Tiempo: todos esos viajes redondos entre el editor y la ventana de vista previa se recopilan durante una semana laboral. Pruébelo solo. La próxima vez que trabaje en una pieza, tenga en cuenta con qué frecuencia cambia las pestañas. Este es el momento que podría haberse dedicado a pulir el contenido real.
Personalización de la pantalla de edición para que coincida con su pantalla frontal, elimine la necesidad de obtener una vista previa constante del trabajo. Haga del editor mucho más una auténtica herramienta Wysiwyg.
Por ejemplo, puede preocuparse de que un cierto párrafo sea demasiado largo, dada la altura generosa de las líneas y el tamaño de la fuente que usa su tema (como se ve aquí en WPMU Dev). Personalice su editor de publicaciones, y los resultados finales están allí en la pantalla frente a usted mientras escribe. La asignación del tiempo adicional para personalizar el Backynd tiene algunas ventajas adicionales adicionales que vale la pena enfatizar: hace que los miembros del equipo no técnico introduzcan el contenido en un contexto que les será instantáneamente familiarizado para ellos.
Es una excelente nota de finalización para agregar al preparar un sitio para un cliente externo que podría venir a WordPress por primera vez.
¿Pero los editores front-end? Algunos de ustedes podrían preguntarse en este momento: ¿Qué pasa con los editores de contenido front-end? No para esto están diseñados para hacer? ¿Y no se habló de la integración del complemento del editor front-end en la próxima edición de WordPress como una característica básica?
Buena pregunta. Tomemos uno a la vez. Los editores front-end son una característica de moda y que es cada vez más impulsada por los competidores a WordPress, como Squarespace y Weebly. La gran promesa de estos editores es que permiten a los usuarios no técnicos interactuar directamente con el contenido de un sitio web para hacer cambios. Estos pueden ser perfectos si solo desea realizar pequeños cambios en las secciones de contenido existentes y, por lo general, son fáciles de usar para administradores o propietarios de sitios menos experimentados, suponiendo que estén configurados correctamente.
La desventaja es el rango limitado de funcionalidades que generalmente ofrecen tales soluciones, tanto en términos de edición en sí como en la falta de acceso a funciones de publicación avanzadas, como meta cajas. También puse una barrera entre usted y la funcionalidad ofrecida en el resto del administrador de backend. Luego está el tema del trabajo editorial y el control a considerar. Un editor de front-end es excelente si desea que la gente llegue allí y cambie las cosas de inmediato, pero no siempre es el caso. El punto de conflicto final es el problema de la complejidad. Crear un editor de front-end sólido no es una empresa trivial. Muchos de los mejores complementos existentes son ofertas comerciales, lo que significa que agrega otro nivel de adicción a su configuración y debe preocuparse por la compatibilidad futura con otras partes de su tema como un problema complejo. Muchos de nosotros esperábamos que parte de esta complejidad se atenuara al incluir el complemento del editor front-end en el núcleo de WordPress. Desafortunadamente, después de mucha emoción inicial, esas esperanzas finalmente tenían la intención de ser destrozadas.
Editor front-end de WordPress Plugin. Desde finales de 2013 hasta finales de noviembre de 2014, este complemento ha estado en desarrollo activo como un complemento de características, lo que significa que estaba programado para un posible lanzamiento en el núcleo. Desafortunadamente, el proyecto ha sido bloqueado desde entonces y se ha trasladado a la lista de complementos para funciones inactivas. Desafortunadamente, es seguro decir que no veremos su apariencia en el núcleo demasiado pronto.
Si está interesado en probar un editor frontal, le recomendamos que pruebe el editor front-end (gratis) o el compositor visual (pagado), pero tenga en cuenta las posibles complicaciones que mencionamos anteriormente. El enfoque que adoptaremos en este artículo, por otro lado, le brinda una forma simple de evitar estos inconvenientes y pasar al problema: hacer que su contenido cantara. Empecemos a hacerlo. Organizar la escena en cada sitio, naturalmente, tendrá un contenido diferente y, potencialmente, la implementación de temas extremadamente diferentes. Para el propósito de este artículo, eliminaremos las cosas para darle una comprensión sólida de los elementos básicos que luego será libre de aplicar a los requisitos específicos de su propia configuración. Utilizaremos una configuración local de WordPress y comenzaremos con Una versión de datos. Prueba de unidad de tema de WordPress para ilustrar nuestros puntos. Si comienza a mirar su propio entorno, la adopción de este enfoque proporciona algunos beneficios obvios:
Al desarrollarte localmente, puedes experimentar sin arriesgar disturbios para usuarios o colegas.

Los datos de prueba de la unidad de WordPress le proporcionan un contenido básico organizado racional establecido para probar sus cambios. Es la plataforma perfecta para comenzar al explorar cualquier tipo de cambio de tema, tanto en la parte delantera como en la parte posterior.
En nuestro caso, después de descargar e importar el paquete inicial de la prueba WP en una nueva WordPress, seleccionamos veinte quince como tema.
Esta combinación nos brinda una serie de páginas bien organizadas, como el marcado y el formato y la alineación de las imágenes, con las cuales jugar inmediatamente desde la caja.
Si lo sigue, puede replicar este enfoque o simplemente activar su propio tema en una instalación local con el contenido actual del sitio. Recomendamos el primero como etapa inicial. El contenido ofrecido por la prueba WP es una excelente manera de verificar qué tan completa es la base actual antes de comenzar a hacer cambios importantes. Comprender lo que está sucediendo bajo el capó ahora que tenemos un ejemplo de contenido sensible para examinar, para tomar algún tiempo para comprender lo que realmente sucede bajo el capó en WordPress antes de mirar la personalización del editor. Como se mencionó anteriormente, WordPress se entrega con el editor de TinyMce de código abierto como estándar. Esto es, por así decirlo, la parte inferior de la pila temática. Tinymce tiene su propia hoja de estilo que controla cómo se muestra el contenido. Por defecto, esto no es consciente del mundo exterior. Los desarrolladores de TinyMCE eran lo suficientemente sensibles como para dejar espacio para cargar hojas de estilo adicionales en ellas, sin embargo, a través de un gancho llamado content_css.
A su vez, los desarrolladores de WordPress fueron bastante amables con add_Editor_style en una función nativa llamada add_Editor_style. Se incluyó en el núcleo de WordPress comenzando con la versión 3.0.0. Si consulta la documentación en línea, verá que esta característica está oculta en WP-Includes/Theme.php. Analizaremos formas de llamar a esta función directamente en solo unos minutos. De manera predeterminada, WordPress usa esta función para verificar la presencia de un archivo CSS en el directorio raíz de su tema llamado editor-style.css que puede usar para estilar el contenido del editor. Entonces, si desea personalizar un tema existente, una de las primeras preguntas que debe hacer es si ya hay un editor Style.css en su tema. Si tomamos el tema de veinte quince como ejemplo, podemos ver que dicho archivo realmente incluye. Un cambio rápido entre la vista previa y las vistas de administración de nuestra página de marcado y formato muestra que los estilos básicos se reproducen fielmente.
Demos un paso más allá y verifiquemos si el estilo que vemos en la ventana del editor ciertamente está controlado por el editor-Style.css. Un viaje rápido del inspector web es todo lo que necesitamos para confirmar que este es el caso.
Por defecto, el editor está buscando editor-style.css

Esperamos que el escenario básico sea relativamente claro en esta etapa. Para revisar:
El editor de WordPress es alimentado por TinyMCE.

TinyMCE permite el reemplazo de su estilo predeterminado.

WordPress usa una función llamada add_editor_style para especificar qué archivo CSS debe usarse para reemplazar el estilo predeterminado. Por defecto, WordPress está buscando un archivo llamado editor-style.css en la raíz del tema activo.
La siguiente pregunta es cómo hacer sus propios cambios. Haga sus propios cambios como se sugirió anteriormente, lo primero que debe aclarar es la pregunta de si hay un archivo editor en el estilo de estilo en la raíz de su carpeta de tema. Si lo hay, le sugerimos que haga una copia en la misma ubicación y lo llame Custom-Editor-Style.css. Esto le brinda un lugar limpio para comenzar a experimentar y una manera fácil de volver a la configuración inicial. Si no hay archivo, cree un nuevo archivo llamado Custom-Editor-Style.css y colóquelo en la raíz de la carpeta con el tema. Conectando su CSS personalizado El siguiente paso es decirle a WordPress que busque nuestro nuevo archivo en lugar del valor predeterminado. Lo haremos agregando una anulación en las funciones.php de nuestro tema para llamar a add_editor_style y decirle que use nuestra nueva hoja de estilo. Abra las funciones.php de su tema, agregue las siguientes líneas al final y guarde.

El principal Midoriberlin/400A2C58D26EC1033817 está cargado
Ahora verifiquemos si nuestro editor realmente usa la nueva hoja de estilo. Nuevamente, un viaje rápido al inspector es todo lo que tenemos que estar seguros. Como puede ver a continuación, ahora hemos establecido con éxito una conexión con nuestro nuevo archivo.
La versión personalizada de Editor-Style.css está en marcha.
Ahora realicemos algunos cambios rápidos en el archivo CSS para asegurar que los tomen el backend. En primer lugar, haré de estos encabezados un tono verde editando el estilo personalizado. CSS. Los atetos han cambiado en verde. Los encabezados se modificaron ajustando el siguiente CSS:
El principal Midoriberlin/C3AE04D4A56A00D1A650 está cargado
Y ahora agregemos un borde sutil a nuestras imágenes. #Tinymce, si se pregunta, la ID es asignada automáticamente a la etiqueta en TinyMCE. Podremos ver los resultados de este cambio inmediatamente a través de la página de alineación de imágenes.
Cambiar el color del borde de la imagen en rosa en el editor. No colocaremos en una presentación de CSS en el futuro cercano, pero a partir de estos dos ejemplos simples está claro que ahora tenemos un control completo sobre el contenido del editor. El borde rosa, de hecho, fue creado con el siguiente CSS:
El principal Midoriberlin/401d88ad946526594732 está cargado
Desde este momento, es un problema pasar por su CSS existente y asegurarse de que se ajuste a su editor de una manera que tenga más sentido para su caso de uso. Utilizando la hoja de estilo front-end existente como base si no tiene una hoja de estilo editor existente para funcionar como lo hemos hecho aquí, también puede importar la hoja frontal existente para su sitio para usarla como base. Echemos un vistazo rápido a cómo hacer esto. Para importar la hoja de estilo front-end existente, simplemente reemplace el contenido de Style.CSS personalizado con lo siguiente:

GIST Midoriberlin/C513EB54BECA3727F6F está cargado
Es probable que las cosas parezcan un poco rotas al principio cuando haces esto, pero tienes una buena separación de preocupaciones y una base sólida para trabajar. Ir más adelante los siguientes pasos a seguir dependerán exactamente de qué tan lejos desea llegar a la pantalla coincidente con el editor. Le recomendamos que eche un vistazo a la hoja de estilo del editor al estilo.css que se entrega con veinte quince como punto de partida para mapear su estrategia CSS. Además, asegúrese de consultar la documentación de WordPress para obtener indicaciones sobre cómo llevar este enfoque con funciones más avanzadas, como agregar estilos personalizados basados ​​en el tipo de publicación. Antes de concluir, debemos mencionar algunas otras personalizaciones de TinyMCE que quizás desee explorar: control de la pantalla de botón en TinyMCE: una buena presentación general de nuestra propia Raelene Wilson.

TinyMce Advanced: un complemento para agregar estilos personalizados como botones.
La conclusión para tomar el control de la visualización de la pantalla de WordPress lo ahorrará como escritor y agregará una capa adicional de esmalte profesional. Comprendiendo cómo se aplican los estilos, puede personalizar tanto o cuán poco requiere la situación. Recapitulemos los pasos:
Compruebe que su tema se entrega con una hoja de estilo de editor Style.CSS.

Cree su propia hoja de estilo personalizada y dirija WordPress.
Use la hoja de estilo del editor existente como base o importe el estilo principal del tema.
Tomar estilo.
Esperamos que este artículo lo ayude a tomar el control del entorno de trabajo.
Cambiar el color del borde de la imagen en rosa en el editor. Si tiene consejos o trucos para compartir, ¡cuéntenos sobre ellos en los comentarios a continuación!
Etiquetas:
administración
CSS
Editor de WordPress