{"id":55062,"date":"2022-03-10T07:00:44","date_gmt":"2022-03-10T15:00:44","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55062"},"modified":"2025-05-26T10:33:49","modified_gmt":"2025-05-26T17:33:49","slug":"introducao-aos-shortcodes-do-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/","title":{"rendered":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos)"},"content":{"rendered":"\n<p>Os shortcodes do WordPress podem facilmente aprimorar seu site com elementos interativos e envolventes que podem ser repetidos em posts e p\u00e1ginas. Exemplos incluem <a href=\"https:\/\/www.dreamhost.com\/blog\/monetize-your-wordpress-image-gallery\/\" target=\"_blank\" rel=\"noopener noreferrer\">galerias de imagens<\/a>, formul\u00e1rios de contato e playlists para tornar seu conte\u00fado mais \u00fatil e envolvente.<\/p>\n\n\n\n<p>Neste post, vamos discutir os shortcodes do WordPress e por que eles s\u00e3o \u00fateis. Em seguida, vamos apresentar quatro m\u00e9todos para come\u00e7ar a usar shortcodes no seu site. Vamos come\u00e7ar!<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101\" class=\"wp-block-heading\"><b>Introdu\u00e7\u00e3o aos Shortcodes do WordPress<\/b><\/h2>\n\n\n\n<p>Os shortcodes do WordPress s\u00e3o trechos que permitem incorporar rapidamente diferentes arquivos, objetos ou pe\u00e7as de conte\u00fado em seu site. S\u00e3o linhas \u00fanicas de c\u00f3digo HTML que podem incluir elementos interativos de postagem.<\/p>\n\n\n\n<p>Um shortcode se parece com isso, envolvido entre dois colchetes:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[exampleshortcode]<\/pre>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/history-of-wordpress\/?utm_campaign=coschedule&amp;utm_source=facebook_page&amp;utm_medium=DreamHost\" target=\"_blank\" rel=\"noopener noreferrer\">Os shortcodes foram introduzidos em 2008<\/a> para facilitar a cria\u00e7\u00e3o de posts e p\u00e1ginas mais complexos. Eles oferecem uma maneira simples de inserir e carregar elementos de conte\u00fado din\u00e2mico no seu site.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea pode querer <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener noreferrer\">personalizar a p\u00e1gina inicial do seu WordPress<\/a> incorporando um mapa do Google para mostrar a localiza\u00e7\u00e3o da sua loja. Voc\u00ea pode at\u00e9 adicionar um v\u00eddeo introdut\u00f3rio usando um shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-33076 lazyload\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1.jpg\" alt=\"C\u00f3digo curto de v\u00eddeo do WordPress\" width=\"900\" height=\"294\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-300x98.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes-1-768x251.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-600x196.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-730x238.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-784x256.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes-1-877x286.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/294;\" \/><\/pre>\n\n\n\n<p>Os propriet\u00e1rios de sites geralmente usam c\u00f3digos curtos no corpo de postagens, p\u00e1ginas e tipos de postagens personalizados. Felizmente, conforme o editor de blocos Gutenberg evoluiu, o uso de c\u00f3digos curtos tornou-se ainda mais amig\u00e1vel. Vamos abordar isso mais tarde no artigo.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n \/wp:shortcode &#8211;>\n\n\n<h2 id=\"h-why-you-might-consider-using-wordpress-shortcodes\" class=\"wp-block-heading\"><b>Por que voc\u00ea pode considerar usar Shortcodes do WordPress<\/b><\/h2>\n\n\n\n<p>Existem v\u00e1rias raz\u00f5es pelas quais voc\u00ea pode desejar usar shortcodes do WordPress. Para come\u00e7ar, eles s\u00e3o frequentemente mais f\u00e1ceis de adicionar \u00e0 sua p\u00e1gina do que aprender e escrever um longo peda\u00e7o de c\u00f3digo HTML.<\/p>\n\n\n\n<p>Al\u00e9m disso, os shortcodes podem manter seu conte\u00fado limpo e organizado. Eles n\u00e3o ocupam tanto espa\u00e7o no HTML geral do seu post. Isso pode ajudar voc\u00ea a identificar erros facilmente quando estiver usando o editor de c\u00f3digo.<\/p>\n\n\n\n<p>Os c\u00f3digos curtos tamb\u00e9m s\u00e3o reutiliz\u00e1veis. Voc\u00ea n\u00e3o precisar\u00e1 adicionar manualmente os mesmos recursos, como um Call to Action (CTA) ou bot\u00f5es de m\u00eddia social, em cada postagem. Em vez disso, voc\u00ea pode simplesmente colar o seu c\u00f3digo curto.<\/p>\n\n\n\n<h2 id=\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\" class=\"wp-block-heading\"><b>WordPress Shortcodes 101 (4 Maneiras de Usar Esses Trechos)<\/b><\/h2>\n\n\n\n<p>Existem dois tipos b\u00e1sicos de shortcodes que voc\u00ea deve conhecer: auto-fechados e envolventes. Os auto-fechados s\u00e3o independentes e n\u00e3o precisam de tags de fechamento:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode]<\/pre>\n\n\n\n<p>Os shortcodes delimitadores envolvem um peda\u00e7o espec\u00edfico de conte\u00fado para modific\u00e1-lo. Portanto, os shortcodes delimitadores devem ser fechados manualmente. Eles geralmente se parecem com isso:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[myshortcode] conte\u00fado [\/myshortcode]<\/pre>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode alterar as propriedades de shortcodes com diferentes atributos. Isso afetar\u00e1 como o elemento \u00e9 exibido no frontend.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea poderia alterar o tamanho de um shortcode de galeria adicionando um atributo de tamanho:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[gallery id=\"123\" size=\"medium\"]\u200b\u200b<\/pre>\n\n\n\n<p>Se voc\u00ea procurar no <a href=\"https:\/\/wordpress.org\/plugins\/search\/shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">Diret\u00f3rio de Plugins do WordPress<\/a>, voc\u00ea encontrar\u00e1 muitas op\u00e7\u00f5es para usar shortcodes no seu site WordPress. Aqui est\u00e3o quatro op\u00e7\u00f5es diferentes!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-wordpress-default-shortcodes\"><b>1. Shortcodes Padr\u00e3o do WordPress<\/b><\/h3>\n\n\n\n<p>WordPress vem com <a href=\"https:\/\/developer.wordpress.org\/plugins\/shortcodes\/#built-in-shortcodes\" target=\"_blank\" rel=\"noopener noreferrer\">shortcodes b\u00e1sicos incorporados<\/a>. Esses trechos permitem que voc\u00ea incorpore m\u00eddia adicional diretamente em suas postagens.<\/p>\n\n\n\n<p>Estes c\u00f3digos curtos incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>[caption]:<\/b> Adiciona legendas ao redor do conte\u00fado.<\/li>\n\n\n\n<li><b>[gallery]:<\/b> Mostra galerias de imagens.<\/li>\n\n\n\n<li><b>[audio]:<\/b> Incorpora e reproduz arquivos de \u00e1udio.<\/li>\n\n\n\n<li><b>[video]:<\/b> Incorpora e reproduz arquivos de v\u00eddeo.<\/li>\n\n\n\n<li><b>[playlist]:<\/b> Exibe cole\u00e7\u00e3o de arquivos de \u00e1udio ou v\u00eddeo.<\/li>\n\n\n\n<li><b>[embed]:<\/b> Incorpora itens embutidos.<\/li>\n\n\n\n\n<\/ul>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode habilitar uma variedade de shortcodes adicionais atrav\u00e9s do <a href=\"https:\/\/jetpack.com\/support\/shortcode-embeds\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin Jetpack<\/a>.<\/p>\n\n\n\n<p>\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\t20 Plugins Incred\u00edveis do WordPress que Voc\u00ea Precisa Conhecer\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/plugins-wordpress-mais-populares\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/p>\n\n\n\n<p>Primeiro, certifique-se de que o m\u00f3dulo Jetpack est\u00e1 ativado clicando em <i>Jetpack <\/i>no seu Painel do WordPress:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"396\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15.jpg\" alt=\"Jetpack\" class=\"wp-image-33089 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-300x132.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes15-768x338.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-600x264.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-730x321.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-784x345.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes15-877x386.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/396;\" \/><\/figure><\/div>\n\n\n<p>Ent\u00e3o, selecione <i>Configura\u00e7\u00f5es<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"250\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9.jpg\" alt=\"Jetpack\" class=\"wp-image-33083 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-300x83.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes9-768x213.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-600x167.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-730x203.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-784x218.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes9-877x244.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/250;\" \/><\/figure><\/div>\n\n\n<p>V\u00e1 at\u00e9 a aba <i>Escrita<\/i>, des\u00e7a at\u00e9 a se\u00e7\u00e3o <i>Compondo<\/i> e ative <i>Compor usando shortcodes para incorporar m\u00eddia de sites populares<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"321\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12.jpg\" alt=\"Jetpack\" class=\"wp-image-33086 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-300x107.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes12-768x274.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-600x214.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-730x260.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-784x280.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes12-877x313.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/321;\" \/><\/figure><\/div>\n\n\n<p>Uma vez que voc\u00ea tenha ativado esta op\u00e7\u00e3o, voc\u00ea pode usar o shortcode [tweet] para incorporar um tweet espec\u00edfico em seu post. Basta copiar o URL do tweet e colar dentro dos colchetes do shortcode:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"230\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14.jpg\" alt=\"Tweet shortcode\" class=\"wp-image-33088 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-300x77.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes14-768x196.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-600x153.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-730x187.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-784x200.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes14-877x224.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/230;\" \/><\/figure><\/div>\n\n\n<p>Isso incorporar\u00e1 o tweet vinculado \u00e0 sua postagem. O resultado ser\u00e1 assim:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"750\" height=\"798\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7.jpg\" alt=\"Atalho do Twitter no WordPress\" class=\"wp-image-33081 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes7-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes7-730x777.jpg.webp 730w\" data-sizes=\"(max-width: 750px) 100vw, 750px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 750px; --smush-placeholder-aspect-ratio: 750\/798;\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea pode usar esses c\u00f3digos curtos adicionais para incorporar uma s\u00e9rie de outros conte\u00fados no seu material, incluindo playlists do Spotify, Google Docs ou receitas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-gutenberg-shortcodes\"><b>2. C\u00f3digos Curto do Gutenberg<\/b><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-gutenberg-for-designers\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blocos Gutenberg<\/a> facilitam a adi\u00e7\u00e3o de conte\u00fado din\u00e2mico em suas postagens. O Editor de Blocos permite que voc\u00ea altere se\u00e7\u00f5es individuais facilmente e aplique configura\u00e7\u00f5es e regras de formata\u00e7\u00e3o espec\u00edficas do bloco sem usar plugins.<\/p>\n\n\n\n<p>O <a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">editor Gutenberg evoluiu<\/a> para facilitar ainda mais a montagem de posts e p\u00e1ginas no WordPress. Ele oferece uma maneira amig\u00e1vel de inserir shortcodes. A maioria dos blocos Gutenberg substitui os shortcodes padr\u00e3o, mas o editor de blocos tem se mostrado um alvo m\u00f3vel, ent\u00e3o aprender sobre o uso de shortcodes para funcionalidade \u00e9 uma boa ideia.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea poderia usar um bloco Gutenberg para incorporar o tweet do nosso exemplo anterior em vez de um shortcode. Voc\u00ea s\u00f3 precisa clicar no \u00edcone <i>+ <\/i>e selecionar o bloco <i>Twitter <\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"377\" height=\"356\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4.jpg\" alt=\"Bloco do Twitter no WordPress\" class=\"wp-image-33079 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes4.jpg.webp 377w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes4-300x283.jpg 300w\" data-sizes=\"(max-width: 377px) 100vw, 377px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 377px; --smush-placeholder-aspect-ratio: 377\/356;\" \/><\/figure><\/div>\n\n\n<p>Este m\u00e9todo permite colar a URL do tweet diretamente no bloco, sem escrever o shortcode entre colchetes.<\/p>\n\n\n\n<p>\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tSeu Guia Completo para Edi\u00e7\u00e3o Completa de Sites no WordPress\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/edicao-completa-de-site-do-wordpress\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/p>\n\n\n\n<p>Al\u00e9m disso, o Editor de Blocos Gutenberg possui um bloco <i>Shortcode<\/i>. Ele permite que voc\u00ea gerencie seus snippets no editor visual sem escrever o c\u00f3digo diretamente em HTML:<\/p>\n\n\n\n<p>Gutenberg tamb\u00e9m permite que voc\u00ea crie blocos reutiliz\u00e1veis, que podem ser \u00fateis para usar os mesmos trechos de conte\u00fado em suas publica\u00e7\u00f5es. Podemos demonstrar esse conceito com um CTA de m\u00eddia social que voc\u00ea pode usar no final das publica\u00e7\u00f5es que voc\u00ea escreve em seu site.<\/p>\n\n\n\n<p>Voc\u00ea pode come\u00e7ar selecionando o bloco <i>Shortcode<\/i> no pop-up:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"265\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11.jpg\" alt=\"Bloco de shortcode Gutenberg\" class=\"wp-image-33085 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11.jpg.webp 900w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-300x88.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes11-768x226.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-600x177.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-730x215.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-784x231.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes11-877x258.jpg.webp 877w\" data-sizes=\"(max-width: 900px) 100vw, 900px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 900px; --smush-placeholder-aspect-ratio: 900\/265;\" \/><\/figure><\/div>\n\n\n<p>Ent\u00e3o, depois de adicionar seu trecho de CTA, clique nos tr\u00eas pontos para um menu de op\u00e7\u00f5es e selecione <i>Adicionar aos blocos<\/i> <i>reutiliz\u00e1veis<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1348\" height=\"590\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8.jpg\" alt=\"Blocos reutiliz\u00e1veis do WordPress\" class=\"wp-image-33082 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8.jpg.webp 1348w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-1024x448.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes8-768x336.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-600x263.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-1200x525.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-730x320.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-784x343.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes8-877x384.jpg.webp 877w\" data-sizes=\"(max-width: 1348px) 100vw, 1348px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1348px; --smush-placeholder-aspect-ratio: 1348\/590;\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea pode ent\u00e3o nomear o bloco reutiliz\u00e1vel:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"759\" height=\"473\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13.jpg\" alt=\"nomeando Blocos reutiliz\u00e1veis\" class=\"wp-image-33087 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13.jpg.webp 759w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes13-300x187.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-600x374.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes13-730x455.jpg.webp 730w\" data-sizes=\"(max-width: 759px) 100vw, 759px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 759px; --smush-placeholder-aspect-ratio: 759\/473;\" \/><\/figure><\/div>\n\n\n<p>Seu snippet ser\u00e1 ent\u00e3o salvo na aba reutiliz\u00e1vel, permitindo que voc\u00ea o use em qualquer lugar do seu site, incluindo postagens, p\u00e1ginas e \u00e1reas de widgets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-plugin-shortcodes\"><b>3. C\u00f3digos Curtos do Plugin<\/b><\/h3>\n\n\n\n<p>Diferentes Plugins do WordPress tamb\u00e9m v\u00eam com seus pr\u00f3prios c\u00f3digos curtos. Algumas dessas ferramentas podem at\u00e9 ajud\u00e1-lo a adicionar par\u00e2metros personaliz\u00e1veis aos c\u00f3digos curtos padr\u00e3o existentes.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea pode obter shortcodes prontos para formul\u00e1rios de contato do plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/participants-database\/\" target=\"_blank\" rel=\"noopener noreferrer\">Participants Database<\/a>. Voc\u00ea poderia simplesmente digitar [pdb_signup] para inserir um formul\u00e1rio de inscri\u00e7\u00e3o em uma postagem:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1000\" height=\"228\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6.jpg\" alt=\"Bloco de formul\u00e1rio de shortcode no WordPress\" class=\"wp-image-33080 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6.jpg.webp 1000w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-300x68.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes6-768x175.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-600x137.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-730x166.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-784x179.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes6-877x200.jpg.webp 877w\" data-sizes=\"(max-width: 1000px) 100vw, 1000px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1000px; --smush-placeholder-aspect-ratio: 1000\/228;\" \/><\/figure><\/div>\n\n\n<p>O formul\u00e1rio ser\u00e1 ent\u00e3o exibido no frontend:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"687\" height=\"436\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10.jpg\" alt=\"criando um formul\u00e1rio web no WordPress\" class=\"wp-image-33084 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10.jpg.webp 687w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes10-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes10-600x381.jpg.webp 600w\" data-sizes=\"(max-width: 687px) 100vw, 687px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 687px; --smush-placeholder-aspect-ratio: 687\/436;\" \/><\/figure><\/div>\n\n\n<p>Se isso lhe interessa, voc\u00ea pode ler mais sobre <a href=\"https:\/\/www.dreamhost.com\/blog\/best-wordpress-plugins-you-dont-know-about\/\" target=\"_blank\" rel=\"noopener noreferrer\">outros Plugins do WordPress<\/a> que podem melhorar seu site. Estes incluem o <a href=\"https:\/\/wordpress.org\/plugins\/enhanced-media-library\/\" target=\"_blank\" rel=\"noopener noreferrer\">Plugin Enhanced Media Library<\/a>, que pode ajud\u00e1-lo a ajustar os par\u00e2metros para os shortcodes de Playlist e Galeria incorporados.<\/p>\n\n\n\n<p>Entretanto, lembre-se de manter seus plugins de shortcode do WordPress atualizados. Fazer isso pode garantir que seu site funcione <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/otimize-a-velocidade-do-website-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">o mais r\u00e1pido poss\u00edvel<\/a> e n\u00e3o esteja vulner\u00e1vel a amea\u00e7as de seguran\u00e7a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-custom-shortcodes\"><b>4. C\u00f3digos Curtos Personalizados<\/b><\/h3>\n\n\n\n<p>Se voc\u00ea precisa de ainda mais funcionalidade dos c\u00f3digos curtos, \u00e9 poss\u00edvel criar personalizados. Eles podem ser ferramentas valiosas para desenvolvedores que procuram reduzir o tempo gasto em codifica\u00e7\u00e3o repetitiva.<\/p>\n\n\n\n<p>Voc\u00ea deve observar que criar c\u00f3digos curtos personalizados requer algum conhecimento t\u00e9cnico. Se voc\u00ea n\u00e3o se sentir confiante com programa\u00e7\u00e3o, pode querer aderir a uma das outras estrat\u00e9gias que mencionamos.<\/p>\n\n\n\n<p>Se voc\u00ea deseja experimentar este m\u00e9todo, considere usar um <a href=\"https:\/\/generatewp.com\/shortcodes\/\" target=\"_blank\" rel=\"noopener noreferrer\">gerador como o GenerateWP<\/a> para ajudar na formata\u00e7\u00e3o do seu c\u00f3digo desde o in\u00edcio. Voc\u00ea pode preencher diferentes campos de atributos para modificar a apar\u00eancia do elemento de acordo com sua prefer\u00eancia.<\/p>\n\n\n\n<p>Voc\u00ea pode ent\u00e3o implementar esses c\u00f3digos curtos usando a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">fun\u00e7\u00e3o add_shortcode<\/a>. Na pr\u00e1tica, vai parecer assim:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_shortcode( string $tag, callable $callback )<\/pre>\n\n\n\n<p>No entanto, se voc\u00ea n\u00e3o se sente confort\u00e1vel criando um shortcode personalizado desde o in\u00edcio, existe outra maneira! Voc\u00ea pode entrar em contato com nossa equipe de servi\u00e7os de <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/desenvolvimento\/\" target=\"_blank\" rel=\"noopener noreferrer\">desenvolvimento web personalizado<\/a>, e n\u00f3s podemos ajud\u00e1-lo:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1878\" height=\"742\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3.jpg\" alt=\"Servi\u00e7os Pro DreamHost - design de sites WordPress\" class=\"wp-image-33078 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3.jpg.webp 1878w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-300x119.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1024x405.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-768x303.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/wordpress-shortcodes3-1536x607.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-600x237.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1200x474.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-730x288.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1460x577.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-784x310.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1568x620.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-877x347.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/03\/wordpress-shortcodes3-1754x693.jpg.webp 1754w\" data-sizes=\"(max-width: 1878px) 100vw, 1878px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1878px; --smush-placeholder-aspect-ratio: 1878\/742;\" \/><\/figure><\/div>\n\n\n<p>Utilizando os Servi\u00e7os Pro da DreamHost, voc\u00ea s\u00f3 precisa preencher um pedido de desenvolvimento web. Faremos algumas perguntas simples sobre seu site e requisitos. Depois, podemos come\u00e7ar a trabalhar na implementa\u00e7\u00e3o das suas altera\u00e7\u00f5es em uma vers\u00e3o provis\u00f3ria do seu site. Uma vez que voc\u00ea tenha aprovado os ajustes finais, podemos aplicar o novo c\u00f3digo ao seu site ao vivo!<\/p>\n\n\n\n<h2 id=\"h-use-wordpress-shortcodes-to-enhance-your-content\" class=\"wp-block-heading\"><b>Use WordPress Shortcodes para Enriquecer Seu Conte\u00fado<\/b><\/h2>\n\n\n\n<p>Os shortcodes do WordPress podem enriquecer o conte\u00fado do seu site com recursos envolventes para os visitantes. Eles podem garantir que os leitores interajam com seu site e continuem voltando para mais.<\/p>\n\n\n\n<p>Neste post, n\u00f3s descrevemos quatro m\u00e9todos para usar shortcodes do WordPress em seu site:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Shortcodes padr\u00e3o do WordPress<\/li>\n\n\n\n<li>Shortcodes do Gutenberg<\/li>\n\n\n\n<li>Shortcodes de Plugins<\/li>\n\n\n\n<li>Shortcodes personalizados<\/li>\n\n\n\n\n<\/ol>\n\n\n\n<p>Se voc\u00ea sente que n\u00e3o possui a expertise t\u00e9cnica ou o tempo para escrever shortcodes ou Blocos, n\u00e3o se preocupe! Voc\u00ea pode conferir nossos <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/desenvolvimento\/\" target=\"_blank\" rel=\"noopener noreferrer\">Servi\u00e7os Profissionais de Desenvolvimento de Sites<\/a> para saber como podemos personalizar seu site com c\u00f3digo de alta qualidade.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"200\" height=\"202\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2020\/07\/CTA-Customer-Spotlight-2.png\" alt=\"Servi\u00e7os de desenvolvimento de site personalizado da DreamHost\" class=\"wp-image-25383 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 200px; --smush-placeholder-aspect-ratio: 200\/202;\" \/><\/figure><\/div>\n\n\n<p>\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Voc\u00ea Sonha, N\u00f3s Codificamos\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Aproveite mais de 20 anos de experi\u00eancia em programa\u00e7\u00e3o ao optar pelo nosso servi\u00e7o de Desenvolvimento Web. Apenas nos diga o que voc\u00ea deseja para o seu site \u2014 n\u00f3s cuidamos do resto.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/desenvolvimento\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Saiba Mais                    <\/a>\n\n  <\/div>\n<\/div>\n<\/p>\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Os shortcodes do WordPress podem facilmente enriquecer seu site com elementos interativos e envolventes que podem ser repetidos em posts e p\u00e1ginas. Exemplos incluem galerias de imagens, formul\u00e1rios de contato e playlists para tornar seu conte\u00fado mais \u00fatil e atraente. Neste post, vamos discutir os shortcodes do WordPress e por que eles s\u00e3o \u00fateis. Em seguida, vamos detalhar quatro m\u00e9todos para come\u00e7ar a usar [\u2026]<\/p>\n","protected":false},"author":1060,"featured_media":33073,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-wordpress-shortcodes-101\",\"Introdu\u00e7\u00e3o aos Shortcodes do WordPress\"],[\"h-why-you-might-consider-using-wordpress-shortcodes\",\"Por que voc\u00ea pode considerar usar Shortcodes do WordPress\"],[\"h-wordpress-shortcodes-101-4-ways-to-use-these-snippets\",\"WordPress Shortcodes 101 (4 Maneiras de Usar Esses Trechos)\"],[\"h-use-wordpress-shortcodes-to-enhance-your-content\",\"Use WordPress Shortcodes para Enriquecer Seu Conte\u00fado\"]]","hide_toc":false,"footnotes":""},"categories":[14474,14397,14409],"tags":[],"class_list":["post-55062","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comecando-pt","category-dreampress-pt","category-wordpress-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos)\" \/>\n<meta property=\"og:description\" content=\"Os shortcodes do WordPress podem facilmente enriquecer seu site com elementos interativos e envolventes que podem ser repetidos em posts e p\u00e1ginas. Exemplos incluem galerias de imagens, formul\u00e1rios de contato e playlists para tornar seu conte\u00fado mais \u00fatil e atraente. Neste post, vamos discutir os shortcodes do WordPress e por que eles s\u00e3o \u00fateis. Em seguida, vamos detalhar quatro m\u00e9todos para come\u00e7ar a usar [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-10T15:00:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T17:33:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Glassman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Glassman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos)","og_description":"Os shortcodes do WordPress podem facilmente enriquecer seu site com elementos interativos e envolventes que podem ser repetidos em posts e p\u00e1ginas. Exemplos incluem galerias de imagens, formul\u00e1rios de contato e playlists para tornar seu conte\u00fado mais \u00fatil e atraente. Neste post, vamos discutir os shortcodes do WordPress e por que eles s\u00e3o \u00fateis. Em seguida, vamos detalhar quatro m\u00e9todos para come\u00e7ar a usar [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-03-10T15:00:44+00:00","article_modified_time":"2025-05-26T17:33:49+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","type":"image\/jpeg"}],"author":"Brian Glassman","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Brian Glassman","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/"},"author":{"name":"Brian Glassman","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de"},"headline":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos)","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-26T17:33:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/"},"wordCount":1584,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","articleSection":["Come\u00e7ando","DreamPress","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/","name":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","datePublished":"2022-03-10T15:00:44+00:00","dateModified":"2025-05-26T17:33:49+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/03\/guide-to-wordpress-shortcodes.jpeg","width":900,"height":598,"caption":"guide to WordPress Shortcodes"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/introducao-aos-shortcodes-do-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Uma Introdu\u00e7\u00e3o aos Shortcodes do WordPress (Com Exemplos)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/e25c31f16fee80576bdd8b93a066f3de","name":"Brian Glassman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/brian-glassman-dreamhost-150x150.jpg","caption":"Brian Glassman"},"description":"SEO leader and content marketer, Brian is DreamHost\u2019s Director of SEO. Based in Chicago, Brian enjoys the local health food scene (deep dish pizza, Italian beef sandwiches) and famous year-round warm weather. Follow Brian on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/brianglassmandesign\/"],"url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/brian\/"}]}},"lang":"pt","translations":{"pt":55062,"es":33096,"en":33069,"de":52332,"pl":55006,"uk":55028,"ru":55116,"it":68356,"fr":70366,"nl":70395},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1060"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=55062"}],"version-history":[{"count":5,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55062\/revisions"}],"predecessor-version":[{"id":63840,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/55062\/revisions\/63840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/33073"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=55062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=55062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=55062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}