Para algunos proyectos que he realizado con WordPress he tenido que crear plugins a la medida, lo que ha significado crear, varias veces, un panel de control o sección administrativa para el plugin. Esto, a su vez, significa que he tenido que agregar menús personalizados al escritorio de WordPress, algo que es relativamente sencillo y rápido de hacer… si sabes cómo hacerlo.

Para empezar, lo que necesitaremos será, cómo no, un icono en SVG que desees utilizar en el escritorio WordPress. Hay varios sitios que ofrecen iconos SVG que pueden servirte para este propósito.

Manos a la obra

Ya que cuentas con el icono es necesario prepararlo para que se despliegue y funcione correctamente en WordPress. El proceso es simple y puedes usar herramientas libres y on-line para hacer el trabajo aún más sencillo. Te explico paso a paso el proceso:

Paso 1: preparar el icono

Para preparar el ícono yo suelo utilizar SVGOMG, una herramienta excelente y gratuita que hace el trabajo de forma impecable. Tan solo sube/carga el archivo y la herramienta hará todo el trabajo por ti y las opciones por defecto generalmente son adecuadas.

Interfaz SVGOM

Una vez listo (es prácticamente instantáneo) descarga el archivo SVG optimizado.

Nota: es posible también realizar el mismo proceso manualmente, pero como puedes imaginar eso te llevaría bastante más tiempo y esfuerzo.

Para darte una idea del resultado revisa el código original del icono SVG y compáralo con el resultado.

Este es el código original del archivo SVG que utilicé:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="layer-1" xmlns="<http://www.w3.org/2000/svg>" xmlns:xlink="<http://www.w3.org/1999/xlink>" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<path d="M376,30c-27.783,0-53.255,8.804-75.707,26.168c-21.525,16.647-35.856,37.85-44.293,53.268
			c-8.437-15.419-22.768-36.621-44.293-53.268C189.255,38.804,163.783,30,136,30C58.468,30,0,93.417,0,177.514
			c0,90.854,72.943,153.015,183.369,247.118c18.752,15.981,40.007,34.095,62.099,53.414C248.38,480.596,252.12,482,256,482
			s7.62-1.404,10.532-3.953c22.094-19.322,43.348-37.435,62.111-53.425C439.057,330.529,512,268.368,512,177.514
			C512,93.417,453.532,30,376,30z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Y este es el resultado después de utilizar SVGOMG:

<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 512 512" xml:space="preserve"><path d="M376 30c-27.783 0-53.255 8.804-75.707 26.168-21.525 16.647-35.856 37.85-44.293 53.268-8.437-15.419-22.768-36.621-44.293-53.268C189.255 38.804 163.783 30 136 30 58.468 30 0 93.417 0 177.514c0 90.854 72.943 153.015 183.369 247.118 18.752 15.981 40.007 34.095 62.099 53.414C248.38 480.596 252.12 482 256 482s7.62-1.404 10.532-3.953c22.094-19.322 43.348-37.435 62.111-53.425C439.057 330.529 512 268.368 512 177.514 512 93.417 453.532 30 376 30z"/></svg>

Bastante diferencia ¿cierto? Una cosa más: si el resultado contiene los valores width="x" y/o height="x" elimínalos manualmente ya que podrían provocar algunos problemas.

Una cosa más: asegúrate que los elementos path de tu archivo SVG contengan la propiedad fill, de otro modo WordPress no cambiará automáticamente el color del ícono en el menú:

<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 512 512" xml:space="preserve"><path fill="black" d="M376 30c-27.783 0-53.255 8.804-75.707 26.168-21.525 16.647-35.856 37.85-44.293 53.268-8.437-15.419-22.768-36.621-44.293-53.268C189.255 38.804 163.783 30 136 30 58.468 30 0 93.417 0 177.514c0 90.854 72.943 153.015 183.369 247.118 18.752 15.981 40.007 34.095 62.099 53.414C248.38 480.596 252.12 482 256 482s7.62-1.404 10.532-3.953c22.094-19.322 43.348-37.435 62.111-53.425C439.057 330.529 512 268.368 512 177.514 512 93.417 453.532 30 376 30z"/></svg>

Paso 2: codificar con base64

