{"id":233591,"date":"2023-02-17T20:07:00","date_gmt":"2023-02-17T17:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233591"},"modified":"2022-11-11T00:31:30","modified_gmt":"2022-11-10T21:31:30","slug":"tutorial-de-tema-wordpress-para-iniciantes-parte-2-modelos","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/tutorial-de-tema-wordpress-para-iniciantes-parte-2-modelos\/","title":{"rendered":"Tutorial de Tema WordPress para Iniciantes \u2013 Parte 2: Modelos"},"content":{"rendered":"\n

Esta li\u00e7\u00e3o do tutorial do tema WordPress para iniciantes ensinar\u00e1 como estruturar os principais blocos de constru\u00e7\u00e3o de um tema e come\u00e7ar a criar modelos. Vamos come\u00e7ar a criar alguma sa\u00edda HTML e como incluir os blocos de constru\u00e7\u00e3o nos templates do nosso tema. Na etapa anterior<\/a>, configuramos o m\u00ednimo de um tema WordPress e o ativamos. Mas a partir de agora n\u00e3o est\u00e1 fazendo muito, e nem mesmo cont\u00e9m HTML v\u00e1lido para uma p\u00e1gina da web. Vamos consertar isso.<\/p>\n

Blocos de constru\u00e7\u00e3o de cabe\u00e7alho e rodap\u00e9 (e barra lateral)<\/h2>\n

Em nossos arquivos de modelo, precisamos de HTML v\u00e1lido. Poder\u00edamos escrever a estrutura HTML completa (come\u00e7ando com <html><\/code>, <head><\/code>e full <body><\/code>) em index.php<\/code>, mas isso se torna impratic\u00e1vel ao manter v\u00e1rios arquivos de modelo em seu tema. Imagine ter criado um monte de templates, e ent\u00e3o perceber que voc\u00ea precisa de uma pequena mudan\u00e7a na parte do cabe\u00e7alho; voc\u00ea precisaria editar todos os modelos para que eles permane\u00e7am consistentes. Isso n\u00e3o \u00e9 inteligente.<\/p>\n

\"Tutorial<\/a><\/p>\n

A solu\u00e7\u00e3o \u00e9 dividir a estrutura HTML completa em partes sens\u00edveis; blocos de constru\u00e7\u00e3o. Cada bloco reside em seu pr\u00f3prio arquivo, e sempre que precisamos deles em um template, n\u00f3s os inclu\u00edmos. Os blocos mais comuns e sensatos s\u00e3o um para cabe\u00e7alho, um para rodap\u00e9 e outro para conte\u00fado, mas se o seu tema tiver uma barra lateral, a barra lateral tamb\u00e9m deve ser um edif\u00edcio separado.<\/p>\n

Aqueles de voc\u00eas que est\u00e3o mais familiarizados com PHP provavelmente est\u00e3o familiarizados com os m\u00e9todos include()<\/code>ou require()<\/code>. Isso \u00e9 exatamente o que faremos, mas usaremos as fun\u00e7\u00f5es do WordPress para incluir outros arquivos, pois eles trazem benef\u00edcios adicionais.<\/p>\n

Nesta li\u00e7\u00e3o, criaremos o cabe\u00e7alho, o rodap\u00e9 e a barra lateral como blocos de constru\u00e7\u00e3o. As barras laterais tornaram-se cada vez menos comuns em p\u00e1ginas da web, mas ainda implementaremos uma barra lateral direita em nosso tema. Esses tr\u00eas blocos de constru\u00e7\u00e3o s\u00e3o uma pr\u00e1tica comum em todos os temas do WordPress \u2013 e na verdade \u00e9 t\u00e3o comum que o WordPress oferece automa\u00e7\u00e3o para essas tr\u00eas coisas.<\/p>\n

Criando os modelos de cabe\u00e7alho, rodap\u00e9 e barra lateral<\/h2>\n

Vamos criar um novo arquivo vazio chamado header.php<\/code>em nossa pasta de temas. Vamos adicionar um HTML muito b\u00e1sico por enquanto (n\u00e3o se preocupe, adicionaremos um HTML mais adequado mais tarde).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Crie um novo arquivo nomeado footer.php<\/code>no diret\u00f3rio do seu tema. Tudo o que precisamos (por enquanto) neste arquivo \u00e9 o fechamento da nossa estrutura HTML.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
E, finalmente, crie um novo arquivo vazio chamado sidebar.php<\/code>. Adicionamos apenas a tag HTML <aside><\/code>dentro.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Incluindo os blocos de constru\u00e7\u00e3o<\/h2>\n
Vamos voltar ao nosso index.php<\/code>arquivo. Tudo o que precisamos fazer agora \u00e9 informar ao WordPress onde queremos incluir o arquivo de cabe\u00e7alho e rodap\u00e9. Obviamente, queremos carregar o cabe\u00e7alho no in\u00edcio e o rodap\u00e9 no final deste arquivo.<\/p>\n
O WordPress oferece fun\u00e7\u00f5es simples para incluir esses blocos de constru\u00e7\u00e3o; get_header()<\/code>e get_footer()<\/code>para o arquivo de cabe\u00e7alho e rodap\u00e9, respectivamente. Bem intuitivo n\u00e9? Vamos adicion\u00e1-los em nosso index.php e ver o que acontece.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
Atualize seu frontend e inspecione ou visualize a fonte HTML para ver que combinamos v\u00e1rios blocos de constru\u00e7\u00e3o para criar uma estrutura HTML completa.<\/p>\n
\"Tutorial<\/a><\/p>\n
Agora voc\u00ea pode editar o conte\u00fado index.php<\/code>independentemente do cabe\u00e7alho e do rodap\u00e9!<\/p>\n
Vamos incluir a barra lateral tamb\u00e9m. Tenha em mente que em seu tema voc\u00ea pode querer considerar casos e templates onde voc\u00ea n\u00e3o quer a barra lateral, por exemplo a p\u00e1gina inicial.<\/p>\n
Incluir a barra lateral \u00e9 t\u00e3o f\u00e1cil quanto o cabe\u00e7alho e o rodap\u00e9; para isso usamos get_sidebar()<\/code>. Vamos adicionar isso ao index.php, logo antes de obter o rodap\u00e9.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
Atualize e voc\u00ea dever\u00e1 ver a fonte HTML, incluindo nosso arquivo <aside><\/code>. N\u00e3o se preocupe, em uma etapa posterior, aprenderemos como convert\u00ea-lo em uma \u00e1rea real da barra lateral onde voc\u00ea pode colocar widgets.<\/p>\n
Nosso tema \u00e9 bastante est\u00e1tico agora. Na pr\u00f3xima li\u00e7\u00e3o<\/a> desta s\u00e9rie de tutoriais de temas do WordPress, finalmente come\u00e7aremos a mergulhar adequadamente nas fun\u00e7\u00f5es do WordPress para carregar conte\u00fado e informa\u00e7\u00f5es do WordPress dinamicamente em nossos modelos.<\/p>\n
Documenta\u00e7\u00e3o sobre os m\u00e9todos usados<\/h2>\n