¿En qué te podemos ayudar?

Si tienes un proyecto y estás estancado, cuéntanos que necesitas

Posicionamiento web

Mejoramos y aumentamos las visitas que proceden de buscadores

Más información

SEM

Trabajamos tus campañas SEM para mejorar tus conversiones.

Más información

Marketing de contenidos

Creamos y gestionamos tu campaña de contenidos web.

Más información

Aumenta tus ventas de manera exponencial gracias a una estrategia sólida

Cuéntanos que necesitas y seguro que podemos ayudarte.

Pedir presupuesto

Que opinan de nosotros

Gran trabajo

Hemos aumentado el tráfico a nuestra web en un 37% en tan sólo 2 meses de trabajo.

client
Marc Ordoñez

Tienda online de repuestos para vehículos

Visitas subiendo!

En poco más de 4 meses mis visitas han crecido más de un 50%, sólo trabajando la estructura del sitio

client
Vanesa Garci

Blog de recetas

Últimos artículos

Artículos de nuestro blog sobre marketing online

Cómo y dónde aprender el desarrollo de complementos de WordPress (creamos complementos)

Puede ser abrumador la primera vez que intentas ingresar al desarrollo de complementos de WordPress. Honestamente, una de las mejores formas de aprender es sumergirse y comenzar a programar. Sin embargo, esto es algo que no sucede de la noche a la mañana. Esté preparado para comprometerse e invertir algo de tiempo en aprender WordPress, PHP y React.

Dicho esto, tener algunos buenos recursos a mano puede ayudarlo a navegar por toda la locura y cortar el ruido más rápido. Mi hermano y yo desarrollamos complementos de WordPress a tiempo completo, por lo que estamos constantemente rebotando entre diferentes fuentes para acelerar nuestros flujos de trabajo.

Recursos de desarrollo de complementos de WordPress

A continuación se muestra una lista breve de los recursos de desarrollo de complementos de WordPress que utilizamos en nuestro trabajo diario.

Manual de complementos de WordPress

Siempre recomiendo comenzar con el Manual oficial de complementos de WordPress. Esta es una buena introducción y descripción general.

También querrá sumergirse en el Manual del editor de bloques si está creando un complemento para el Editor de bloques.

Códice de WordPress

El Codex de WordPress tiene una buena descripción general de cómo escribir un complemento y todo lo que implica.

Hacer WordPress Core

Asegúrese de revisar los estándares de codificación PHP cuando se trata del núcleo de WordPress.

WordPress.tv

WordPress.tv tiene excelentes videos de desarrollo de complementos que puede ver.

Intercambio de pila de desarrollo de WordPress

Hay un Stack Exchange solo para el desarrollo de WordPress. Este es un lugar donde puede encontrar respuestas y también hacer preguntas.

SitePoint

SitePoint tiene algunos buenos artículos centrados en el tema del desarrollo de complementos de WordPress.

Kinsta

Aquí hay un tutorial detallado sobre cómo publicar un complemento en el repositorio de WordPress.

Cursos de Gutenberg (editor de bloques)

Zac Gordon tiene los mejores cursos cuando se trata de aprender JavaScript y codificar para Gutenberg. Consulte JavaScript para WordPress.

Recursos adicionales

El Codex también tiene una lista de algunos recursos de desarrollo de complementos adicionales.

Marketing y venta de plugins de WordPress

Más allá del desarrollo, hay mucho más que aprender sobre marketing y venta de complementos de WordPress. Vea 17 cosas que hemos aprendido al crear y vender complementos de WordPress, tanto buenos como malos.

Resumen

Hay miles de otros artículos excelentes en la web sobre el desarrollo de complementos, pero recomiendo revisar primero todos los recursos anteriores.

Además, si tiene alguna pregunta sobre el desarrollo de complementos de WordPress, me complacerá responderlas y compartir cómo hacemos las cosas con nuestros propios complementos. No dude en dejarlos en los comentarios a continuación.

Cómo instalar fuentes sin acceso de administrador

