{"id":8869,"date":"2018-04-13T11:21:37","date_gmt":"2018-04-13T14:21:37","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=8869"},"modified":"2024-10-30T12:14:01","modified_gmt":"2024-10-30T15:14:01","slug":"como-usar-do-shortcode-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/como-usar-do-shortcode-wordpress\/","title":{"rendered":"Como usar a fun\u00e7\u00e3o do_shortcode no WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Expandir a funcionalidade do seu site WordPress &eacute; muito f&aacute;cil, especialmente com a ajuda de shortcodes. Para coloc&aacute;-los em qualquer parte do seu site, voc&ecirc; pode usar a fun&ccedil;&atilde;o do WordPress <strong>do_shortcode<\/strong>. Nos par&aacute;grafos a seguir, vamos mostrar como voc&ecirc; pode us&aacute;-lo. Ent&atilde;o, vamos come&ccedil;ar explorando o b&aacute;sico dos <strong>shortcodes do WordPress<\/strong>.<\/p><p>\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-shortcode\"><strong>O Que &eacute; Shortcode?<\/strong><\/h2><p class=\"wp-block-paragraph\">Shortcode &eacute; um trecho de c&oacute;digo que permite executar uma fun&ccedil;&atilde;o, como <strong>exibir conte&uacute;do<\/strong>. Por exemplo, se voc&ecirc; criar um slider usando o plugin <a href=\"https:\/\/br.wordpress.org\/plugins\/ml-slider\/\" target=\"_blank\" rel=\"noopener\"><strong>MetaSlider<\/strong><\/a>, voc&ecirc; precisa incorporar o shortcode do plugin em alguma &aacute;rea do seu site para mostrar o slider.<\/p><p class=\"wp-block-paragraph\">No entanto, voc&ecirc; s&oacute; pode incorpor&aacute;-lo no <strong>corpo de uma p&aacute;gina\/post<\/strong> ou na &aacute;rea de <strong>widgets<\/strong> do site. Caso contr&aacute;rio, o conte&uacute;do n&atilde;o aparecer&aacute;. Para resolver esse problema, voc&ecirc; pode usar a fun&ccedil;&atilde;o <strong>do_shortcode<\/strong> do WordPress. Ele permite que voc&ecirc; incorpore o shortcode em qualquer lugar do site que desejar, incluindo o cabe&ccedil;alho. Ele ficar&aacute; tipo assim:<\/p><pre class=\"wp-block-preformatted\">&lt;?php echo do_shortcode( '[seu shortcode vai aqui]' ); ?&gt;<\/pre><p class=\"wp-block-paragraph\">Para aplicar essa fun&ccedil;&atilde;o, voc&ecirc; precisa acessar e ajustar os <strong>arquivos do tema<\/strong>. N&atilde;o se esque&ccedil;a de <a href=\"\/br\/tutoriais\/como-fazer-backup-do-seu-site-wordpress\/\"><strong>fazer um backup completo do seu site WordPress<\/strong><\/a> e usar <a href=\"\/br\/tutoriais\/como-criar-o-tema-filho-wordpress\/\"><strong>um child theme WordPress<\/strong><\/a> para evitar a perda de dados se algo der errado.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-usar-o-do-shortcode-no-wordpress\"><strong>Como Usar o do_shortcode no WordPress?<\/strong><\/h2><p class=\"wp-block-paragraph\">Agora, vamos tentar adicionar um shortcode usando o WordPress <strong>do_shortcode<\/strong>. Por exemplo, vamos supor que voc&ecirc; queira incluir um <strong>slider<\/strong> no <strong>cabe&ccedil;alho<\/strong> do seu tema usando o MetaSlider (certifique-se de ter <a href=\"\/br\/tutoriais\/como-instalar-plugins-wordpress\/\"><strong>instalado o plugin<\/strong><\/a> antes, naturalmente). No entanto, voc&ecirc; n&atilde;o tem nenhum widget para a &aacute;rea do cabe&ccedil;alho.<\/p><p class=\"wp-block-paragraph\">Ent&atilde;o, voc&ecirc; precisa incorporar o shortcode do slider no <strong>arquivo de cabe&ccedil;alho do tema<\/strong>. Para fazer isso, siga as seguintes etapas:<\/p><ol class=\"wp-block-list\">\n<li>Clique em <strong>MetaSlider <\/strong>na barra lateral esquerda do <a href=\"\/br\/tutoriais\/wordpress-login-guia-rapido-acessar-site\/\"><strong>painel de administra&ccedil;&atilde;o do WordPress<\/strong><\/a>.<\/li>\n\n\n\n<li><strong>Copie<\/strong> o shortcode no canto inferior direito da p&aacute;gina.<br><img decoding=\"async\" width=\"1024\" height=\"483\" class=\"wp-image-42017\" style=\"width: 720px\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2018\/04\/metaslider.png\" alt=\"capturando shortcode do plugin metaslider no wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/metaslider.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/metaslider.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/metaslider.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/metaslider.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<\/ol><p class=\"wp-block-paragraph\">Se voc&ecirc; notar, o shortcode do MetaSlider j&aacute; est&aacute; dentro da fun&ccedil;&atilde;o <strong>do_shortcode<\/strong> do WordPress. Voc&ecirc; pode ent&atilde;o prosseguir com a edi&ccedil;&atilde;o do arquivo de <strong>cabe&ccedil;alho<\/strong> do tema acessando o <strong>gerenciador de arquivos<\/strong> do seu <a href=\"\/br\/hospedagem-wordpress\">host<\/a> ou um <a href=\"\/br\/tutoriais\/como-configurar-o-cliente-filezilla\/\"><strong>cliente FTP<\/strong><\/a>, como o <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener\"><strong>FileZilla<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">Os seguintes passos mostrar&atilde;o como editar arquivos de tema com o <a href=\"\/br\/tutoriais\/como-utilizar-o-gerenciador-de-arquivos-hostinger\/\"><strong>Gerenciador de Arquivos da Hostinger<\/strong><\/a>, mas o guia tamb&eacute;m pode ser seguido em um <strong>cliente FTP<\/strong>.<\/p><ol class=\"wp-block-list\">\n<li>Acesse seu <strong>hPanel<\/strong> e clique em <strong>Gerenciador de Arquivos<\/strong><\/li>\n\n\n\n<li>V&aacute; para a<strong> <\/strong>pasta public_html e navegue at&eacute;<strong> wp-contents -&gt; themes.<\/strong><\/li>\n\n\n\n<li>Acesse a pasta do <strong>tema<\/strong> <strong>atualmente ativo<\/strong>.<\/li>\n\n\n\n<li>Abra <strong>header.php<\/strong>, depois role a p&aacute;gina para baixo e coloque a fun&ccedil;&atilde;o <strong>do_shortcode <\/strong>acima da tag <strong>&lt;\/header&gt; <\/strong>.<br><img decoding=\"async\" width=\"1024\" height=\"546\" class=\"wp-image-42016\" style=\"width: 720px\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2018\/04\/codigo-do-shortcode.png\" alt=\"inserindo shortcode do wordpress no cabe&ccedil;alho com a fun&ccedil;&atilde;o do_shortcode\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/codigo-do-shortcode.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/codigo-do-shortcode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/codigo-do-shortcode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/codigo-do-shortcode.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/li>\n\n\n\n<li><strong>Salve<\/strong> e verifique a apar&ecirc;ncia do seu site.<br><img decoding=\"async\" width=\"1024\" height=\"483\" class=\"wp-image-42015\" style=\"width: 720px\" src=\"https:\/\/blog.hostinger.io\/br-tutoriais\/wp-content\/uploads\/sites\/53\/2018\/04\/do-shortcode-wordpress.png\" alt=\"shortcode do metaslider inserido no cabe&ccedil;alho do wordpress com a fun&ccedil;&atilde;o do_shortcode\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/do-shortcode-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/do-shortcode-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/do-shortcode-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/04\/do-shortcode-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<\/ol><p class=\"wp-block-paragraph\">&Agrave;s vezes, editar os arquivos principais do tema pode quebrar o layout do seu site. Para resolver isso, voc&ecirc; deve fazer altera&ccedil;&otilde;es no CSS para que seu site se reajuste ao conte&uacute;do. Confira nossos tutoriais sobre como <a href=\"\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo\/\"><strong>inspecionar elementos<\/strong><\/a> com o Chrome e <a href=\"\/br\/tutoriais\/codigos-css-prontos-guia-pdf\/\"><strong>baixe nossa folha de dicas CSS<\/strong><\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/br\/hospedagem-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/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\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/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><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Agora voc&ecirc; j&aacute; sabe como usar shortcodes e exibi-los usando a fun&ccedil;&atilde;o <strong>do_shortcode <\/strong>&nbsp;do WordPress. Basta coloc&aacute;-lo no arquivo do tema e voc&ecirc; j&aacute; pode come&ccedil;ar! N&atilde;o se esque&ccedil;a de fazer backup do seu site antes de editar o arquivo, para evitar o risco de perder dados.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; tem alguma pergunta sobre o t&oacute;pico? 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 T&eacute;cnicas Avan&ccedil;adas de WordPress                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><a href=\"\/br\/tutoriais\/como-ativar-multisite-wordpress\/\"><strong>WordPress Multisite<br><\/strong><\/a><a href=\"\/br\/tutoriais\/como-criar-custom-post-types-wordpress\/\"><strong>Tipos de Post Personalizados no WordPress<br><\/strong><\/a><a href=\"\/br\/tutoriais\/adicionar-css-personalizado-wordpress\/\"><strong>Adicionar CSS Personalizado ao WordPress<br><\/strong><\/a><a href=\"\/br\/tutoriais\/editar-html-wordpress\/\"><strong>Como Editar HTML no WordPress<br><\/strong><\/a><a href=\"\/br\/tutoriais\/wordpress-headless\/\"><strong>WordPress Sem Cabe&ccedil;alho<br><\/strong><\/a><a href=\"\/br\/tutoriais\/guia-iniciante-api-rest-wordpress\/\"><strong>API Rest do WordPress<\/strong><\/a><\/p>\n                    <\/div>\n        \n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Expandir a funcionalidade do seu site WordPress &eacute; muito f&aacute;cil, especialmente com a ajuda de shortcodes. Para coloc&aacute;-los em qualquer parte do seu site, voc&ecirc; pode usar a fun&ccedil;&atilde;o do WordPress do_shortcode. Nos par&aacute;grafos a seguir, vamos mostrar como voc&ecirc; pode us&aacute;-lo. Ent&atilde;o, vamos come&ccedil;ar explorando o b&aacute;sico dos shortcodes do WordPress. O Que &eacute; [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/como-usar-do-shortcode-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"A fun\u00e7\u00e3o do_shortcode permite colar shortcodes em qualquer \u00e1rea do seu site WordPress, n\u00e3o apenas p\u00e1ginas ou \u00e1reas de widgets. Saiba como!","rank_math_focus_keyword":"do_shortcode","footnotes":""},"categories":[4911],"tags":[5394,5395],"class_list":["post-8869","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-do_shortcode-wordpress","tag-wordpress-shortcode"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-do_shortcode\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-usar-do-shortcode-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/do_shortcode-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/do_shortcode-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-do_shortcode\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/usar-do_shortcode-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-usar-do-shortcode-wordpress\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=8869"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8869\/revisions"}],"predecessor-version":[{"id":46619,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8869\/revisions\/46619"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=8869"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=8869"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=8869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}