¿Te gustaría poder guardar los colores personalizados del botón «Color de texto» del editor de WordPress?

Si es así, aquí te explico como hacerlo sin hacer uso de ningún plugin.

De qué estamos hablando

Estoy hablando del botón de «Color de texto» del editor de WordPress.

Aquí está el susodicho botón:

Guardar los colores personalizados en el editor de WordPress - Snippet

Ahora que sabemos el botón del que hablo, vamos a ver exactamente a qué me refiero.

Cuando pulsamos sobre ese botón se despliega una tabla con colores predefinidos. En la última línea podemos añadir colores personalizados que indiquemos nosotros:

Guardar los colores personalizados en el editor de WordPress - Snippet

Veis a lo que me refiero, ¿verdad?

¿Cuál es el problema?

El problema es que cuando nos vamos de la entrada o página, guardamos, etc… Los colores personalizados desaparecen y hay que volver a seleccionarlos:

Guardar los colores personalizados en el editor de WordPress - Snippet

Seguro que os habéis dado cuenta de esto ¿verdad?

Pues yo también.

Si seguís este blog, os habréis dado cuenta de que los títulos y subtítulos de las entradas tienen un color rojo específico y claro, cada vez que guardo la entrada, me desaparece de la fila de colores personalizados.

Esto me hizo buscar algo, y si, encontré algún plugin como TinyMCE Color Grid.

Guardar los colores personalizados en el editor de WordPress - Snippet

Pero no es lo que busco, prefiero algo más sencillo. Claro que puede servir, por supuesto, pero bueno, hay que procurar hacernos nuestros propios plugins y en su defecto snippets.

Pues bien, tras varios intentos, ya tengo mi propia solución a este asunto. Pues sí un snippet que resuelve el problema.

¿Por dónde empezamos?

Vamos a empezar por el final, claro que si. Como tiene que ser.

En primer lugar voy a poner el código del snippet completo para que lo incluyáis en el fichero functions.php de vuestro tema hijo, lo incluyáis en un plugin como Code Snippets o creéis vuestro propio plugin.

No os preocupéis porque también podréis descargar el plugin que yo he creado todos aquellos que os suscribáis. Ya queda menos para poner en marcha el membership site con cursos, descargas, plugins propios, soporte, etc…

Bueno, a lo que vamos, aquí tenéis el código del snippet:

https://gist.github.com/OscarAbadFolgueira/8a0670011ff44686715680c9e92ff6a7

Veis qué fácil!

El resultado

El resultado de todo esto es que a partir de ahora, al pulsar el botón de «color de texto» de la barra del editor de WordPress, nos mostrará los colores que hemos incluido en el snippet. Los colores base más nuestros colores.

De esta forma:

Guardar los colores personalizados en el editor de WordPress - Snippet

Ah, y también podemos ver el texto o nombre que le hemos asignado a cada uno de ellos:

Guardar los colores personalizados en el editor de WordPress - Snippet

Esto me gusta más.

Fácil, sencillo y para toda la familia.

Añadir o quitar colores

Esto es muy sencillo.

En primer lugar, vamos a dejar los colores base sin tocar. No nos estorban de momento y lo que vamos a modificar es el contenido del array $mis_colores. Que, entre otras cosas, para eso está.

Aquí tenemos el array $mis_colores:

https://gist.github.com/OscarAbadFolgueira/ed12913a05658e8495095c80dac089d3

Para añadir o modificar los colores personalizados, basta con modificar lo anterior.

Démonos cuenta que debemos introducir el código hexadecimal del color seguido del texto o nombre del mismo.

Así podríamos disponer de nuestros colores personalizados siempre que quisiéramos y no tener que buscarlos cada vez que guardamos.

Conclusión

Hemos visto que por defecto WordPress no guarda los colores personalizados que añadimos. Los perdemos.

Necesitamos un mecanismo para disponer de los colores que utilizamos habitualmente sin tener que añadirlos como personalizados.

Hemos visto el código necesario para re-configurar los colores y añadir una sexta fila con los colores que utilizamos habitualmente.

Podemos utilizar el plugin TyniMCE Color Grid que nos lo facilita pero como siempre digo, procura utilizar el menor número de plugins posible y además que así vamos aprendiendo a manejarnos con la programación en WordPress.

A partir de la semana que viene, Julio 2016, también podréis descargar los plugins que yo haga por si queréis tenerlo en un plugin en lugar de en el functions.php de vuestro tema hijo o utilizar un plugin como «Code Snippets» para guardarlos y tenerlos ordenados.

Pues bien, aunque podríamos hacer más cosas con código para configurar o añadir funcionalidades a lo que ya hemos hecho, lo dejamos por hoy.

Espero que os sea de utilidad este tutorial.

Y ya sabéis, cualquier duda sobre este u otro tutorial me la hacéis llegar a través del formulario de contacto de esta web.

Nos vemos en el próximo.

Saludos.

 

Autor: Oscar Abad Folgueira

Programador y desarrollador WordPress.