Cómo personalizar el editor Wysiwyg WordPress

El editor de WordPress es el centro de trabajo central para la creación de contenido. Una vez que funcione su sitio, probablemente gaste aproximadamente el 80% del tiempo allí. Si piensas bien, es bastante impresionante. ¿Una parte de su sitio que le permite ocuparse del 80% de su trabajo? Suena como una herramienta poderosa. El editor de WordPress es algo que consideramos que se entiende. La apariencia, el comportamiento, incluso las opciones de formato son tan intuitivas que incluso los principiantes se familiarizarán rápidamente con ella. Sin embargo, esta familiaridad es algo artificial. Al igual que el resto de la plataforma, puede personalizar el editor Wysiwyg WordPress. De hecho, puede controlar casi todos los aspectos. Casi cualquier cosa se puede cambiar y hacer para verse y comportarse como desee.
¿Cómo? Bueno, solo estaba obteniendo esto. ¿Por qué le gustaría meterse con el editor de WordPress? Si bien el editor es una gran herramienta (una que me gusta trabajar con ella), hay pocas áreas que podrían mejorarse. En particular, en este artículo quiero abordar los siguientes temas:
Alineación del estilo de contenido dentro del editor con el diseño del tema
Activar botones adicionales y opciones de formato dentro del editor
Implementación de estilos personalizados sin tener que agregar HTML y CSS manualmente
Probablemente sepa muy bien que la apariencia de su contenido dentro del back -end difiere mucho de la forma en que se muestra en la parte delantera de su sitio.
Aunque Wysiwyg significa “lo que ves es lo que recibes”, para ver lo que obtienes, generalmente debes presionar el botón Vista previa. Al escribir contenido en forma larga, esto puede conducir a mucha ducha y espalda. Este tiempo se puede gastar mejor para moler su contenido antes de que salga. Para resolver este problema, algunos temas ya han comenzado a implementarse utilizando los mismos estilos en el editor que en el front-end. Veinte quince es un ejemplo: cuidadoso, ¿verdad? No se preocupe, aprenderá a hacer lo mismo a continuación.

