Share
Avec tous les écrans haute résolution disponibles aujourd'hui, il est logique que votre thème WordPress inclue la prise en charge de l'affichage d'images de qualité supérieure. Cela signifie ajouter des fonctionnalités pour créer ces images par dessus une manière de charger celle qui convient en fonction de la résolution de l'écran de l'utilisateur final..
Il existe de nombreux plugins disponibles pour les utilisateurs WordPress habituels qui ajouteront un support Retina à leur site. Faire une recherche dans le répertoire du plugin WordPress fait apparaître ceux-ci parmi les cinq premiers:
Chaque plugin aborde différemment l'ajout de la prise en charge de la rétine, bien qu'ils utilisent tous les mêmes composants: un script de détection et une fonction de création d'image compatible avec la rétine. Pour les développeurs souhaitant ajouter cette fonctionnalité directement à leurs thèmes, la première chose à faire est d'inclure le fichier JS approprié pour détecter la résolution de l'écran de l'utilisateur..
Cela n'a de sens que d'afficher une image de meilleure qualité si l'utilisateur final utilise un écran Retina. Pour nos besoins, le meilleur moyen est d'utiliser JavaScript. J'aime utiliser un script appelé retina.js par Imulus. Il ne pèse que 4 Ko et ajoute toutes les fonctionnalités frontales dont vous avez besoin pour détecter un écran Retina et charger la bonne image..
Copier sur le retina.js déposer dans votre thème / js dossier. Il doit être au bon endroit pour pouvoir le mettre en file d'attente..
Ajouter ce qui suit à votre thème functions.php fichier:
Accentsconagua
add_action ('wp_enqueue_scripts', 'retina_support_enqueue_scripts'); / ** * Mise en file d'attente retina.js * * Cette fonction est associée au crochet d'action 'wp_enqueue_scripts'. * / function retina_support_enqueue_scripts () wp_enqueue_script ('retina_js', get_template_directory_uri (). '/js/retina.js', ",", true); C'est vraiment tout ce dont vous avez besoin pour la détection. Vient ensuite les fonctions permettant de créer des images de qualité supérieure.
Vous devez vous assurer que chaque fois qu'une image est téléchargée, une version de qualité supérieure est créée et stockée avec @ 2x ajouté au nom de fichier. Le script de détection recherchera ce suffixe afin de charger la version prête pour la rétine de l'image si nécessaire.
Pour vous assurer qu'une image prête pour la rétine est créée automatiquement à chaque fois qu'une image est téléchargée, vous devez vous connecter au filtre WordPress approprié. Le bon à utiliser est wp_generate_attachment_metadata.
Cela va dans votre thème functions.php fichier:
add_filter ('wp_generate_attachment_metadata', 'retina_support_attachment_meta', 10, 2); / ** * Retina images * * Cette fonction est associée au crochet de filtre 'wp_generate_attachment_metadata'. * / function retina_support_attachment_meta ($ metadata, $ attachment_id) foreach ($ métadonnées as $ key => $ valeur) if (is_array ($ value)) foreach ($ valeur as $ image => $ attr) if (is_array ($ attr)) retina_support_create_images (get_attached_file ($ attachment_id), $ attr ['width'], $ attr ['height'], true); return $ metadata; La fonction ci-dessus vérifie si le fichier téléchargé est une image. Si c'est le cas, il le traite en utilisant le retina_support_create_images () une fonction.
Avec tout en place pour vérifier si une image a été téléchargée, vous devez disposer d'une fonction permettant de traiter et de créer une version de qualité supérieure compatible avec la rétine..
Cela doit aussi aller dans votre thème functions.php fichier:
/ ** * Créer des images prêtes pour la rétine * * Référencé via retina_support_attachment_meta (). * / function retina_support_create_images ($ file, $ width, $ height, $ crop = false) if ($ width || $ height) $ resized_file = wp_get_image_editor ($ file); if (! is_wp_error ($ fichier_dimensionné)) $ fichier = $ fichier_dimensionné-> nom_fichier_générateur ($ largeur. 'x'. $ hauteur. '@ 2x'); $ resized_file-> resize ($ width * 2, $ height * 2, $ crop); $ resized_file-> save ($ nomfichier); $ info = $ resized_file-> get_size (); return array ('file' => wp_basename ($ filename), 'width' => $ info ['width'], 'height' => $ info ['height'],); return false; Maintenant, une nouvelle image prête pour la rétine sera créée au double de la taille de l'original. Plus @ 2x sera ajouté au nom du fichier pour que le script de détection puisse fonctionner correctement sur le serveur frontal.
C'est à peu près tout ce dont vous avez besoin, bien que l'ajout d'une fonction supplémentaire soit une bonne idée pour aider à nettoyer les choses chaque fois qu'une image est supprimée.
Si un utilisateur supprime une image de la médiathèque, vous pouvez également supprimer toutes les images supplémentaires prêtes pour la rétine qui ont également été créées..
Placez ce dernier bloc de code dans celui de votre thème functions.php fichier:
add_filter ('delete_attachment', 'delete_retina_support_images'); / ** * Supprimer les images prêtes pour la rétine * * Cette fonction est associée au crochet de filtre 'delete_attachment'. * / function delete_retina_support_images ($ attachment_id) $ meta = wp_get_attachment_metadata ($ attachment_id); $ upload_dir = wp_upload_dir (); $ path = pathinfo ($ meta ['fichier']); foreach ($ méta as $ clé => valeur $) if ('tailles' === $ clé) foreach (valeur $ en tant que $ tailles => $ taille) $ nom_fichier_original = $ upload_dir ['basedir']. '/' $ path ['dirname']. '/' $ size ['file']; $ retina_filename = substr_replace ($ original_filename, '@ 2x.', strrpos ($ original_filename, '.'), strlen ('.')); if (file_exists ($ retina_filename)) unlink ($ retina_filename); Il ne faut pas beaucoup pour que votre thème soit prêt pour le support de la rétine. Avec seulement quelques fonctions et un fichier JavaScript supplémentaire, vos utilisateurs peuvent s’assurer que leurs images auront toujours une belle apparence sur tous les types d’écrans..
Si vous avez des commentaires ou des remarques sur tout ce que vous avez lu ci-dessus, n'hésitez pas à en discuter ci-dessous.
