{"id":229888,"date":"2022-11-15T16:55:00","date_gmt":"2022-11-15T13:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229888"},"modified":"2022-11-15T16:58:29","modified_gmt":"2022-11-15T13:58:29","slug":"en-savoir-plus-sur-lutilite-des-attributs-dimage-personnalises","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/en-savoir-plus-sur-lutilite-des-attributs-dimage-personnalises\/","title":{"rendered":"En savoir plus sur l&rsquo;utilit\u00e9 des attributs d&rsquo;image personnalis\u00e9s"},"content":{"rendered":"<p>Chaque fois que vous ajoutez des attributs personnalis\u00e9s aux images (et je les consid\u00e8re g\u00e9n\u00e9ralement comme des \u00e9l\u00e9ments tels que <strong>data-type=&quot;acme&quot;, &quot;<\/strong> mais ils peuvent vraiment \u00eatre n&rsquo;importe quoi comme des attributs de classe, des identifiants, etc. bien qu&rsquo;il existe d&rsquo;autres filtres pour certaines choses).<\/p>\n<p>Acc\u00e9der aux images via des attributs d&rsquo;image personnalis\u00e9s.Acc\u00e9der aux images via des attributs d&rsquo;image personnalis\u00e9s.<\/p>\n<p>Quoi qu&rsquo;il en soit, l&rsquo;ajout d&rsquo;attributs d&rsquo;image personnalis\u00e9s peut ajouter une multitude de capacit\u00e9s que nous n&rsquo;avons pas normalement. En plus de simplement faciliter le style des images, cela nous permet \u00e9galement de les utiliser pour acc\u00e9der aux images de diff\u00e9rentes mani\u00e8res.<\/p>\n<p>Autrement dit, nous pouvons y acc\u00e9der en utilisant:<\/p>\n<ul>\n<li>s\u00e9lecteurs CSS,<\/li>\n<li>JavaScript,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Et lorsque vous avez acc\u00e8s \u00e0 des images en dehors des attributs WordPress standard, vous pouvez en faire plus avec elles. <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/quand-la-fonction-clone-de-jquery-est-elle-utile\/\" title=\"Cas d'esp\u00e8ce\">Cas d&rsquo;esp\u00e8ce<\/a>. En bref, vous \u00eates capable de faire des choses comme :<\/p>\n<ol>\n<li>acc\u00e9der \u00e0 une image,<\/li>\n<li>configurer les gestionnaires d&rsquo;\u00e9v\u00e9nements,<\/li>\n<li>ajouter des \u00e9l\u00e9ments au DOM,<\/li>\n<li>configurer des gestionnaires d&rsquo;\u00e9v\u00e9nements personnalis\u00e9s.<\/li>\n<\/ol>\n<p>Mais ce n&rsquo;est pas tout. Ce n&rsquo;est qu&rsquo;un exemple.<\/p>\n<pre><code>&lt;?php\n\nprivate function addImageAttributes($content)\n{\n\n  $content  = mb_convert_encoding($content, 'HTML-ENTITIES', \"UTF-8\");\n  $document = new DOMDocument();\n\n  libxml_use_internal_errors(true);\n  $document-&gt;loadHTML(utf8_decode($content));\n\n  $images = $document-&gt;getElementsByTagName('img');\n  foreach ($images as $image) {\n      $image-&gt;setAttribute('data-example', 'true');\n  }\n\n  return $document-&gt;saveHTML();\n}<\/code><\/pre>\n<p>En fin de compte, l&rsquo;une des principales id\u00e9es derri\u00e8re la possibilit\u00e9 d&rsquo;ajouter des attributs d&rsquo;image personnalis\u00e9s aux images WordPress est que cela nous donne plus de contr\u00f4le sur la fa\u00e7on dont nous pouvons acc\u00e9der \u00e0 nos images, travailler avec elles, leurs anc\u00eatres, leurs descendants, etc.<\/p>\n<p>Mais la fa\u00e7on dont j&rsquo;utiliserai cela sera probablement diff\u00e9rente de la fa\u00e7on dont vous ou quelqu&rsquo;un d&rsquo;autre les utiliserez. Et cela dit, j&rsquo;esp\u00e8re que cela r\u00e9pond \u00e0 la raison pour laquelle cela peut \u00eatre utile.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avant d&rsquo;essayer d&rsquo;ajouter des attributs d&rsquo;image personnalis\u00e9s aux images WordPress, il est utile de comprendre pourquoi nous pouvons vouloir le faire en premier lieu.<\/p>\n","protected":false},"author":1,"featured_media":165579,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,841,862],"tags":[1167],"class_list":["post-229888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=229888"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229888\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/165579"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}