Si trabaja en el ámbito del marketing, es posible que no siempre tenga acceso de administrador a su computadora. Sé que en uno de mis trabajos no lo sé. Ahora que tengo experiencia en TI y trabajo en varios trabajos de asistencia técnica, estoy totalmente de acuerdo con esta política. No lo hacen solo para molestarte. En pocas palabras, la gente es estúpida y esta política evita que la gente destruya sus computadoras.

Sin embargo, siempre hay formas de evitar estas cosas si no tiene tiempo para preguntarle al departamento de TI, por lo que le mostraré cómo instalar cualquier fuente en su PC sin tener derechos de administrador. A veces solo tienes que tener una determinada fuente, ya sea para un nuevo anuncio de FB o un banner de página principal. De hecho, se ha demostrado que determinadas fuentes pueden mejorar su tasa de conversión.

Instalar fuentes sin acceso de administrador

He probado esto en Windows 7, Windows 8 y Windows 10. Debería funcionar en Windows XP también.

Paso 1

Primero, debe descargar e instalar el software gratuito de la plataforma PortableApps.com. Puede descargarlo aquí: https://portableapps.com/download

Nota: No necesita acceso de administrador para esta parte. Pero en algunos escenarios raros, es posible que lo bloqueen hasta el punto en que ni siquiera pueda descargar nada. Si ese es el caso, lo siguiente no funcionará. Pero nuevamente, eso es bastante raro. Esto debería funcionar para el 99% de los usuarios.

Paso 2

Al instalar, elija «Seleccionar una ubicación personalizada …» (esto es necesario si no tiene acceso de administrador)

Ubicación personalizada de PortableApps.com

Paso 3

Luego, seleccione una ubicación para instalar que tenga permisos para modificar. Le sugiero que elija su escritorio o su carpeta «Mis documentos». En mi ejemplo, usaré mi escritorio.

carpeta de destino portableapps
Carpeta de destino de PortableApps.com

Paso 4

Una vez que lo tengas instalado y en ejecución, necesitamos crear una carpeta de «Fuentes» dentro de la carpeta de Datos (puede que ya exista):

C:UsersBrianDesktopPortableAppsPortableApps.comData
carpeta de fuentes portableapps
Carpeta de fuentes para PortableApps.com

Paso 5

Ahora copie las fuentes personalizadas que desea usar en la carpeta «Fuentes» que acaba de crear.

Paso 6

Ahora cierre y reinicie la plataforma PortableApps.

salir de la plataforma portableapps
Salir de la plataforma PortableApps.com

Las fuentes ahora deberían poder utilizarse en otros programas como Photoshop o Word.

¡Y eso es!

Alternativa

¿Tiene problemas para que funcione la solución anterior? También puede probar la versión gratuita de FontBase. Al igual que con PortableApps, deberá asegurarse de dejarlo en ejecución cuando desee utilizar las fuentes.

Resumen

Ahora puede instalar cualquier fuente que desee sin molestar a TI y sin tener acceso de administrador. Como siempre, siéntase libre de comentar a continuación y agradezco enormemente cualquier participación.

Pasar a una pila de fuentes del sistema en WordPress (cómo y por qué)

Soy un gran fanático del rendimiento web. Pero tampoco creo que deba o tenga que comprometer el diseño. Siempre hay un buen equilibrio en el medio. En 2017, estaba en el blog de GitHub y estaba investigando su fuente. Fue muy fácil de leer. Así que indagué en las propiedades con Chrome Devtools y vi que estaban usando un pila de fuentes del sistema.

He estado usando fuentes del sistema durante años y las amo. Así que hoy quiero mostrarte cómo usar una pila de fuentes del sistema en tu sitio de WordPress.

¿Qué es una pila de fuentes del sistema?

