{"id":69319,"date":"2024-08-21T04:20:39","date_gmt":"2024-08-21T07:20:39","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=69319&#038;preview=true&#038;preview_id=69319"},"modified":"2024-08-26T09:27:25","modified_gmt":"2024-08-26T12:27:25","slug":"conceitos-basicos-temas-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/","title":{"rendered":"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress"},"content":{"rendered":"<p>Os temas de WordPress desempenham um papel fundamental na defini\u00e7\u00e3o da apar\u00eancia e da funcionalidade do seu site. Eles definem como o conte\u00fado \u00e9 exibido e oferecem v\u00e1rias op\u00e7\u00f5es de design para voc\u00ea criar um site exclusivo. Ao longo dos anos, os <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">temas de WordPress<\/a> evolu\u00edram significativamente, come\u00e7ando com o que hoje chamamos de &#8220;temas cl\u00e1ssicos&#8221;<\/p>\n<p>Os temas cl\u00e1ssicos foram o padr\u00e3o por um longo tempo, dependendo de <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-templates-publicacao\/\">templates PHP<\/a> e exigindo algum conhecimento de codifica\u00e7\u00e3o para serem personalizados. Esses temas ofereciam grande flexibilidade, mas podiam ser desafiadores para os novatos em <a href=\"https:\/\/kinsta.com\/web-development\/\">desenvolvimento web<\/a>. Em seguida, o lan\u00e7amento do <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a> marcou uma mudan\u00e7a significativa com a introdu\u00e7\u00e3o de &#8220;<a href=\"https:\/\/wordpress.org\/documentation\/article\/block-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">temas de bloco<\/a>&#8221;<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Temas cl\u00e1ssicos de WordPress vs temas em blocos<\/h2>\n<p>Os <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\">temas cl\u00e1ssicos<\/a> definem a apar\u00eancia geral de um site usando arquivos de template escritos em PHP, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> para estilo e <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a> para funcionalidade adicional. Esses temas altamente personaliz\u00e1veis t\u00eam sido a espinha dorsal dos Sites WordPress h\u00e1 muitos anos.<\/p>\n<p>Os temas de blocos, por outro lado, s\u00e3o um tipo mais recente de tema do WordPress introduzido para oferecer suporte aos recursos de <a href=\"https:\/\/kinsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">edi\u00e7\u00e3o completa do site<\/a> (FSE). Diferentemente dos temas cl\u00e1ssicos, eles usam blocos para criar todas as partes de um site, inclusive cabe\u00e7alhos, rodap\u00e9s e \u00e1reas de conte\u00fado. Isso permite uma maneira mais visual e intuitiva de projetar e personalizar sites diretamente no editor do WordPress.<\/p>\n<p>As principais diferen\u00e7as entre os temas cl\u00e1ssicos e os de blocos s\u00e3o:<\/p>\n<ol start=\"1\">\n<li><strong>Personaliza\u00e7\u00e3o<\/strong> &#8211; Os temas cl\u00e1ssicos exigem PHP e algumas habilidades de codifica\u00e7\u00e3o, enquanto os temas em bloco usam um editor visual para facilitar a personaliza\u00e7\u00e3o.<\/li>\n<li><strong>Flexibilidade<\/strong> &#8211; Os temas cl\u00e1ssicos oferecem mais flexibilidade para os <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolvedores<\/a>, enquanto os temas em bloco se concentram na facilidade de uso e na acessibilidade.<\/li>\n<li><strong>Edi\u00e7\u00e3o<\/strong> &#8211; Os temas cl\u00e1ssicos s\u00e3o editados por meio de arquivos de tema e do <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">WordPress Customizer<\/a>. Os temas de bloco podem ser editados inteiramente por meio do <a href=\"https:\/\/wordpress.org\/documentation\/article\/wordpress-block-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">editor de blocos<\/a>.<\/li>\n<\/ol>\n<h3>Escolhendo o tipo de tema a ser desenvolvido<\/h3>\n<p>A escolha entre temas cl\u00e1ssicos e em blocos depende das necessidades e do n\u00edvel de habilidade que voc\u00ea tem. Se voc\u00ea \u00e9 um desenvolvedor que busca o m\u00e1ximo de flexibilidade, os temas cl\u00e1ssicos podem ser a sua op\u00e7\u00e3o. No entanto, se voc\u00ea preferir uma abordagem mais visual e f\u00e1cil de usar para criar seu site, os temas em blocos s\u00e3o uma \u00f3tima op\u00e7\u00e3o.<\/p>\n<p>Ambos os tipos de temas t\u00eam pontos fortes e s\u00e3o adequados para diferentes tipos de usu\u00e1rios e projetos. Compreender as principais diferen\u00e7as ajuda voc\u00ea a tomar uma decis\u00e3o informada sobre qual tema atender\u00e1 melhor \u00e0s necessidades do seu site.<\/p>\n<p>Este artigo tem como objetivo ajudar voc\u00ea a entender e dominar os principais conceitos dos temas cl\u00e1ssicos e em blocos, capacitando-o a criar e personalizar temas de WordPress com efici\u00eancia.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>A cria\u00e7\u00e3o de um tema pode afetar a apar\u00eancia do seu site. \u00c9 sempre melhor fazer um <a href=\"https:\/\/kinsta.com\/pt\/blog\/recurso-de-backup-kinsta\/\">backup do site<\/a> primeiro. Se voc\u00ea usar um provedor de hospedagem de sites como a Kinsta, poder\u00e1 criar um <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">ambiente de teste<\/a> para trabalhar. Quando terminar, voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/#push-environment-to-live-or-staging\">mover as altera\u00e7\u00f5es para o site de produ\u00e7\u00e3o (ativo)<\/a>. Como alternativa, voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/integracao-devkinsta\/\">mover seu site para o DevKinsta<\/a> ou usar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-sftp\/\">SFTP\/SSH<\/a> com seu cliente preferido para transfer\u00eancias seguras de arquivos.<\/p>\n<\/aside>\n\n<h2>Entendendo a estrutura do tema<\/h2>\n<p>Entender a estrutura de um tema, seja ele cl\u00e1ssico ou em blocos, \u00e9 fundamental para que voc\u00ea possa personalizar seu site WordPress com efici\u00eancia.<\/p>\n<p>Antes de explorarmos a estrutura de cada tema, voc\u00ea deve saber que todos os temas de WordPress s\u00e3o armazenados no diret\u00f3rio <code>wp-content\/themes<\/code> da sua instala\u00e7\u00e3o do WordPress e que cada tema reside em sua pr\u00f3pria pasta.<\/p>\n<h3>Estrutura do tema cl\u00e1ssico<\/h3>\n<p>Um tema cl\u00e1ssico inclui v\u00e1rios arquivos e diret\u00f3rios importantes que criam a apar\u00eancia e a funcionalidade do site. Os dois principais arquivos s\u00e3o:<\/p>\n<ol start=\"1\">\n<li><code>style.css<\/code> &#8211; Folha de estilo principal: \u00c9 a folha de estilo principal que define o estilo visual do tema. Ela inclui metadados sobre o tema (como nome, autor e vers\u00e3o) na parte superior, seguidos de regras CSS que estilizam o tema.<\/li>\n<li><code>index.php<\/code> &#8211; Esse \u00e9 o principal arquivo de template usado para exibir conte\u00fado na p\u00e1gina inicial. Ele funciona como um fallback para outros arquivos de template que possam estar faltando.<\/li>\n<\/ol>\n<p>Al\u00e9m desses, v\u00e1rios outros arquivos importantes permitem o design modular e garantem que diferentes partes do site possam ser facilmente personalizadas e mantidas. Embora sejam opcionais, esses arquivos s\u00e3o considerados padr\u00e3o:<\/p>\n<ul>\n<li><code>header.php<\/code> &#8211; Esse arquivo cont\u00e9m a se\u00e7\u00e3o de cabe\u00e7alho do tema, incluindo o t\u00edtulo do site, a logo e o menu de navega\u00e7\u00e3o. Ele est\u00e1 inclu\u00eddo na parte superior de todas as p\u00e1ginas, garantindo um cabe\u00e7alho de p\u00e1gina consistente.<\/li>\n<li><code>footer.php<\/code> &#8211; Esse arquivo cont\u00e9m a se\u00e7\u00e3o de rodap\u00e9 do tema, que geralmente inclui informa\u00e7\u00f5es de direitos autorais e navega\u00e7\u00e3o no rodap\u00e9. Ele est\u00e1 inclu\u00eddo na parte inferior de todas as p\u00e1ginas, proporcionando um rodap\u00e9 consistente em todo o site.<\/li>\n<li><code>functions.php<\/code> &#8211; Esse arquivo \u00e9 usado para adicionar funcionalidade personalizada ao tema. Ele pode registrar menus, enfileirar estilos e scripts e adicionar recursos de suporte ao tema, como miniaturas de artigos e background personalizados. Essencialmente, ele funciona como um centro de controle para personaliza\u00e7\u00f5es e aprimoramentos do tema.<\/li>\n<li><code>page.php<\/code>, <code>single.php<\/code>, <code>archive.php<\/code>, etc. &#8211; Esses arquivos de template definem a estrutura de diferentes tipos de conte\u00fado, como p\u00e1ginas, artigos \u00fanicos e arquivos.<\/li>\n<\/ul>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea pode consultar este artigo detalhado para obter um guia passo a passo sobre a <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\">cria\u00e7\u00e3o de temas cl\u00e1ssicos de WordPress<\/a>.<\/p>\n<\/aside>\n\n<h3>Estrutura do tema de bloco<\/h3>\n<p>Um tema de bloco \u00e9 composto de v\u00e1rios arquivos e diret\u00f3rios importantes, projetados especificamente para trabalhar com blocos e com os recursos do FSE. Os principais arquivos e pastas s\u00e3o:<\/p>\n<ol start=\"1\">\n<li><code>theme.json<\/code> &#8211; Esse arquivo \u00e9 fundamental para que voc\u00ea defina as configura\u00e7\u00f5es, os estilos e as personaliza\u00e7\u00f5es do tema. Ele define estilos e configura\u00e7\u00f5es globais para blocos, fornecendo uma maneira centralizada de gerenciar a apar\u00eancia e o comportamento do tema. Ele substitui a necessidade de muito c\u00f3digo PHP personalizado e permite a f\u00e1cil configura\u00e7\u00e3o de cores, tipografia, espa\u00e7amento e muito mais.<\/li>\n<li><code>style.css<\/code> &#8211; Embora a maior parte do estilo seja tratada em <code>theme.json<\/code>, semelhante aos temas cl\u00e1ssicos, <code>style.css<\/code> ainda \u00e9 usado para declarar os metadados do tema, como o nome do tema, o autor, a vers\u00e3o e a descri\u00e7\u00e3o.<\/li>\n<li><code>templates\/<\/code> &#8211; Esse diret\u00f3rio cont\u00e9m arquivos HTML que definem o layout de diferentes partes do site. Esses arquivos incluem templates como index.html para a p\u00e1gina inicial, <code>single.html<\/code> para artigos individuais, <code>page.html<\/code> para p\u00e1ginas e outros. Cada arquivo \u00e9 criado usando blocos.<\/li>\n<li><code>parts\/<\/code> &#8211; Esse diret\u00f3rio cont\u00e9m se\u00e7\u00f5es reutiliz\u00e1veis de templates, como cabe\u00e7alhos e rodap\u00e9s. Essas partes podem ser inclu\u00eddas em v\u00e1rios templates, garantindo a consist\u00eancia em todo o site.<\/li>\n<\/ol>\n<p>Embora n\u00e3o sejam obrigat\u00f3rios, os <a href=\"https:\/\/kinsta.com\/pt\/blog\/padroes-de-bloco-wordpress\/\">Padr\u00f5es de Blocos<\/a> tamb\u00e9m s\u00e3o importantes para o desenvolvimento de temas avan\u00e7ados. Os Padr\u00f5es de Blocos s\u00e3o layouts de blocos predefinidos que podem ser inseridos em p\u00e1ginas e artigos, proporcionando uma maneira r\u00e1pida de criar designs complexos.<\/p>\n<p>Com os temas de bloco, voc\u00ea pode decidir n\u00e3o criar a estrutura do tema manualmente. Voc\u00ea pode acelerar o processo de configura\u00e7\u00e3o usando o plugin <a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\" target=\"_blank\" rel=\"noopener noreferrer\">Create Block Theme<\/a>, que re\u00fane todos os arquivos e detalhes necess\u00e1rios.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/create-block-theme.png\" alt=\"Crie o plugin de tema de bloco.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Crie o plugin de tema de bloco.<\/figcaption><\/figure>\n<p>Depois que voc\u00ea preencher os detalhes, uma nova pasta de temas ser\u00e1 criada no diret\u00f3rio <code>wp-content\/themes<\/code> e o novo tema aparecer\u00e1 na \u00e1rea de <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">administra\u00e7\u00e3o do WordPress<\/a> em <strong>Appearance<\/strong> &gt; <strong>Themes<\/strong>. Voc\u00ea pode adicionar mais detalhes sobre o tema na configura\u00e7\u00e3o de Meta Description <code>style.css<\/code>.<\/p>\n<h2>Hierarquia de templates do tema do WordPress<\/h2>\n<p>A hierarquia de templates determina qual(is) arquivo(s) de template o WordPress usa para exibir diferentes tipos de conte\u00fado. Os temas cl\u00e1ssicos e em bloco seguem uma hierarquia semelhante, mas diferem nos tipos de arquivo que usam: os temas cl\u00e1ssicos usam arquivos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-php\/\">PHP<\/a>, enquanto os temas em bloco usam arquivos <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>.<\/p>\n<p>A hierarquia de templates segue uma ordem espec\u00edfica para determinar qual arquivo de template deve ser usado. Se o WordPress n\u00e3o conseguir encontrar um arquivo de template espec\u00edfico, ele passar\u00e1 para o pr\u00f3ximo na hierarquia.<\/p>\n<p>Por exemplo, quando o WordPress precisa exibir um \u00fanico artigo de blog, ele primeiro procura um template espec\u00edfico para o tipo de artigo, como <code>single-{post-type}.php<\/code> ou <code>single-{post-type}.html<\/code>. Se esse arquivo n\u00e3o existir, ele procurar\u00e1 o gen\u00e9rico <code>single.php<\/code> ou <code>single.html<\/code>. Se nenhum desses arquivos for encontrado, o WordPress voltar\u00e1 ao template mais gen\u00e9rico <code>index.php<\/code> ou <code>index.html<\/code>.<\/p>\n<p>O mesmo processo se aplica a outros tipos de conte\u00fado. Para uma p\u00e1gina est\u00e1tica, o WordPress verificar\u00e1 primeiro se h\u00e1 algum template personalizado atribu\u00eddo a essa p\u00e1gina. Se nenhum for encontrado, ele procurar\u00e1 um template com base no slug da p\u00e1gina (por exemplo, <code>page-about.php<\/code> ou <code>page-about.html<\/code>) ou em seu ID (<code>page-42.php<\/code> ou <code>page-42.html<\/code>). Se esses templates espec\u00edficos n\u00e3o estiverem dispon\u00edveis, o WordPress usar\u00e1 o template geral <code>page.php<\/code> ou <code>page.html<\/code>. Se at\u00e9 mesmo esse template estiver faltando, ele voltar\u00e1 para <code>index.php<\/code> ou <code>index.html<\/code>.<\/p>\n<h2>Cria\u00e7\u00e3o de templates<\/h2>\n<p>A cria\u00e7\u00e3o de templates no WordPress permite que voc\u00ea personalize a forma como diferentes tipos de conte\u00fado s\u00e3o exibidos em seu site. Independentemente de voc\u00ea estar trabalhando com temas cl\u00e1ssicos ou temas de bloco, o processo envolve a defini\u00e7\u00e3o dos arquivos necess\u00e1rios e a configura\u00e7\u00e3o deles de acordo com as suas necessidades.<\/p>\n<p>Vamos configurar um template de p\u00e1gina para ambos os tipos de temas.<\/p>\n<h3>Template de p\u00e1gina de tema cl\u00e1ssico<\/h3>\n<p>Nos temas cl\u00e1ssicos, voc\u00ea cria um template de p\u00e1gina usando PHP. Veja como voc\u00ea pode fazer isso:<\/p>\n<ol start=\"1\">\n<li><strong>Criar o arquivo de template<\/strong> &#8211; Usando um <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">editor de texto<\/a>, crie um novo arquivo PHP no diret\u00f3rio do tema e nomeie como <code>page.php<\/code>.<\/li>\n<li><strong>Adicionar c\u00f3digo de template<\/strong> &#8211; Escreva o c\u00f3digo PHP necess\u00e1rio para definir a estrutura e o conte\u00fado do template de p\u00e1gina. Normalmente, isso inclui tags de template do WordPress para exibir o conte\u00fado da p\u00e1gina.<\/li>\n<li><strong>Incluir cabe\u00e7alho e rodap\u00e9<\/strong> &#8211; Certifique-se de que seu template inclua o cabe\u00e7alho e o rodap\u00e9 adicionando as fun\u00e7\u00f5es <code>get_header()<\/code> e <code>get_footer()<\/code>. Isso mant\u00e9m o layout consistente com o restante do site.<\/li>\n<\/ol>\n<p>Aqui est\u00e1 um exemplo de como pode ser o <code>page.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\nget_header(); ?&gt;\n\n&lt;main&gt;\n    &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n    &lt;div&gt;&lt;?php the_content(); ?&gt;&lt;\/div&gt;\n&lt;\/main&gt;\n\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Neste exemplo, o template inclui o cabe\u00e7alho, exibe o t\u00edtulo e o conte\u00fado da p\u00e1gina e, em seguida, inclui o rodap\u00e9.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Certifique-se de que voc\u00ea j\u00e1 tenha declarado os templates <code>header.php<\/code> e <code>footer.php<\/code>. Saiba mais sobre como eles funcionam <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#step-4-create-the-header-file\">neste guia<\/a>.<\/p>\n<\/aside>\n\n<h3>Template de p\u00e1gina do tema de bloco<\/h3>\n<p>Nos temas de bloco, voc\u00ea pode criar um template de p\u00e1gina por meio do Editor de Sites WordPress ou criando um arquivo <code>page.html<\/code> no diret\u00f3rio de templates.<\/p>\n<p>Depois que esse arquivo for criado, voc\u00ea poder\u00e1 criar um layout navegando at\u00e9 o editor do site (<strong>Appearance<\/strong> &gt; <strong>Editor<\/strong> no painel WordPress).<\/p>\n<p>Use o editor de blocos para adicionar e organizar blocos para criar o layout da p\u00e1gina. Voc\u00ea pode adicionar blocos para o t\u00edtulo da p\u00e1gina, a imagem em destaque e o conte\u00fado. Personalize cada bloco de acordo com suas prefer\u00eancias de design.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-editor.png\" alt=\"Personalize o modelo de p\u00e1gina com o editor de blocos.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Personalize o modelo de p\u00e1gina com o editor de blocos.<\/figcaption><\/figure>\n<p>Quando voc\u00ea estiver satisfeito com o layout, salve o template. O WordPress gerar\u00e1 automaticamente o arquivo HTML correspondente no diret\u00f3rio do seu tema.<\/p>\n<h2>Estiliza\u00e7\u00e3o de temas<\/h2>\n<p>A estiliza\u00e7\u00e3o do tema do WordPress \u00e9 uma etapa crucial na defini\u00e7\u00e3o da apar\u00eancia visual do seu site. Tanto os temas cl\u00e1ssicos quanto os temas em bloco oferecem maneiras robustas de personalizar estilos, mas eles abordam isso de forma diferente.<\/p>\n<h3>Estiliza\u00e7\u00e3o de temas cl\u00e1ssicos<\/h3>\n<p>Nos temas cl\u00e1ssicos, o estilo \u00e9 geralmente tratado com CSS. Veja a seguir como voc\u00ea pode estilizar um tema cl\u00e1ssico:<\/p>\n<p>A folha de estilo principal de um tema cl\u00e1ssico \u00e9 o arquivo <code>style.css<\/code>. Esse arquivo cont\u00e9m todas as regras de CSS que definem a apar\u00eancia do tema. \u00c9 tamb\u00e9m onde voc\u00ea declara os metadados do tema, como o nome do tema, o autor, a vers\u00e3o e a descri\u00e7\u00e3o.<\/p>\n<p>Para garantir que o CSS seja carregado corretamente, voc\u00ea precisa enfileirar a folha de estilo no arquivo <code>functions.php<\/code> usando a fun\u00e7\u00e3o <code>wp_enqueue_style()<\/code>.<\/p>\n<pre><code class=\"language-js\">function my_theme_enqueue_styles() {\n    wp_enqueue_style('my-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');<\/code><\/pre>\n<p>Essa etapa \u00e9 fundamental para manter os padr\u00f5es adequados do WordPress e garantir que os estilos sejam aplicados corretamente.<\/p>\n<p>Al\u00e9m disso, voc\u00ea pode adicionar CSS personalizado diretamente ao arquivo <code>style.css<\/code> ou criar arquivos CSS separados para diferentes partes do seu tema. O CSS personalizado tamb\u00e9m pode ser integrado em arquivos de template individuais usando a tag <code>&lt;style&gt;<\/code>, embora essa pr\u00e1tica seja geralmente menos comum e recomendada somente para estilos espec\u00edficos e isolados.<\/p>\n<p>Para obter um estilo mais avan\u00e7ado, voc\u00ea pode usar pr\u00e9-processadores de CSS como <a href=\"https:\/\/www.frontendmentor.io\/articles\/css-preprocessors-sass-or-less-which-to-choose-JOI20I1xNL#:~:text=Less%20provides%20flexibility%20for%20larger,Sass%2C%20Less%20encourages%20code%20organization.\" target=\"_blank\" rel=\"noopener noreferrer\">SASS ou LESS<\/a>. Essas ferramentas permitem que voc\u00ea escreva CSS mais sustent\u00e1vel e modular, facilitando o gerenciamento e a extens\u00e3o dos estilos do seu tema.<\/p>\n<h3>Temas de blocos de estilo<\/h3>\n<p>Os temas de blocos de estilo s\u00e3o gerenciados principalmente por meio do arquivo <code>theme.json<\/code> e do editor de blocos.<\/p>\n<p>O arquivo <code>theme.json<\/code> \u00e9 o local central para voc\u00ea definir estilos e configura\u00e7\u00f5es globais para o seu tema. Esse arquivo permite que voc\u00ea defina cores, tipografia, espa\u00e7amento e outros estilos em um formato JSON estruturado, fornecendo uma maneira centralizada de gerenciar a apar\u00eancia e o comportamento do tema. Os estilos globais definidos em <code>theme.json<\/code> se aplicam a todo o site, garantindo uma apar\u00eancia consistente.<\/p>\n<p>Al\u00e9m do <code>theme.json<\/code>, voc\u00ea pode usar o editor de blocos para aplicar estilos personalizados diretamente aos blocos. O editor de blocos permite que voc\u00ea veja as altera\u00e7\u00f5es em tempo real e ajuste o design visualmente sem precisar escrever c\u00f3digo manualmente. Isso torna o processo mais acess\u00edvel, especialmente para aqueles que preferem uma interface visual \u00e0 codifica\u00e7\u00e3o.<\/p>\n<p>Embora o arquivo <code>theme.json<\/code> lide com a maior parte do estilo, voc\u00ea ainda pode usar CSS para obter um controle mais granular. Voc\u00ea pode adicionar CSS personalizado ao arquivo <code>style.css<\/code> ou diretamente em blocos individuais usando o editor de blocos.<\/p>\n<p>Um exemplo de arquivo <code>theme.json<\/code> pode incluir configura\u00e7\u00f5es para paletas de cores, tipografia e estilos de bloco, facilitando o gerenciamento e a personaliza\u00e7\u00e3o do design do tema.<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Primary\",\n          \"slug\": \"primary\",\n          \"color\": \"#0073aa\"\n        },\n        {\n          \"name\": \"Secondary\",\n          \"slug\": \"secondary\",\n          \"color\": \"#005177\"\n        }\n      ]\n    },\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"12px\"\n        },\n        {\n          \"name\": \"Normal\",\n          \"slug\": \"normal\",\n          \"size\": \"16px\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"#ffffff\",\n      \"text\": \"#333333\"\n    },\n    \"typography\": {\n      \"fontFamily\": \"Arial, sans-serif\"\n    }\n  }\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea pode saber mais sobre o poder do <code>theme.json<\/code> em nosso guia sobre <a href=\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\">como personalizar seu tema de bloco do WordPress como um profissional<\/a>.<\/p>\n<\/aside>\n\n<h2>Personaliza\u00e7\u00e3o de temas<\/h2>\n<p>A personaliza\u00e7\u00e3o dos temas do WordPress permite que voc\u00ea adapte a apar\u00eancia e a funcionalidade do seu site para atender a necessidades e prefer\u00eancias espec\u00edficas. Tanto os temas cl\u00e1ssicos quanto os temas em blocos oferecem v\u00e1rios m\u00e9todos de personaliza\u00e7\u00e3o, mas com abordagens diferentes.<\/p>\n<h3>Personaliza\u00e7\u00e3o de temas cl\u00e1ssicos<\/h3>\n<p>Os temas cl\u00e1ssicos oferecem v\u00e1rias maneiras de voc\u00ea personalizar a apar\u00eancia do seu site:<\/p>\n<ol start=\"1\">\n<li><strong>Personalizador de temas<\/strong> &#8211; O personalizador de temas do WordPress \u00e9 uma interface f\u00e1cil de usar que permite que voc\u00ea fa\u00e7a altera\u00e7\u00f5es na apar\u00eancia do tema sem mexer em nenhum c\u00f3digo. Voc\u00ea pode acess\u00e1-lo em <strong>Appearance<\/strong> &gt; <strong>Customize<\/strong>. Ele oferece op\u00e7\u00f5es para voc\u00ea modificar a identidade do site, cores, menus, widgets e muito mais. As altera\u00e7\u00f5es podem ser visualizadas em tempo real antes de serem salvas.<\/li>\n<li><strong>CSS personalizado<\/strong> &#8211; Para altera\u00e7\u00f5es de estilo mais espec\u00edficas, voc\u00ea pode adicionar CSS personalizado diretamente no Personalizador de tema na se\u00e7\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS adicional<\/a>. Esse m\u00e9todo \u00e9 ideal para voc\u00ea fazer pequenos ajustes sem editar os arquivos do tema.<\/li>\n<li>Child theme &#8211; Se voc\u00ea precisar fazer modifica\u00e7\u00f5es extensas, a cria\u00e7\u00e3o de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">tema filho (child theme)<\/a> \u00e9 a abordagem recomendada. Um child theme herda a funcionalidade do tema principal (parent theme) e permite que voc\u00ea substitua ou adicione novos estilos e recursos. Isso garante que suas personaliza\u00e7\u00f5es sejam preservadas quando o tema principal for atualizado.<\/li>\n<li><strong>Arquivos de tema<\/strong> &#8211; Os usu\u00e1rios avan\u00e7ados podem editar diretamente os arquivos de tema, como <code>header.php<\/code>, <code>footer.php<\/code> e <code>functions.php<\/code>, para fazer altera\u00e7\u00f5es mais significativas. Entretanto, esse m\u00e9todo requer um bom conhecimento de PHP e da hierarquia de templates de WordPress.<\/li>\n<li><strong>plugins<\/strong> &#8211; H\u00e1 v\u00e1rios plugins dispon\u00edveis que ampliam os recursos de personaliza\u00e7\u00e3o do seu tema. Por exemplo, os <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">plugins de construtor de p\u00e1ginas<\/a>, como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-elementor\/\">Elementor<\/a>, permitem que voc\u00ea crie layouts complexos sem codifica\u00e7\u00e3o.<\/li>\n<\/ol>\n<h3>Personaliza\u00e7\u00e3o de temas de blocos<\/h3>\n<p>Com \u00eanfase no FSE, os temas em blocos oferecem uma abordagem mais visual e f\u00e1cil de usar para a personaliza\u00e7\u00e3o:<\/p>\n<ol start=\"1\">\n<li><strong>Editor de sites<\/strong> &#8211; O Editor de sites do WordPress (<strong>Appearance<\/strong> &gt; <strong>Editor<\/strong>) \u00e9 a principal ferramenta para personalizar temas de blocos. Ele permite que voc\u00ea modifique todos os aspectos do seu site, inclusive cabe\u00e7alhos, rodap\u00e9s, templates e blocos individuais, usando uma interface visual. As altera\u00e7\u00f5es s\u00e3o aplicadas instantaneamente, facilitando a visualiza\u00e7\u00e3o de como seus ajustes afetam o design do site.<\/li>\n<li><strong>Estilos globais<\/strong> &#8211; Os temas de bloco usam o arquivo <code>theme.json<\/code> para definir estilos globais. Voc\u00ea pode personalizar cores, tipografia, espa\u00e7amento e muito mais globalmente, garantindo a consist\u00eancia em todo o site. O Site Editor tamb\u00e9m permite que voc\u00ea ajuste essas configura\u00e7\u00f5es visualmente.<\/li>\n<li><strong>Blocos e padr\u00f5es reutiliz\u00e1veis<\/strong> &#8211; Voc\u00ea pode criar blocos e padr\u00f5es reutiliz\u00e1veis para manter a consist\u00eancia e simplificar o processo de design. Os blocos reutiliz\u00e1veis podem ser salvos e inseridos em qualquer artigo ou p\u00e1gina, enquanto os padr\u00f5es de blocos fornecem layouts predefinidos que podem ser personalizados para atender \u00e0s suas necessidades.<\/li>\n<li><strong>Templates personalizados<\/strong> &#8211; Com os temas de bloco, voc\u00ea pode criar templates personalizados para diferentes tipos de conte\u00fado diretamente no Editor de Sites. Isso permite que voc\u00ea personalize o layout e o design de p\u00e1ginas ou tipos de artigos espec\u00edficos sem escrever nenhum c\u00f3digo.<\/li>\n<li><strong>Plugins<\/strong> &#8211; Assim como os temas cl\u00e1ssicos, os temas de bloco tamb\u00e9m podem ser ampliados com plugins. Muitos plugins s\u00e3o projetados para aprimorar os recursos do editor de blocos, oferecendo blocos, padr\u00f5es e op\u00e7\u00f5es de personaliza\u00e7\u00e3o adicionais.<\/li>\n<\/ol>\n<h2>Resumo<\/h2>\n<p>A personaliza\u00e7\u00e3o dos temas de WordPress permite que voc\u00ea torne seu site exclusivo e funcional. Temas cl\u00e1ssicos dependem do Personalizador de Temas, CSS personalizado, temas filhos e edi\u00e7\u00f5es diretas de arquivos para flexibilidade. Temas em blocos utilizam o Editor de Site e o <code>theme.json<\/code> para uma abordagem mais visual e intuitiva.<\/p>\n<p>Ambos os m\u00e9todos oferecem ferramentas poderosas para adaptar seu site \u00e0s suas necessidades, seja atrav\u00e9s de codifica\u00e7\u00e3o ou personaliza\u00e7\u00e3o visual.<\/p>\n<p>Depois de criar um tema que atenda ao seu gosto, seja um tema cl\u00e1ssico ou em bloco, \u00e9 importante hospedar seu site em uma hospedagem robusta para evitar problemas como <a href=\"https:\/\/kinsta.com\/pt\/blog\/website-fora-do-ar\/\">tempo de inatividade<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/evitar-ataques-ddos\/\">ataques DDoS<\/a> e outros. \u00c9 aqui que os provedores de hospedagem premium, como a Kinsta, brilham.<\/p>\n<p>A Kinsta oferece uma poderosa <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem gerenciada de WordPress<\/a> com uma arquitetura totalmente em cont\u00eaineres, alimentada exclusivamente pelo <a href=\"https:\/\/kinsta.com\/pt\/blog\/plataforma-de-nuvem-para-desenvolvedores\/\">Google Cloud Platform<\/a> na rede de n\u00edvel premium do Google.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os temas de WordPress desempenham um papel fundamental na defini\u00e7\u00e3o da apar\u00eancia e da funcionalidade do seu site. Eles definem como o conte\u00fado \u00e9 exibido e &#8230;<\/p>\n","protected":false},"author":287,"featured_media":69320,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1036],"class_list":["post-69319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-temas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Conceitos Fundamentais no Desenvolvimento de Temas WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress\" \/>\n<meta property=\"og:description\" content=\"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-21T07:20:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-26T12:27:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress\",\"datePublished\":\"2024-08-21T07:20:39+00:00\",\"dateModified\":\"2024-08-26T12:27:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\"},\"wordCount\":3298,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\",\"name\":\"Conceitos Fundamentais no Desenvolvimento de Temas WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"datePublished\":\"2024-08-21T07:20:39+00:00\",\"dateModified\":\"2024-08-26T12:27:25+00:00\",\"description\":\"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Conceitos Fundamentais no Desenvolvimento de Temas WordPress - Kinsta\u00ae","description":"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.","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:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress","og_description":"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.","og_url":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-08-21T07:20:39+00:00","article_modified_time":"2024-08-26T12:27:25+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"18 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress","datePublished":"2024-08-21T07:20:39+00:00","dateModified":"2024-08-26T12:27:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/"},"wordCount":3298,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/","name":"Conceitos Fundamentais no Desenvolvimento de Temas WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","datePublished":"2024-08-21T07:20:39+00:00","dateModified":"2024-08-26T12:27:25+00:00","description":"Descubra os conceitos essenciais do desenvolvimento de temas no WordPress, incluindo temas cl\u00e1ssicos e de blocos, hierarquia de templates e tipos de artigo personalizados.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/core-concepts-to-understand-in-wordPress-theme-development.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Conceitos B\u00e1sicos que Voc\u00ea Deve Entender no Desenvolvimento de Temas para WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=69319"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69319\/revisions"}],"predecessor-version":[{"id":69398,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69319\/revisions\/69398"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/translations\/nl"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69319\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/69320"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=69319"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=69319"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=69319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}