¿Qué tipos hay y cómo agregarlos?

usar Símbolos en WordPress Esta es una excelente manera de transmitir ideas o conceptos más o menos complejos a través de elementos visuales. Los usuarios pueden interpretarlos de forma más flexible que el texto escrito.

En efecto El símbolo casi se ha convertido en el estándar. Por ejemplo: sabes que un botón de casa te lleva a la parte superior de la web, otro botón de sobre envía un correo electrónico o un ícono del logotipo de Facebook te permite compartir publicaciones.

Los sitios web que contienen íconos se consideran más nuevos y atractivos. Cuando se usa correctamente, un icono también puede indicar que Utilice WordPress para hacer que su sitio web sea más fácil de usar y accesible. Y mejorar la experiencia de usuario del visitante.

¿Qué son los iconos en WordPress y para qué sirven?

Un icono es un pictograma que representa una idea.Con el desarrollo de entornos de computación gráfica, se han vuelto muy populares; generalmente los usamos para representar unidades de almacenamiento, cubos o carpetas, por ejemplo.

Basta con mirar el escritorio de su computadora o la pantalla de su teléfono inteligente para comprender completamente de qué estoy hablando.

En WordPress, los iconos se utilizan a menudo como elementos de navegación del menú, gráficamente en el texto para ilustrar el estado de ánimo, o como botones para realizar tareas como botones de redes sociales.

WordPress instala una fuente de iconos de forma predeterminada Se utiliza principalmente para iconos de escritorio. Iconos de tableroTambién incluye algunos emoticonos básicos, pero es posible que todos sean demasiado cortos para tu proyecto.

Por lo tanto, si desea más libertad en las opciones de los íconos de WordPress, siga estos métodos para clasificarlos por función.

Tipos de iconos de WordPress

El uso más común de iconos en WordPress es crearlos. Botones de navegación por menús o de llamada a la acción...

Para tales situaciones, lo ideal es tener un icono que te permita trabajar con diferentes tamaños sin perder calidad, por lo que debes abandonar y usar la imagen a priori. Fuente de símbolo de WordPress (Por ejemplo Fontawesome).

Fuente de iconos: la fuente de WordPress es genial

Fuentes impresionantes Este es un marco con más de 1500 símbolos vectoriales para que pueda tratarlos como fuentes. dibujo Cuando se trata de mostrar iconos, Font Awesome tiene una gran ventaja en términos de velocidad del sitio web.

Estos beneficios también se aplican a otras fuentes de símbolos en Internet, que discutiré más adelante en este artículo.

Dado que es una imagen vectorial, Los iconos se pueden escalar a cualquier tamaño sin pérdida de calidadEsta es una característica importante de diseño receptivo que funciona muy bien para pantallas Retina.

Al igual que con el texto de otro sitio web, puede editar fácilmente las fuentes de los iconos utilizando CSS. Por ejemplo, puede cambiar su tamaño y color, agregar sombras, rotarlas, etc.

Otro aspecto interesante es que puedes guardar varios símbolos en un archivo. Esto reduce la cantidad de solicitudes HTTP en comparación con la carga de varias imágenes.

Las fuentes de iconos no agregan mucho peso a la página, especialmente si está utilizando una biblioteca que contiene solo los iconos que necesita.

Más adelante, en el mismo artículo, explicaré cómo incorporar esta fuente (y otras fuentes) en su WordPress para que pueda usar los íconos según sea necesario.

Iconos de redes sociales en WordPress

Los iconos de redes sociales de WordPress sirven principalmente para dos propósitos diferentes:

1. Iconos relacionados con las redes sociales del sitio webTu función es facilitar que tus visitantes encuentren perfiles sociales asociados con tu marca y animarlos a seguirte.
2. Símbolo de intercambio socialEstos iconos ayudan a los usuarios a compartir el contenido del sitio web que están utilizando actualmente en las redes sociales más populares o que nos interesan más en nuestras estrategias de marketing.

Como puede ver, se trata de dos funciones muy diferentes (aunque están relacionadas entre sí) y no deben confundirse. En el primer caso, esto solo se aplica a los enlaces. En segundo lugar, cuando están vinculados a la API de redes sociales, contienen funciones especiales para crear publicaciones remotas.

En Raiola, ya tienes un artículo completo, algunos de los cuales Los mejores complementos de iconos de WordPress para compartir en redes sociales...

Si solo busca una colección de símbolos que se puedan aplicar manualmente, sociedad Tiene 258 iconos para todas las redes sociales, puedes imaginar que puedes usarlo cuando quieras.

Otra fuente muy interesante de iconos de redes sociales: SocializarEso les da el color de su negocio inicial e incluso puede crear botones de redes sociales muy atractivos.

