5 conseils pour créer un thème WordPress prêt pour la rétine

Un thème WordPress est prêt pour la rétine s'il prend en compte la haute densité de pixels des affichages de la rétine et sert des images de taille appropriée pour ces affichages. Il y a quelques éléments à prendre en compte lors de la préparation d'un thème WordPress pour la rétine : 1. Utilisez des images haute résolution. Les écrans Retina ont une densité de pixels 2 ou 3 fois supérieure à celle d'un écran standard. Vos images doivent donc être deux ou trois fois plus grandes pour être nettes sur ces appareils. 2. Utilisez un design réactif. Une conception réactive garantira que votre thème s'affichera bien sur tous les appareils, y compris les écrans Retina. 3. Utilisez un plugin comme WP Retina 2x. Ce plugin générera automatiquement des versions haute résolution de vos images et les servira aux appareils Retina . 4. Optimisez vos images. Assurez-vous d'optimiser vos images pour des temps de chargement plus rapides. 5. Utilisez un plugin de mise en cache. Un plugin de mise en cache aidera à accélérer le chargement de vos pages sur tous les appareils, y compris les écrans Retina. En suivant ces conseils, vous pouvez vous assurer que votre thème WordPress est prêt pour la rétine.

Étant donné que le support Retina sera disponible pour nos thèmes WordPress dans les semaines à venir, je voulais partager avec vous la façon dont nous les avons créés. La rénovation de votre thème doublera la taille des appareils Retina (avec les mêmes dimensions) en rendant les images deux fois plus grandes (mais avec les mêmes dimensions). Pour afficher une image 100×200, le navigateur doit la compresser jusqu'à 100×400. Les images d'arrière-plan CSS et Sprite ne peuvent pas être remplacées par Retina.js car elles n'utilisent pas de balises HTML. Les icônes et les boutons doivent être mis à jour pour que votre site Web soit net et réactif sur un écran Retina. La documentation de Font Awesome est excellente et c'est l'une des bibliothèques d'icônes de polices les plus robustes. La majorité des icônes de police sont installées en téléchargeant simplement les fichiers et en ajoutant la déclaration @Font-face.

Vous pouvez également ajouter des icônes de police sympas telles que le logo Facebook à ce modèle, qui est évolutif et personnalisable. Le moyen le plus simple de créer un favicon prêt pour la rétine consiste à utiliser un simple script Java. Créez simplement un document Photoshop au format 32 × 32, ajoutez votre image et enregistrez-la au format png24 (avec transparence) à l'aide de Photoshop.

Comment puis-je rendre une image prête pour la rétine ?

Afin de rendre une image prête pour la rétine , vous devrez créer une version de l'image deux fois plus grande que l'original. Cela peut être fait dans n'importe quel logiciel de retouche d'image, tel que Photoshop. Une fois que vous avez créé la plus grande version de l'image, vous devrez l'enregistrer dans un fichier séparé. Lorsque vous téléchargez l'image sur votre site Web, vous devrez utiliser le code pour indiquer au navigateur de charger la version plus grande de l'image.

FooGallery peut être activé dans l'onglet Images pour afficher des images prêtes pour la rétine. Lorsque vous sélectionnez les tailles Retina et que vous cliquez sur Appliquer les valeurs par défaut à toutes les galeries, des images prêtes à être affichées au format Retina seront générées pour toutes les galeries existantes. Si vous ajoutez une nouvelle galerie, elle générera automatiquement des images de la taille de la rétine. Lorsque l'image FooGallery est affichée sur un écran normal ou Retina, le HTML de l'image est automatiquement optimisé pour s'afficher en 300*300 pixels. Si vous avez activé les tailles d'image Retina pour vos galeries, assurez-vous que toutes les images que vous afficherez dans FooGallery sont suffisamment grandes pour être affichées sur un appareil Retina. Par exemple, si vous souhaitez afficher clairement une image 600600 sur des appareils Retina bidimensionnels, vous devrez télécharger des images de galerie avec une résolution de 12001 200. Lorsque vous activez les paramètres de rétine 2x et 3x, vous pourrez créer trois versions de votre pouce.

Préparer votre site Web pour Retina

Lors de l'affichage d'un site Web prêt pour la rétine, l'image est affichée à une résolution plus élevée que sur un écran de définition standard sur un appareil haute définition. Cette résolution plus élevée permet une présentation plus détaillée de l'image, ce qui la rend plus facile à comprendre et à voir.
Si vous avez l'intention d'utiliser un logiciel prêt pour la rétine pour votre site Web, il est recommandé d'utiliser autant que possible des graphiques vectoriels évolutifs (SVG). Ce format graphique est basé sur XML et contient des images de haute qualité. Pour visualiser les images SVG, les fichiers XML ou les téléphones portables affichant ces fichiers sont accessibles via les navigateurs Internet.
Il est recommandé d'utiliser une image prête pour la rétine avant de l'utiliser. Vous pouvez y parvenir en utilisant une image de 1920 × 1920 pixels, appelée « 2x ». Étant donné que l'image restera sur le site Web à 640 pixels de large, vous augmentez la densité du pixel en utilisant une image deux fois plus grande.
Si vous utilisez une image qui n'est pas prête pour la rétine, optimisez-la pour l'afficher sur la rétine. Cela peut être accompli en utilisant une image de résolution 4x, également appelée «résolution 4x». Malgré la taille large de 1024 pixels du graphique, il apparaîtra toujours sur votre site car il est quatre fois plus grand.

