5 consejos para crear un tema de WordPress listo para retina

Un tema de WordPress está listo para la retina si tiene en cuenta la alta densidad de píxeles de las pantallas retina y sirve imágenes que tienen el tamaño adecuado para estas pantallas. Hay algunas cosas a tener en cuenta al hacer que un tema de WordPress esté listo para la retina: 1. Use imágenes de alta resolución. Las pantallas Retina tienen una densidad de píxeles de 2 o 3 veces la de una pantalla estándar, por lo que sus imágenes deben ser dos o tres veces más grandes para verse nítidas en estos dispositivos. 2. Usa un diseño receptivo. Un diseño receptivo garantizará que su tema se vea bien en todos los dispositivos, incluidas las pantallas retina. 3. Use un complemento como WP Retina 2x. Este complemento generará automáticamente versiones de alta resolución de sus imágenes y las enviará a los dispositivos retina . 4. Optimiza tus imágenes. Asegúrate de optimizar tus imágenes para tiempos de carga más rápidos. 5. Use un complemento de almacenamiento en caché. Un complemento de almacenamiento en caché ayudará a acelerar la carga de sus páginas en todos los dispositivos, incluidas las pantallas retina. Siguiendo estos consejos, puede asegurarse de que su tema de WordPress esté listo para retina.

Debido a que el soporte Retina estará disponible para nuestros temas de WordPress en las próximas semanas, quería compartir con ustedes cómo los creamos. La renovación de su tema duplicará el tamaño de los dispositivos Retina (con las mismas dimensiones) al representar imágenes del doble del tamaño (pero con las mismas dimensiones). Para mostrar una imagen de 100×200, el navegador debe comprimirla a 100×400. Las imágenes de fondo CSS y Sprite no se pueden reemplazar con Retina.js porque no usan etiquetas HTML. Los iconos y botones deben actualizarse para que su sitio web se vea nítido y receptivo en una pantalla retina. La documentación de Font Awesome es excelente y es una de las bibliotecas de iconos de fuentes más sólidas. La mayoría de los íconos de fuentes se instalan simplemente cargando los archivos y agregando la declaración @Font-face.

También puede agregar iconos de fuentes geniales, como el logotipo de Facebook, a esta plantilla, que es escalable y personalizable. La forma más sencilla de hacer un favicon listo para la retina es usar un script Java simple. Simplemente cree un documento de Photoshop de 32 × 32, agregue su imagen y guárdela como png24 (con transparencia) usando Photoshop.

¿Cómo preparo una imagen para retina?

Para hacer que una imagen esté lista para la retina , deberá crear una versión de la imagen que tenga el doble del tamaño del original. Esto se puede hacer en cualquier software de edición de imágenes, como Photoshop. Una vez que haya creado la versión más grande de la imagen, deberá guardarla como un archivo separado. Cuando cargue la imagen en su sitio web, deberá usar el código para indicarle al navegador que cargue la versión más grande de la imagen.

FooGallery se puede habilitar en la pestaña Imágenes para mostrar imágenes listas para retina. Al seleccionar los tamaños de Retina y hacer clic en Aplicar valores predeterminados a todas las galerías, se generarán imágenes listas para mostrar en formato Retina para todas las galerías existentes. Si agrega una nueva galería, generará automáticamente imágenes del tamaño de una retina. Cuando la imagen de FooGallery se muestra en una pantalla normal o Retina, el HTML de la imagen se optimiza automáticamente para mostrarse como 300*300 píxeles. Si ha habilitado los tamaños de imagen Retina para sus galerías, asegúrese de que las imágenes que muestre en FooGallery sean lo suficientemente grandes para mostrarse en un dispositivo Retina. Por ejemplo, si desea mostrar una imagen 600600 claramente en dispositivos retina bidimensionales, deberá cargar imágenes de la galería con una resolución de 12001,200. Cuando habilite las configuraciones de retina 2x y 3x, podrá crear tres versiones de su pulgar.

Hacer que su sitio web esté listo para la retina

Al ver un sitio web compatible con retina, la imagen se muestra a una resolución más alta que en una pantalla de definición estándar en un dispositivo de alta definición. Esta resolución más alta permite una presentación más detallada de la imagen, haciéndola más fácil de entender y ver.
Si tiene la intención de utilizar un software compatible con retina para su sitio web, se recomienda que utilice gráficos vectoriales escalables (SVG) tanto como sea posible. Este formato gráfico está basado en XML y tiene imágenes de alta calidad. Para ver imágenes SVG, archivos XML o teléfonos móviles que muestren esos archivos, se puede acceder a través de navegadores de Internet.
Se recomienda que utilice una imagen que esté lista para la retina antes de usarla. Puede lograr esto utilizando una imagen de 1920 × 1920 píxeles, que es lo que se conoce como "2x". Debido a que la imagen permanecerá en el sitio web con un ancho de 640 píxeles, está aumentando la densidad del píxel al usar una imagen que tiene el doble de tamaño.
Si usa una imagen que no está lista para la retina, optimícela para mostrarla en la retina. Esto se puede lograr mediante el uso de una imagen de resolución 4x, también conocida como "resolución 4x". A pesar del tamaño de 1024 píxeles de ancho del gráfico, seguirá apareciendo en su sitio porque es cuatro veces más grande.

¿Qué es el tema de WordPress listo para retina?

