Wordpress Básico

Conteúdo

• Criando um tema
• Adicionando JS e CSS ao tema
• Templates do Header e Footer
• O Loop
• Templates de páginas
• Criando a navegação
• Post Types customizados
• Template do Blog e Posts
• Template da home
• Finalizando o tema

Links úteis

• Exemplo de tema criado do zero
• Hierarquia de templates Wordpress

Criando um Tema

Os temas Wordpress devem ficar dentro da pasta /wp-content/themes/ onde o wordpress foi extraído.

Nesse exemplo vamos criar uma tema chamado Nautilus. Vamos criar o diretório e os arquivos index.php e style.css, que são obrigatórios para um tema ser criado ativado. Todos os outros arquivos que vamos criar referente a esse tema serão colocados dentro desse diretório.

Podemos aproveitar e criar também o arquivo functions.php, que mesmo não sendo obrigatório para a criação de um tema, iremos utilizar em breve.

Assim nosso diretório fica:

nautilus
|-- index.php
|-- style.css
|-- functions.php

Vamos começar pelo arquivo style.css. É nele que vamos adicionar os dados sobre o tema. Logo na primeira linha adicione:

/*
Theme Name: Nautilus
Author: Seu Nome
Author URI: http://exemplo.com.br
Description: Esse é meu primeiro tema Wordpress.
Version: 1.0.0
*/

Você pode editar os valores da forma que preferir, mas não edite as propriedades (Theme Name, Author, etc). Elas devem ser escritas exatamente dessa forma, incluindo maiúsculas e minúsculas. Caso contrário as informações não serão reconhecidos pelo tema.

Agora você pode ir no painel do Wordpress e verá que apareceu um novo tema de nome Nautilus (ou o nome que você colocou) e com as demais configurações que você colocou. Para adicionar uma imagem ao seu tema, basta adicionar uma imagem com o nome screenshot.jpg dentro do diretório raíz do tema.

Em seguida vamos adicionar arquivos .css e .js ao nosso tema para então começarmos a criar nossos templates.

Adicionando JS e CSS ao Tema

Vamos abrir agora o functions.php. Nele vamos adicionar chamadas para os arquivos .js e .css.

CSS

Vamos começar adicionando arquivos .css. Note que você pode adicionar todos os seus estilos dentro de style.css logo abaixo do comentário com informações sobre o tema. Mas ainda assim você precisa fazer o seguinte:

<?php

function wpn_theme_styles() {
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'googlefont_css', '//fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
}

add_action( 'wp_enqueue_scripts', 'wpn_theme_styles' );

?>

Explicação:

• Criamos uma função wpn_theme_styles() {} onde wpn é um namespace para evitar possíveis conflitos. É recomendável utilizar um namespace em todas as funções que você criar.
• Em seguida utilizamos a função do Wordpress wp_enqueue_style. Os argumentos que era recebe são ( '$handle', '$directory'), onde $handle é uma referência ao seu arquivo.
• O segundo argumento, $directory, é a localização ou URL do arquivo dentro do diretório raíz do wordpress, não do tema. Por isso e para evitar ter que se repetir mais que o necessário, utilizamos get_template_directory_uri(), que retorna wp-content/themes/nautilus. Assim é preciso apenas concatenar com /css/arquivo.css.

Após isso é preciso adicionar uma ação que irá inserir os estilos chamados na função acima. Para isso basta adicionar o código add_action( 'wp_enqueue_scripts', 'wpn_theme_styles' ) logo abaixo da sua função, para facilitar a legibilidade.

Pronto. Para adicionar outros arquivos .css é só adicioná-los dentro da função acima seguindo o modelo.

JS

É bem semelhante.

<?php
function wpn_theme_js() {
  wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
  wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );
  wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );
}

add_action ( 'wp_enqueue_scripts', 'wpn_theme_js' );

?>

Template do Blog e Posts

O template da página onde todas as postagens ficam é o arquivo home.php. Ele será aplicado à página que estiver selecionada como a página de blog nas configurações do tema.

Editando a página do Blog

