{"id":41072,"date":"2023-10-25T17:54:54","date_gmt":"2023-10-25T20:54:54","guid":{"rendered":"\/tutoriais\/?p=41072"},"modified":"2023-10-25T17:54:57","modified_gmt":"2023-10-25T20:54:57","slug":"wp_get_attachment_image","status":"publish","type":"post","link":"\/pt\/tutoriais\/wp_get_attachment_image","title":{"rendered":"Como usar a fun\u00e7\u00e3o wp_get_attachment_image no WordPress + exemplos \u00fateis"},"content":{"rendered":"<p class=\"wp-block-paragraph\">A <strong>wp_get_attachment_image<\/strong> &eacute; uma fun&ccedil;&atilde;o do WordPress que permite recuperar e exibir facilmente anexos de imagem com base em seus IDs.<\/p><p class=\"wp-block-paragraph\">N&atilde;o importa se voc&ecirc; est&aacute; construindo um tema personalizado ou um plugin, essa fun&ccedil;&atilde;o oferece uma maneira flex&iacute;vel de exibir imagens com tamanhos e atributos personalizados.<\/p><p class=\"wp-block-paragraph\">Neste tutorial, vamos abordar a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> e explicar seus par&acirc;metros. N&oacute;s tamb&eacute;m vamos mostrar alguns casos de uso populares que voc&ecirc; pode testar em seu site hospedado no WordPress.<\/p><p>\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-parametros-da-funcao-wp-get-attachment-image\">Par&acirc;metros da Fun&ccedil;&atilde;o wp_get_attachment_image<\/h2><p class=\"wp-block-paragraph\">A fun&ccedil;&atilde;o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image\/\" target=\"_blank\" rel=\"noopener\">wp_get_attachment_image()<\/a> (link em ingl&ecirc;s) permite que os usu&aacute;rios recuperem um elemento HTML do tipo <strong>img<\/strong> para um anexo de imagem.<\/p><pre class=\"wp-block-preformatted\">wp_get_attachment_image( int $attachment_id, string|int[] $size = 'medium', bool $icon = false, string|array $attr = '' );<\/pre><p class=\"wp-block-paragraph\">Por padr&atilde;o, a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> requer pelo menos um par&acirc;metro, o ID do anexo. Ele serve como um identificador &uacute;nico para a imagem. A fun&ccedil;&atilde;o ent&atilde;o exibe a imagem em tamanho completo sem atributos HTML adicionais ou qualquer personaliza&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, voc&ecirc; pode incluir v&aacute;rios par&acirc;metros adicionais para personalizar a sa&iacute;da da imagem, como o tamanho da imagem, a classe CSS, ou o texto alternativo:<\/p><p class=\"wp-block-paragraph\"><strong>$attachment_id<\/strong><\/p><p class=\"wp-block-paragraph\">&Eacute; necess&aacute;rio especificar o ID da imagem anexada que ser&aacute; exibida. Se o par&acirc;metro estiver vazio ou definido como <strong>falso<\/strong>, a fun&ccedil;&atilde;o n&atilde;o retornar&aacute; nenhuma imagem.<\/p><p class=\"wp-block-paragraph\"><strong>$size<\/strong><\/p><p class=\"wp-block-paragraph\">Um par&acirc;metro opcional que define o <a href=\"\/tutoriais\/tamanho-imagens-wordpress\">tamanho da imagem que o WordPress<\/a> vai exibir. Voc&ecirc; pode especificar qualquer r&oacute;tulo de tamanho de imagem registrado, por exemplo, <strong>miniatura<\/strong>, <strong>m&eacute;dia<\/strong>, <strong>grande<\/strong>, ou um tamanho personalizado em pixels.<\/p><p class=\"wp-block-paragraph\"><strong>$icon<\/strong><\/p><p class=\"wp-block-paragraph\">Outro par&acirc;metro opcional que determina se a imagem deve ser tratada como um &iacute;cone. Se for configurado para <strong>true<\/strong> (verdadeiro), a fun&ccedil;&atilde;o exibir&aacute; o &iacute;cone de anexo em vez da imagem real.<\/p><p class=\"wp-block-paragraph\"><strong>$attr<\/strong><\/p><p class=\"wp-block-paragraph\">Este par&acirc;metro permite que voc&ecirc; adicione mais atributos &agrave; tag de imagem, como uma classe ou um estilo. Voc&ecirc; pode passar uma matriz de pares de key-value (chave-valor) para adicionar os seguintes atributos:<\/p><ul class=\"wp-block-list\">\n<li><strong>class<\/strong> (classe) &ndash; manipula a classe CSS da tag de imagem. Voc&ecirc; pode adicionar v&aacute;rias classes criando uma lista separada por espa&ccedil;os.<\/li>\n\n\n\n<li><strong>alt<\/strong> &ndash; define o texto alternativo da imagem. Um valor de atributo alt &eacute; importante para acessibilidade e para <a href=\"\/tutoriais\/30-tecnicas-de-seo-para-wordpress\">otimiza&ccedil;&atilde;o de SEO no WordPress<\/a>.<\/li>\n\n\n\n<li><strong>srcset <\/strong>&ndash; especifica m&uacute;ltiplas fontes de imagem com diferentes resolu&ccedil;&otilde;es, tamanhos ou propor&ccedil;&otilde;es. O navegador escolher&aacute; automaticamente a melhor fonte com base na resolu&ccedil;&atilde;o da tela do dispositivo usado para acessar o site.<\/li>\n\n\n\n<li><strong>sizes<\/strong> (tamanhos) &ndash; trabalha em conjunto com o atributo <strong>srcset<\/strong>. Especifica o tamanho da imagem exibida numa p&aacute;gina com base no espa&ccedil;o dispon&iacute;vel.<\/li>\n\n\n\n<li><strong>loading<\/strong> (carregando) &ndash; determina como a imagem &eacute; carregada. Por exemplo, o valor padr&atilde;o &eacute; <strong>lazy<\/strong> (pregui&ccedil;oso) para ativar o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_lazy_loading_enabled\/\" target=\"_blank\" rel=\"noopener\">lazy loading<\/a> (link em ingl&ecirc;s) ou carregamento pregui&ccedil;oso.<\/li>\n\n\n\n<li><strong>decoding<\/strong> (decodifica&ccedil;&atilde;o) &ndash; permite que voc&ecirc; especifique como o navegador deve interpretar a imagem. Os valores v&aacute;lidos s&atilde;o <strong>async<\/strong> para decodificar a imagem <strong>assincronamente<\/strong>, <strong>sync<\/strong> para decodificar a imagem <strong>de maneira s&iacute;ncrona<\/strong>, ou <strong>auto<\/strong> (autom&aacute;tico).<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-como-usar-o-wp-get-attachment-image\">Como Usar o wp_get_attachment_image<\/h2><p class=\"wp-block-paragraph\">Nesta se&ccedil;&atilde;o, explicaremos como usar a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> de maneira eficaz. Verifique o c&oacute;digo abaixo para ter mais informa&ccedil;&otilde;es:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\r\nif ( has_post_thumbnail() ) { \/\/ check if the post has a featured image\r\n    $thumbnail_id = get_post_thumbnail_id(); \/\/ get the ID of the post thumbnail image\r\n    $image = wp_get_attachment_image( $thumbnail_id, 'large' ); \/\/ get the HTML code for the post default thumbnail image\r\n    echo $image; \/\/ display the image\r\n}\r\n?&gt;<\/pre><p class=\"wp-block-paragraph\">Aqui est&aacute; o que fizemos com o c&oacute;digo acima:<\/p><ol class=\"wp-block-list\">\n<li>Usamos a fun&ccedil;&atilde;o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/has_post_thumbnail\/\" target=\"_blank\" rel=\"noopener\">has_post_thumbnail()<\/a> (link em ingl&ecirc;s) para verificar se a postagem possui uma imagem em destaque.<\/li>\n\n\n\n<li>Aplicamos <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_thumbnail_id\/\" target=\"_blank\" rel=\"noopener\">get_post_thumbnail_id()<\/a> (link em ingl&ecirc;s) para obter o ID da imagem em destaque.<\/li>\n\n\n\n<li>Usamos a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> para obter o c&oacute;digo HTML da imagem.<\/li>\n\n\n\n<li>Passamos a vari&aacute;vel <strong>$thumbnail_id<\/strong> como o ID da imagem e <strong>large<\/strong> (grande) como o tamanho especificado.<\/li>\n\n\n\n<li>Empregamos o <strong>echo<\/strong> para exibir o c&oacute;digo HTML da imagem na p&aacute;gina.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Lembre-se de que voc&ecirc; pode substituir o par&acirc;metro <strong>large<\/strong> por qualquer tamanho de imagem registrado.<\/p><h2 class=\"wp-block-heading\" id=\"h-exemplos-da-funcao-do-wordpress-wp_get_attachment_image\">Exemplos da Fun&ccedil;&atilde;o do WordPress wp_get_attachment_image<\/h2><p class=\"wp-block-paragraph\">Confira alguns casos de uso populares para a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> e entenda como ela pode ajud&aacute;-lo com seus projetos WordPress.<\/p><h3 class=\"wp-block-heading\">Exibir uma Imagem HTML Pronta para Uso<\/h3><p class=\"wp-block-paragraph\">A maneira mais simples de testar a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> &eacute; passar um ID de anexo de imagem para ela.<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo wp_get_attachment_image( 37);?&gt;<\/pre><p class=\"wp-block-paragraph\">Lembre-se de que n&atilde;o fornecemos nenhum tamanho espec&iacute;fico de imagem neste exemplo. Portanto, a fun&ccedil;&atilde;o recuperou a imagem em tamanho real com o ID de anexo 37.<\/p><p class=\"wp-block-paragraph\">No HTML, a sa&iacute;da ficar&aacute; assim. O texto alternativo existir&aacute; se j&aacute; tiver sido adicionado:<\/p><pre class=\"wp-block-preformatted\">&lt;img width=\"500\" height=\"500\" src=\"http:\/\/exemplo.com\/wp-content\/uploads\/2023\/03\/imagem.jpg\" class=\"attachment-full size-full\" alt=\"Texto Alternativo\"&gt;<\/pre><p class=\"wp-block-paragraph\">Por padr&atilde;o, o HTML define as imagens em tamanho real para 500 pixels de largura e 500 pixels de altura. No entanto, os valores reais de largura e altura em pixels podem variar dependendo das suas dimens&otilde;es originais.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-tamanho-original.png\/w=1024,h=1024,fit=scale-down\" alt=\"Publica&ccedil;&atilde;o sobre O Incr&iacute;vel Gatinho, exemplificando uma imagem de 500 pixels por 500 pixels\" class=\"wp-image-41076\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-tamanho-original.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-tamanho-original.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-tamanho-original.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-tamanho-original.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\">Usar um Tamanho Personalizado<\/h3><p class=\"wp-block-paragraph\">Imagens personalizadas podem melhorar o desempenho do site, reduzindo os tempos de carregamento da p&aacute;gina e aprimorando a apar&ecirc;ncia geral. Elas tamb&eacute;m garantem consist&ecirc;ncia em diferentes dispositivos e telas:<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?&gt;<\/pre><p class=\"wp-block-paragraph\">No HTML, a sa&iacute;da ficar&aacute; assim:<\/p><pre class=\"wp-block-preformatted\">&lt;img width=\"40\" height=\"40\" src=\"http:\/\/exemplo.com.br\/wp-content\/uploads\/2023\/03\/imagem.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"Descri&ccedil;&atilde;o para o texto alternativo\"&gt;<\/pre><p class=\"wp-block-paragraph\">Neste caso, o segundo par&acirc;metro da fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> &eacute; uma matriz contendo a largura e a altura em pixels do tamanho da imagem solicitada. O terceiro par&acirc;metro est&aacute; definido como <strong>true<\/strong> (verdadeiro), o que significa que a fun&ccedil;&atilde;o vai recortar a imagem para as dimens&otilde;es exatas especificadas no array.<\/p><p class=\"wp-block-paragraph\">Veja como esse exemplo fica numa publica&ccedil;&atilde;o online:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1249\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=1024,h=1024,fit=scale-down\" alt=\"Exemplo de imagem em miniatura num post do WordPress sobre o incr&iacute;vel gatinho\" class=\"wp-image-41075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=1249,fit=scale-down 1249w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2023\/10\/o-incrivel-gatinho-miniatura.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1249px) 100vw, 1249px\" \/><\/figure>\n<\/div><h3 class=\"wp-block-heading\">Exibir Todas as Imagens Associadas ao Post<\/h3><p class=\"wp-block-paragraph\">Voc&ecirc; pode exibir todas as imagens associadas a um ID de postagem espec&iacute;fico. Fazer isso permite que voc&ecirc; visualize todas as imagens relevantes sem navegar por toda a postagem.<\/p><pre class=\"wp-block-preformatted\">&lt;?php\r\n$attachments = get_attached_media('image', get_the_ID());\r\nif (!empty($attachments)) {\r\n    foreach ($attachments as $image) {\r\n        echo wp_get_attachment_image($image-&gt;ID, 'full');\r\n    }\r\n} \r\n?&gt;\r<\/pre><p class=\"wp-block-paragraph\">Neste exemplo, o c&oacute;digo recupera todas as imagens anexadas ao post atual usando a fun&ccedil;&atilde;o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_attached_media\/\" target=\"_blank\" rel=\"noopener\">get_attached_media()<\/a> e as percorre usando um loop foreach.<\/p><p class=\"wp-block-paragraph\">Para cada imagem, ele chama a fun&ccedil;&atilde;o <strong>wp_get_attachment_image()<\/strong> para recuperar a vers&atilde;o em tamanho real da imagem com o ID do anexo.<\/p><h3 class=\"wp-block-heading\">Especificando Atributos Class, Alt, e T&iacute;tulo de uma Imagem<\/h3><p class=\"wp-block-paragraph\">Tamb&eacute;m &eacute; poss&iacute;vel especificar a classe personalizada, o texto alternativo e os atributos de t&iacute;tulo para uma imagem. Tudo o que voc&ecirc; precisa fazer &eacute; defini-los para uma vari&aacute;vel Em nosso caso, &eacute; <strong>$custom<\/strong>:<\/p><pre class=\"wp-block-preformatted\">&lt;?php\r\n$custom = [ 'class' =&gt; 'minha-classe', 'alt' =&gt; 'texto alternativo', 'title' =&gt; 'meu t&iacute;tulo' ];\r\necho wp_get_attachment_image( 37, 'medium', false, $custom );\r\n?&gt;\r<\/pre><p class=\"wp-block-paragraph\">Neste exemplo, o quarto par&acirc;metro &eacute; uma matriz contendo os atributos adicionais para a tag <strong>&lt;img&gt;<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><p class=\"wp-block-paragraph\">A <strong>wp_get_attachment_image()<\/strong> &eacute; uma fun&ccedil;&atilde;o vers&aacute;til do WordPress que permite exibir facilmente imagens anexadas a posts ou p&aacute;ginas<\/p><p class=\"wp-block-paragraph\">Neste tutorial, falamos sobre a fun&ccedil;&atilde;o <strong>&nbsp;wp_get_attachment_image()<\/strong> e seus par&acirc;metros. Tamb&eacute;m fornecemos alguns exemplo de uso dela para voc&ecirc; testar no seu site WordPress.<\/p><p class=\"wp-block-paragraph\">Esperamos que voc&ecirc; tenha achado este tutorial &uacute;til. Caso tenha alguma d&uacute;vida, deixe um coment&aacute;rio abaixo.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Descubra Mais Sobre o WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/tutoriais\/tutorial-wordpress\">Tutorial do WordPress<\/a><br>\n<a href=\"\/tutoriais\/imagem-destacada-wordpress\">O que &eacute; uma Imagem em Destaque do WordPress<\/a><br>\n<a href=\"\/tutoriais\/otimizar-imagens-wordpress\">Como Otimizar Imagens para o WordPress<\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A wp_get_attachment_image &eacute; uma fun&ccedil;&atilde;o do WordPress que permite recuperar e exibir facilmente anexos de imagem com base em seus IDs. N&atilde;o importa se voc&ecirc; est&aacute; construindo um tema personalizado ou um plugin, essa fun&ccedil;&atilde;o oferece uma maneira flex&iacute;vel de exibir imagens com tamanhos e atributos personalizados. Neste tutorial, vamos abordar a fun&ccedil;&atilde;o wp_get_attachment_image() e [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/wp_get_attachment_image\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Como Usar wp_get_attachment_image no WordPress","rank_math_description":"A fun\u00e7\u00e3o do WordPress wp_get_attachment_image obt\u00e9m um elemento HTML IMG que representa um anexo de imagem. Aprenda como utiliz\u00e1-la neste artigo.","rank_math_focus_keyword":"wp_get_attachment_image","footnotes":""},"categories":[4911],"tags":[7594],"class_list":["post-41072","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wp_get_attachment_image"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp_get_attachment_image\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp_get_attachment_image\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-use-the-wp_get_attachment_image-function-in-wordpress-useful-examples\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-use-the-wp_get_attachment_image-function-in-wordpress-useful-examples\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp_get_attachment_image\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wp_get_attachment_image\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-use-wp-get-attachment-image-wordpress-function\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp_get_attachment_image\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp_get_attachment_image\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp_get_attachment_image\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp_get_attachment_image\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/41072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=41072"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/41072\/revisions"}],"predecessor-version":[{"id":41077,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/41072\/revisions\/41077"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=41072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=41072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=41072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}