{"id":69163,"date":"2024-08-02T05:29:08","date_gmt":"2024-08-02T08:29:08","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=69163&#038;preview=true&#038;preview_id=69163"},"modified":"2024-08-08T05:34:17","modified_gmt":"2024-08-08T08:34:17","slug":"criar-tema-classico-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/","title":{"rendered":"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo"},"content":{"rendered":"<p>O WordPress \u00e9 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/sistema-de-gerenciamento-de-conteudo\/\">sistema de gerenciamento de conte\u00fado (CMS)<\/a> muito popular para a cria\u00e7\u00e3o de blogs, lojas de <a href=\"https:\/\/kinsta.com\/ecommerce\/\">eCommerce<\/a> e outros sites. Ele se destaca por sua flexibilidade, com suporte a milhares de <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">temas gratuitos e pagos<\/a> em v\u00e1rias plataformas, o que ajuda a acelerar o processo de cria\u00e7\u00e3o de sites.<\/p>\n<p>No entanto, o verdadeiro poder do WordPress est\u00e1 em suas op\u00e7\u00f5es de personaliza\u00e7\u00e3o, pois voc\u00ea pode ajustar a apar\u00eancia do seu site com v\u00e1rios <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">construtores de p\u00e1ginas<\/a> e temas de blocos para se adequar ao seu gosto. Mas e se essas op\u00e7\u00f5es ainda n\u00e3o atenderem \u00e0s suas necessidades espec\u00edficas? A boa not\u00edcia \u00e9 que voc\u00ea pode desenvolver seu tema do zero.<\/p>\n<p>Este guia descreve a cria\u00e7\u00e3o de um <a href=\"https:\/\/kinsta.com\/pt\/ferramentas\/detector-tema-wordpress\/\">tema de WordPress<\/a> cl\u00e1ssico. Voc\u00ea aprender\u00e1 a criar um tema passo a passo, o que lhe dar\u00e1 a base para criar temas mais avan\u00e7ados no futuro.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Voc\u00ea pode se perguntar o que \u00e9 um tema cl\u00e1ssico de WordPress, o que o torna cl\u00e1ssico e se existe outro tipo de tema. Se essas perguntas surgirem em sua mente, a resposta direta \u00e9 que um tema cl\u00e1ssico de WordPress usa os arquivos e fun\u00e7\u00f5es tradicionais de template PHP para criar a estrutura e o layout do site.<\/p>\n<p>Isso \u00e9 diferente dos temas de blocos modernos introduzidos com o <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">editor Gutenberg<\/a>, que usa blocos e <a href=\"https:\/\/kinsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">edi\u00e7\u00e3o completa de sites (FSE)<\/a> para criar e gerenciar elementos do tema. Ambos os tipos t\u00eam suas vantagens, mas este guia se concentra nos temas cl\u00e1ssicos.<\/p>\n<\/aside>\n\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>Pr\u00e9-requisitos<\/h2>\n<p>Desenvolver seu tema do zero \u00e9 um processo t\u00e9cnico que envolve escrever c\u00f3digo. Voc\u00ea deve estar familiarizado com o seguinte:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-php\/\">PHP<\/a><\/strong> \u2014 Essencial para adicionar funcionalidade e conte\u00fado din\u00e2mico ao seu tema. \u00c9 a espinha dorsal do WordPress.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a><\/strong> \u2014 Usado para criar a estrutura dos templates do seu tema.<\/li>\n<li><strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a><\/strong> \u2014 Usado para estilizar o tema e garantir que ele tenha boa apar\u00eancia em diferentes dispositivos e navegadores.<\/li>\n<\/ul>\n<p>Al\u00e9m disso, a configura\u00e7\u00e3o de um ambiente de desenvolvimento \u00e9 fundamental. Voc\u00ea pode criar um com o <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/\">DevKinsta<\/a>, uma su\u00edte de desenvolvimento local para sites WordPress, seguindo estas etapas:<\/p>\n<ol start=\"1\">\n<li>Visite o <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">site DevKinsta<\/a> para fazer o download do aplicativo para o seu sistema operacional.<\/li>\n<li>Siga as instru\u00e7\u00f5es de instala\u00e7\u00e3o para o seu sistema operacional.<\/li>\n<li>Abra o DevKinsta e clique em <strong>Novo site WordPress<\/strong>.<\/li>\n<li>Em seguida, selecione a op\u00e7\u00e3o <strong>Novo site WordPress<\/strong> e preencha os campos <strong>Nome do site<\/strong>, <strong>Nome de usu\u00e1rio do administrador<\/strong> e <strong>Senha do administrador do WordPress<\/strong>.<\/li>\n<li>Por fim, clique em <strong>Criar site<\/strong> e aguarde de 30 a 60 segundos para que o site seja criado.<\/li>\n<\/ol>\n<p>Depois que o site for criado, voc\u00ea poder\u00e1 visualiz\u00e1-lo, acessar o painel do WP e at\u00e9 mesmo ver o caminho do arquivo para a instala\u00e7\u00e3o local do WP no seu computador, o que lhe dar\u00e1 acesso a todo o c\u00f3digo.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/create-site-devkinsta.png\" alt=\"Detalhes do site no DevKinsta\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Detalhes do site no DevKinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Suponha que voc\u00ea tenha um site ativo no MyKinsta. Voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/integracao-devkinsta\/#pull-a-site-from-kinsta\">puxar seu site para a DevKinsta<\/a> para trabalhar nele localmente ou usar seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-sftp\/\">cliente SFTP preferido<\/a>, como o <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FileZilla<\/a>, juntamente com os detalhes STFP do seu site para acessar seus arquivos do WordPress<\/p>\n<\/aside>\n\n<h2>Entendendo a estrutura de temas do WordPress<\/h2>\n<p>Antes de explorar o processo passo a passo de cria\u00e7\u00e3o do seu tema cl\u00e1ssico, \u00e9 essencial que voc\u00ea entenda a estrutura de um tema cl\u00e1ssico de WordPress e os principais arquivos envolvidos. Esse conhecimento fornecer\u00e1 uma base s\u00f3lida para o desenvolvimento do seu tema.<\/p>\n<h3>O diret\u00f3rio de temas de WordPress<\/h3>\n<p>Todos os temas do WordPress s\u00e3o armazenados no diret\u00f3rio <code>wp-content\/themes directory<\/code> da sua instala\u00e7\u00e3o WordPress. Cada tema reside em sua pr\u00f3pria pasta dentro desse diret\u00f3rio.<\/p>\n<h3>Principais arquivos em um tema de WordPress<\/h3>\n<p>H\u00e1 dois arquivos principais que todo tema cl\u00e1ssico de WordPress deve ter:<\/p>\n<ul>\n<li><code>index.php<\/code> \u2014 O arquivo de template principal, que serve como fallback para todos os outros arquivos de template. \u00c9 o arquivo principal que o WordPress usa para exibir o conte\u00fado.<\/li>\n<li><code>style.css<\/code> \u2014 Esse arquivo cont\u00e9m os metadados do tema e os estilos CSS personalizados. \u00c9 fundamental para definir a apar\u00eancia do tema e fornecer informa\u00e7\u00f5es essenciais, como nome, autor e vers\u00e3o.<\/li>\n<\/ul>\n<p>Para estruturar bem o seu tema e adicionar funcionalidades, voc\u00ea pode usar arquivos de template adicionais, como os seguintes, que s\u00e3o comuns aos temas cl\u00e1ssicos e usados no tema de exemplo criado neste guia:<\/p>\n<ul>\n<li><code>header.php<\/code>: Esse arquivo pode conter a se\u00e7\u00e3o de cabe\u00e7alho do seu tema, incluindo a logomarca do site e o menu de navega\u00e7\u00e3o.<\/li>\n<li><code>footer.php<\/code>: Esse arquivo deve conter a se\u00e7\u00e3o de rodap\u00e9 do seu tema.<\/li>\n<li><code>functions.php<\/code>: Esse arquivo pode ser usado para adicionar fun\u00e7\u00f5es personalizadas, recursos e op\u00e7\u00f5es de suporte ao tema.<\/li>\n<li><code>single.php<\/code>: Esse arquivo de template \u00e9 usado para exibir artigos individuais do blog.<\/li>\n<li><code>page.php<\/code>: O arquivo de template usado para exibir p\u00e1ginas est\u00e1ticas.<\/li>\n<\/ul>\n<p>Agora que voc\u00ea entende os arquivos essenciais e suas fun\u00e7\u00f5es, vamos passar para o processo passo a passo de cria\u00e7\u00e3o do seu tema cl\u00e1ssico de WordPress.<\/p>\n<h2>Como criar um tema cl\u00e1ssico de WordPress<\/h2>\n<p>H\u00e1 um ditado popular que diz que a melhor maneira de aprender \u00e9 fazendo. Vamos aplicar esse princ\u00edpio criando um tema de blog cl\u00e1ssico que exibe seus artigos WordPress na p\u00e1gina inicial com estilo CSS personalizado e recursos adicionais.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-blog-theme.png\" alt=\"Tema cl\u00e1ssico de blog de WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Tema cl\u00e1ssico de blog de WordPress.<\/figcaption><\/figure>\n<h3>Etapa 1: Crie uma nova pasta de tema<\/h3>\n<p>Crie uma pasta no diret\u00f3rio <code>themes<\/code>, como <code>myblogtheme<\/code>.<\/p>\n<h3>Etapa 2: Adicione informa\u00e7\u00f5es de metadados do tema<\/h3>\n<p>Em seguida, vamos configurar os detalhes do tema no arquivo <code>style.css<\/code>. Aqui est\u00e1 um exemplo de algumas informa\u00e7\u00f5es de metadados que voc\u00ea pode incluir em <code>style.css<\/code>:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Kinsta Blog Theme\nAuthor: Joel Olawanle\nAuthor URI: https:\/\/kinsta.com\/blog\/author\/joelolawanle\/\nDescription: A thoughtfully designed WordPress theme crafted specifically to illustrate the theme creation process. This theme provides a clean, responsive layout suitable for showcasing articles and tutorials, making it an ideal choice for blog posts and educational content related to web development and design.\nVersion: 1.0\nLicense: GNU General Public License v3 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.html\n*\/<\/code><\/pre>\n<p>No c\u00f3digo acima:<\/p>\n<ul>\n<li><strong>Nome do tema<\/strong>: O nome do seu tema exibido na \u00e1rea de administra\u00e7\u00e3o do WordPress em <strong>Apar\u00eancia<\/strong> &gt; <strong>Temas<\/strong>.<\/li>\n<li><strong>Autor<\/strong>: Mostra o nome do criador do tema.<\/li>\n<li><strong>URI do autor<\/strong>: Links para o site ou perfil do autor.<\/li>\n<li><strong>Descri\u00e7\u00e3o<\/strong>: Fornece uma vis\u00e3o geral da finalidade e dos recursos do tema.<\/li>\n<li><strong>Vers\u00e3o<\/strong>: Indica a vers\u00e3o atual do tema para atualiza\u00e7\u00f5es.<\/li>\n<li><strong>Licen\u00e7a<\/strong>: Especifica os termos de distribui\u00e7\u00e3o.<\/li>\n<li><strong>URI da licen\u00e7a<\/strong>: Links para o texto completo da licen\u00e7a.<\/li>\n<\/ul>\n<p>Voc\u00ea pode saber mais sobre esses campos no <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/main-stylesheet-style-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Manual de Temas do WordPress<\/a>.<\/p>\n<p>Depois de adicionar essas informa\u00e7\u00f5es ao arquivo <code>style.css<\/code>, v\u00e1 para <strong>Apar\u00eancia<\/strong> &gt; <strong>Temas<\/strong> na \u00e1rea de administra\u00e7\u00e3o do WordPress. Voc\u00ea ver\u00e1 o tema rec\u00e9m-criado listado. Ao clicar para ver os <strong>Detalhes do tema<\/strong>, voc\u00ea perceber\u00e1 que todas as informa\u00e7\u00f5es que adicionou aparecem l\u00e1.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-details.png\" alt=\"Detalhes do tema do blog cl\u00e1ssico.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Detalhes do tema do blog cl\u00e1ssico.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Se voc\u00ea adicionar um arquivo <code>screenshot.png<\/code> \u00e0 pasta raiz do seu tema, ele aparecer\u00e1 como uma imagem de visualiza\u00e7\u00e3o na p\u00e1gina <strong>Temas<\/strong>. Isso facilita a identifica\u00e7\u00e3o da apar\u00eancia de um tema.<\/p>\n<\/aside>\n\n<p>Agora que voc\u00ea j\u00e1 tem o arquivo <code>style.css<\/code> configurado, vamos prosseguir com a cria\u00e7\u00e3o dos outros arquivos essenciais do tema.<\/p>\n<h3>Etapa 3: Crie o arquivo de template principal para o seu tema<\/h3>\n<p>O arquivo <code>index.php<\/code> serve como o arquivo de template principal do tema. Qualquer c\u00f3digo que voc\u00ea adicionar aqui ser\u00e1 usado para exibir o conte\u00fado principal do seu site.<\/p>\n<p>Por exemplo, se voc\u00ea adicionar algum <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">c\u00f3digo HTML<\/a> b\u00e1sico aqui, tudo ser\u00e1 exibido quando voc\u00ea ativar e visualizar o tema. No entanto, voc\u00ea deseja extrair informa\u00e7\u00f5es do CMS do WordPress para exibir por meio do arquivo de template do tema, e \u00e9 aqui que voc\u00ea usa o PHP para adicionar fun\u00e7\u00f5es do WordPress.<\/p>\n<p>Aqui voc\u00ea encontra a estrutura b\u00e1sica do arquivo <code>index.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    <!-- Main content goes here -->\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Na estrutura acima, <code>get_header()<\/code> e <code>get_footer()<\/code> s\u00e3o usados para extrair as se\u00e7\u00f5es de cabe\u00e7alho e rodap\u00e9 de seus respectivos arquivos de template (<code>header.php<\/code> e <code>footer.php<\/code>).<\/p>\n<p>Preencheremos o arquivo <code>index.php<\/code> com o c\u00f3digo correto, mas primeiro vamos trabalhar nas se\u00e7\u00f5es de cabe\u00e7alho e rodap\u00e9 do tema.<\/p>\n<h3>Etapa 4: Crie o arquivo de cabe\u00e7alho<\/h3>\n<p>O arquivo <code>header.php<\/code> exibe a se\u00e7\u00e3o de cabe\u00e7alho do seu site, que normalmente inclui elementos como a logo do site e o menu de navega\u00e7\u00e3o. Tamb\u00e9m inclui folhas de estilo, scripts e meta tags. Aqui est\u00e1 a apar\u00eancia do nosso arquivo <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;\n        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>Vamos detalhar e explicar cada parte desse arquivo e adicionar as <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-functions-php\/\">fun\u00e7\u00f5es<\/a> e os <a href=\"https:\/\/kinsta.com\/pt\/blog\/hooks-wordpress\/\">hooks<\/a> correspondentes ao <code>functions.php<\/code>.<\/p>\n<p>Vamos come\u00e7ar com a se\u00e7\u00e3o <code>&lt;head&gt;<\/code>. Essa se\u00e7\u00e3o inclui metadados essenciais, o t\u00edtulo do site, a codifica\u00e7\u00e3o de caracteres e a fun\u00e7\u00e3o <code>wp_head()<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>language_attributes();<\/code> define os atributos de idioma para o documento HTML. Em seguida, a fun\u00e7\u00e3o <code>wp_head();<\/code> \u00e9 crucial, pois permite que o WordPress e os plugins insiram elementos essenciais na se\u00e7\u00e3o <code>&lt;head&gt;<\/code>, como folhas de estilo e scripts.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Sempre envolva as fun\u00e7\u00f5es do WordPress em tags <code>&lt;?php ... ?&gt;<\/code>.<\/p>\n<\/aside>\n\n<p><a href=\"https:\/\/learn.wordpress.org\/lesson-plan\/enqueueing-scripts-and-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">Para enfileirar<\/a> a folha de estilo, adicione o seguinte a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>wp_enqueue_style()<\/code> adiciona a <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">folha de estilo<\/a> principal \u00e0 se\u00e7\u00e3o head. Prefixamos a fun\u00e7\u00e3o com <code>my_custom_theme<\/code> para evitar conflitos com outros temas ou plugins. Voc\u00ea pode optar por adicionar isso diretamente \u00e0 tag head com a tag <code>&lt;link&gt;<\/code>.<\/p>\n<p>Da mesma forma, vamos declarar uma fun\u00e7\u00e3o para adicionar o t\u00edtulo do site \u00e0 se\u00e7\u00e3o head:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');<\/code><\/pre>\n<p>Agora, por causa da fun\u00e7\u00e3o <code>wp_head()<\/code>, o estilo e a tag de t\u00edtulo s\u00e3o adicionados ao cabe\u00e7alho dinamicamente. Voc\u00ea pode verificar isso inspecionando o site do WordPress com as ferramentas de desenvolvimento do navegador. Na se\u00e7\u00e3o <code>&lt;head&gt;<\/code>, voc\u00ea deve ver o link da folha de estilo e a tag de t\u00edtulo gerada dinamicamente, confirmando que eles est\u00e3o inclu\u00eddos.<\/p>\n<p>Em seguida, no corpo, declaramos a se\u00e7\u00e3o da barra de navega\u00e7\u00e3o onde mostramos uma logo fict\u00edcia e garantimos uma op\u00e7\u00e3o para usar uma logo personalizada quando definida na identidade do site do WordPress:<\/p>\n<pre><code class=\"language-php\">&lt;body&gt;\n    &lt;header class=\"header-container\"&gt;\n        &lt;div class=\"my-logo\"&gt;\n            &lt;?php\n            if ( function_exists('the_custom_logo') && has_custom_logo() ) {\n                the_custom_logo();\n            } else {\n                \/\/ Fallback image\n                ?&gt;\n                &lt;a href=\"&lt;?php echo home_url('\/'); ?&gt;\"&gt;\n                    &lt;img src=\"&lt;?php echo get_template_directory_uri(); ?&gt;\/images\/dummy-logo.png\" alt=\"&lt;?php bloginfo('name'); ?&gt;\" class=\"custom-logo\" width=\"100px\"&gt;\n                &lt;\/a&gt;\n                &lt;?php\n            }\n            ?&gt;\n        &lt;\/div&gt;<\/code><\/pre>\n<p>A se\u00e7\u00e3o de logo usa a fun\u00e7\u00e3o <code>the_custom_logo()<\/code> para exibir uma logo personalizada, se houver uma definida. Se nenhuma logo personalizada for definida, ele exibir\u00e1 uma imagem padr\u00e3o.<\/p>\n<p>Para ativar o suporte a logo personalizada, adicione o seguinte c\u00f3digo a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function my_custom_theme_setup() {\n    add_theme_support('custom-logo', array(\n        'height'      =&gt; 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\n\nadd_action('after_setup_theme', 'my_custom_theme_setup');<\/code><\/pre>\n<p>Essa fun\u00e7\u00e3o adiciona suporte a uma logo personalizada. Por fim, a se\u00e7\u00e3o do menu de navega\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-php\">        &lt;nav&gt;\n            &lt;?php wp_nav_menu(array(\n                'theme_location' =&gt; 'header-menu',\n                'menu_class' =&gt; 'header-menu'\n            )); ?&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>wp_nav_menu()<\/code> exibe o <a href=\"https:\/\/kinsta.com\/pt\/blog\/menus-navegacao-personalizados\/\">menu de navega\u00e7\u00e3o<\/a> atribu\u00eddo ao local &#8220;Header Menu&#8221;. Para registrar o menu de navega\u00e7\u00e3o, verifique se voc\u00ea tem esse c\u00f3digo em <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">register_nav_menus(array(\n    'header-menu' =&gt; __('Header Menu', 'my-custom-theme'),\n));<\/code><\/pre>\n<p>Aqui est\u00e1 a apar\u00eancia do seu arquivo <code>function.php<\/code> agora:<\/p>\n<pre><code class=\"language-php\"> 100,\n        'width'       =&gt; 400,\n        'flex-height' =&gt; true,\n        'flex-width'  =&gt; true,\n    ));\n}\nadd_action('after_setup_theme', 'my_custom_theme_setup');\n\nfunction my_custom_theme_enqueue_styles() {\n    \/\/ Enqueue the main stylesheet\n    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());\n}\nadd_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_styles');\n\n\/\/ Function to add the site title to the head section\nfunction my_custom_theme_wp_title() {\n    add_theme_support('title-tag');\n}\nadd_action('after_setup_theme', 'my_custom_theme_wp_title');\n?&gt;<\/code><\/pre>\n<p>Seguindo essas etapas, voc\u00ea garante que o cabe\u00e7alho ofere\u00e7a suporte a uma logo personalizada e exiba um menu de navega\u00e7\u00e3o, tornando-o din\u00e2mico e facilmente personaliz\u00e1vel por meio do <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel de controle\u00a0do WordPress<\/a>.<\/p>\n<h3>Etapa 5: Crie o arquivo de rodap\u00e9<\/h3>\n<p>O arquivo <code>footer.php<\/code> ser\u00e1 respons\u00e1vel por exibir a se\u00e7\u00e3o de rodap\u00e9 do seu site. Para esse tema, o arquivo <code>footer.php<\/code> exibir\u00e1 apenas o ano dos direitos autorais:<\/p>\n<pre><code class=\"language-php\">&lt;footer&gt;\n  &lt;p&gt;Copyright \u00a9 2024&lt;\/p&gt;\n&lt;\/footer&gt;\n&lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Nesse arquivo, inclu\u00edmos a fun\u00e7\u00e3o <code>wp_footer()<\/code>, da mesma forma que inclu\u00edmos wp_head() no cabe\u00e7alho. A fun\u00e7\u00e3o <code>wp_footer()<\/code> permite que o WordPress e os plugins insiram elementos essenciais, como scripts, logo antes da tag de fechamento <code>&lt;\/body&gt;<\/code>. Isso \u00e9 fundamental para garantir que todos os recursos necess\u00e1rios sejam carregados corretamente e que seu site funcione conforme o esperado.<\/p>\n<h3>Etapa 6: Exibi\u00e7\u00e3o de artigos de blog com o loop do WordPress<\/h3>\n<p>Vamos voltar ao arquivo <code>index.php<\/code> para explicar como fazer um loop e exibir os artigos do seu site do WordPress usando o loop do WordPress \u2014 uma maneira poderosa de exibir conte\u00fado dinamicamente. Esta \u00e9 a apar\u00eancia do loop:<\/p>\n<pre><code class=\"language-php\">&lt;div class=\"my-posts\"&gt;\n    &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n        &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n            &lt;article class=\"article-loop\"&gt;\n                &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                    &lt;?php the_post_thumbnail(); ?&gt;\n                &lt;?php endif; ?&gt;\n                &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                &lt;div class=\"flex-info\"&gt;\n                    &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                    &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;?php the_excerpt(); ?&gt;\n            &lt;\/article&gt;\n        &lt;\/a&gt;\n    &lt;?php endwhile; else : ?&gt;\n        &lt;article&gt;\n            &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n        &lt;\/article&gt;\n    &lt;?php endif; ?&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>O c\u00f3digo acima verifica se h\u00e1 algum artigo a ser exibido antes de entrar no loop. No loop, as fun\u00e7\u00f5es do WordPress como <code>the_title()<\/code>, <code>the_author()<\/code>, <code>the_time('F j, Y')<\/code> e <code>the_excerpt()<\/code> exibem informa\u00e7\u00f5es sobre cada artigo do WordPress.<\/p>\n<p>A fun\u00e7\u00e3o <code>the_post_thumbnail()<\/code> tamb\u00e9m \u00e9 usada para exibir a miniatura, mas ela \u00e9 envolvida em uma instru\u00e7\u00e3o if, de modo que s\u00f3 \u00e9 exibida quando h\u00e1 uma imagem em destaque para o seu artigo. No arquivo <code>functions.php<\/code>, devemos adicionar suporte para miniaturas de artigos com essa fun\u00e7\u00e3o para que haja uma op\u00e7\u00e3o de carregar imagens em destaque quando voc\u00ea criar novos artigos:<\/p>\n<pre><code class=\"language-php\">add_theme_support('post-thumbnails');<\/code><\/pre>\n<p>Adicione isso \u00e0 fun\u00e7\u00e3o <code>my_custom_theme_setup()<\/code> que criamos no arquivo <code>functions.php<\/code>. \u00c9 assim que o arquivo <code>index.php<\/code> se parece agora:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;div class=\"hero\"&gt;\n        &lt;h1&gt;Welcome to my blog!&lt;\/h1&gt;\n        &lt;p&gt;Here, you'll find posts on a variety of topics, including programming, web development, and more.&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=\"my-posts\"&gt;\n        &lt;?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?&gt;\n            &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n                &lt;article class=\"article-loop\"&gt;\n                    &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n                        &lt;?php the_post_thumbnail(); ?&gt;\n                    &lt;?php endif; ?&gt;\n                    &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n                    &lt;div class=\"flex-info\"&gt;\n                        &lt;p&gt;By: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n                        &lt;p&gt;&lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;?php the_excerpt(); ?&gt;\n                &lt;\/article&gt;\n            &lt;\/a&gt;\n        &lt;?php endwhile; else : ?&gt;\n            &lt;article&gt;\n                &lt;p&gt;Sorry, no posts were found!&lt;\/p&gt;\n            &lt;\/article&gt;\n        &lt;?php endif; ?&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>Voc\u00ea notar\u00e1 que foi adicionado algum c\u00f3digo est\u00e1tico, que ser\u00e1 estilizado como um banner que exibe &#8220;Welcome to my blog&#8221; e um par\u00e1grafo de texto.<\/p>\n<h3>Etapa 7: Cria\u00e7\u00e3o de um template de artigo \u00fanico<\/h3>\n<p>Antes de estilizar o tema, vamos definir um template b\u00e1sico para exibir artigos individuais do blog quando voc\u00ea clicar em qualquer p\u00e1gina ou artigo do tema. Para fazer isso, crie um arquivo <code>single.php<\/code> na raiz do tema e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main&gt;\n    &lt;section class=\"single__post\"&gt;\n        &lt;article class=\"article-full\"&gt;\n          &lt;div class=\"single__post-header\"&gt;\n            &lt;?php if ( has_post_thumbnail() ) : ?&gt;\n              &lt;?php the_post_thumbnail(); ?&gt;\n            &lt;?php endif; ?&gt;\n            &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;\/h2&gt;\n            &lt;p&gt;By: &lt;?php the_author(); ?&gt; on &lt;?php the_time('F j, Y'); ?&gt;&lt;\/p&gt;\n          &lt;\/div&gt;\n          &lt;?php the_content(); ?&gt;\n        &lt;\/article&gt;\n    &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<p>No c\u00f3digo acima, <code>get_header()<\/code> e <code>get_footer()<\/code> incluem o cabe\u00e7alho e o rodap\u00e9. Em outras partes do c\u00f3digo, as fun\u00e7\u00f5es do WordPress exibem conte\u00fado din\u00e2mico.<\/p>\n<h3>Etapa 8: Crie um arquivo de template para as p\u00e1ginas do WordPress<\/h3>\n<p>Assim como voc\u00ea criou um template para artigos individuais do WordPress, pode criar um template para exibir suas p\u00e1ginas do WordPress. Para fazer isso, crie um arquivo <code>page.php<\/code> na raiz da pasta do seu tema e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">&lt;?php get_header(); ?&gt;\n&lt;main class=\"wrap\"&gt;\n  &lt;section class=\"\"&gt;\n      &lt;article class=\"article-full\"&gt;\n        &lt;div class=\"page-header\"&gt;\n          &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n        &lt;\/div&gt;\n        &lt;?php the_content(); ?&gt;\n      &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n&lt;?php get_footer(); ?&gt;<\/code><\/pre>\n<h3>Etapa 9: Estilizar seu tema<\/h3>\n<p>At\u00e9 agora, criamos alguns modelos b\u00e1sicos para o nosso tema. Agora, \u00e9 hora de adicionar um estilo personalizado para que voc\u00ea tenha uma \u00f3tima apar\u00eancia. Voc\u00ea pode adicionar seus estilos ao arquivo <code>style.css<\/code> na pasta do tema. Para come\u00e7ar, copie o estilo deste <a href=\"https:\/\/gist.github.com\/olawanlejoel\/8cf4cee4429df83a7e005275d1f4275d\" target=\"_blank\" rel=\"noopener noreferrer\">gist do GitHub<\/a> para o exemplo de tema criado neste guia.<\/p>\n<h3>Etapa 10: Teste e implemente seu tema<\/h3>\n<p>At\u00e9 agora, voc\u00ea criou um tema do WordPress com sucesso. Agora, \u00e9 hora de voc\u00ea testar e implantar o tema.<\/p>\n<p>Primeiro, verifique se o tema est\u00e1 ativado, acessando o painel de controle do WordPress e selecionando <strong>A<\/strong><strong>par\u00eancia<\/strong> &gt; <strong>Temas<\/strong>. Se voc\u00ea ainda n\u00e3o o fez, clique no seu tema e ative-o. Voc\u00ea tamb\u00e9m pode clicar no bot\u00e3o <strong>Personalizar<\/strong> para definir a identidade do site, ajustar o menu e ajustar outras configura\u00e7\u00f5es para garantir que o site seja exibido corretamente.<\/p>\n<p>Quando estiver satisfeito com seu tema, voc\u00ea ter\u00e1 algumas op\u00e7\u00f5es para implant\u00e1-lo:<\/p>\n<ol start=\"1\">\n<li>Voc\u00ea pode <strong>colocar seu site local on-line<\/strong>: Se estiver desenvolvendo localmente com o DevKinsta, voc\u00ea poder\u00e1 facilmente enviar seu site para um ambiente de teste. Isso permite que voc\u00ea teste seu tema em uma configura\u00e7\u00e3o semelhante a um ambiente de produ\u00e7\u00e3o antes de envi\u00e1-lo para o ambiente de produ\u00e7\u00e3o. Voc\u00ea pode encontrar instru\u00e7\u00f5es detalhadas sobre como fazer isso em nossa <a href=\"https:\/\/kinsta.com\/pt\/docs\/devkinsta\/integracao-devkinsta\/#push-changes-to-staging\">documenta\u00e7\u00e3o DevKinsta<\/a>.<\/li>\n<li><strong>Empacote e carregue seu tema<\/strong>: Como alternativa, voc\u00ea pode empacotar seu tema em uma pasta compactada e carreg\u00e1-lo em um site on-line. V\u00e1 para <strong>A<\/strong><strong>par\u00eancia<\/strong> &gt; <strong>Temas<\/strong>\u00a0&gt; <strong>Adicionar Novo<\/strong> &gt; <strong>Carregar Tema<\/strong>\u00a0no painel WordPress e selecione o arquivo de tema compactado para fazer o upload.<\/li>\n<\/ol>\n<p>Se voc\u00ea estiver testando o tema em um ambiente de teste, isso garante que tudo funcione conforme o esperado antes de coloc\u00e1-lo no ar. Essa etapa \u00e9 fundamental para voc\u00ea detectar poss\u00edveis problemas e garantir que o site tenha a apar\u00eancia e o funcionamento perfeitos.<\/p>\n<h2>Resumo<\/h2>\n<p>Neste artigo, criamos um tema cl\u00e1ssico de WordPress do zero. Abordamos a configura\u00e7\u00e3o de arquivos essenciais, a adi\u00e7\u00e3o de estilos personalizados e a cria\u00e7\u00e3o de templates para artigos e p\u00e1ginas individuais.<\/p>\n<p>Se voc\u00ea quiser que seu site tenha a funcionalidade e a apar\u00eancia exatas que deseja, desenvolver o tema de WordPress \u00e9 o caminho a seguir. No entanto, se voc\u00ea n\u00e3o tiver tempo, habilidades ou disposi\u00e7\u00e3o para fazer isso, a contrata\u00e7\u00e3o de um profissional pode ajud\u00e1-lo a alcan\u00e7ar sua vis\u00e3o com efici\u00eancia.<\/p>\n<p>Quando finalmente tiver um site que atenda \u00e0s suas prefer\u00eancias, voc\u00ea precisar\u00e1 de 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 a voc\u00ea uma poderosa <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem gerenciada de WordPress<\/a> com uma arquitetura totalmente em cont\u00eainer, 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<p><a href=\"https:\/\/kinsta.com\/pt\/fale-conosco\/\">Entre em contato conosco<\/a> para saber mais sobre nossa solu\u00e7\u00e3o de hospedagem gerenciada superior.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O WordPress \u00e9 um sistema de gerenciamento de conte\u00fado (CMS) muito popular para a cria\u00e7\u00e3o de blogs, lojas de eCommerce e outros sites. Ele se destaca &#8230;<\/p>\n","protected":false},"author":287,"featured_media":69164,"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-69163","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>Como Criar um Tema Cl\u00e1ssico do WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.\" \/>\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\/criar-tema-classico-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo\" \/>\n<meta property=\"og:description\" content=\"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-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-02T08:29:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-08T08:34:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1461\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\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=\"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme-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=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo\",\"datePublished\":\"2024-08-02T08:29:08+00:00\",\"dateModified\":\"2024-08-08T08:34:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\"},\"wordCount\":2738,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\",\"name\":\"Como Criar um Tema Cl\u00e1ssico do WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png\",\"datePublished\":\"2024-08-02T08:29:08+00:00\",\"dateModified\":\"2024-08-08T08:34:17+00:00\",\"description\":\"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png\",\"width\":1461,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-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\":\"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo\"}]},{\"@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":"Como Criar um Tema Cl\u00e1ssico do WordPress - Kinsta\u00ae","description":"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.","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\/criar-tema-classico-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo","og_description":"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.","og_url":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-08-02T08:29:08+00:00","article_modified_time":"2024-08-08T08:34:17+00:00","og_image":[{"width":1461,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme-1024x512.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo","datePublished":"2024-08-02T08:29:08+00:00","dateModified":"2024-08-08T08:34:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/"},"wordCount":2738,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/","name":"Como Criar um Tema Cl\u00e1ssico do WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png","datePublished":"2024-08-02T08:29:08+00:00","dateModified":"2024-08-08T08:34:17+00:00","description":"Aprenda a criar um tema cl\u00e1ssico para WordPress do zero, criando arquivos de templates e utilizando fun\u00e7\u00f5es do WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/08\/create-your-own-wordpress-theme.png","width":1461,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/criar-tema-classico-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":"Como Criar um Tema Cl\u00e1ssico do WordPress: Guia Passo a Passo"}]},{"@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\/69163","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=69163"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69163\/revisions"}],"predecessor-version":[{"id":69220,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69163\/revisions\/69220"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69163\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/69164"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=69163"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=69163"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=69163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}