0

Criando um tema WordPress básico

Neste artigo veremos como criar um tema para WordPress básico que servirá de base nos estudos de quem quer desenvolver temas mais completos. Mãos à obra!

Para começar a construir o nosso tema, devemos primeiro criar uma sub-pasta no diretório wp-content/themes na sua instalação WordPress. Para o propósito deste tutorial, vamos chamar a pasta “tema_basico”. O nome da pasta deve corresponder ao nome do tema que você deseja criar. Para fazer isso você pode usar o seu cliente FTP favorito ou a ferramenta File Manager no seu cPanel.

Em caso de dúvidas de como proceder para acessar seus arquivos de hospedagem, faça contato com seu provedor de serviços.

Antes de começar a criarmos o tema, devemos decidir como o layout do nosso site será. Neste tutorial vamos construir um tema WordPress que consiste em um cabeçalho, barra lateral, área de conteúdo e um rodapé, como mostrado abaixo:

division
Para fazer isso teremos que criar os seguintes arquivos para o diretório tema_basico:

  • header.php – Este arquivo irá conter o código para o cabeçalho do tema;
  • index.php – Este é o arquivo principal para o tema.
  • sidebar.php – Este arquivo irá conter as informações da barra lateral;
  • footer.php – Este arquivo irá lidar com o rodapé do site;
  • style.css – Este arquivo irá lidar com o estilo do nosso novo tema;

Esta é a estrutura básica de nosso tema. Você pode criar esses arquivos localmente com um simples editor de texto (como o bloco de notas ou Sublime Text, por exemplo) e enviá-los via FTP ou você pode usar a ferramenta Gerenciador de arquivos no seu cPanel para criar os arquivos diretamente em sua conta de hospedagem.

Agora vamos dar uma olhada em cada arquivo e o que ele deve conter:

1 => header.php

<html>
<head>
  <title>Tema Basico</title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>Cabeçalho</h1>
    </div>

Basicamente, este é o código HTML simples com uma única linha contendo um código PHP e uma função WordPress padrão. Neste arquivo você pode especificar sua meta tags, como o título do seu site, meta descrição e as palavras-chave para sua página.

Logo após o título da linha iserimos:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Este comando diz WordPress para carregar o arquivo style.css. Ele vai lidar com o estilo do nosso site. A função bloginfo( ), é uma função nativa do WordPress que, quando recebe o parêmetro ‘stylesheet_url’ , retorna o caminho do arquivo de folha de estilo. Mais informações sobre a função e o que ela pode fazer, acesse: https://developer.wordpress.org/reference/functions/bloginfo/

Em seguida, nós adicionamos o início de uma “div” com uma classe ‘wrapper’ que será o principal contêiner do site. Criamos classe para que assim possamos modificá-la por meio do arquivo style.css.

Depois disso, nós adicionamos um título ‘Cabeçalho’ envolvido em uma “div” com ID “header”, que será mais tarde especificada no arquivo de folha de estilo.

2 => index.php

<?php get_header(); ?>
<div id="main">
  <div id="content">
    <h1>Area Principal</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <h1><?php the_title(); ?></h1>
      <h4>Postado em <?php the_time('F jS, Y') ?></h4>
      <p><?php the_content(__('(more...)')); ?></p>
      <hr> <?php endwhile; else: ?>
    <p><?php _e('Desculpe, nenhum post encontrado.'); ?></p><?php endif; ?>
  </div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

O arquivo index inicia com get_header() que irá incluir o arquivo ‘header.php’ e o código dele na página principal. Ele usa uma função WordPress interna para fazer isso. Vamos explicar isso em detalhes mais adiante neste tutorial. Então nós colocamos um título Área Principal para indicar qual parte do seu tema é exibido nessa área.

As próximas linhas consistem de um código PHP e funções padrão do WordPress. Este código verifica se você tem mensagens em seu blog criadas através WordPress área administrativa e os exibe. Depois, incluímos o ‘sidebar.php’ usando get_sidebar( ).

<?php get_sidebar(); ?>

Neste arquivo, você pode exibir suas categorias, arquivos, widgets, etc. Depois desta linha, inserimos uma div vazia que vai separar nosso conteúdo e barra lateral do nosso footer.

Finalmente inserimos nosso rodapé.

<?php get_footer(); ?>

Usando a função get_footer( ) que vai inserir o arquivo ‘footer.php’ em nossa página.

3 => sidebar.php

<div id="sidebar">
  <h2 ><?php _e('Categories'); ?></h2>
  <ul >
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
  </ul>
  <h2 ><?php _e('Archives'); ?></h2>
  <ul >
    <?php wp_get_archives('type=monthly'); ?>
  </ul>
</div>

Neste arquivo nós usamos funções WordPress internos para exibir as Categorias e Arquivo de posts. A função WordPress os retorna como itens da lista, por isso abraçamos a função com as tags <ul>.

4 => footer.php

    <div id="footer">
      <h1>Rodape</h1>
    </div>
  </div>
</body>
</html>

Com este código podemos adicionar um título simples em nosso rodapé. No lugar deste código você pode adicionar links, texto adicional, as informações de copyright para seu tema e objetos adicionais.

5 => style.css

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

Este simples arquivo de css define o layout básico de nosso tema. Essas linhas definem o fundo da página e cerca as principais partes do site com bordas para facilitar a visualização das divisões existentes no site.

Como já mencionado anteriormente, as funções do WordPress internos são muitas vezes utilizados no código do tema. Você pode dar uma olhada na referência de função completa no site oficial do WordPress para mais informações sobre cada função.

A partir de agora você pode modificar o arquivo CSS, adicionar imagens, animações e outros conteúdos para o seu tema, a fim de alcançar a aparência que você deseja para o seu blog!