Hay diferentes tipos de fuentes para elegir cuando se trata de un sitio web. Prácticamente tienes cuatro opciones diferentes:

  • Fuentes seguras para la web: Gratis y sin tiempo de descarga requerido por el navegador, pero por lo general parecen anticuados y, por lo tanto, no se usan mucho. Consulte una lista de fuentes seguras para la web.
  • Fuentes web: se ven hermosas, pero requieren que el navegador las descargue. Tenga disponibles opciones gratuitas y premium. Se suma al peso total de la página de su sitio web. Sin embargo, se pueden servir desde CDN en caché. Los proveedores incluyen Google, Adobe Fonts (TypeKit), etc.
  • Alojar fuentes web localmente: Opciones gratuitas y premium disponibles. Aún requiere tiempo de descarga, puede aprovechar una única conexión HTTP / 2 en CDN en caché.
  • Fuentes del sistema: Gratis, se ven bastante bien ya que coinciden con el sistema operativo, ¡y no se requiere tiempo de descarga! Son utilizados por GitHub, Bootstrap, Medium, Ghost, Booking.com (lea la historia de fuentes del sistema) e incluso su panel de WordPress. En mi opinión personal, las fuentes del sistema se ven un poco mejor en macOS que en Windows.

Las fuentes del sistema no son nada nuevo. De hecho, Medium los ha estado usando desde 2015. Ellos siéntete como tu sistema operativo porque están usando fuentes nativas. Muchos de los sistemas operativos modernos eligen las fuentes con mucha sabiduría y todos tienen un aspecto y una sensación muy elegantes. No es como volver por defecto a una fuente segura para la web de Arial o Times New Roman. Créame, nadie quiere ver Times New Roman en un sitio web.

Y lo mejor de todo es que las fuentes del sistema funcionan igual que las fuentes seguras para la web, ya que no requiere tiempo de descarga por el navegador. Esto puede ayudar a reducir el peso total de la página en su sitio web. En abril de 2020, las fuentes web representan en promedio alrededor del 6.2% del peso total de un sitio web. Si bien esto no es enorme, recuerde que cada pequeña optimización que realice se suma a un sitio web rápido.

¿Existe alguna desventaja en el uso de fuentes del sistema? Bueno, una sería que dependen de que los navegadores funcionen correctamente. Google realmente rompió las fuentes del sistema de peso en negrita en Chrome 81 en macOS. Afortunadamente, arreglaron esto en Chrome 83. Pero hubo un corto período de tiempo en que cualquier sitio web que usara una fuente del sistema se veía un poco extraño.

Pila de fuentes del sistema CSS

Con la propiedad font-family con fuentes web, normalmente tiene su fuente principal y una o dos fuentes alternativas. Con las fuentes del sistema, debe incluir todos los diferentes sistemas operativos y, por lo tanto, debe apilar bastantes fuentes más. Por eso se denomina «pila de fuentes del sistema».

Por ejemplo, así es como CSS podría aparecer con una fuente web.

font-family: "Open Sans","Helvetica Neue",sans-serif;

Y así es como se vería una pila de fuentes del sistema.

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

¿Sabía que su panel de WordPress utiliza una pila de fuentes del sistema? Esto es lo que están usando.

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

CSS-Tricks también tiene un método alternativo sobre cómo aplicar fuentes del sistema usando @ font-face.

Hoja de referencia de pila de fuentes del sistema

Entonces aquí es donde debe elegir qué configuración desea. Aquí hay una lista de las fuentes que van con cada sistema operativo. Nota: Esto cambia con el tiempo, por lo que es posible que deba volver a visitar sus fuentes a medida que surgen nuevos sistemas operativos. Me aseguraré de mantener esta lista actualizada.

Fuente del sistema SO
-sistema de manzana (San Francisco) iOS Safari, macOS Safari, macOS Firefox
system-ui macOS Chrome, Windows Chrome (nuevas versiones)
BlinkMacSystemFont (San Francisco) macOS Chrome
IU de Segoe Windows Vista y más reciente
Tahoma Windows XP
Roboto Android, sistema operativo Chrome
Oxígeno / sin oxígeno KDE
Fira Sans Firefox OS
Droid Sans Android (versiones antiguas)
Ubuntu Ubuntu
Cantarell GNOMO
Helvetica Neue versiones de macOS <10.11
Arial Todos
sans-serif Todos

Cómo implementar una pila de fuentes del sistema

Ahora estoy usando una pila de fuentes del sistema aquí en woorkup.com. Siento que finalmente he encontrado lo mejor de ambos mundos. Te explicaré cómo lo hice.