Ahora es necesario encriptar el código del archivo SVG con base64. Para hacerlo también hay varias herramientas gratuitas que puedes encontrar en línea. Creo que yo utilizo una distinta cada vez que tengo que hacer esto, así que no te puedo recomendar ninguna especialmente, aunque en esta ocasión utilicé Base64.Guru.

Creo que la interfaz de cada herramienta puede ser distinta, así que no voy a poner capturas de pantalla ni nada parecido, solo basta saber que tienes que procesar el ícono SVG, optimizado en el paso anterior, con la herramienta que hayas elegido y copiar el resultado.

Este es el resultado del archivo codificado en base64:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSJibGFjayIgZD0iTTM3NiAzMGMtMjcuNzgzIDAtNTMuMjU1IDguODA0LTc1LjcwNyAyNi4xNjgtMjEuNTI1IDE2LjY0Ny0zNS44NTYgMzcuODUtNDQuMjkzIDUzLjI2OC04LjQzNy0xNS40MTktMjIuNzY4LTM2LjYyMS00NC4yOTMtNTMuMjY4QzE4OS4yNTUgMzguODA0IDE2My43ODMgMzAgMTM2IDMwIDU4LjQ2OCAzMCAwIDkzLjQxNyAwIDE3Ny41MTRjMCA5MC44NTQgNzIuOTQzIDE1My4wMTUgMTgzLjM2OSAyNDcuMTE4IDE4Ljc1MiAxNS45ODEgNDAuMDA3IDM0LjA5NSA2Mi4wOTkgNTMuNDE0QzI0OC4zOCA0ODAuNTk2IDI1Mi4xMiA0ODIgMjU2IDQ4MnM3LjYyLTEuNDA0IDEwLjUzMi0zLjk1M2MyMi4wOTQtMTkuMzIyIDQzLjM0OC0zNy40MzUgNjIuMTExLTUzLjQyNUM0MzkuMDU3IDMzMC41MjkgNTEyIDI2OC4zNjggNTEyIDE3Ny41MTQgNTEyIDkzLjQxNyA0NTMuNTMyIDMwIDM3NiAzMHoiLz48L3N2Zz4=

Paso 3: creando el menú WordPress

Ahora sí, tenemos todo listo para crear nuestro menu WordPress con todo e icono SVG. Para hacerlo emplearemos el modo tradicional:

add_menu_page(
  'Mi Página',
  'Mi Menú',
  'manage_options',
  'menu-slug',
  'menu_controller_function',
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSJibGFjayIgZD0iTTM3NiAzMGMtMjcuNzgzIDAtNTMuMjU1IDguODA0LTc1LjcwNyAyNi4xNjgtMjEuNTI1IDE2LjY0Ny0zNS44NTYgMzcuODUtNDQuMjkzIDUzLjI2OC04LjQzNy0xNS40MTktMjIuNzY4LTM2LjYyMS00NC4yOTMtNTMuMjY4QzE4OS4yNTUgMzguODA0IDE2My43ODMgMzAgMTM2IDMwIDU4LjQ2OCAzMCAwIDkzLjQxNyAwIDE3Ny41MTRjMCA5MC44NTQgNzIuOTQzIDE1My4wMTUgMTgzLjM2OSAyNDcuMTE4IDE4Ljc1MiAxNS45ODEgNDAuMDA3IDM0LjA5NSA2Mi4wOTkgNTMuNDE0QzI0OC4zOCA0ODAuNTk2IDI1Mi4xMiA0ODIgMjU2IDQ4MnM3LjYyLTEuNDA0IDEwLjUzMi0zLjk1M2MyMi4wOTQtMTkuMzIyIDQzLjM0OC0zNy40MzUgNjIuMTExLTUzLjQyNUM0MzkuMDU3IDMzMC41MjkgNTEyIDI2OC4zNjggNTEyIDE3Ny41MTQgNTEyIDkzLjQxNyA0NTMuNTMyIDMwIDM3NiAzMHoiLz48L3N2Zz4='
);

y ¡Listo! tenemos un nuevo y flamante menú WordPress:

Resultado Final

Espero que te sirva y te ayude a crear menús personalizado mas bonitos usando el formato, siempre útil, SVG.

Comenta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *