Ajouter et utiliser des tailles d’images WordPress personnalisées: le meilleur guide de tous les temps

Mise à jour le 04 \/ 04 \/ 2017: ajout d’une section décrivant en détail comment fonctionne le système d’images de réponse dans WordPress 4.4 +, et comment la taille de l’image personnalisée de WordPress interagit avec le système. J’aime vraiment définir des tailles d’images personnalisées dans WordPress. Le système offre une fonctionnalité et une flexibilité puissantes pour créer un site Web beau, facile à gérer et à exécuter, et nous sommes désolés d’avoir des estimations élevées. Par exemple, le nouveau thème wpshout a deux tailles d’image au premier plan: une grande (au début de cet article) et une petite, située au milieu de la page d’accueil. Nous utilisons également des tailles d’images personnalisées pour nous assurer que les images dans le corps de nos messages ne sont pas trop grandes pour l’espace qu’elles occupent.
Le redimensionnement des images est très compliqué et WordPress peut tout gérer pour nous immédiatement. Imaginez que si nous faisions tout l’auto – réglage et l’optimisation dans un logiciel comme Photoshop, il dévorerait notre entreprise. L’image serait un luxe inaccessible. Avec cette présentation inspirante, voyons comment utiliser wordpress pour personnaliser la taille de l’image! Une dernière chose avant de commencer. Si vous souhaitez apprendre le développement de WordPress, nous avons écrit les meilleurs guides: apprenez les meilleures façons de développer WordPress et commencez dès aujourd’hui! Le lancement et l’exécution sont notre cours complet « apprendre le développement WordPress ». Maintenant, il a publié sa troisième mise à jour et extension pour aider des centaines de clients heureux à apprendre rapidement, intelligemment et complètement le développement de WordPress.
« Je pense que toute personne intéressée à apprendre le développement de WordPress a besoin de ce cours. Regarder une vidéo, c’est comme allumer une lampe », ont – ils dit. Jason, développeur WordPress \
Oui, j’ai presque toujours essayé de manquer d’explications claires sur pourquoi WordPress fait les choses d’une manière ou d’une autre ou comment les choses fonctionnent ensemble. Caroline freelance de WordPress lance maintenant un guide très rapide pour redimensionner les images WordPress chaque fois qu’une image est téléchargée, WordPress génère une version redimensionnée de l’image pour chaque taille d’image personnalisée.
Chaque fois que vous téléchargez une image sur un site WordPress, WordPress génère automatiquement une version redimensionnée de l’image en fonction de la taille de chaque image personnalisée enregistrée par votre thème (ou thème principal si vous êtes sur un sous – thème). Dans le système de fichiers WordPress où se trouvent ces fichiers Image, il en va de même pour: Tu vois le pouvoir de ça? Conservez l’image originale que vous avez téléchargée, dans ce cas plus de 1 Mo, trop grande pour être utilisée sur le site. Mais vous pouvez également utiliser la même version d’image générée, redimensionnée et recadrée automatiquement sur le site. L’image s’adaptera à l’espace qu’elle devrait contenir et ne sera pas un fichier plus grand qu’il ne devrait l’être. WordPress s’occupera automatiquement de tout.
Un cas particulier est l’image de premier plan que vous définissez comme \
\
Comme WordPress est compatible avec les versions précédentes, l’image au premier plan commence, souvent appelée \
Par conséquent, vous avez une fonction avec des noms confus, \ u post _ Thumbnail (), qui est en fait destinée à afficher l’image de premier plan. Vous avez aussi une fonction très étrange set _ Post thumbnail size () qui définit la taille par défaut de la vignette et de l’image de premier plan sur le site. Mon conseil est d’utiliser complètement set _ Post thumbnail size (). Mon conseil est de ne pas utiliser du tout set _ Post thumbnail size (); Ne l’utilisez pas. Accrochez une image de la taille d’un \
Une taille d’image personnalisée pour WordPress a été ajoutée à la fonction. Php dans cette section, nous allons passer en revue le Code principal pour gérer les images de premier plan et la taille des images dans WordPress. Voici un exemple de code que nous utiliserons; Il entre dans la fonction. PHP pour le thème actif: \/ \/ assurez – vous que le support de thème d’ajout d’images en vedette (\
Tu parles.) Nous appellerons toujours _ Post thumbnail (): le nom de la taille d’image personnalisée à utiliser avec au moins un paramètre. Comme nous ne voulons pas obtenir la vignette réelle 150px X 150px comme nous l’avons discuté ci – dessus, nous appellerons toujours \ \ u post _ Thumbnail (): le nom de la taille d’image personnalisée que nous voulons utiliser avec au moins un paramètre.
Comme indiqué ci – dessous (ce code appartient à un modèle de page WordPress tel que index.php ou single.php): \/ \/ si (have _ posts (): while (have posts (): the Post (): the Post (), la boucle est lancée \/ \/ Ça pourrait être n’importe quoi. Ici, nous allons faire comme si nous voulions le titre du billet, c’est – à – dire _ Title () \/ Afficher l’image en vedette du message et afficher la vignette (grande image en vedette) dans la taille de l’image en vedette \/ \/ Continuez tout le reste de la boucle… Bien joué! Vous placez l’image sur la page au premier plan du message avec une taille d’image définie. Il y a plus à apprendre ici, mais c’est assez pour commencer. Si vous avez d’autres questions sur d’autres sujets de fonctions qui peuvent être ajoutés à la vignette _ post miniature (), consultez Codex. Régénérer les vignettes exécuter régénérer les vignettes chaque fois que vous changez la taille de l’image sur le site. L’un de mes cinq plugins WordPress préférés est de régénérer les vignettes. Il fait un sale travail de s’assurer que chaque image que vous téléchargez a une version adaptée à toutes les tailles d’image que vous déclarez. Lancez – le chaque fois que vous changez la taille d’une image sur votre site, sinon l’ancienne image devient très intéressante. Regardons de plus près les paramètres de la fonction add _ Image Size (). Si vous remarquez que certains appels à une fonction ont un quatrième argument, défini à True, tandis que d’autres n’ont que deux ou trois arguments. De toute évidence, c’est très important pour l’apparence des images et fait partie de la fonctionnalité étonnante de wordpress pour personnaliser la taille des images. Marcher avec des orteils hauts
Nous terminerons cette discussion en examinant les deux types de clips disponibles: les clips doux et les clips durs. Le terme le plus précis pour « récolte douce » est « redimensionner ». La « coupe douce » est en fait un terme inapproprié: le terme le plus précis pourrait être « redimensionner ». C’est le paramètre par défaut pour WordPress: implémenter Soft cut en omettant le quatrième paramètre de la fonction dans add _ Image Size (), ou en définissant Post thumbnail size (), si vous décidez de l’utiliser, ou en définissant ce paramètre à False. Quoi qu’il en soit, Soft cut doit savoir qu’il maintient l’échelle de l’image. En d’autres termes, il Redimensionne et visualise l’image entière en fonction de la taille spécifiée, mais ne change pas la forme de l’image ou ne coupe pas un peu. Cela fait de soft Cutting un paramètre intelligent par défaut pour la taille de l’image que vous souhaitez utiliser dans les messages et le corps de la page. En tant que point de référence, la culture douce peut fonctionner de deux façons: en utilisant une ou les deux dimensions spécifiées. La taille spécifiée correspond au code ci – dessus pour la taille de l’image moyenne – Large – moyenne – haute. Si vous coupez légèrement et ne spécifiez qu’une seule taille (largeur ou hauteur plus \
Par exemple, 60 pixels x 100 pixels. Les trois images suivantes montrent les résultats de la coupe douce des trois tailles d’images de coupe douce que nous avons enregistrées ci – dessus. Cliquez pour agrandir le Code hard Harvest qui correspond à la grande image et à la petite taille d’image de la caractéristique ci – dessus. Essentiellement, les cultures dures coupent quelque chose en forme et en taille prédéfinies. Vous pouvez faire des coupes difficiles en définissant le quatrième paramètre add _ Image Size () (ou set Post thumbnail size ()) à true. Cliquez pour agrandir Notez que l’image coupée en profondeur n’a plus la même forme et ne contient plus tout le contenu de son image originale. La culture dure est généralement plus utile pour les images de premier plan, qui doivent généralement s’adapter aux zones définies dans la disposition du site. D’après mon expérience, la coupe dure est la plus utile pour les images de premier plan, car les images de premier plan doivent généralement s’adapter aux zones définies dans la disposition du site. Il a d’autres utilisations, mais c’est là qu’il est vraiment utile. Vous ne voudrez peut – être pas recadrer l’image à insérer dans le message (à moins que vous ne vouliez, par exemple, que toutes vos images soient carrées comme décision de conception), car le contenu du message est généralement plus lisse et plus dur – recadrer détruit l’information de l’image. Que se passe – t – il si l’image originale est plus petite que la taille de culture souhaitée? Une taille trop petite ne fera que maintenir la taille originale. Bonne question! En général, si l’image téléchargée est trop petite pour atteindre la taille souhaitée, une image trop petite ne conserve que sa taille originale. Supposons que vous recadriez l’image à 500px 400px, mais l’image originale elle – même est en fait 300px x 200px. Vous ne pouvez récupérer que la version pleine taille. Coupe douce Notez que lorsque l’image
Atteindre sa première dimension cible. Par conséquent, en mode coupe douce, si l’image est trop petite dans les deux dimensions, elle ne peut pas être coupée, comme le montre l’exemple du paragraphe précédent. Si vous effectuez une coupure douce à 500 Px x 400 Px et que votre image est 1000 Px x 200 Px, il ne s’agit pas d’une coupure échouée; Vous n’obtiendrez qu’une image de 500px x 100px, et c’est probablement ce que vous voulez. Culture dure dans une culture dure, une image peut être assez grande dans une dimension, mais trop petite dans l’autre. Si vous coupez à 500 pixels x 400 pixels et que l’image originale est de 1000 pixels x 200 pixels, vous obtenez une image de 500 pixels x 200 pixels. Il ressemble beaucoup à l’image originale, coupant 50% de la couche externe (500px) à gauche et à droite. Plus important encore, sa taille n’est pas 5 x 4, mais 5 x 2… Il est concevable que si l’image de premier plan est soudainement trop petite (et \/ ou mal formée) pour son conteneur, cela pourrait causer des erreurs de formatage désagréables. Téléchargez ensuite ce que vous avez de plus important: en cas d’urgence, vous pouvez même agrandir l’image dans Photoshop pour répondre à vos besoins; Mais gardez à l’esprit que cela réduit la qualité de l’image. Définissez la bonne taille d’image nous ne voulons pas placer trop d’images sur la page, donc nous devons nous entraîner à limiter la taille des images et des fichiers. OK, maintenant nous savons comment définir la taille de l’image WordPress. Quelle taille d’image devrions – nous définir maintenant? Comme vous vous en souviendrez peut – être dans notre dernier article, la taille de l’image de bon sens, add _ Image Size () vous permet de visualiser des images de n’importe quelle taille! Par conséquent, il est préférable d’utiliser la plus grande matière première, car vous pouvez la réduire à n’importe quelle taille de fichier et la taille souhaitée. Confirmation
R l’utilisateur sur l’appareil étroit fournit des images de différentes tailles pour différentes largeurs de fenêtres du navigateur. L’image réactive est une convention de réseautage qui découle d’un problème simple: les appareils étroits qui servent de grandes images. Si vous utilisez un téléphone de 480 pixels de large, pourquoi téléchargez – vous une image deux fois plus large ou plus (comme l’image de premier plan d’un message)? Une image de deux fois la taille du fichier est quatre fois la taille du fichier. Lorsque l’appareil mobile charge de grandes images uniquement pour les redimensionner à la largeur que l’appareil peut gérer, la vitesse de chargement de la page ralentit, en particulier sur le téléphone mobile, qui a généralement déjà des connexions relativement lentes et irrégulières. D’autre part, nous ne pouvons pas limiter toutes les images sur Internet à la largeur de téléphone la plus étroite. Ce dont nous avons besoin, c’est de fournir des images de différentes tailles pour différents appareils en fonction de leur largeur. C’est le but de l’image de réponse. Comment fonctionnent les images réactives dans certains cas, vous avez peut – être ouvert le vérificateur de code de votre navigateur et vous avez été horrifié par le marquage Comme suit: C’est un marqueur qui répond à l’image WordPress. Pour comprendre comment ils fonctionnent, nous avons divisé cet exemple en plusieurs parties. Niveau, hauteur et largeur: rien n’a changé Ce n’est pas nouveau pour les images qui répondent rapidement. Ces bits de balise sont la façon dont WordPress assigne des classes, des balises alt et des valeurs de largeur et de hauteur codées (presque complètement obsolètes) aux images, qu’elles soient ou non des images répondant à WordPress. SRC: il y a maintenant une méthode de sauvegarde qui devrait sembler familière, car c’est comme ça que fonctionnent les images qui ne répondent pas: elles ont un attribut SRC (\
« l’image de réponse, SRC est un repli, un moyen de faire fonctionner l’image dans le navigateur (Hello Ie!) Les images réactives ne sont pas prises en charge. Par conséquent, le contenu du SRC est celui de l’IE (et de tout autre navigateur obsolète auquel l’utilisateur peut accéder sur le site, bien que tous les navigateurs courants, à l’exception de l’IE, supportent des images réactives). Srcset: un ensemble de sources d’images de tailles différentes il s’agit d’un nouveau moteur principal pour les images réactives. Srcset identifie la liste des attributs SRC (un ensemble de sources) que le navigateur récupérera en fonction de sa largeur. Regardons la première des options srcset: https:\/\/i0.wp.com\/wpshout.com\/wp-content\/uploads\/2014\/12\/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1 1024w il se compose en fait de deux parties séparées par un espace: https:\/\/i0.wp.com\/wpshout.com\/wp-content\/uploads\/2014\/12\/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1 : il s’agit d’un lien vers l’image elle – même, qui peut être collé dans le navigateur (essayez!) Voir l’image. Si vous trouvez ce lien d’image intéressant, c’est parce que wpshout publie ses images en utilisant CDN (Content Distribution Network). Liens vers votre site Web https:\/\/mysite.com\/media\/ Attendez. 1024w. Cela détermine la largeur cible à laquelle cette image sera appliquée: En d’autres termes, 1024w signifie « cette source d’image est appliquée à une largeur de 1024 pixels ou plus étroite ». Mais que signifie \
Il coupe facilement et sainement la taille d’une image personnalisée. Depuis longtemps, je suis très inquiet que la création d’une taille d’image personnalisée puisse d’une manière ou d’une autre \
Ou: la dernière règle écrase tout appareil supérieur à 1362px, trouve dans l’ensemble SRC l’élément le plus petit dont la largeur est supérieure à 840px et est toujours 1024w (1024px width) au lieu de 1600w. Par conséquent, la taille personnalisée de l’image que nous enregistrons dans ce cas n’est pas un complément utile à l’ensemble SRC, car il y a toujours une autre meilleure correspondance des règles de taille du sujet, mais cela ne fait pas de mal non plus. Amusez – vous bien. Comme je l’ai dit, l’api de redimensionnement d’image est une excellente chose pour WordPress. J’espère que cela vous permettra de bien comprendre ce qu’il faut, comment et pourquoi créer des tailles d’images personnalisées et des tailles d’images de premier plan pour WordPress. Alors, quelles sont les techniques pour redimensionner les images dans WordPress? Veuillez nous le dire dans les commentaires ci – dessous! PS: Voulez – vous en savoir plus sur le développement de WordPress? En regardant vers le haut et en cours, nous offrons un cours gratuit sur les cinq principes clés du développement de WordPress. À partir d’aujourd’hui!