Opción 1: use el tema de WordPress GeneratePress

¿Quieres que esto sea muy fácil? Simplemente muévase al tema GeneratePress, que es lo que uso en todos mis sitios web. En el personalizador, en Tipografía, simplemente puede seleccionar «Pila del sistema». ¡Y eso es!

Generar pila de sistema de temas de prensa

Opción 2: agregar pila de fuentes del sistema con CSS

Si está utilizando otro WordPress, puede pasar fácilmente a una pila de fuentes del sistema con un poco de CSS.

Paso 1

En WordPress, deberá cambiar el CSS de su familia de fuentes. Puede usar el personalizador de WordPress para agregar el código, en «CSS adicional».

Agregue CSS de fuente del sistema en el personalizador de WordPress

Paso 2

Ingrese el siguiente código. Esto puede variar según el tema, pero para la mayoría esto debería anular todo. Estoy usando la misma pila de fuentes del sistema que GithHub, excepto que estoy agregando «system-ui» ya que las versiones más nuevas de Chrome lo admiten. Recuerde, se usarán en el orden en que aparecen en la pila.

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Dependiendo de su tema, es posible que deba agregar etiquetas de párrafo para el contenido del cuerpo. Entonces sería esto:

body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Paso 3

También querrá deshabilitar cualquier fuente de terceros, como Google Fonts, que haya cargado desde su tema de WordPress. De nuevo, esto puede variar, ya que cada desarrollador incluye fuentes de una manera diferente. Pero muchos temas ahora tienen una manera fácil de activar o desactivar las fuentes de Google.

Si está utilizando un tema predeterminado de WordPress, puede usar fácilmente el complemento gratuito Disable Google Fonts. O también puede desactivar las fuentes de Google en nuestro complemento Perfmatters.

Pruebas de velocidad antes y después

Y, por supuesto, no pude resistir. Aquí están las pruebas de velocidad antes y después. Cada prueba se ejecutó 5 veces y se tomó un promedio.

Prueba de velocidad antes

Aquí está la prueba de velocidad anterior, cuando cargaba las fuentes de Google.

antes de las fuentes del sistema
Prueba de velocidad con fuentes de Google

Prueba de velocidad después

Aquí está la prueba de velocidad después, usando la pila de fuentes de mi sistema. Como puede ver, reduje el peso de toda la página en aproximadamente 60 KB y eliminé tres solicitudes. Una a fonts.googleapis.com y luego 2 descargas para diferentes versiones de Roboto con peso de fuente. los la pila de fuentes del sistema fue aproximadamente un 6% más rápida que usar fuentes de Google.

Prueba de velocidad con pila de fuentes del sistema
Prueba de velocidad con pila de fuentes del sistema

Conozco muchos sitios que usan de 4 a 5 pesos o estilos de fuente diferentes y, a veces, incluso de 2 a 3 fuentes de Google diferentes. Así que potencialmente podrías ver mejoras aún mayores que yo.

También moví nuestro sitio de WordPress wpcoupons.io a las fuentes del sistema y obtuve excelentes resultados, consulte esta prueba de velocidad a continuación.

prueba de velocidad de fuentes del sistema
Sitio de EDD con fuentes del sistema

Suavizado de fuentes

El suavizado de fuentes realmente se reduce a sus preferencias personales. Cuando apliques antialiasing, su fuente será un poco más delgada y más clara. No lo estoy usando en este sitio porque prefiero la fuente un poco más gruesa, creo que se siente un poco más cálida. Pero puedes experimentar con ambos para ver cuál te gusta.

Puedes agregar esto al cuerpo.

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Resumen

Las fuentes del sistema pueden ser una excelente alternativa a las fuentes web y las fuentes seguras para la web. Todavía me gusta mucho el aspecto de mi fuente, y ahora sé que no causa ninguna carga para los usuarios. Aunque muchas veces las fuentes de Google se almacenan en caché localmente, sigue siendo parte del peso general de la página.

¿Tienes curiosidad por saber cuáles son tus pensamientos? ¿Ha utilizado una pila de fuentes del sistema con WordPress? Si es así, házmelo saber a continuación.