Y finalmente, observemos el ícono social de WordPress, este es el último. Biblioteca en su formato original: Fuente monocromática de símbolo social... Este contiene Más de 100 iconos en 3 versiones: sin fondo, redondos o cuadrados.

La fuente tiene un estilo simple, elegante y muy ligero, se publica bajo una licencia de fuente abierta gratuita y es adecuada para proyectos personales y comerciales.

Emoji en WordPress

El uso de emojis en la comunicación escrita es cada vez más común y WordPress no es ajeno a él. Al igual que normalmente agrega emoji a WhatsApp o Twitter, usted también puede Emoji en WordPress...

Estos emojis se utilizan principalmente para expresar emociones, aunque su uso creativo se ha incrementado de forma espectacular en los últimos años.

Para algunas versiones, WordPress ha habilitado la función para convertir ciertas cadenas de texto en cadenas de texto de forma predeterminada. Emoticon o emoticonEn esta tabla puede ver 22 emoticonos estándar de WordPress:

Si escribe estas combinaciones de caracteres en un editor de texto y no se convierten automáticamente en símbolos, probablemente haya desactivado esta función. Para arreglar esto, visite su Tablero de WordPress> Configuración> Escribir Y marque la casilla para habilitarlo.

Como ves, 22 emojis no son suficientes. No se preocupe, también puede usar emojis populares en WordPress.

Los emoticonos son caracteres y secuencias Unicode que son compatibles con la mayoría de los dispositivos y aplicaciones. Si bien son muy similares a los emojis que acabamos de ver, no deben confundirse ya que estos últimos son más modernos y variados.

Usar emojis en WordPress es tan fácil como activarlo en el teclado del dispositivo que está usando, ya sea un teléfono inteligente o tableta, o en su escritorio.

• existe Windows 10 Simplemente presione la tecla de Windows y la tecla de período (Win +). Para mostrar el teclado virtual con todos los emojis disponibles.
• existe Mac OS X Presione Ctrl +⌘+ Barra espaciadora, tienes una tarjeta emoji.
• existe GNU / Linux Depende de cada distribución, pero si está usando Ubuntu en este artículo, ya tiene una empaquetada Aplicación para facilitarle Linux pueden...

Opcionalmente, también puede copiarlos directamente desde el siguiente sitio web. Unicode Y los incluimos en el documento de trabajo.

Aunque puedes ver muchos de ellos en el repositorio oficial Complemento para incrustar emojis en WordPressLa verdad es que ninguno de ellos funciona como se esperaba cuando Gutenberg está integrado como el editor principal de WordPress, por lo que no recomiendo usarlos.

Como no se actualizaban con frecuencia antes de que el editor cambiara en la versión 5.0, ahora solo te dan un dolor de cabeza cuando quieres usarlos con el editor de bloques. Al menos esa es la situación actual de Gutenberg.

Piense que cuantos más complementos guarde, mejor. Ya tienes una tarjeta emoji en tu teclado, ¿por qué usar otro complemento para saturar tu sitio web?

Cómo agregar íconos manualmente en WordPress

Es fácil agregar íconos a WordPress manualmente. Las fuentes hacen que el sistema sea adecuado para casi todas las bibliotecas de símbolos. A continuación, le mostraré cómo usar Font Awesome, después de todo, es una de las fuentes más utilizadas en WordPress.

Para agregar un símbolo de fuente Font Awesome, puede hacerlo enAgregue el siguiente código de la versión actual a su plantilla de tema (a través de header.php):

Todo esto está arreglado, pero no es la opción más adecuada.

Lo mejor que puede hacer es agregar la función al functions.php de su tema hijo. Para hacer esto, proceda de la siguiente manera:

1.Utilice el siguiente código para agregar la URL original al functions.php del tema hijo:

Esto se aplica a la versión 5.7.2. Te recomiendo echarle un vistazo En su propio sitio Font Awesome Utilice siempre la última versión.

Como ya te he dejado claro te recomiendo Tema infantil De esa manera, si sigue actualizando su tema creando un nuevo archivo functions.php, no lo perderá.

2. Seleccione el icono que desea utilizar. Iconos de la versión de la biblioteca está libre Fuentes impresionantesTenga en cuenta que cada símbolo tiene su propia clase CSS para que pueda ser reconocido.

3. Pegue el código para cada símbolo con la siguiente estructura en modo HTML:

• Se utiliza para los símbolos de la página de inicio.
• Por teléfono.
• Tomemos a Facebook, por ejemplo.

4. Recuerde que puede aplicar estilos cuando trabaje con fuentes. Por ejemplo, puede utilizar el siguiente código para crear un icono de página de inicio rojo de 50 píxeles:

