{"id":247656,"date":"2022-08-06T13:10:00","date_gmt":"2022-08-06T10:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=247656"},"modified":"2021-10-28T09:40:33","modified_gmt":"2021-10-28T06:40:33","slug":"comment-rendre-les-images-et-videos-responsives-sur-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-rendre-les-images-et-videos-responsives-sur-wordpress\/","title":{"rendered":"Comment rendre les images et vid\u00e9os responsives sur WordPress ?"},"content":{"rendered":"<p>En 2015, Google a apport\u00e9 un \u00e9norme changement dans ses algorithmes de moteur de recherche, ce qui a fait de la conception r\u00e9active l&rsquo;un des facteurs de classement des <strong><a href=\"https:\/\/www.ggtaskers.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sites Web<\/a><\/strong>. Pour la premi\u00e8re fois en 2016 sur mobile, la navigation Web d\u00e9passera le bureau et il est plus important que jamais que votre site Web puisse s&rsquo;adapter \u00e0 toutes les tailles d&rsquo;\u00e9cran sans sacrifier la convivialit\u00e9 et la fonctionnalit\u00e9. Ce fait peut justifier pourquoi la conception Web r\u00e9active est importante pour une entreprise. Vous pouvez cr\u00e9er un site Web r\u00e9actif ici. Si vous avez d\u00e9j\u00e0 un site Web, mais si vous avez besoin de le rendre r\u00e9actif, vous pouvez faire appel \u00e0 des conseils d&rsquo;experts.<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/XWTAJLAJrK8\" frameborder=\"0\"><\/iframe><\/div>\n<p>Lorsque vous utilisez WordPress, il existe diff\u00e9rents plugins qui peuvent vous aider \u00e0 rendre vos images et vid\u00e9os r\u00e9actives. Mais certains plugins peuvent compromettre votre s\u00e9curit\u00e9, il est donc pr\u00e9f\u00e9rable de rendre les images et les vid\u00e9os r\u00e9actives \u00e0 l&rsquo;aide de code CSS. Sur ce blog, je vais vous montrer comment vous pouvez rendre l&rsquo;image et les vid\u00e9os de votre site WordPress responsive.\u00a0<\/p>\n<p><strong>Premi\u00e8re \u00e9tape :<\/strong> vous devez acc\u00e9der au backend de votre site Web ou pour WordPress, il est connu sous le nom de wp-admin. Il s&rsquo;agit de la connexion universelle pour le site Web WordPress. Supposons que votre site Web soit www.example.com, vous devez alors saisir l&rsquo;URL sous la forme <a href=\"http:\/\/www.example.com\/wp-admin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">www.example.com\/wp-admin<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8697a96.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Deuxi\u00e8me \u00e9tape :<\/strong> vous devez vous assurer de vous connecter en tant qu&rsquo;administrateur. Il existe diff\u00e9rents r\u00f4les dans WordPress que vous pouvez attribuer \u00e0 l&rsquo;utilisateur et il existe \u00e9galement une connexion administrateur. Vous pouvez \u00e9galement attribuer un acc\u00e8s administrateur aux utilisateurs. Vous devez donc vous assurer de vous connecter en tant qu&rsquo;administrateur ou en tant qu&rsquo;utilisateur disposant d&rsquo;un acc\u00e8s administrateur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d87b64e9.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Troisi\u00e8me \u00e9tape :<\/strong> Sur votre tableau de bord, vous verrez un onglet appel\u00e9 apparence. Cet onglet est responsable de toutes sortes de t\u00e2ches li\u00e9es \u00e0 la conception sur votre site Web.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d89071a8.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Quatri\u00e8me \u00e9tape :<\/strong> sous l&rsquo;apparence, vous trouverez une option appel\u00e9e l&rsquo;\u00e9diteur. Cette section est responsable des codes manuels pour la conception de votre site Web. Cliquez sur l&rsquo;\u00e9diteur.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8a5b2e1.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Cinqui\u00e8me \u00e9tape :<\/strong> Apr\u00e8s avoir cliqu\u00e9 sur \u00e9diteur, une nouvelle fen\u00eatre s&rsquo;ouvrira, connue sous le nom de style.css. Ce fichier contient tous les codes CSS.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8b9ec9c.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Sixi\u00e8me \u00e9tape :<\/strong> vous devez faire d\u00e9filer vers le bas et atteindre le bas pour ajouter du code suppl\u00e9mentaire dans le fichier style.css.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8cdcd00.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Septi\u00e8me \u00e9tape\u00a0:<\/strong> ajoutez ce code\u00a0: embed, iframe, img, object, video, {max-width\u00a0: 100} et appuyez sur Entr\u00e9e.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8e10f8d.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Huiti\u00e8me \u00e9tape :<\/strong> Si votre code est correct, il devrait appara\u00eetre en vert. S&rsquo;il est vert, cliquez simplement sur Mettre \u00e0 jour le fichier.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d8f3047f.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Neuvi\u00e8me \u00e9tape\u00a0:<\/strong> si le fichier est mis \u00e0 jour avec succ\u00e8s, vous recevrez un message de confirmation indiquant que \u00ab\u00a0Finement modifi\u00e9 avec succ\u00e8s\u00a0\u00bb<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d9085c89.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p><strong>Dixi\u00e8me \u00e9tape\u00a0:<\/strong> v\u00e9rifiez enfin l&rsquo;un de vos messages pour voir si les images et les vid\u00e9os sont r\u00e9actives ou non. Si vous avez suivi les \u00e9tapes, il devrait \u00eatre r\u00e9actif.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-149157-616d3d917fc3d.png\" alt=\"Comment rendre les images et vid\u00e9os responsives sur WordPress ?\" ><\/a><\/p>\n<p>Si vous suivez ces \u00e9tapes, vous pouvez facilement rendre les images et vid\u00e9os de votre site WordPress responsives.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.ggtaskers.com\" class=\"external external_icon\">www.ggtaskers.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous utilisez WordPress, il existe diff\u00e9rents plugins qui peuvent vous aider \u00e0 rendre vos images et vid\u00e9os r\u00e9actives.<\/p>\n","protected":false},"author":1,"featured_media":263211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[650],"tags":[844],"class_list":["post-247656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comment-faire","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/247656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=247656"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/247656\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/263211"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=247656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=247656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=247656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}