-
Notifications
You must be signed in to change notification settings - Fork 1
Wordpress Básico
- 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
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.
Vamos abrir agora o functions.php. Nele vamos adicionar chamadas para os arquivos .js e .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() {}ondewpné 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, utilizamosget_template_directory_uri(), que retornawp-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.
É 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' );
?>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.
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 );
?>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(); ?>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;
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.