{"id":243040,"date":"2022-03-13T13:17:00","date_gmt":"2022-03-13T10:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=243040"},"modified":"2022-04-27T11:55:46","modified_gmt":"2022-04-27T08:55:46","slug":"como-criar-um-link-para-uma-parte-especifica-de-uma-pagina-do-wordpress-passo-a-passo","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-criar-um-link-para-uma-parte-especifica-de-uma-pagina-do-wordpress-passo-a-passo\/","title":{"rendered":"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)"},"content":{"rendered":"<p>Se voc\u00ea tiver uma p\u00e1gina longa em seu site, vincular os visitantes diretamente a uma se\u00e7\u00e3o dessa p\u00e1gina pode ser mais \u00fatil do que um link normal.<\/p>\n<p>Felizmente, o <a href=\"https:\/\/themewp.inform.click\/kak-ispolzovat-redaktor-blokov-wordpress-osnovnoe-rukovodstvo-po-gutenbergu\/\" title=\"editor Gutenberg\">editor Gutenberg<\/a> tornou isso f\u00e1cil e voc\u00ea n\u00e3o precisa instalar nenhum plug-in novo.<\/p>\n<p>E s\u00f3 para ficar claro, estou falando de um link como este que o levar\u00e1 para o t\u00edtulo abaixo: <a href=\"#first-heading\">role para o pr\u00f3ximo t\u00edtulo<\/a>.<\/p>\n<p>Voc\u00ea aprender\u00e1 a criar links como esse neste tutorial, que podem ser vinculados \u00e0 mesma p\u00e1gina ou a uma se\u00e7\u00e3o em uma p\u00e1gina separada.<\/p>\n<p>Este tutorial inclui <strong>etapas para o Editor Cl\u00e1ssico tamb\u00e9m<\/strong>, mas leia o resto da postagem primeiro para aprender como vincular corretamente.<\/p>\n<h2>Como vincular a parte de uma p\u00e1gina<\/h2>\n<p>Se voc\u00ea preferir tutoriais em v\u00eddeo, pode seguir este tutorial passo a passo em vez de ler as instru\u00e7\u00f5es nesta postagem.<\/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\/ghVHEzlLVqw\" frameborder=\"0\"><\/iframe><\/div>\n<p><a href=\"http:\/\/link.competethemes.com\/subscribe\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Inscreva-se nos Temas do Compete no Youtube<\/a><\/p>\n<p>Para criar um link para uma parte espec\u00edfica de uma p\u00e1gina, voc\u00ea precisa fazer duas coisas.<\/p>\n<ol>\n<li>Adicione uma \u00e2ncora para vincular<\/li>\n<li>Link para a \u00e2ncora<\/li>\n<\/ol>\n<p>Primeiro, voc\u00ea precisa encontrar uma maneira de designar o elemento ao qual se vincular\u00e1. Pode ser qualquer elemento, mas usaremos um t\u00edtulo, pois \u00e9 o elemento mais comum para o link.<\/p>\n<p>Depois que a \u00e2ncora for adicionada, tudo o que voc\u00ea precisa fazer \u00e9 criar um link para ela usando o editor de links normal e um formato de URL ligeiramente diferente.<\/p>\n<p>Ser\u00e1 f\u00e1cil de entender na pr\u00e1tica, ent\u00e3o vamos come\u00e7ar.<\/p>\n<h3>Como adicionar uma \u00e2ncora a um t\u00edtulo<\/h3>\n<p>Comece selecionando um bloco de t\u00edtulo no editor. Voc\u00ea ver\u00e1 uma se\u00e7\u00e3o Avan\u00e7ado na barra lateral direita que \u00e9 recolhida por padr\u00e3o.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1bc135c.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-187307-61702a1bc135c.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>Abra a se\u00e7\u00e3o Avan\u00e7ado e a primeira coisa que voc\u00ea ver\u00e1 \u00e9 a op\u00e7\u00e3o de \u00e2ncora HTML.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1da4d9e.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-187307-61702a1da4d9e.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>WordPress chama isso de \u00e2ncora, mas os desenvolvedores se referem a isso como o ID do elemento<\/p>\n<p>Dentro do campo \u00e2ncora HTML, d\u00ea ao t\u00edtulo um nome curto e descritivo. N\u00e3o pode ter espa\u00e7os, mas voc\u00ea pode usar h\u00edfens para separar palavras. Por exemplo, uma se\u00e7\u00e3o sobre dieta em um artigo sobre como cuidar de um c\u00e3o pode ter uma \u00e2ncora como &quot;dieta&quot; ou &quot;dieta para c\u00e3es&quot;.<\/p>\n<p>Depois de adicionar a \u00e2ncora, voc\u00ea est\u00e1 pronto para vincular a ela.<\/p>\n<h3>Como vincular a uma \u00e2ncora<\/h3>\n<p>As etapas s\u00e3o ligeiramente diferentes dependendo se o link est\u00e1 na mesma p\u00e1gina ou n\u00e3o. Vamos come\u00e7ar com os links da mesma p\u00e1gina.<\/p>\n<p>Para vincular a uma \u00e2ncora na mesma p\u00e1gina, realce o texto que deseja vincular e clique no \u00edcone do link (ou use o atalho cmd + k).<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a1f81764.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-187307-61702a1f81764.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>Em seguida, no campo URL, insira uma hashtag seguida pela \u00e2ncora.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a214c345.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-187307-61702a214c345.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>O WordPress at\u00e9 adiciona um r\u00f3tulo para que voc\u00ea saiba que este \u00e9 um link &quot;interno&quot;<\/p>\n<p>Depois de clicar em Enter, o link ser\u00e1 adicionado. Voc\u00ea pode visualizar o artigo para test\u00e1-lo imediatamente.<\/p>\n<p>Para usar essa t\u00e9cnica para uma \u00e2ncora em uma p\u00e1gina diferente, o URL precisa de uma pequena modifica\u00e7\u00e3o.<\/p>\n<p>A \u00fanica diferen\u00e7a \u00e9 que voc\u00ea adicionar\u00e1 o URL completo primeiro, seguido da hashtag e da \u00e2ncora, assim:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2317207.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-187307-61702a2317207.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>O link pode n\u00e3o funcionar sem a barra no final do URL antes da \u00e2ncora, portanto, certifique-se de inclu\u00ed-la sempre. Ele tamb\u00e9m pode <a href=\"https:\/\/themewp.inform.click\/vse-36-sposobov-uskorit-rabotu-vashego-sajta-na-wordpress\/\" title=\"tornar o carregamento do seu site mais r\u00e1pido\">tornar o carregamento do seu site mais r\u00e1pido<\/a>, ignorando o redirecionamento autom\u00e1tico para a vers\u00e3o com barra do URL.<\/p>\n<p>Isso provavelmente cobre tudo que voc\u00ea precisa saber sobre como adicionar links \u00e2ncora internos ao WordPress, mas eu tenho mais algumas dicas para mentes curiosas.<\/p>\n<p>Voc\u00ea pode usar essa mesma t\u00e9cnica para criar um <a href=\"https:\/\/themewp.inform.click\/11-luchshih-odnostranichnyh-tem-wordpress\/\" title=\"site de uma p\u00e1gina\">site de uma p\u00e1gina<\/a>.<\/p>\n<p>Com um site de uma p\u00e1gina, voc\u00ea tem apenas uma p\u00e1gina inicial, e o menu vincula os visitantes a diferentes se\u00e7\u00f5es dessa p\u00e1gina, em vez de a p\u00e1ginas inteiramente novas.<\/p>\n<p>Para criar esse tipo de site, voc\u00ea criar\u00e1 suas \u00e2ncoras usando o mesmo m\u00e9todo que acabou de aprender. Em seguida, voc\u00ea pode abrir seu menu no Customizador e usar a se\u00e7\u00e3o Links personalizados para criar um link para suas \u00e2ncoras.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a24dc72b.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-187307-61702a24dc72b.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>Se voc\u00ea usar essa t\u00e9cnica para um site de v\u00e1rias p\u00e1ginas, certifique-se de incluir o URL completo antes da hashtag.<\/p>\n<h2>Como vincular a outros elementos<\/h2>\n<p>Os t\u00edtulos n\u00e3o s\u00e3o os \u00fanicos elementos que incluem a op\u00e7\u00e3o de \u00e2ncora HTML.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode adicionar \u00e2ncoras a:<\/p>\n<ul>\n<li>Par\u00e1grafos<\/li>\n<li>Imagens<\/li>\n<li>Listas<\/li>\n<li>Galerias<\/li>\n<li>Mesas<\/li>\n<li>Cita\u00e7\u00f5es<\/li>\n<\/ul>\n<p>Na verdade, ao navegar pelos blocos de Gutenberg, n\u00e3o consegui encontrar um \u00fanico que n\u00e3o oferecesse suporte \u00e0 op\u00e7\u00e3o de \u00e2ncora HTML.<\/p>\n<p>Dito isso, se voc\u00ea usar um bloco adicionado por um plug-in, essa op\u00e7\u00e3o pode estar faltando. Al\u00e9m disso, a op\u00e7\u00e3o de \u00e2ncora n\u00e3o est\u00e1 dispon\u00edvel se voc\u00ea estiver usando o Editor Cl\u00e1ssico, ent\u00e3o veja como voc\u00ea pode editar o HTML para adicionar uma \u00e2ncora a qualquer elemento em seu site.<\/p>\n<h2>Como adicionar links \u00e2ncora com HTML<\/h2>\n<p>Se voc\u00ea estiver usando o Editor Cl\u00e1ssico (ou um bloco sem o campo \u00e2ncora HTML), h\u00e1 mais algumas etapas para adicionar o link.<\/p>\n<p><strong>A maneira como voc\u00ea se vincula \u00e0 \u00e2ncora \u00e9 a mesma<\/strong>. A \u00fanica diferen\u00e7a \u00e9 como voc\u00ea adiciona a \u00e2ncora ao elemento.<\/p>\n<p>Para adicionar a \u00e2ncora, voc\u00ea precisa editar o HTML. No editor de Gutenberg, voc\u00ea pode abrir o menu de op\u00e7\u00f5es do bloco e selecionar Editar como HTML. No Editor Cl\u00e1ssico, use as guias no canto superior direito para alternar da visualiza\u00e7\u00e3o Visual para a Visualiza\u00e7\u00e3o de Texto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-187307-61702a2684f8f.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-187307-61702a2684f8f.png\" alt=\"Como criar um link para uma parte espec\u00edfica de uma p\u00e1gina do WordPress (passo a passo)\"><\/a><\/p>\n<p>Ao visualizar o HTML, voc\u00ea ver\u00e1 que seus cabe\u00e7alhos est\u00e3o envolvidos com tags HTML como este:<\/p>\n<pre><code>&lt;h3&gt;This is a heading&lt;\/h3&gt;<\/code><\/pre>\n<p>Para adicionar uma \u00e2ncora, voc\u00ea precisa adicionar o atributo ID ao t\u00edtulo. Aqui est\u00e1 um exemplo dando ao t\u00edtulo uma \u00e2ncora chamada &#8220;dieta para c\u00e3es&quot;:<\/p>\n<pre><code>&lt;h3 id=\"dog-diet\"&gt;This is a heading&lt;\/h3&gt;<\/code><\/pre>\n<p>Cada elemento HTML pode usar o atributo ID, ent\u00e3o voc\u00ea n\u00e3o est\u00e1 limitado aos cabe\u00e7alhos. No Editor Cl\u00e1ssico, muito do HTML realmente n\u00e3o aparece, mas voc\u00ea sempre pode envolver uma se\u00e7\u00e3o em tags &#8220;div&#8221; para adicionar uma \u00e2ncora, como este:<\/p>\n<pre><code>&lt;div id=\"link-target\"&gt;<\/code><\/pre>\n<p>Adicionar o elemento div n\u00e3o far\u00e1 nenhuma diferen\u00e7a visual na p\u00e1gina, mas permitir\u00e1 que voc\u00ea vincule diretamente a esses par\u00e1grafos.<\/p>\n<p>Editar o HTML desta forma funciona exatamente da mesma forma, quer voc\u00ea esteja usando o Gutenberg ou o Editor Cl\u00e1ssico. Depois que a \u00e2ncora estiver no lugar, tudo o que voc\u00ea precisa fazer \u00e9 vincular a ela usando o m\u00e9todo descrito acima.<\/p>\n<h3>Continue aprendendo WordPress<\/h3>\n<p>Com conhecimento de links \u00e2ncora e um pouco de HTML, voc\u00ea pode criar um link para qualquer se\u00e7\u00e3o em qualquer p\u00e1gina de qualquer lugar do seu site.<\/p>\n<p>Se aprender novas t\u00e9cnicas de WordPress \u00e9 empolgante e gratificante para voc\u00ea, provavelmente vai adorar meu curso gratuito por e-mail em WordPress:<\/p>\n<p><a href=\"https:\/\/www.competethemes.com\/subscribe\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Fa\u00e7a o curso de e-mail WordPress Mastery de 7 dias<\/a><\/p>\n<p>Se n\u00e3o gostar, voc\u00ea pode cancelar a inscri\u00e7\u00e3o com um clique, mas tenho certeza de que voc\u00ea receber\u00e1 pelo menos uma nova dica valiosa. O curso por e-mail de 7 dias oferece t\u00e1ticas de design, marketing e desempenho para criar um site melhor e completo.<\/p>\n<p>Obrigado por ler este guia sobre como criar links para partes de p\u00e1ginas no WordPress e, por favor, considere compartilh\u00e1-lo com outra pessoa usando os bot\u00f5es sociais abaixo.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprenda como criar um link para uma parte espec\u00edfica de qualquer postagem ou p\u00e1gina do WordPress. Leva apenas um minuto e n\u00e3o requer novos plug-ins.<\/p>\n","protected":false},"author":1,"featured_media":21644,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[142,655,573,613],"tags":[848],"class_list":["post-243040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria","category-como-fazer","category-nocoes-basicas-do-wordpress","category-uncategorized-9","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/243040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=243040"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/243040\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/21644"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=243040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=243040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=243040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}