{"id":56684,"date":"2023-11-28T07:00:36","date_gmt":"2023-11-28T15:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=56684"},"modified":"2025-05-26T12:47:49","modified_gmt":"2025-05-26T19:47:49","slug":"guia-para-desenvolver-um-tema-wp","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/","title":{"rendered":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress?"},"content":{"rendered":"\n<p>Se voc\u00ea deseja que algo seja feito de uma determinada maneira \u2014 bem, voc\u00ea pode ter que fazer isso por conta pr\u00f3pria. Embora existam muitos <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-encontrar-temas-wp\/\" target=\"_blank\" rel=\"noopener\">temas do WordPress<\/a> dispon\u00edveis, encontrar um que atenda \u00e0s suas necessidades espec\u00edficas pode ser dif\u00edcil. Em sua busca pela solu\u00e7\u00e3o perfeita, voc\u00ea pode ser tentado a criar seu pr\u00f3prio tema personalizado do WordPress.<\/p>\n\n\n\n<p>Felizmente, criar um tema personalizado para WordPress \u00e9 um processo relativamente direto. Surpreendentemente, n\u00e3o requer muitos conhecimentos t\u00e9cnicos ou experi\u00eancia com desenvolvimento web. Al\u00e9m disso, construir seu pr\u00f3prio tema pode valer muito a pena, j\u00e1 que voc\u00ea pode fazer seu site ficar exatamente do jeito que voc\u00ea quer.<\/p>\n\n\n\n<h2 id=\"design\" class=\"wp-block-heading\">Projetando um Site Personalizado do WordPress<\/h2>\n\n\n\n<p>Voc\u00ea quer que seu site tenha uma \u00f3tima apar\u00eancia e toda a funcionalidade necess\u00e1ria, ent\u00e3o voc\u00ea confere o <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\">Diret\u00f3rio de Temas do WordPress<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes.jpg\" alt=\"captura de tela da visualiza\u00e7\u00e3o principal dos temas do wordpress com tr\u00eas op\u00e7\u00f5es de tema exibidas\" class=\"wp-image-42452 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-877x439.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n\n<p>Infelizmente, nada do que voc\u00ea v\u00ea atende \u00e0s suas exig\u00eancias, e voc\u00ea n\u00e3o quer comprometer sua vis\u00e3o. Talvez voc\u00ea queira algo \u00fanico para fazer seu site se destacar, mas voc\u00ea n\u00e3o quer gastar dinheiro em um tema premium.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Construtores de P\u00e1ginas<\/h3>\n\n\n\n<p>Uma op\u00e7\u00e3o \u00e9 usar um <a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noopener\">plugin de construtor de p\u00e1ginas<\/a>. Essas ferramentas permitem que voc\u00ea pegue um tema existente e reorganize o layout para atender \u00e0s suas necessidades. A maioria dos construtores de p\u00e1ginas populares oferece controles simples de arrastar e soltar sem a necessidade de programa\u00e7\u00e3o. Certos temas multiprop\u00f3sito v\u00eam com esse recurso integrado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Temas de Bloco<\/h3>\n\n\n\n<p>Se voc\u00ea decidir experimentar o Editor nativo do WordPress, a edi\u00e7\u00e3o completa do site \u00e9 um conjunto de funcionalidades no WordPress que inclui v\u00e1rias ferramentas para tornar o processo de design mais acess\u00edvel para os propriet\u00e1rios de sites.<\/p>\n\n\n\n<p>Utilizando este novo Editor de Sites, voc\u00ea pode usar blocos de arrastar e soltar para personalizar a maior parte do seu site a partir de uma \u00fanica interface, incluindo modelos de p\u00e1gina, sem usar c\u00f3digo. Aqui est\u00e1 o nosso <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/edicao-completa-de-site-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">guia completo para Edi\u00e7\u00e3o Completa do Site<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Personaliza\u00e7\u00e3o de Tema<\/h3>\n\n\n\n<p>Se voc\u00ea escolher um tema personaliz\u00e1vel, tamb\u00e9m poder\u00e1 ajustar a apar\u00eancia do seu site sem necessidade de conhecimentos t\u00e9cnicos. Usando o Personalizador do WordPress e o painel de Op\u00e7\u00f5es de Tema, voc\u00ea deve conseguir ajustar diversos elementos de design:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Esquema de cores<\/b>: Da cor de fundo do seu site \u00e0 tonalidade espec\u00edfica do texto do corpo.<\/li>\n\n\n\n<li><b>Tipografia<\/b>: Isso abrange as fontes usadas em seu site e como o texto \u00e9 exibido em v\u00e1rios tipos de conte\u00fado.<\/li>\n\n\n\n<li><b>Layout<\/b>: Certos temas permitem que voc\u00ea alterne entre diferentes layouts e escolha como seu site deve se adaptar a diferentes tamanhos de tela.<\/li>\n\n\n<\/ul>\n\n\n\n<p>A escolha exata das op\u00e7\u00f5es aqui depender\u00e1 do tema que voc\u00ea escolher e como ele se coordena com o restante de seus ativos de marca e <a href=\"https:\/\/www.hubspot.com\/campaign-assistant\" target=\"_blank\" rel=\"noreferrer noopener\">campanhas de marketing<\/a>. Temas premium tendem a ser mais generosos com recursos de personaliza\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Criando um Tema Filho<\/h3>\n\n\n\n<p>Se voc\u00ea deseja mais controle, pode considerar <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">criar um tema filho<\/a>.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Tema Filho<\/h3>\n    <p>Um \u2018tema filho\u2019 \u00e9 um tema do WordPress com a mesma apar\u00eancia e funcionalidade que seu \u2018tema principal\u2019. No entanto, voc\u00ea pode personalizar seus arquivos separadamente dos arquivos de seu tema principal.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/child-theme\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Dado o n\u00famero de op\u00e7\u00f5es no Diret\u00f3rio de Temas do WordPress, \u00e9 prov\u00e1vel que voc\u00ea encontre um tema que atenda a algumas (se n\u00e3o todas) das suas necessidades. Em vez de come\u00e7ar com um modelo muito b\u00e1sico, voc\u00ea pode adaptar o tema existente para atender \u00e0 sua vis\u00e3o.<\/p>\n\n\n\n<p>Na superf\u00edcie, um tema filho do WordPress funciona como qualquer outro tema. A principal diferen\u00e7a \u00e9 que um tema filho herda atributos de um tema principal (o tema original que voc\u00ea escolheu usar).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes.jpg\" alt=\"Quatro op\u00e7\u00f5es de temas principais exibidas ao redor de uma op\u00e7\u00e3o para &quot;adicionar seu tema&quot; \" class=\"wp-image-42453 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Essa rela\u00e7\u00e3o permite que o tema filho substitua partes espec\u00edficas do tema principal, mantendo a maior parte da apar\u00eancia e funcionalidade do pai.<\/p>\n\n\n\n<p>Temas Filhos oferecem um m\u00e9todo eficiente para personalizar um tema existente sem modificar os arquivos do tema principal. Atualizar os temas principal e secund\u00e1rio para corre\u00e7\u00f5es de seguran\u00e7a e bugs \u00e9 essencial. Na maioria das vezes, apenas o tema principal precisar\u00e1 ser atualizado.<\/p>\n\n\n\n<p>Assim, usar um tema filho \u00e9 uma maneira eficaz de criar uma presen\u00e7a online \u00fanica sem se aprofundar demais no mundo do desenvolvimento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Controle Completo<\/h3>\n\n\n\n<p>\u00c0s vezes, at\u00e9 isso n\u00e3o \u00e9 suficiente. Quando voc\u00ea quer construir algo verdadeiramente \u00fanico, \u00e9 hora de considerar criar seu pr\u00f3prio tema.<\/p>\n\n\n\n<p>Felizmente, desenvolver um tema para WordPress \u00e9 mais f\u00e1cil do que voc\u00ea pode imaginar. Gra\u00e7as \u00e0 interface amig\u00e1vel da plataforma e \u00e0s numerosas ferramentas dispon\u00edveis, quase qualquer pessoa pode criar um tema personalizado.<\/p>\n\n\n\n<p>Vamos gui\u00e1-lo atrav\u00e9s do processo de cria\u00e7\u00e3o do seu primeiro tema. Para come\u00e7ar, voc\u00ea precisar\u00e1 de duas coisas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Seu pr\u00f3prio <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/custo-do-site-wordpress\/\" target=\"_blank\" rel=\"noopener\">site WordPress<\/a><\/li>\n\n\n\n<li>Um <a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\" target=\"_blank\" rel=\"noopener\">plano de hospedagem de qualidade<\/a><\/li>\n\n\n<\/ul>\n\n\n\n<p>Voc\u00ea tamb\u00e9m se beneficiar\u00e1 de ter experi\u00eancia com <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-do-iniciante-para-staging-de-websites\/\" target=\"_blank\" rel=\"noopener\">ambientes de staging locais<\/a>, pois voc\u00ea usar\u00e1 um para criar seu tema. Ter algum entendimento de <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> e <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-php\/\" target=\"_blank\" rel=\"noopener\">PHP<\/a> tamb\u00e9m ser\u00e1 \u00fatil (embora n\u00e3o seja estritamente necess\u00e1rio).<\/p>\n\n\n\n<p>Finalmente, h\u00e1 uma ferramenta importante que voc\u00ea vai querer ter, que tornar\u00e1 o processo muito mais f\u00e1cil: um tema inicial.<\/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<h2 id=\"starter\" class=\"wp-block-heading\">O que \u00e9 um Tema Inicial? (E Por Que Voc\u00ea Deve Usar Um)<\/h2>\n\n\n\n<p>Um tema inicial \u00e9 um tema WordPress b\u00e1sico que voc\u00ea pode usar como base para criar o seu pr\u00f3prio. Isso permite que voc\u00ea construa em uma estrutura s\u00f3lida sem se preocupar com as complexidades de codificar um tema do zero. Tamb\u00e9m ajudar\u00e1 voc\u00ea a entender como o WordPress funciona, mostrando a estrutura b\u00e1sica de um tema e como todas as suas partes funcionam juntas.<\/p>\n\n\n\n<p>Existem muitos temas iniciais excelentes dispon\u00edveis, incluindo <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>, <a href=\"https:\/\/understrap.com\/\" target=\"_blank\" rel=\"noopener\">UnderStrap<\/a> e <a href=\"https:\/\/themble.com\/bones\/\" target=\"_blank\" rel=\"noopener\">Bones<\/a> (s\u00f3 para citar alguns).<\/p>\n\n\n\n<p>Usaremos Underscores para nosso tutorial. \u00c9 uma escolha s\u00f3lida para iniciantes porque cont\u00e9m apenas o b\u00e1sico. Al\u00e9m disso, esse tema inicial foi desenvolvido pela Automattic (a equipe por tr\u00e1s do WordPress.com), o que significa que \u00e9 mais prov\u00e1vel que seja seguro, compat\u00edvel e bem suportado a longo prazo.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>WordPress.com<\/h3>\n    <p>WordPress.com \u00e9 a vers\u00e3o hospedada do WordPress. Como oferece uma op\u00e7\u00e3o de plano completamente gratuita, WordPress.com \u00e9 uma plataforma popular para blogs e sites pessoais.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/wordpress-com\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"develop\" class=\"wp-block-heading\">Como Desenvolver Seu Primeiro Tema do WordPress (Em 5 Passos)<\/h2>\n\n\n\n<p>Com a prepara\u00e7\u00e3o conclu\u00edda, voc\u00ea est\u00e1 finalmente pronto para come\u00e7ar a criar seu primeiro tema. Como mencionamos anteriormente, usaremos um tema inicial para este guia.<\/p>\n\n\n\n<p>Entretanto, se voc\u00ea quiser tentar criar tudo por si mesmo sem um modelo, pode faz\u00ea-lo, mas essa abordagem exigir\u00e1 muito mais profici\u00eancia em programa\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 1: Configure um Ambiente Local<\/h3>\n\n\n\n<p>A primeira coisa que voc\u00ea precisar\u00e1 fazer \u00e9 <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-do-iniciante-para-staging-de-websites\/\" target=\"_blank\" rel=\"noopener\">criar um ambiente de desenvolvimento local<\/a>. Isso \u00e9 efetivamente um servidor que voc\u00ea instala em seu computador, que pode usar para desenvolver e gerenciar sites locais do WordPress. Um site local \u00e9 uma maneira segura de desenvolver um tema sem impactar seu site ao vivo.<\/p>\n\n\n\n<p>Existem muitas maneiras de criar um ambiente local, mas usaremos <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local<\/a>. Esta \u00e9 uma forma r\u00e1pida e f\u00e1cil de instalar uma vers\u00e3o local do WordPress gratuitamente e \u00e9 compat\u00edvel tanto com Mac quanto com Windows:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"875\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local.jpg\" alt=\"Captura de tela da p\u00e1gina inicial do Local declarando ser &quot;A ferramenta de desenvolvimento WordPress local n\u00ba 1&quot; \" class=\"wp-image-42454 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-300x164.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-1024x560.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-768x420.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-1536x840.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-600x328.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1200x656.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-730x399.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1460x798.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-784x429.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1568x858.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-877x480.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/875;\" \/><\/figure>\n\n\n\n<p>Para come\u00e7ar, selecione a vers\u00e3o gratuita de Local, escolha sua plataforma, adicione seus detalhes e baixe o instalador. Quando a instala\u00e7\u00e3o estiver conclu\u00edda, voc\u00ea pode abrir o programa em seu computador.<\/p>\n\n\n\n<p>Aqui, voc\u00ea ser\u00e1 solicitado a configurar seu novo ambiente local:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP.jpg\" alt=\"Captura de tela da etapa &quot;Configurar WordPress&quot; local solicitando o nome de usu\u00e1rio, senha e e-mail do usu\u00e1rio do WordPress\" class=\"wp-image-42455 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Este \u00e9 <a href=\"https:\/\/wpengine.com\/resources\/local-wordpress-development-environment-how-to\/\" target=\"_blank\" rel=\"noopener\">um processo simples<\/a>, e voc\u00ea ter\u00e1 seu site local do WordPress pronto em poucos minutos. Uma vez configurado, seu novo site ter\u00e1 a apar\u00eancia e funcionar\u00e1 exatamente como um site WordPress ao vivo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 2: Baixe e Instale Seu Tema Inicial<\/h3>\n\n\n\n<p>Como a maioria dos temas iniciais, <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a> \u00e9 muito f\u00e1cil de come\u00e7ar. Na verdade, tudo o que voc\u00ea precisa fazer \u00e9 acessar o site e nomear seu tema:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1050\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores.jpg\" alt=\"captura de tela do tema inicial Underscores declarando &quot;Crie seu tema baseado em Underscores&quot; com uma caixa de texto &quot;nome do tema&quot; ao lado de um bot\u00e3o &quot;gerar&quot;\" class=\"wp-image-42456 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-1024x672.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-768x504.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-1536x1008.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-600x394.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1200x788.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-730x479.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1460x958.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1568x1029.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-877x576.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1050;\" \/><\/figure>\n\n\n\n<p>Se desejar, voc\u00ea pode clicar em <i>Op\u00e7\u00f5es Avan\u00e7adas<\/i> para personalizar ainda mais o tema base:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"550\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option.jpg\" alt=\"Vis\u00e3o aproximada da caixa de texto &quot;Nome do tema&quot; com &quot;Op\u00e7\u00f5es Avan\u00e7adas&quot; exibidas logo abaixo\" class=\"wp-image-42457 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-300x103.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-1024x352.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-768x264.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-1536x528.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-600x206.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1200x413.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-730x251.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1460x502.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-784x270.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1568x539.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-877x301.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/550;\" \/><\/figure>\n\n\n\n<p>Aqui, voc\u00ea pode preencher mais informa\u00e7\u00f5es, como o nome do autor, e dar uma descri\u00e7\u00e3o ao tema:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author.jpg\" alt=\"A mesma caixa de texto do nome do tema agora mostrando caixas de texto adicionais: slug do tema, autor, URL do autor e descri\u00e7\u00e3o, bem como caixas de sele\u00e7\u00e3o para &quot;WooCommerce boilerplate&quot; e &quot;_sassify!&quot;\" class=\"wp-image-42458 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Tamb\u00e9m existe a op\u00e7\u00e3o <i>_sassify!<\/i>, que adicionar\u00e1 arquivos Syntactically Awesome StyleSheets (SASS) ao seu tema. SASS \u00e9 uma linguagem de pr\u00e9-processamento para CSS que permite usar vari\u00e1veis, aninhamento, operadores matem\u00e1ticos e mais.<\/p>\n\n\n\n<p>Quando voc\u00ea tiver feito suas escolhas, pode clicar em <i>Generate<\/i>, que far\u00e1 o download de um arquivo <i>.zip<\/i> contendo seu tema inicial. Este \u00e9 o arquivo principal ao redor do qual voc\u00ea desenvolver\u00e1 seu pr\u00f3prio tema, ent\u00e3o voc\u00ea precisar\u00e1 <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tutorial-de-como-instalar-um-tema-wp\/\" target=\"_blank\" rel=\"noopener\">instal\u00e1-lo em seu site local<\/a>.<\/p>\n\n\n\n<p>Depois de instalar o seu tema, voc\u00ea pode visualizar seu site para ver como ele fica. Est\u00e1 muito b\u00e1sico agora, mas isso n\u00e3o ser\u00e1 assim por muito tempo!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 3: Aprenda sobre os diferentes componentes de um tema do WordPress<\/h3>\n\n\n\n<p>Antes de personalizar seu tema, voc\u00ea precisar\u00e1 entender o prop\u00f3sito de seus componentes e como eles se encaixam.<\/p>\n\n\n\n<p>Primeiro, vamos discutir os <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-files\/\" target=\"_blank\" rel=\"noopener\">arquivos de template<\/a>, que s\u00e3o os principais componentes de um tema WordPress. Esses arquivos determinam o layout e a apar\u00eancia do conte\u00fado no seu site.<\/p>\n\n\n\n<p>Por exemplo, <i>header.php<\/i> \u00e9 usado para criar um cabe\u00e7alho, enquanto <i>comments.php<\/i> permite que voc\u00ea exiba coment\u00e1rios.<\/p>\n\n\n\n<p>O WordPress determina quais arquivos de template usar em cada p\u00e1gina percorrendo a <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\" target=\"_blank\" rel=\"noopener\">hierarquia de templates<\/a>. Esta \u00e9 <a href=\"https:\/\/wphierarchy.com\/\" target=\"_blank\" rel=\"noopener\">a ordem<\/a> na qual o WordPress procurar\u00e1 pelos arquivos de template correspondentes toda vez que uma p\u00e1gina do seu site for carregada.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea visitar a URL <i>http:\/\/example.com\/post\/esse-post<\/i>, o WordPress procurar\u00e1 os seguintes arquivos de template nesta ordem:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Arquivos que correspondem ao slug, como <i>this-post<\/i><\/li>\n\n\n\n<li>Arquivos que correspondem ao ID do post<\/li>\n\n\n\n<li>Um arquivo de post \u00fanico gen\u00e9rico, como <i>single.php<\/i><\/li>\n\n\n\n<li>Um arquivo de arquivo, como <i>archive.php<\/i><\/li>\n\n\n\n<li>O arquivo <i>index.php<\/i><\/li>\n\n\n<\/ol>\n\n\n\n<p>Uma vez que o arquivo <i>index.php<\/i> \u00e9 necess\u00e1rio para todos os temas, ele \u00e9 a op\u00e7\u00e3o padr\u00e3o se nenhum outro arquivo puder ser encontrado. Underscores cont\u00e9m os arquivos de tema mais comuns, que funcionar\u00e3o imediatamente. No entanto, voc\u00ea pode experimentar <a href=\"https:\/\/www.designbombs.com\/working-with-underscores-theme-beginner-developer\/\" target=\"_blank\" rel=\"noopener\">editando-os<\/a> se quiser entender como eles funcionam juntos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Arquivos Principais do Tema<\/h4>\n\n\n\n<p>Al\u00e9m do arquivo <i>index.php<\/i>, voc\u00ea encontrar\u00e1 os seguintes arquivos na maioria dos temas do WordPress:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>header.php<\/b>: Este arquivo cont\u00e9m o HTML para o seu template de cabe\u00e7alho personalizado, incluindo metadados e links para as folhas de estilo. Observe que os menus geralmente s\u00e3o gerenciados pela funcionalidade de menu personalizado do WordPress.<\/li>\n\n\n\n<li><b>footer.php<\/b>: Este arquivo mant\u00e9m o HTML para o template de rodap\u00e9 do seu site.<\/li>\n\n\n\n<li><b>sidebar.php<\/b>: Se voc\u00ea deseja que seu site tenha uma barra lateral, o c\u00f3digo vir\u00e1 daqui. Tenha em mente que isso \u00e9 apenas a estrutura; <a href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\" target=\"_blank\" rel=\"noopener\">widgets<\/a> s\u00e3o controlados a partir da \u00e1rea administrativa.<\/li>\n\n\n\n<li><b>single.php<\/b>: Este \u00e9 o arquivo de template para postagens de blog individuais. Se voc\u00ea quiser suportar diferentes tipos de postagens, voc\u00ea pode criar mais de um arquivo.<\/li>\n\n\n\n<li><b>page.php:<\/b> O layout padr\u00e3o das p\u00e1ginas individuais vem deste arquivo. Novamente, voc\u00ea pode criar mais de um template \u2014 por exemplo, voc\u00ea poderia criar um design de p\u00e1gina de produto para uma loja online.<\/li>\n\n\n\n<li><b>comments.php<\/b>: Este arquivo controla a exibi\u00e7\u00e3o de coment\u00e1rios sob suas postagens de blog e em p\u00e1ginas.<\/li>\n\n\n\n<li><b>search.php<\/b>: Quando algu\u00e9m usa a funcionalidade de busca no seu site, este template define como os resultados da busca aparecer\u00e3o.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Em geral, voc\u00ea s\u00f3 precisar\u00e1 editar esses arquivos se quiser adicionar conte\u00fado ou alterar drasticamente o layout do seu site. A maioria das outras ajustes pode ser feita usando CSS personalizado no seu arquivo de folha de estilo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">O Loop<\/h4>\n\n\n\n<p>Outro elemento importante que voc\u00ea precisa entender \u00e9 o Loop. O WordPress usa esse c\u00f3digo para exibir o conte\u00fado, ent\u00e3o, de muitas maneiras, \u00e9 o cora\u00e7\u00e3o pulsante do seu site. Ele aparece em todos os arquivos de template que exibem o conte\u00fado do post, como <i>index.php<\/i> ou <i>sidebar.php<\/i>.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\" target=\"_blank\" rel=\"noopener\">The Loop<\/a> \u00e9 um assunto complexo que recomendamos que voc\u00ea leia mais a respeito se deseja entender como o WordPress exibe o conte\u00fado dos posts. Felizmente, o Loop j\u00e1 estar\u00e1 integrado ao seu tema gra\u00e7as ao Underscores, ent\u00e3o n\u00e3o h\u00e1 necessidade de se preocupar com isso por enquanto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 4: Configure Seu Tema<\/h3>\n\n\n\n<p>\u00c9 f\u00e1cil pensar que os temas s\u00e3o puramente para fins est\u00e9ticos, mas eles realmente t\u00eam um grande impacto na funcionalidade do seu site. Vamos ver como voc\u00ea pode fazer algumas personaliza\u00e7\u00f5es b\u00e1sicas.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adicionar Funcionalidade com Hooks<\/h4>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/plugin-api-hooks\/\" target=\"_blank\" rel=\"noopener\">Hooks<\/a> s\u00e3o trechos de c\u00f3digo inseridos em arquivos de modelo, que permitem executar a\u00e7\u00f5es PHP em diferentes \u00e1reas de um site, inserir estiliza\u00e7\u00e3o e exibir outras informa\u00e7\u00f5es. A maioria dos hooks \u00e9 implementada diretamente no software central do WordPress, mas alguns tamb\u00e9m s\u00e3o \u00fateis para desenvolvedores de temas.<\/p>\n\n\n\n<p>Vamos dar uma olhada em alguns dos ganchos mais comuns e para que eles podem ser usados:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>wp_head()<\/b>: Adicionado ao elemento &lt;head&gt; em <i>header.php<\/i>. Ele habilita estilos, scripts e outras informa\u00e7\u00f5es que s\u00e3o executadas assim que o site \u00e9 carregado. Isso \u00e9 frequentemente usado para inserir <a href=\"https:\/\/support.google.com\/analytics\/answer\/1008080?hl=en&amp;utm_medium=et&amp;utm_campaign=en_us&amp;utm_source=SetupChecklist#GA&amp;zippy=%2Cin-this-article%2Cstatic-website\" target=\"_blank\" rel=\"noopener\">c\u00f3digo do Google Analytics<\/a>.<\/li>\n\n\n\n<li><b>wp_footer()<\/b>: Adicionado em <i>footer.php<\/i> logo antes da tag &lt;\/body&gt;.<\/li>\n\n\n\n<li><b>wp_meta()<\/b>: Normalmente aparece em <i>sidebar.php<\/i> para incluir scripts adicionais (como uma nuvem de tags).<\/li>\n\n\n\n<li><b>comment_form()<\/b>: Adicionado em <i>comments.php<\/i> diretamente antes da tag de fechamento &lt;\/div&gt; do arquivo para exibir dados de coment\u00e1rios.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Esses ganchos j\u00e1 estar\u00e3o inclu\u00eddos no seu tema Underscores. No entanto, ainda recomendamos visitar o <a href=\"https:\/\/adambrown.info\/p\/wp_hooks\" target=\"_blank\" rel=\"noopener\">Banco de Dados de Ganchos<\/a> para ver todos os ganchos dispon\u00edveis e <a href=\"https:\/\/codex.wordpress.org\/Plugin_API#Hooks:_Actions_and_Filters\" target=\"_blank\" rel=\"noopener\">aprender mais<\/a> sobre eles.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Adicionar Estilos Com CSS<\/h4>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Cascading Style Sheets (CSS)<\/a> definem a apar\u00eancia de todo o conte\u00fado do seu site. No WordPress, isso \u00e9 realizado utilizando o arquivo <i>style.css<\/i>. Voc\u00ea j\u00e1 ter\u00e1 esse arquivo inclu\u00eddo no seu tema, mas no momento, ele cont\u00e9m apenas o estilo b\u00e1sico, padr\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet.jpg\" alt=\"editando a folha de estilos CSS de um novo tema personalizado do WordPress\" class=\"wp-image-42459 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Se voc\u00ea deseja um exemplo r\u00e1pido de como o CSS funciona, voc\u00ea pode editar qualquer um dos estilos aqui e salvar o arquivo para ver os efeitos. Por exemplo, voc\u00ea pode encontrar o seguinte c\u00f3digo (geralmente na linha 485):<\/p>\n\n\n\n<p><code>a {<\/code><br><code>color: royalblue;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>Este c\u00f3digo controla a cor de hiperlinks n\u00e3o visitados, que aparecem azul real por padr\u00e3o:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue.jpg\" alt=\"Site de Teste de Tema mostrando hiperlinks azuis na p\u00e1gina incluindo &quot;Hello word&quot; e &quot;theme-tester&quot;\" class=\"wp-image-42460 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Vamos ver o que acontece se tentarmos mudar isso substituindo pelo seguinte c\u00f3digo:<\/p>\n\n\n\n<p><code>a {<\/code><br><code>color: red;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>Salve o arquivo e confira seu site local. Como voc\u00ea pode esperar, todos os links n\u00e3o visitados agora aparecer\u00e3o em vermelho brilhante:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red.jpg\" alt=\"o mesmo Site de Teste de Tema agora exibindo os hiperlinks &quot;Hello World&quot; e &quot;theme-tester&quot; em vermelho\" class=\"wp-image-42461 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode notar que o link visitado no topo n\u00e3o mudou de cor. Isso ocorre porque ele \u00e9 realmente governado pela pr\u00f3xima se\u00e7\u00e3o na folha de estilos:<\/p>\n\n\n\n<p><code>a:visited {<\/code><br><code>color: purple;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>Este \u00e9 um exemplo muito b\u00e1sico de como editar <i>style.css<\/i> afetar\u00e1 a apar\u00eancia do seu site. CSS \u00e9 um t\u00f3pico extenso que recomendamos que voc\u00ea explore mais se deseja aprender sobre cria\u00e7\u00e3o de designs para web. Existem muitos <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener\">recursos sobre o tema<\/a> para iniciantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etapa 5: Exporte o Tema e Fa\u00e7a o Upload para o Seu Site<\/h3>\n\n\n\n<p>Quando voc\u00ea terminar de ajustar o seu tema, \u00e9 hora de garantir que ele funciona corretamente. Para fazer isso, voc\u00ea pode usar os dados do <a href=\"https:\/\/codex.wordpress.org\/Theme_Unit_Test\" target=\"_blank\" rel=\"noopener\">Theme Unit Test<\/a>.<\/p>\n\n\n\n<p>Este \u00e9 um conjunto de dados fict\u00edcios que voc\u00ea pode fazer upload para o seu site. Ele cont\u00e9m muitas varia\u00e7\u00f5es diferentes de estilos e conte\u00fado, e permitir\u00e1 que voc\u00ea veja como seu tema lida com dados imprevis\u00edveis.<\/p>\n\n\n\n<p>Quando voc\u00ea tiver testado completamente seu tema e estiver convencido de que ele atende aos <a href=\"https:\/\/make.wordpress.org\/themes\/handbook\/review\/\" target=\"_blank\" rel=\"noopener\">padr\u00f5es exigidos<\/a>, tudo o que resta agora \u00e9 export\u00e1-lo.<\/p>\n\n\n\n<p>Primeiro, voc\u00ea precisar\u00e1 encontrar a localiza\u00e7\u00e3o do seu site na sua m\u00e1quina local. Provavelmente, voc\u00ea encontrar\u00e1 em uma pasta chamada <i>Websites,<\/i> dentro do seu diret\u00f3rio <i>Documentos<\/i> padr\u00e3o.<\/p>\n\n\n\n<p>Abra a pasta do site e acesse <i>\/wp-content\/themes\/<\/i>, onde voc\u00ea encontrar\u00e1 seu tema:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes.jpg\" alt=\"Pasta de temas wp-content do WordPress no cliente FTP\" class=\"wp-image-42462 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Voc\u00ea pode agora usar uma ferramenta de compress\u00e3o, como o <a href=\"https:\/\/www.rarlab.com\/download.htm\" target=\"_blank\" rel=\"noopener\">WinRAR<\/a>, para criar um arquivo <i>.zip<\/i> a partir da pasta. Simplesmente clique com o bot\u00e3o direito na pasta e selecione a op\u00e7\u00e3o que permite compact\u00e1-la, como <i>Comprimir \u201cpasta.\u201d<\/i><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme.jpg\" alt=\"compactando tema personalizado do WordPress para preparar para upload\" class=\"wp-image-42463 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Quando a pasta estiver compactada, estar\u00e1 pronta para ser carregada e instalada em qualquer site WordPress, assim como voc\u00ea instalou seu tema Underscores no in\u00edcio.<\/p>\n\n\n\n<h2 id=\"tips\" class=\"wp-block-heading\">Dicas Para Desenvolver Seu Primeiro Tema Personalizado<\/h2>\n\n\n\n<p>Quando voc\u00ea come\u00e7a a mexer com c\u00f3digo pela primeira vez, \u00e9 sempre poss\u00edvel cometer alguns erros. Por essa raz\u00e3o, \u00e9 uma boa ideia dedicar tempo ao desenvolvimento do seu primeiro tema e experimentar no seu ambiente local.<\/p>\n\n\n\n<p>Aqui est\u00e3o algumas medidas adicionais que voc\u00ea pode tomar para garantir que seu tema prosperar\u00e1 no ambiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Utilize controle de vers\u00e3o<\/b>: Sistemas como Git ajudam voc\u00ea a acompanhar as altera\u00e7\u00f5es no seu c\u00f3digo ao longo do tempo e reverter bugs.<\/li>\n\n\n\n<li><b>Valide seu c\u00f3digo<\/b>: Use ferramentas como Theme Check e o W3C Validator para encontrar erros no seu c\u00f3digo. Executar verifica\u00e7\u00f5es frequentes pode ajud\u00e1-lo a identificar problemas mais cedo.<\/li>\n\n\n\n<li><b>Teste seu tema<\/b>: Tente carregar seu tema em diferentes navegadores e dispositivos para identificar problemas de layout ou renderiza\u00e7\u00e3o. Um design que funciona perfeitamente no seu pr\u00f3prio computador pode n\u00e3o funcionar bem em uma plataforma diferente.<\/li>\n\n\n\n<li><b>Use coment\u00e1rios no c\u00f3digo<\/b>: Deixar notas para si mesmo explicando o que cada coisa faz pode ajud\u00e1-lo a resolver problemas em uma data futura.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Crie um Tema Personalizado do WordPress<\/h2>\n\n\n\n<p>Criar um tema personalizado do WordPress do zero n\u00e3o \u00e9 uma tarefa f\u00e1cil. No entanto, o processo pode n\u00e3o ser t\u00e3o dif\u00edcil quanto voc\u00ea pensa.<\/p>\n\n\n\n<p>Para resumir, aqui est\u00e1 como desenvolver um tema do WordPress em cinco passos simples:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Configure um ambiente local, utilizando <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local<\/a>.<\/li>\n\n\n\n<li>Baixe e instale um tema inicial, como <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>.<\/li>\n\n\n\n<li>Conhe\u00e7a os diferentes componentes de um tema WordPress.<\/li>\n\n\n\n<li>Configure seu tema.<\/li>\n\n\n\n<li>Exporte o tema e fa\u00e7a o upload para o seu site.<\/li>\n\n\n<\/ol>\n\n\n\n<p>Seguindo as diretrizes no <a href=\"https:\/\/codex.wordpress.org\/\" target=\"_blank\" rel=\"noopener\">site de documenta\u00e7\u00e3o Codex<\/a>, voc\u00ea pode desenvolver um tema que atenda aos padr\u00f5es de qualidade. Voc\u00ea pode at\u00e9 considerar submet\u00ea-lo ao Diret\u00f3rio de Temas do WordPress!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lance Seu Site \u00danico do WordPress Com DreamPress<\/h3>\n\n\n\n<p>Construir um \u00f3timo tema \u00e9 o primeiro passo para criar um site de sucesso. N\u00f3s temos as ferramentas para ajud\u00e1-lo a completar o resto.<\/p>\n\n\n\n<p>Com a <a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/gerenciado\/\" target=\"_blank\" rel=\"noopener\">Hospedagem Gerenciada do WordPress DreamPress<\/a>, voc\u00ea pode testar qualquer tema ou Plugins\/plugin online com Staging de um clique. Tamb\u00e9m fornecemos backups \u00e0 prova de balas, para que voc\u00ea possa reverter altera\u00e7\u00f5es a qualquer momento, e Cache integrado para desempenho \u00f3timo.<\/p>\n\n\n\n<p><a href=\"https:\/\/panel.dreamhost.com\/signup\/?lng=en#!\/dreampress\/?plan=standard&amp;term=yearly&amp;p=DPINTRO\" target=\"_blank\" rel=\"noopener\">Inscreva-se hoje<\/a> para colocar seu site WordPress em funcionamento!<\/p>\n\n\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      Tornamos o WordPress Mais F\u00e1cil para Voc\u00ea\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Deixe a migra\u00e7\u00e3o do seu site, a instala\u00e7\u00e3o do WordPress, a gest\u00e3o de seguran\u00e7a e atualiza\u00e7\u00f5es, e a otimiza\u00e7\u00e3o do desempenho do servidor por nossa conta. Agora voc\u00ea pode se concentrar no que mais importa: crescer seu site.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Confira os Planos                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea deseja algo feito de uma maneira espec\u00edfica \u2014 bem, talvez voc\u00ea mesmo precise fazer. Embora existam muitos temas \u00f3timos para WordPress dispon\u00edveis, encontrar um que atenda \u00e0s suas necessidades espec\u00edficas pode ser dif\u00edcil. Na sua busca pela solu\u00e7\u00e3o perfeita, voc\u00ea pode se sentir tentado a criar seu pr\u00f3prio tema personalizado do WordPress. Felizmente, [\u2026]<\/p>\n","protected":false},"author":1077,"featured_media":42447,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"design\",\"Projetando um Site Personalizado do WordPress\"],[\"starter\",\"O que \u00e9 um Tema Inicial? (E Por Que Voc\u00ea Deve Usar Um)\"],[\"develop\",\"Como Desenvolver Seu Primeiro Tema do WordPress (Em 5 Passos)\"],[\"tips\",\"Dicas Para Desenvolver Seu Primeiro Tema Personalizado\"],[\"create\",\"Crie um Tema Personalizado do WordPress\"]]","hide_toc":false,"footnotes":""},"categories":[14413,14391,14409],"tags":[],"class_list":["post-56684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centro-de-desenvolvimento-pt","category-tutoriais-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>Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress? - 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\/guia-para-desenvolver-um-tema-wp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress?\" \/>\n<meta property=\"og:description\" content=\"Se voc\u00ea deseja algo feito de uma maneira espec\u00edfica \u2014 bem, talvez voc\u00ea mesmo precise fazer. Embora existam muitos temas \u00f3timos para WordPress dispon\u00edveis, encontrar um que atenda \u00e0s suas necessidades espec\u00edficas pode ser dif\u00edcil. Na sua busca pela solu\u00e7\u00e3o perfeita, voc\u00ea pode se sentir tentado a criar seu pr\u00f3prio tema personalizado do WordPress. Felizmente, [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/\" \/>\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=\"2023-11-28T15:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:47:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jos Velasco\" \/>\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=\"Jos Velasco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress? - 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\/guia-para-desenvolver-um-tema-wp\/","og_locale":"en_US","og_type":"article","og_title":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress?","og_description":"Se voc\u00ea deseja algo feito de uma maneira espec\u00edfica \u2014 bem, talvez voc\u00ea mesmo precise fazer. Embora existam muitos temas \u00f3timos para WordPress dispon\u00edveis, encontrar um que atenda \u00e0s suas necessidades espec\u00edficas pode ser dif\u00edcil. Na sua busca pela solu\u00e7\u00e3o perfeita, voc\u00ea pode se sentir tentado a criar seu pr\u00f3prio tema personalizado do WordPress. Felizmente, [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-11-28T15:00:36+00:00","article_modified_time":"2025-05-26T19:47:49+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Jos Velasco","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jos Velasco","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/"},"author":{"name":"Jos Velasco","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a"},"headline":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress?","datePublished":"2023-11-28T15:00:36+00:00","dateModified":"2025-05-26T19:47:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/"},"wordCount":3103,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","articleSection":["Centro de Desenvolvimento","Tutoriais","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/","name":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress? - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","datePublished":"2023-11-28T15:00:36+00:00","dateModified":"2025-05-26T19:47:49+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","width":1460,"height":1095,"caption":"man working at a computer looking and smiling at a woman who is explaining something on the computer to him"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/guia-para-desenvolver-um-tema-wp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Ent\u00e3o Voc\u00ea Quer Criar Seu Pr\u00f3prio Tema Customizado do WordPress?"}]},{"@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\/33a01bfa83e29abbe21403d23dd8ea1a","name":"Jos Velasco","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","caption":"Jos Velasco"},"description":"Jos Velasco is a WordPress Professional Consultant at DreamHost. His responsibilities include helping with advanced WordPress cases, creating training material, and identifying trends impacting the WordPress community. In his free time, he enjoys climbing mountains, eating healthy, and watching drama movies. Follow Jos on LinkedIn: https:\/\/www.linkedin.com\/in\/josvelasco\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/josvelasco\/"}]}},"lang":"pt","translations":{"pt":56684,"es":37426,"en":37404,"de":51667,"uk":56663,"pl":56690,"ru":56693,"it":68277,"fr":70137,"nl":70166},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56684","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\/1077"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=56684"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56684\/revisions"}],"predecessor-version":[{"id":62219,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56684\/revisions\/62219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42447"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=56684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=56684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=56684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}