Desenvolvimento de temas WordPress a partir de template HTML– Parte 1

Após a instalação do wordpress, crie a pasta com o nome que quiser em wordpress/wp-content/themes/pasta-criada/.

Dentro dela extrai seu template siga os seguintes passos.

O primeiro passo a ser feito é subdividir seu index em páginas lógicas. Inicialmente serão criados os seguintes arquivos:

  • header.php
  • footer.php
  • index.php
  • functions.php
  • style.css

No arquivo header.php, como o nome já diz, irá todo o cabeçalho que estamos acostumados a fazer num index normal, desde o doctype até o fechamento do <header>.

No footer.php seria o que colocamos no rodapé do nosso bom e velho index, do início do <footer> até o final, onde tem o </html>.

No index.php irá toda a parte principal do site onde será colocado todo o conteúdo e o loop (que será explicado mais detalhadamente em futuro POST da série).

No functions.php será onde colocaremos todas as funções do WordPress, a parte mais programática da coisa.

E finalmente crie o style.css. Para o wordpress reconhecer um tema é necessário ter um arquivo style.css com comentários, contendo as informações do tema. Então dentro do style.css adicione o comentário:

/*
Theme Name: Seu Tema
Theme URI: https://blog.smallbee.com.br/
Description: Meu primeiro tema em wordpress.
Author: Seu nome
Author URI: https://blog.smallbee.com.br/
Version: 1.0
Tags: WordPress, smallbee
*/

Agora no index.php adicione na primeira linha a função
<?php get_header(); ?>
que chamará o arquivo header.php. E na última linha
<?php get_footer(); ?>
que chamará o footer.php.

Configurando o Header

Para adicionar título dinâmico utilize a template tag
<?php bloginfo('name'); ?>
entre as tags title ficando assim:

<title><?php bloginfo('name'); ?></title>

Para adicionar descrição dinâmica utilize a template tag <?php bloginfo('description'); ?> na meta tag description, ficando assim:

<meta name="description" content="<?php bloginfo('description'); ?>">

Para colocar a codificação do site adicione a template tag <?php bloginfo('charset'); ?> na meta tag charset <meta charset="<?php bloginfo('charset'); ?>">

Na criação de temas para wordpress é obrigatório o uso de caminho absoluto de imagens, scripts e estilos. A template tag <?php bloginfo( ‘template_url’ ); ?>. Então adicione em todas imagens, scripts e estilos <?php bloginfo( 'template_url' ); ?>/

Exemplos:

<img src="<?php bloginfo( 'template_directory' ); ?>/img//logo.png" alt="Smallbee">

<script src="<?php bloginfo( 'template_url' ); ?>/js/main.js"></script>

<link href="<?php bloginfo( 'template_url' ); ?>/css/main.css" rel="stylesheet">

Pronto! Está feita a primeira parte! Para ver seu mais novo tema em funcionamento, ainda faltam alguns passos que serão postados no decorrer da série, mas você já pode ver seu monstrinho disponível ao acessar seu wordpress/wp-admin no menu Aparência -> Temas e ele estará lá…

Obrigado pela leitura!

Para aprofundar o seu conhecimento da template tag bloginfo consulte a documentação do wordpress, seu melhor amigo a partir de agora: https://codex.wordpress.org/Function_Reference/bloginfo

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Retype the CAPTCHA code from the image
Change the CAPTCHA codeSpeak the CAPTCHA code