Exemplo de home.php:

<?php get_header(); ?>

<!-- Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article class="post">

    <!-- Link do post, título do post -->
    <h1><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h1>
    <!-- Mostra apenas o texto da postagem, sem tags HTML adicionais -->
    <h2><?php echo strip_tags( get_the_excerpt() ); ?></h2>

    <!-- Dados do autor -->
    <ul class="post-meta no-bullet">

      <li class="author">
        <span class="wpt-avatar small">
          <!-- Exibe a imagem do autor pela ID do mesmo -->
          <?php echo get_avatar( get_the_author_meta( 'ID' ), 24); ?>
        </span>
        por <?php the_author_posts_link(); ?>
      </li>
      <!-- Categorias são exibidas em lista por padrão. Utilizar ', ' como argumento faz as categorias serem mostradas com virgulas como separador -->
      <li class="cat">em <?php the_category( ', ' ) ?></li>
      <!-- Argumentos em the_time() servem para formatar a exibição. Ver documentação para detalhes -->
      <li class="date">em <?php the_time( 'j \d\e F \d\e Y' ); ?></li>

    </ul>

    <!-- Verifica se o post possui uma imagem de destaque -->
    <?php if ( get_the_post_thumbnail() ) : ?>
    <div class="img-container">
      <!-- Chama essa função se houver imagem de destaque -->
      <?php the_post_thumbnail( 'large' ); ?>
    </div>
    <?php endif; ?>

  </article>

<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, this page isn\'t real.' ); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

Se a princípio for difícil entender como o Wordpress sabe qual o título ou o link para cada postagem utilizando the_permalink() ou the_title(), não esqueça que o Loop verifica e percorre todas as postagens existentes, pegando os dados de cada uma delas e exibindo de acordo com as funções chamadas.

Para modificar o tamanho do resumo mostrado, adicione esse código em functions.php:

<?php
  function wpt_excerpt_length( $length ) {
    return 16; // Número de palavras no resumo
  }
  add_filter( 'excerpt_length', 'wpt_excerpt_length', 999 );
?>

Editando a página dos Posts

O template single.php ou single-post.php será aplicado por padrão a todos os posts. Em muitos casos a estrutura lógia desse template será bem parecida com a do home.php, mas exibindo o conteúdo inteiro em vez de um resumo. Exemplo de single.php:

<?php get_header(); ?>

<!-- Loop -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article class="post">

    <!-- Post Title -->
    <h1><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h1>

    <!-- Author Metadata-->
    <ul class="post-meta no-bullet">
      <li class="author">
      <span class="wpt-avatar small">
      <?php echo get_avatar( get_the_author_meta( 'ID' ), 24); ?>
      </span>
      por <?php the_author_posts_link(); ?>
      </li>
      <li class="cat">em <?php the_category( ', ' ) ?></li>
      <li class="date">em <?php the_time( 'j \d\e F \d\e Y' ); ?></li>
    </ul>

    <!-- Pega imagem de destaque -->
    <?php if ( get_the_post_thumbnail() ) : ?>
      <div class="img-container">
        <?php the_post_thumbnail( 'large' ); ?>
      </div>
    <?php endif; ?>

    <!-- Conteúdo do Post -->
    <?php the_content(); ?>

    <!-- Adiciona o formulário de comentários -->
    <?php comments_template(); ?>
  </article>

<?php endwhile; else : ?>
  <p><?php _e( 'Sorry, there are no posts.' ); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

Adicionando comentários

Basta adicionar o código <?php comments_template(); ?> e o formulário para postar comentários irá aparecer. Se quiser ter um formulário customizado, basta criá-lo no template comments.php;

Outras páginas relacionadas

Páginas como a de posts por categoria, autor, tags, data de publicação e afins podem ser definidas individualmente por seus templates específicos.

Porém pode ser uma boa ideia utilizar o archive.php como fallback. Às vezes edita-lo é melhor do que editar um template específico para cada uma dessas categorias.

Em geral ele também é semelhante à ao template do blog e dos posts.

Ver WP Hierarchy para mais detalhes.