{"id":233585,"date":"2023-02-17T12:04:00","date_gmt":"2023-02-17T09:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233585"},"modified":"2023-02-26T18:36:18","modified_gmt":"2023-02-26T15:36:18","slug":"tutorial-de-tema-wordpress-para-iniciantes","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes\/","title":{"rendered":"Tutorial de tema WordPress para iniciantes"},"content":{"rendered":"<p>Esta \u00e9 uma s\u00e9rie de tutoriais cobrindo os conceitos b\u00e1sicos de desenvolvimento de um tema WordPress do zero. \u00c9 para voc\u00ea que se interessou um pouco em mudar outros temas, desejando saber o suficiente para criar o seu pr\u00f3prio tema, ou tentou fazer seu pr\u00f3prio tema do zero, mas teve dificuldade em entender o b\u00e1sico do que um tema precisa. Atrav\u00e9s de 12 li\u00e7\u00f5es, este tutorial visa orient\u00e1-lo no desenvolvimento de seu pr\u00f3prio tema WordPress, enquanto aprende pr\u00e1ticas comuns e o b\u00e1sico sobre como o WordPress funciona. O objetivo deste tutorial n\u00e3o \u00e9 terminar com um tema de apar\u00eancia incr\u00edvel e pronto para uso ou venda, mas fornecer a base s\u00f3lida necess\u00e1ria para constru\u00ed-lo e ampli\u00e1-lo.<\/p>\n<p>Eu recomendo que voc\u00ea escreva tudo sozinho em vez de copiar e colar o c\u00f3digo. Essa \u00e9 a melhor maneira de aprender (n\u00e3o se preocupe, n\u00e3o estamos falando de milhares de linhas aqui)! As li\u00e7\u00f5es s\u00e3o configuradas para que voc\u00ea aprenda o que cada peda\u00e7o de c\u00f3digo faz, passo a passo, para que voc\u00ea possa modific\u00e1-lo e adicion\u00e1-lo ao longo do caminho, para que voc\u00ea possa deix\u00e1-lo exatamente como deseja ou parecer. No final de cada li\u00e7\u00e3o, colocarei links para p\u00e1ginas de documenta\u00e7\u00e3o para cada m\u00e9todo usado, geralmente para <a href=\"https:\/\/codex.wordpress.org\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Codex<\/a>.<\/p>\n<p>Este tutorial n\u00e3o cobrir\u00e1 nenhum estilo (CSS), no entanto, explica como voc\u00ea pode adicionar suas folhas de estilo ao seu tema e mostra como dizer ao WordPress para adicionar dinamicamente classes \u00fateis em seu HTML. Eu encorajo voc\u00ea a estilizar seu tema para si mesmo enquanto voc\u00ea acompanha.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<p>Este tutorial \u00e9 para voc\u00ea que:<\/p>\n<ul>\n<li>Conhecer o b\u00e1sico de HTML e CSS<\/li>\n<li>Conhe\u00e7a um pouco de PHP. Voc\u00ea n\u00e3o precisa ser um especialista, mas deve saber o b\u00e1sico<\/li>\n<li>Est\u00e1 familiarizado com o uso do WordPress<\/li>\n<li>Quero aprender!<\/li>\n<\/ul>\n<p>O que voc\u00ea vai precisar para seguir este tutorial \u00e9:<\/p>\n<ul>\n<li>Uma configura\u00e7\u00e3o de desenvolvimento local. Voc\u00ea pode desenvolver transferindo por FTP para um dom\u00ednio, mas \u00e9 recomend\u00e1vel configurar um localmente. Voc\u00ea (obviamente) tamb\u00e9m precisa ter o WordPress instalado em seu site de desenvolvimento. Eu explico brevemente <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-0-5-setting-up-local-wordpress-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">como fazer isso na Parte 0<\/a>.<\/li>\n<li>Um bom editor de texto. Voc\u00ea pode usar qualquer editor, como o Bloco de Notas e similares, mas \u00e9 recomend\u00e1vel usar um software direcionado para codifica\u00e7\u00e3o (\u00e9 mais f\u00e1cil ler, encontrar e escrever c\u00f3digo). Pessoalmente eu uso <a href=\"https:\/\/www.sublimetext.com\/3\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o Sublime Text 3<\/a>.<\/li>\n<\/ul>\n<h2>\u00cdndice do tutorial<\/h2>\n<p>Abaixo h\u00e1 links diretos para todas as 12 li\u00e7\u00f5es deste tutorial; no entanto, no final de cada li\u00e7\u00e3o, voc\u00ea encontrar\u00e1 links de navega\u00e7\u00e3o para a li\u00e7\u00e3o seguinte ou anterior, portanto, n\u00e3o precisa voltar aqui.<\/p>\n<p>Sem mais delongas, <strong>vamos come\u00e7ar<\/strong>! Se voc\u00ea j\u00e1 tem uma configura\u00e7\u00e3o de desenvolvimento local do WordPress, pule para a <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-1-introduction\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parte 1: Introdu\u00e7\u00e3o<\/a>.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-0-5-configurando-o-desenvolvimento-local-do-wordpress\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 0.5: Configurando o Desenvolvimento Local do WordPress\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 0.5: Configurando o Desenvolvimento Local do WordPress<\/a><\/p>\n<p>A etapa 0.5 no tutorial do tema WordPress para iniciantes aborda como configurar um ambiente de desenvolvimento local com WAMP ou XAMPP e instalar o WordPress.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-1-introducao\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 1: Introdu\u00e7\u00e3o\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 1: Introdu\u00e7\u00e3o<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o, voc\u00ea come\u00e7ar\u00e1 a aprender como o WordPress carrega conte\u00fado dependendo da p\u00e1gina em que voc\u00ea est\u00e1 e da hierarquia dos arquivos de modelo de tema. Voc\u00ea tamb\u00e9m aprender\u00e1 o que \u00e9 necess\u00e1rio para um tema v\u00e1lido. E no final vamos finalmente criar nosso tema e ativ\u00e1-lo.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-2-modelos\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 2: Modelos\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 2: Modelos<\/a><\/p>\n<p>Esta li\u00e7\u00e3o ensinar\u00e1 como estruturar os principais modelos de constru\u00e7\u00e3o em um tema WordPress. Come\u00e7aremos a criar os modelos mais importantes.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-3-conteudo-dinamico\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 3: Conte\u00fado Din\u00e2mico\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 3: Conte\u00fado Din\u00e2mico<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, aprenderemos sobre ganchos no WordPress e adicionaremos alguns ganchos em nosso tema que s\u00e3o necess\u00e1rios para que um tema funcione corretamente com o WordPress e plugins. Tamb\u00e9m come\u00e7aremos a acessar conte\u00fado din\u00e2mico do WordPress em nosso cabe\u00e7alho, como obter automaticamente o t\u00edtulo da p\u00e1gina atual.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-4-o-post-loop\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 4: O Post Loop\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 4: O Post Loop<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, entraremos em detalhes sobre o &#8220;post loop&quot; no WordPress; o que \u00e9, como se parece, por que o usamos e como acessar os posts. loop em nosso tema.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-5-acessando-informacoes-de-post\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 5: Acessando Informa\u00e7\u00f5es de Post\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 5: Acessando Informa\u00e7\u00f5es de Post<\/a><\/p>\n<p>Esta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes ser\u00e1 sobre como podemos acessar e produzir informa\u00e7\u00f5es como link, t\u00edtulo e muito mais de cada postagem quando estiver dentro do loop de postagem. Fazemos isso com tags de modelo. No processo, tamb\u00e9m adicionaremos os modelos de visualiza\u00e7\u00e3o \u00fanica ao nosso tema.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-6-funcoes-de-um-tema-php\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 6: Fun\u00e7\u00f5es de um Tema.php\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 6: Fun\u00e7\u00f5es de um Tema.php<\/a><\/p>\n<p>Hoje vamos aprender onde e como adicionar c\u00f3digo fora dos templates em nosso tema. Fazemos isso adicionando o arquivo functions.php do tema. Ao longo do caminho, tamb\u00e9m aprenderemos como adicionar suas folhas de estilo e scripts da maneira correta.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-7-configuracao-do-tema-e-imagens-em-destaque\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 7: Configura\u00e7\u00e3o do Tema e Imagens em Destaque\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 7: Configura\u00e7\u00e3o do Tema e Imagens em Destaque<\/a><\/p>\n<p>Esta li\u00e7\u00e3o continua adicionando o c\u00f3digo b\u00e1sico necess\u00e1rio para configurar um tema WordPress. Aprendemos a adicionar suportes de temas e filtrar o t\u00edtulo da primeira p\u00e1gina.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-8-traducao\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 8: Tradu\u00e7\u00e3o\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 8: Tradu\u00e7\u00e3o<\/a><\/p>\n<p>Aprendemos como funciona a tradu\u00e7\u00e3o (ou i18n) no WordPress e como tornar os textos traduz\u00edveis. Tamb\u00e9m inclui um guia sobre como usar o PoEdit para gerar arquivos .po.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-9-menus-e-areas-de-widget\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 9: Menus e \u00c1reas de Widget\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 9: Menus e \u00c1reas de Widget<\/a><\/p>\n<p>Esta li\u00e7\u00e3o aborda como adicionar dois recursos principais do WordPress ao nosso tema; menus e \u00e1reas de widgets. Aprendemos como registrar um local para o menu de navega\u00e7\u00e3o principal de um site e produzir o menu em nossos modelos, al\u00e9m de permitir a adi\u00e7\u00e3o de widgets em nossa barra lateral e \u00e1rea de rodap\u00e9.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-10-adicionando-mais-modelos\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 10: Adicionando Mais Modelos\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 10: Adicionando Mais Modelos<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, vamos mergulhar mais nos modelos. Vamos aprender sobre as partes do modelo e implement\u00e1-lo para reutiliza\u00e7\u00e3o. E adicionaremos mais modelos padr\u00e3o do WordPress ao nosso tema.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-11-modelos-de-paginas-personalizados\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 11: Modelos de P\u00e1ginas Personalizados\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 11: Modelos de P\u00e1ginas Personalizados<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes, aprendemos sobre modelos de p\u00e1gina, o que s\u00e3o, como cri\u00e1-los e as melhores pr\u00e1ticas. Faremos um modelo de largura total como exemplo. Ao longo do caminho, tamb\u00e9m adicionamos uma classe ao corpo perguntando se a p\u00e1gina est\u00e1 usando um modelo de p\u00e1gina espec\u00edfico.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-12-consulta-de-postagem-personalizada\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 12: Consulta de postagem personalizada\">Tutorial de Tema WordPress para Iniciantes \u2013 Parte 12: Consulta de postagem personalizada<\/a><\/p>\n<p>Nesta li\u00e7\u00e3o final, aprendemos como escrever sua pr\u00f3pria consulta de postagens e fazer um loop por elas sem interromper o loop pai no modelo. Faremos uma parte de modelo para postagens \u00fanicas que mostre postagens relacionadas na mesma categoria.<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-conclusao-e-proximos-passos\/\" title=\"Tutorial de Tema WordPress para Iniciantes \u2013 Conclus\u00e3o e Pr\u00f3ximos Passos\">Tutorial de Tema WordPress para Iniciantes \u2013 Conclus\u00e3o e Pr\u00f3ximos Passos<\/a><\/p>\n<p>Conclu\u00edmos este tutorial de tema WordPress para iniciantes fazendo uma r\u00e1pida recapitula\u00e7\u00e3o do que aprendemos. E veja o que voc\u00ea pode fazer a seguir e como se aprimorar como desenvolvedor de temas do WordPress.<\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma s\u00e9rie de tutoriais de 12 li\u00e7\u00f5es cobrindo os conceitos b\u00e1sicos de desenvolvimento de um tema WordPress a partir do zero. Perfeito para iniciantes que querem se tornar um desenvolvedor de temas!<\/p>\n","protected":false},"author":1,"featured_media":223973,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[930,898,898,1110,806,806,930,846,846,867,867],"tags":[1170],"class_list":["post-233585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assuntos","category-codigo-2","category-n-a","category-php-8","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233585"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223973"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}