WordPress: cómo mejorar el editor visual con formatos personalizados

¿Te gustaría usar formatos personalizados en el editor de escritura visual de WordPress? Buena idea, ya que agregar estilos te brinda muchas ventajas. Puede utilizar sus elementos sin tener que cambiar al modo de texto. Por lo tanto, en este artículo, le mostraremos cómo extender el editor con formatos personalizados.

El editor visual de WordPress es una cosa genial. Los formatos más importantes se pueden eliminar con un solo clic. Puedes enriquecer y estructurar tus artículos con elementos. Sin embargo, sería bueno que el editor tuviera algunas funciones más.

Ciertamente, hay muchos complementos en el mercado que amplían el editor con códigos cortos. Pero, ¿realmente los necesitas a todos? ¿O son suficientes algunos elementos como botones bonitos, por ejemplo? Esto no ralentizaría su sitio web innecesariamente.

Por supuesto, ya puede cambiar al modo de texto en cualquier momento para agregar su formato. Pero la facilidad de uso se ve diferente.

WordPress: agregar estilos propios al editor visual sin un complemento

Usar estilos propios también significa que tenemos que tocar los archivos de WordPress. El código adicional que crearemos en un momento se incluye en functions.php del tema activo o en un complemento de sitio personalizado. Recomiendo este último.

1 – Creamos un Elemento de Menú Propio en el Editor

El siguiente código crea un menú desplegable adicional en el editor visual. El menú te dará la opción de poder elegir y utilizar tus propios estilos.

https://gist.github.com/anonymous/eb6b3acf39bfee4ffadf2f2e4a7cd7be

2 – Creando las opciones que se pueden elegir

Ahora, debemos configurar las opciones que queremos agregar al menú desplegable que acabamos de crear. Después, podrá utilizar estos formatos. Para este tutorial, elegiremos tres botones que usaremos posteriormente.

https://gist.github.com/anonymous/459d62df1ac1cf3b2565756177c68d63

3 – Creando el CSS Necesario para los Botones

Los botones ya se pueden usar. Puede probarlo configurando un nuevo artículo y luego usando la nueva función. Sin embargo, los botones aún no parecen botones; se necesita un poco de CSS para eso.

Copie el CSS en el archivo style.css de su tema o cree una hoja de estilo propia para él.

https://gist.github.com/anonymous/79229eef4aa434143d0d570d640646d5

4 – Todavía necesitamos un CSS para el editor

Para que podamos ver los botones con el formato correcto en el editor visual, necesitamos un editor-style.css.

La mayoría de las veces, encontrará el archivo dentro del índice raíz de su tema o dentro de una carpeta llamada CSS. Si aún no hay ninguno, le recomiendo que configure uno ahora. Eso no es realmente difícil. Simplemente cree un archivo CSS vacío llamado editor-style.css utilizando un editor de HTML.

Ahora copie el CSS del elemento tres en la nueva hoja de estilo y guárdelo. Muévelo al índice principal de tu tema. Ahora, todo lo que necesita es una pequeña función de PHP que llame a la nueva hoja de estilo para su editor.

Noupe: Los 9 mejores editores de HTML gratuitos para desarrolladores web (edición de Windows)

https://gist.github.com/anonymous/e93ec4ed512b595c5271bcd865a19707

El resultado final: nuestros nuevos botones

Los nuevos botones son muy fáciles de usar y están a solo un clic de distancia al escribir un nuevo artículo.

En el Editor Tiny MCE, los botones formateados ahora se verán bonitos:

Lo mismo se puede ver cuando se usan dentro de un artículo.

Cómo usar los nuevos botones

Como hemos configurado los botones usando métodos bastante simples, no puede usar un generador cómodo. No obstante, los nuevos controles de botones son bastante fáciles. Simplemente escriba el texto del botón en el editor, márquelo y luego haga clic en el nuevo elemento de menú «formatos». Elija el botón de su elección.

Ahora, ha creado un botón de color. Para un enlace, marque el texto del botón nuevamente e implemente el enlace.

Adición de otros elementos: simplificado

Puedes añadir otros elementos cuando quieras. ¿Tal vez eres como yo y usas la etiqueta de código más de una vez? ¿O desea crear un cuadro de color para el texto resaltado? No hay problema, la captura de pantalla le muestra qué modificar en el código PHP del elemento dos.

Agregar estilos personalizados es así de simple

Todo lo que necesita hacer es asegurarse de copiar toda la matriz y colocarla debajo de una existente. En la captura de pantalla, marqué el principio y el final de la matriz. Los corchetes verdes marcan el área.

Usar un complemento para este trabajo

Por supuesto, también podría usar un complemento cuando trabaje mucho con estilos propios. Ya hemos presentado uno de los plugins más interesantes para estilos propios y shortcodes. A los desarrolladores también les gustará esta extensión, ya que casi no hay nada que no puedas crear y usar.

Noupe: Publicar fragmentos para WordPress: ¡necesita este complemento!

Conclusión

Hemos encontrado una excelente manera de usar cómodamente formatos personalizados en el editor de WordPress utilizando medios simples y sin ralentizar nuestro WordPress con un complemento inflado. Me gustaría escuchar lo que has podido realizar con este método, así que siéntete libre de comentar.