Un tema de WordPress listo para retina es un tema que ha sido diseñado para funcionar con dispositivos que tienen una pantalla retina de alta resolución . Esto significa que el tema se verá nítido y claro en dispositivos como el iPhone y el iPad. Los temas listos para retina se están volviendo cada vez más populares a medida que más y más personas usan dispositivos retina.

Encuentre la lista a continuación si está buscando temas de WordPress receptivos o listos para retina. Estos temas, en general, son fáciles de usar, se ven bien en computadoras de escritorio, tabletas y teléfonos inteligentes, y no requieren mucho esfuerzo de su parte. Puede usar cualquier creador de páginas que desee para crear cualquier diseño que desee con ellos. Inovado, un tema de WordPress listo para retina, viene con una plétora de poderosas opciones de personalización. Otro tema premium de WordPress es Superhero, que está diseñado para emprendedores y nuevas empresas. Este tema de WordPress está listo para retina y es receptivo, gracias a un sistema de cuadrícula limpio. Wiz, un tema versátil, puede ser utilizado por empresas de todos los tamaños, nuevas empresas y organizaciones pequeñas.

Un personalizador de temas simplifica la configuración y personalización del Creador de pines: tema de blog adaptable de WordPress . Este tema de WordPress tiene contenido HTML5/CSS3 y está basado en Twitter Bootstrap. Es retina-ready, compatible con varios navegadores y totalmente sensible. El tema Prothoma - Business WordPress puede ser utilizado por una variedad de empresas, incluidas las agencias digitales y las empresas. Pin Auto Spa es un tema de WordPress para detalles automáticos. Este tema de WordPress listo para retina es ideal para empresas de lavado de autos, talleres de reparación de automóviles y mecánicos, así como para servicios de automóviles. Legatus es una opción ideal para blogs, revistas en línea, periódicos en línea y otras publicaciones porque proporciona un diseño receptivo.

Habilite las imágenes Retina para un sitio web claro

Haga clic en la pestaña "Apariencia" después de instalar el complemento en el panel de administración de WordPress. La opción " Imágenes Retina " se encuentra en la sección "WP Retina 2x" de la página. Para habilitar las imágenes de la retina, vaya al botón "Habilitar".

¿Cómo agrego una imagen Retina a WordPress?

Agregar una imagen de retina a WordPress es un proceso de dos pasos: primero, debe agregar una imagen de mayor resolución a su biblioteca de medios y luego debe agregar una línea de código al archivo functions.php de su tema. Para agregar una imagen de mayor resolución a su biblioteca de medios, simplemente cargue una copia de su imagen que tenga el doble del tamaño de su imagen normal. Por ejemplo, si su imagen normal es de 400x300px, su imagen de retina debería ser de 800x600px. Una vez que tenga su imagen de retina en su biblioteca de medios, debe agregar una línea de código al archivo functions.php de su tema. Esta línea de código le indicará a WordPress que envíe la imagen retina a los dispositivos retina: add_filter('wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src ($imagen) { $imagen[0] = str_replace('.jpg', '@2x.jpg', $imagen[0]); devolver $imagen; } Con este código en su lugar, WordPress entregará automáticamente la imagen retina a cualquier dispositivo retina que visite su sitio.

Imágenes retina de WordPress

Suponiendo que desea consejos sobre cómo crear imágenes de retina para WordPress: al crear imágenes para su sitio web de WordPress, asegúrese de crear versiones que sean el doble de grandes que sus imágenes estándar. Por ejemplo, si su imagen estándar tiene un ancho de 400 px, cree una imagen retina de 800 px de ancho. Asigne un nombre a sus imágenes de acuerdo con lo que son y luego agregue "@2x" al nombre del archivo de imagen de la retina. Entonces, si su imagen estándar se llama "logo.jpg", su imagen de retina se llamaría "[email protected]". Asegúrese de comprimir las imágenes de su retina para que no ralenticen su sitio web. ¡Eso es todo! Siguiendo estos sencillos consejos, puede asegurarse de que sus imágenes se vean bien en todos los dispositivos, incluidos los dispositivos de retina.

Si no implementas imágenes Retina, tu sitio web será más lento para todos los usuarios. El área de los píxeles es la misma que en una imagen estándar, lo que da como resultado imágenes más nítidas y brillantes. Cuando un dispositivo moderno que no es de Apple muestra la imagen @2x, la trata como una imagen más grande. Las imágenes Retina se generan utilizando WP Retina 2X, que es el generador de imágenes Retina más utilizado para sitios de WordPress. El servicio también proporciona imágenes regulares para usuarios sin pantallas Retina. ¿Cómo sabe si una imagen está disponible en una pantalla dedicada si no tiene un dispositivo Apple para probarla? Las herramientas de desarrollo de Chrome pueden ayudarlo a hacerlo.

Gráficos vectoriales escalables: la mejor manera de crear imágenes Retina para su sitio web.

La imagen retina de WordPress es una imagen de alta resolución que se puede ver en un monitor 4K, una computadora portátil con Windows 10 o una tableta. Puede crear fácilmente una imagen de retina de su sitio web mediante el uso de gráficos vectoriales escalables (SVG) siempre que sea posible. Cuando se trata de optimizar imágenes para pantallas retina, puede maximizarlas utilizando una imagen de 1920 × 130 píxeles de ancho que ha sido optimizada.