Qu'est-ce qu'un thème WordPress prêt pour Retina ?

Un thème WordPress prêt pour la rétine est un thème qui a été conçu pour fonctionner avec des appareils dotés d'un écran rétine haute résolution . Cela signifie que le thème sera net et clair sur des appareils tels que l'iPhone et l'iPad. Les thèmes prêts pour la rétine deviennent de plus en plus populaires car de plus en plus de personnes utilisent des appareils rétine.

Veuillez trouver la liste ci-dessous si vous recherchez des thèmes WordPress réactifs ou prêts pour la rétine. Ces thèmes, dans l'ensemble, sont simples à utiliser, s'affichent bien sur les ordinateurs de bureau, les tablettes et les smartphones, et ne nécessitent pas beaucoup d'efforts de votre part. Vous pouvez utiliser n'importe quel constructeur de pages pour créer la mise en page de votre choix avec eux. Inovado, un thème WordPress prêt pour la rétine, est livré avec une pléthore d'options de personnalisation puissantes. Un autre thème WordPress premium est Superhero, qui est conçu pour les entrepreneurs et les startups. Ce thème WordPress est prêt pour la rétine et réactif, grâce à un système de grille propre. Wiz, un thème polyvalent, peut être utilisé par les entreprises de toutes tailles, les startups et les petites organisations.

Un personnalisateur de thème simplifie la configuration et la personnalisation du thème Pin Maker – Responsive WordPress Blog Theme . Ce thème WordPress a un contenu HTML5 / CSS3 et est basé sur Twitter Bootstrap. Il est prêt pour la rétine, compatible avec tous les navigateurs et entièrement réactif. Le thème Prothoma – Business WordPress peut être utilisé par une variété d'entreprises, y compris les agences numériques et les entreprises. Pin Auto Spa est un thème WordPress de détail automatique. Ce thème WordPress prêt pour la rétine est idéal pour les entreprises de lavage de voitures, les ateliers de réparation automobile et de mécanique, ainsi que les services automobiles. Legatus est un choix idéal pour les blogs, les magazines en ligne, les journaux en ligne et d'autres publications car il offre une conception réactive.

Activer les images Retina pour un site Web clair

Cliquez sur l'onglet "Apparence" après avoir installé le plugin dans le panneau d'administration de WordPress. Une option « Images Retina » se trouve dans la section « WP Retina 2x » de la page. Pour activer les images de la rétine, allez sur le bouton "Activer".

Comment ajouter une image Retina à WordPress ?

L'ajout d'une image rétine à WordPress est un processus en deux étapes : vous devez d'abord ajouter une image de résolution supérieure à votre bibliothèque multimédia, puis vous devez ajouter une ligne de code au fichier functions.php de votre thème. Pour ajouter une image haute résolution à votre médiathèque, téléchargez simplement une copie de votre image deux fois plus grande que votre image normale. Par exemple, si votre image normale est de 400 x 300 px, votre image de la rétine doit être de 800 x 600 px. Une fois que vous avez votre image rétine dans votre médiathèque, vous devez ajouter une ligne de code au fichier functions.php de votre thème. Cette ligne de code indiquera à WordPress de servir l'image de la rétine aux appareils de la rétine : add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); retourne $image; } Avec ce code en place, WordPress servira automatiquement l'image de la rétine à tout appareil de la rétine qui visite votre site.

Images de rétine WordPress

En supposant que vous vouliez des conseils sur la façon de créer des images de rétine pour WordPress : Lors de la création d'images pour votre site Web WordPress, assurez-vous de créer des versions deux fois plus grandes que vos images standard. Par exemple, si votre image standard mesure 400 pixels de large, créez une image rétine de 800 pixels de large. Nommez vos images en fonction de ce qu'elles sont, puis ajoutez « @2x » au nom du fichier d'image de la rétine. Ainsi, si votre image standard est nommée "logo.jpg", votre image rétine sera nommée "[email protected]". Assurez-vous de compresser vos images Retina afin qu'elles ne ralentissent pas votre site Web. C'est ça! En suivant ces conseils simples, vous pouvez vous assurer que vos images sont superbes sur tous les appareils, y compris les appareils Retina.

Si vous n'implémentez pas d'images Retina, votre site Web sera plus lent pour tous les utilisateurs. La zone des pixels est la même que dans une image standard, ce qui donne des images plus nettes et plus lumineuses. Lorsqu'un appareil moderne non Apple affiche l'image @2x, il la traite comme une image plus grande. Les images Retina sont générées à l'aide de WP Retina 2X, qui est le générateur d'images Retina le plus utilisé pour les sites WordPress. Le service fournit également des images régulières aux utilisateurs sans écran Retina. Comment savoir si une image est disponible sur un écran dédié si vous n'avez pas d'appareil Apple pour la tester ? Les outils de développement Chrome peuvent vous aider à le faire.

Graphiques vectoriels évolutifs - La meilleure façon de créer des images Retina pour votre site Web.

L'image de la rétine WordPress est une image haute résolution qui peut être vue sur un moniteur 4K, un ordinateur portable Windows 10 ou une tablette. Vous pouvez facilement créer une image rétine de votre site Web en utilisant des graphiques vectoriels évolutifs (SVG) dans la mesure du possible. Lorsqu'il s'agit d'optimiser les images pour les écrans Retina, vous pouvez les maximiser en utilisant une image de 1920 × 130 pixels de large qui a été optimisée.