Un usuario preguntó 👇
Hola,
¿Es posible agregar íconos personalizados a las pestañas, en lugar de elegir preexistentes? Encontré información en el registro de cambios del plugin que sugería que tal vez hubiera un filtro que podría usar, pero no pude encontrarlo. Y un artículo informativo también, pero las instrucciones parecen anticuadas. ¿Alguien podría guiarme en la dirección correcta?
Gracias,
Tim
(@britner)
Hace 10 meses, 1 semana
Hola Tim, La versión pro para esto tiene una interfaz donde puedes usar íconos personalizados generados a partir de icomoon (icomoon te permite cargar svgs personalizados o seleccionar cualquiera de los íconos compatibles y es de uso gratuito).
No hay ninguna función en la versión gratuita para administrar esto por usted.
Javascript contiene un filtro para filtrar la información svg (esto es a lo que se conecta la versión pro).
Puede filtrar los nombres de los iconos por kadence.icon_options_names
Y el contenido svg personalizado a través de kadence.icon_options
No he publicado ningún documento ni muestra en este momento.
Puede leer sobre los filtros de JavaScript aquí: https://developer.wordpress.org/block-editor/packages/packages-hooks/
Espero que eso ayude.
Lanzador de hilos
(@timstl)
Hace 10 meses, 1 semana
Gracias. Verificaré la versión pro en este caso, pero soy consciente de que esos filtros también están ahí.
Lanzador de hilos
(@timstl)
Hace 10 meses, 1 semana
Marqué esto como una solución porque la versión Pro solo tiene lo que necesito, pero encontré un problema con el que tengo dificultades:
Después de generar los archivos en Icomoon, cargué el archivo selection.json. Los iconos aparecen en el administrador y se pueden seleccionar para los títulos de las pestañas. Les agregué pestañas y las muestran en el administrador como se esperaba.
En la parte frontal, las rutas de estos iconos se eliminan, dejando solo una etiqueta vacía.
<svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="14" width="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"></svg>
La selección es .json:
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 121.6c74.227 0 134.4 60.173 134.4 134.4s-60.173 134.4-134.4 134.4c-74.227 0-134.4-60.173-134.4-134.4v0c0-74.227 60.173-134.4 134.4-134.4v0zM512 697.6c190.080 0 390.4 93.44 390.4 134.4v70.4h-780.8v-70.4c0-40.96 200.32-134.4 390.4-134.4zM512 0c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0zM512 576c-170.88 0-512 85.76-512 256v192h1024v-192c0-170.24-341.12-256-512-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["icon-by-firm"]},"attrs":[{}],"properties":{"order":2,"id":1,"name":"icon-by-firm","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M153.718 1024c-84.824 0-153.587-68.763-153.587-153.587s68.763-153.587 153.587-153.587v-0c4.353 0 9.011 0.218 13.408 0.609l165.080-275.22c-15.623-23.653-24.923-52.677-24.923-83.872 0-84.824 68.763-153.587 153.587-153.587s153.587 68.763 153.587 153.587c0 31.195-9.3 60.219-25.28 84.448l0.357-0.576 164.949 275.177q6.704-0.609 13.408-0.609c3.439 0 6.791 0 10.143 0.348l272.478-476.955c-16.719-24.227-26.705-54.22-26.705-86.545 0-84.824 68.763-153.587 153.587-153.587s153.587 68.763 153.587 153.587c0 84.824-68.763 153.587-153.587 153.587-0.009 0-0.017-0-0.026-0l0.001 0c-3.439 0-6.791 0-10.143-0.392l-272.39 476.999c16.734 24.235 26.73 54.241 26.73 86.581 0 84.824-68.763 153.587-153.587 153.587s-153.587-68.763-153.587-153.587c0-31.181 9.292-60.192 25.258-84.415l-0.357 0.577-165.080-275.177c-4.353 0.392-8.707 0.609-13.408 0.609s-9.011-0.218-13.408-0.609l-165.123 275.177c15.635 23.656 24.943 52.686 24.943 83.889 0 84.784-68.718 153.517-153.495 153.543l-0.002 0z"],"attrs":[{"fill":"rgb(110, 111, 114)"}],"width":1331,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["icon-by-product"]},"attrs":[{"fill":"rgb(110, 111, 114)"}],"properties":{"order":3,"id":0,"name":"icon-by-product","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}
¿Alguna idea que pueda cambiar para que esto funcione?
Gracias,
Tim
(@britner)
Hace 10 meses, 1 semana
¿Eres un multisitio? Si es así, deberá instalar este plugin para que WordPress no elimine su contenido svg debido a algún filtrado HTML desactualizado (los tickets están abiertos y, con suerte, esto se solucionará en algún momento)
Lanzador de hilos
(@timstl)
Hace 10 meses, 1 semana
No, no en varios sitios.
Los iconos no personalizados se cargan correctamente en las pestañas.
Estoy usando otros SVG en el sitio en mi tema, pero todos están cargados por funciones PHP en ACF Blocks o incrustados directamente en mis plantillas.
(@britner)
Hace 10 meses, 1 semana
Ya veo, esta es mi pregunta, un error en las pestañas. Un icono funciona en otros lugares. Actualizaré hoy.
Ben
Lanzador de hilos
(@timstl)
Hace 10 meses, 1 semana
Hola Ben,
Instalé la actualización disponible para Pro, intenté volver a cargar el archivo de icono e intenté editar y volver a insertar las pestañas. Sigo viendo la misma pregunta: ¿hay algo más que deba hacer?
Gracias,
Tim
(@britner)
Hace 10 meses, 1 semana
Perdón por la demora, lancé la actualización 1.8.0 hoy. Solucionará el problema de la pestaña.
Ben
Lanzador de hilos
(@timstl)
Hace 10 meses, 1 semana
Funcionó, gracias por la solución rápida.
Tim
¿Solucionó tu problema??
0 / 0