Desde aquí puedes dejar volar tu imaginación. Por ejemplo, puede utilizar estos códigos para:

• Widget de tipo HTML.
• Cualquier publicación o publicación que use bloques de código o HTML personalizado.
• Menú de WordPress

El último caso puede ser el más especial.

llegar Agregar ícono al menú de WordPress Debe utilizar el código del icono seleccionado en la configuración del menú en lugar de la etiqueta de navegación como se muestra en la imagen a continuación. Para esto utilicé la opción de enlace personalizado:

Esto le dará el siguiente icono La familia En tu menú:

Complemento para agregar iconos a WordPress

Icono de menú Ese es uno de ellos Complemento de iconos para WordPress Agregar iconos al menú es aún más interesante. Primero, porque es muy fácil. En segundo lugar, porque incluye una amplia biblioteca de iconos que consta de Dashicons, Elusive Icons, Font Awesome, Foundation Icons, Genericons, Fontello y TI Icons. Además, también puede seleccionar imágenes y SVG de la biblioteca multimedia.

Una vez instalado y activado, el editor del menú del panel de WordPress verá algunos cambios. Primero, puede seleccionar la biblioteca de símbolos activa:

En segundo lugar, todas las opciones agregadas al menú incluyen un nuevo campo donde puede asignar cualquier icono:

Al seleccionar, puede definir los atributos del símbolo. Por ejemplo, si desea ver la etiqueta de navegación (texto en el menú), la posición, la orientación o el tamaño del icono:

Una vez que haya guardado el menú, puede disfrutar del hermoso menú de iconos en WordPress.

Si desea ver el impacto real, puede ver la simplicidad de todo el proceso en este video tutorial:

Si se trata de menús complejos y necesita un alto rendimiento, también puede utilizar esta función de icono Usando mega menús...

Mejor fuente

Si desea utilizar el icono de Font Awesome en cualquier área de WordPress, una de las mejores opciones es utilizar Mejor fuenteEste complemento agregará esta fuente de símbolo a su tema y le permitirá usarlo con el siguiente código abreviado útil:

[icon name=»home»]

También le permite crear combinaciones más complejas, a saber:

[icon name=»home» class=»2x spin border» unprefixed_class=»my-custom-class»]

Desafortunadamente, no está integrado en el editor de bloques de nivel de editor de párrafos, pero puede confiar en los bloques de código abreviado para usarlos.

Por otro lado, si todavía estás usando el editor clásico, encontrarás que combina un botón en TinyMCE, puedes agregar un ícono como un elemento más de tu trabajo.

Iconos gratuitos de WordPress: dónde encontrarlos

Aparte de lo anterior hay muchas bibliotecas de símbolos de WordPress. Fuentes impresionantes O desde el propio sistema Iconos de tablero... Algunas de las fuentes más populares de símbolos son:

• FontelloLe permite crear su propia biblioteca de símbolos personalizada utilizando una amplia variedad de fuentes.
• Símbolo de la lunaOfrece más de 5000 símbolos y su propia aplicación Font Maker.
• Tamaño de byte.Un proyecto con símbolos de iluminación adicionales.
• GenéricoCreado por Automattic, la empresa detrás de WordPress.com.
• Símbolo de fuente eleganteUn paquete ligero de iconos 360 creado por el equipo de desarrollo de Divi.
• base.283 iconos de moda

Sin embargo, tenga en cuenta que también puede utilizar imágenes, PNG o (mejor) SVG como iconos, puede utilizar servicios gratuitos como Monitor de iconosUtilice una licencia que requiera el nombre del autor. Icono plano O tipo premium recto Símbolos de búsqueda...

finalmente

Usar fuente Iconos de WordPress Esta es una excelente manera de obtener íconos de alta calidad con el máximo rendimiento para su sitio web. Mientras lees, las posibilidades de encontrar íconos atractivos son enormes. De hecho, uno de los riesgos más probables es que termines instalando una gran cantidad de fuentes de iconos en WordPress y solo unas pocas en cada serie.

Esto podría ser un problema de rendimiento que esté afectando la velocidad de carga de su sitio web. Para solucionar esto, sugiero dos cosas: Use Alojamiento de WordPress muy rápido con Cree su propia biblioteca de símbolos Utilice la herramienta que vio en el párrafo anterior.

La idea es combinar los símbolos exactos que vamos a utilizar y descartar el resto para que puedas estar absolutamente seguro de que estás Aprovecha al máximo tus íconos de WordPress...

¿Utiliza símbolos en su sitio web? ¿Cuál es tu biblioteca favorita? Compártelo con otros lectores en los comentarios.