Otra cosa que vale la pena mencionar son las opciones de estilo y los botones disponibles en el editor. Cambian con el tiempo: algunos botones desaparecen, otros se agregan. No todos los usuarios están satisfechos con las opciones realizadas por los desarrolladores. Como resultado, parte del artículo se gastará para personalizar las opciones de estilo disponibles en el editor. Finalmente, si desea implementar todo tipo de estilos personalizados en su contenido (como botones, divisores, etc.), puede estar molesto si agrega HTML y CSS Custom. Afortunadamente, hay una manera de hacer que sus propios estilos sean parte del editor de WordPress. Esto le permite agregar fácilmente cualquier estilo que desee a su contenido con solo unos pocos clics del mouse.
En resumen, el propósito de este artículo es personalizar el editor Wysiwyg WordPress de una manera que le permita tomar el control total sobre el entorno de trabajo. Haga que su contenido se vea como su front-end si no sabe, lo que sabe como editor de WordPress es, de hecho, un software autónomo llamado TinyMce Editor. TinyMCE es un editor web de código abierto, una plataforma independiente, construida con JavaScript y HTML. Es muy personalizable en sí mismo: apariencia, opciones, formato y muchas otras cosas se pueden cambiar. Dentro de WordPress, el editor tiene su propia hoja de estilo. La buena noticia es que significa que podemos hacer que muestre cómo queremos, si sabe cómo hacer CSS. Además, WordPress tiene una función llamada add_editor_style que le permite llamar estilo adicional para TinyMCE. Puede obtener más información al respecto en el códice de WordPress. Usaremos esto para nuestra ventaja y peinaremos el contenido en el editor de cualquier manera que deseemos. 1. Cree una hoja de estilo personalizada para WordPress Publisher como primer paso, verificaremos si ya hay un archivo como este. Como mencioné anteriormente, algunos temas comenzaron a alinear la aparición del editor con el frente del tema. Si no se especifica nada más, add_Editor_style predeterminará un archivo llamado editor-style.css. En veinte quince años, puede encontrar este archivo en WP-Content/Temas/Veinticinco/CSS.
Por supuesto, si su tema ya lo ofrece, solo puede copiar el archivo y usarlo como base para sus propias personalizaciones. Sin embargo, asumiremos que no tiene una hoja de estilo para el editor presente. En este caso, simplemente creará el suyo. De temas. Nota secundaria: Naturalmente, debe hacer este tipo de personalizaciones dentro de los niños de WordPress. De esta manera, no perderá su arduo trabajo por una actualización del tema. De hecho, si su tema principal viene con su propia hoja de estilo para el editor de WordPress, simplemente puede anular colocando una hoja de estilo con el mismo nombre en la misma ubicación en la carpeta del tema del niño.2. Llame al archivo dentro de Functions.php, debemos asegurarnos de que WordPress realmente use nuestra nueva hoja de estilo. Para esto, agregaremos el siguiente código a las funciones del archivo.php de nuestro tema (niño): [php] custom_editor_styles () {add_editor_style (‘my-editor-stys.css’); } add_action (‘admin_init’, ‘custom_Editor_styles’); [/php] ¿está todo listo? Bien. Ahora es el momento de activar nuestras personalizaciones. 3. Implemente estilos de editor personalizados a continuación, analizaremos algunos ejemplos sobre cómo puede usar el archivo recién creado para que el editor TinyMCE sembrara más con su sitio.
3.1. Establezca el editor en el mismo ancho que su área de contenido ¿Por qué le daría a la zona de contenido en WordPress Editor el mismo ancho que su front-end? Nuevamente, para que el área de trabajo sea más cercana al juguete el resultado final. Al limitarte a un cierto ancho, puedes ver exactamente dónde se rompen tus líneas, cuando un párrafo se vuelve demasiado largo y o demasiado grande para ser atractivos. Además, es súper fácil. Tiene dos formas de apuntar a la zona de contenido: ya sea por la etiqueta del cuerpo (como se hace en veinte quince) o por su identificación, que es #tinymce. En este ejemplo, los haremos a los dos. Si suponemos que el área de contenido tiene un ancho de 640 píxeles, el CSS correspondiente de la hoja de estilo del editor se vería así: [CSS] Cuerpo {ancho máximo: 640px; } [/css] Como se mencionó anteriormente, alternativamente puede ir con: [css] #tinymce {ancho máximo: 640px; } [/css] Ambos deberían dar el mismo resultado. Si tiene éxito, su contenido ahora debe romperse exactamente en el mismo lugar en el editor que en el frente de su sitio. Recuerde que esto funciona solo en la medida en que el editor se extiende en la pantalla. Si tiene un área de contenido muy amplia y desea utilizar esta técnica, es posible que desee cambiar a una sola columna en la opción de pantalla.
3.2. Subraye la etiqueta del título H2 no era tan difícil ahora, ¿no? No te preocupes, tampoco lo es el siguiente. Para este ejemplo, asumiremos que ha decidido enfatizar sus títulos H2.
Ya sea que sea una buena idea o no, es una pregunta completamente diferente, pero nos dará algo para practicar. Una de las formas más fáciles de averiguar qué CSS necesitamos cambiar es simplemente escribir algo en el editor de WordPress, formatearlo como H2, y luego inspeccionarlo con el desarrollo o las herramientas de Firebug. Esto nos mostrará rápidamente que podemos Cambie la etiqueta de título muy simple con el siguiente código: [CSS] H2 {Text-decor: Underline; } [/Css] Si desea volverse un poco más específico para los operadores, puede lograr lo mismo de la siguiente manera: [CSS] #TinyMCE H2 {Text-Decor: Underline; } [/css] fácil, ¿no? Dije. 3.3. Use la hoja de estilo frontal como base incluso si es bastante simple cambiar los estilos en el editor de WordPress, rápidamente se molestará para tratar de implementarlos todos. La buena noticia es que no tienes que hacerlo. Hay una mejor manera. Con la regla @import, simplemente puede importar la hoja de estilo frontal. De esta manera, todas las formaciones en la primera página se utilizarán en el editor. Con un tema infantil para veinte quince, funciona de la siguiente manera: [CSS] @import URL (‘../ veintiséis/style.css’); [/css] Por supuesto, no todos los estilos son útiles para el editor. Como resultado, puede parecer inicialmente algo poco atractivo:
Por lo tanto, debe hacer algunos ajustes para que sea más fácil de usar. Por ejemplo, si agrega las siguientes líneas a my-editor-stys.css: [css] cuerpo {color de fondo: #fff; Margen: 20px 40px; Ancho máximo: 640px; } [/css] se ve mucho mejor que antes, ¿estás de acuerdo?
Alternativamente, en lugar de importar toda la hoja de estilo, también puede usar el editor de veinte quince como plan. Esto es más fácil asegurarse de atrapar todos los estilos importantes. Agregue botones adicionales al editor de WordPress como mencioné anteriormente, TinyMCE es un producto independiente. Los desarrolladores de WordPress lo han configurado de una manera que decidieron tener sentido, incluidas todas las opciones de formato disponibles. Todo esto que no sabe es que TinyMCE Real Publisher tiene muchos más botones disponibles de los que está disponible de lo que está acostumbrado. ¿No me crees? Aquí hay una lista. De hecho, en WordPress 3.9 algunos botones que estaban disponibles en el editor de WordPress desaparecieron. Actualmente, el encabezado del editor se ve así:

¿Y si queremos incluir botones adicionales? Nada más fácil que eso. Rápidamente le mostraré cómo agregar dos de los botones anteriores en una tercera fila en la parte superior de mi editor. [Php] add_editor_buttons ($ buttons) {$ botones [] = ‘styleselect’; $ botones [] = ‘hr’; devolver $ botones; } add_filter (‘mce_buttons_3’, ‘add_editor_buttons’); [/php] Después de haber agregado el código anterior a functions.php, su editor debe verse ahora como sigue:

Tenga en cuenta que MCE_BUTTONS_3 es el filtro para la tercera fila. Para agregar algo a la segunda línea, debe ir con MCE_BUTTONS_2. Creación de estilos personalizados no solo puede agregar más botones al editor de WordPress, sino que también puede poblarlos con contenido personalizado. Esta es en realidad la razón por la que traje el menú “StylesElect” allí. Le permite agregar sus propias opciones de estilo, lo que le permite agregar contenido personalizado de HTML y CSS desde una lista desplegable, en lugar de tener que escribirlas manualmente. La parte final del artículo se dedicará a cómo lograr esto. 1. Active el menú StylesLect Huh, ¿no acabo de hacer eso? Sí, lo hice. Sin embargo, si tiene la intención de devolver ese botón, hay una forma un poco más elegante de hacerlo. [Php] la función add_style_select_button ($ buttons) {array_unshift ($ botones, ‘styleselect’); devolver $ botones; } Add_filter (‘mce_buttons_2’, ‘add_style_select_button’); [/php] Como puede ver a continuación, agregue el botón al comienzo de la segunda fila. Se ve mucho mejor, ¿no?

2. Registre estilos personalizados con el botón en su lugar, es hora de grabar muchos estilos personalizados. En particular, lo que quiero hacer es agregar un resaltado para enfatizar los pasajes importantes del texto y un botón verde. Para agregar estos estilos, pegamos esto aquí en mis funciones.php: [php] // Agregar estilos personalizados al editor de WordPress my_mce_before_init_insert_formats ($ init_array) {$ style_formats = matrix (// Estos son los estilos de matrix personalizados (‘Título’ => ‘Highlighter’, ‘inline’ => ‘span’, ‘class’ => ‘Highlighter’, ‘wrapper’ => true,), matrix (‘title’ => ‘verde’, ‘bloque’ => ‘ span ‘,’ class ‘=>’ Botón verde ‘,’ wrapper ‘=> true,),); // Inserte la matriz, JSON codificada, en “style_formats” $ init_array [‘style_formats’] = json_encode ($ style_formats); Devuelve $ init_array; } // Adjunte la llamada inversa a “tiny_mce_before_init” add_filter (‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’);

Una breve explicación sobre el código: el argumento del título define el título que verá en el editor, el bloque y en línea definen si se usa un bloque o elemento en línea y en qué tipo de artículo debe empaquetarse, las clases son clases CSS asociadas con el nuevo El elemento y el envoltorio indican si el formato actual es un contenedor de bloque. Más información aquí. 3. Defina estilos mis nuevos estilos ya son utilizables. Puedo resaltar cualquier texto en mi editor, puedo usar el menú Drop -down y asignarlo al contenido. Sin embargo, hasta ahora esto no tendrá efecto, porque no he asignado ningún CSS. Es hora de corregir eso. Afortunadamente, nuestras nuevas clases de CSS hacen esto bastante fácil. Agregue el siguiente código a style.css de su tema [CSS] .Buton-Green {Background Color:#00CC00; -Moz-Border-Radius: 3px; -WebKit-Border-Radius: 3px; Chenar-Raza: 3px; Chenar: Ninguno; Pantalla: bloque en línea; Cursor: puntero; Llenado: 10px 30px; TEXT-DECOR: Ninguno; } .buton-verde a {Bony: Medium Ninguno; Color: #fff; } .buton-verde a: hover {bile: mediano ninguno; Color: #333; } .Marcaler {Color de fondo: ## ffff66; } [/css] Si ahora observamos nuestro artículo, podemos ver los nuevos estilos en el trabajo. Sin embargo, muestre los nuevos estilos en el editor, mientras estamos en esto, no solo queremos ver nuestros estilos personalizados en nuestro sitio web, sino también en el propio editor. Si ha seguido, todo lo que se necesita es agregar los mismos estilos a my-editor-stysyles.css y se verá igual que en la primera página.

Eso es todo. ¡Bien hecho! Complementos para personalizar el editor de WordPress Si no es tan bricolaje, también hay una serie de complementos que le permiten personalizar el editor de WordPress sin tocar ningún archivo. Vamos a superar algunos de ellos muy rápidamente. WP Editar este complemento le ofrece botones adicionales y opciones adicionales del editor. Entre otras cosas, le permite insertar imágenes, videos y otros entornos, así como crear tablas. También agrega apoyo a los emoticones al editor de WordPress.

TinyMCE avanzado Mejora el editor de WordPress con la opción de agregar, eliminar y reorganizar los botones como quieras. También podrá crear y editar tablas, usar la búsqueda y reemplazar en su contenido, así como editar CSS y HTML.

Botones de botones del editor visual personalizado Los botones personalizados ofrecen opciones adicionales para el estilo HTML y CSS. Además, agregue botones adicionales al editor, así como la posibilidad de crear los suyos propios.

Plug-n-edit complement transforma el editor de WordPress en un generador de página de arrastrar y soltar. Puede estratificar elementos uno encima del otro, crear botones, integrar las fuentes de Google, usar imágenes como fondo y más.

Los tipos y campos de aduanas de contenido de los tipos y campos de publicaciones personalizadas son muy útiles. Este complemento no solo lo ayuda a crearlos, sino que también le brinda acceso a ellos directamente desde el editor de WordPress.

Solo escribir mientras escribe sin diversión en WordPress es una gran idea, algunas personas lloran la falta de opciones de formato. Solo escribiendo remedios esto agregando botones adicionales al medio de escritura, de lo contrario pacífico. La edición Tabify EcRank, las diferentes metacasas, se muestran apiladas por la otra. Crea un ambiente de trabajo mucho más ordenado. Resumiendo como esperamos que haya visto en este tutorial, nada en WordPress, ni siquiera el centro de trabajo central que es el editor de WordPress realmente se pone en piedra. Cada pieza es personalizable para adaptarse exactamente a sus necesidades. Configurar el editor para representar cómo se verá su front-end es una buena manera de obtener un comentario directo sin usar el botón Vista previa. Solo se necesita una hoja de estilo personalizada. Opciones de estilo adicionales y estilo personalizado también están disponibles. Con solo un poco de codificación, puede agregar botones, resaltados, bloques de contenido y más. Finalmente, para aquellos que no están demasiado ansiosos por trabajar con las funciones PHP y WordPress, también hay una serie de complementos que le permiten implementar la personalización con solo unos pocos clics. Lo más importante es que llegues a un ambiente de trabajo que mejora tu flujo de trabajo y responde a tus necesidades personales. Afortunadamente, ahora tienes las herramientas que necesitas para lograr esto. ¿Otras sugerencias para personalizar el editor WordPress? ¿Más complementos? Código adicional? Dinos en los comentarios.