Palestra realizada na Campus Party Brasil 2014. #CPBr7
Aprenda na prática como criar um tema para o WordPress do zero, usando HTML e CSS puro, ou usando ferramentas disponíveis na Internet, com um passo a passo.
2. @ClaudioSMweb
Programador PHP, Python e Ruby;
Desenvolve com WordPress há 6 anos;
Possui mais de 30 plugins no repositório oficial
do WordPress;
Líder do projeto Odin Framework;
Trabalha atualmente na Infranology.
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
3. @RafaelFunchal
Publicitário, Designer e músico nas horas
vagas;
Desenvolve com WordPress há 5 anos;
Administrador do grupo WordPress Brasil no
Facebook;
Também participa do projeto Odin Framework.
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
4. Como funciona um tema?
De forma básica, funciona com arquivos de templates que
carregaram funções com loops/laços para a exibição do
conteúdo.
Todo o conteúdo virá do banco de dados e desta forma
você poderá usar o tema em outros sites/blogs sem
nenhum problema.
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
5. Arquivos obrigatórios
Os arquivos mínimos para o funcionamento do tema são:
style.css
header.php
index.php
footer.php
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
6. style.css
Este é o arquivo mais importante! É ele que registra o tema no WP!
/*
Theme Name: Nome do seu tema
Theme URI: Site ou documentação do tema.
Description: Descrição do tema
Author: Nome do autor
Author URI: Site do autor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
7. header.php
Precisará pelo menos ter o seguinte formato:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="
<?php echo get_stylesheet_uri(); ?
>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
8. index.php
http://codex.wordpress.org/The_Loop
Exemplo bem simples de um template com loop/laço:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<article id="post<?php the_ID(); ?>" <?php post_class(); ?>>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?
></a></h3>
<div class="entry-content">
<?php the_content(); ?></div>
</article>
<?php endwhile; endif; ?>
<?php get_footer(); ?>
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
9. Outras funções dentro do loop/laço
Veja mais alguns exemplos de funções que exibem conteúdo dentro do loop:
the_excerpt() // Resumo do post
the_category() // Exibe uma lista de categorias do post
the_tags() // Exibe uma lista de tags do post
the_author() // Nome do autor
the_time( 'd/m/Y' ) // Data da publicação
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
10. footer.php
Exemplo para o rodapé:
<?php wp_footer(); ?>
</body>
</html>
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
11. Hierarquia dos arquivos
http://codex.wordpress.org/Template_Hierarchy
Home
Page
Tag
Custom Post Type
home.php
page-{slug}.php
tag-{slug}.php
archive-{post_type}.php date.php
index.php
page-{id}.php
tag-{id}.php
archive.php
archive.php
page.php
tag.php
index.php
index.php
index.php
archive.php
Author
Resultado da Pesquisa
Categoria
author-{nicename}.php
search.php
category-{slug}.php Taxonomies
author-{id}.php
index.php
Front Page
front-page.php
index.php
index.php
Date
Single
category-{id}.php
taxonomy-{taxonomy}.php author.php
single-{post_type}.php
category.php
taxonomy.php
archive.php
404
single.php
archive.php
archive.php
index.php
404.php
index.php
index.php
index.php
index.php
Anexos
MIME_type.php
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
12. Funções personalizadas
É possível criar funções que poderão ser acessadas de qualquer parte do
tema através do arquivo functions.php.
E até mesmo é possível alterar o comportamento do Front-end e Back-end
trabalhando com filtros (add_filter()) e ganchos (add_action()) .
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
13. Exemplo de gancho/action
http://codex.wordpress.org/Plugin_API/Action_Reference
Exemplo de como carregar scripts no WordPress:
function odin_enqueue_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'theme-scripts', get_template_directory_uri()
. '/js/scripts.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'odin_enqueue_scripts', 1 );
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
14. Exemplo de filtro/filter
http://codex.wordpress.org/Plugin_API/Filter_Reference
Exemplo de como alterar uma função no WordPress:
function odin_excerpt_more( $output ) {
$read_more = '<br /><a href="' . get_permalink() . '">'
. __( 'Continue lendo...' ) . '</a>';
return $output . $read_more;
}
add_filter( 'get_the_excerpt', 'odin_excerpt_more' );
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
15. Tags/funções condicionais
http://codex.wordpress.org/Conditional_Tags
Veja alguns exemplos:
is_home() // Homepage
is_front_page() // Front page
is_page() // Páginas
is_single() // Posts
is_category() // Arquivos de categoria
is_admin() // Página de administração do WordPress
wp_is_mobile() // Verifica o acesso por um dispositivo mobile
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
16. Registrando novas features
Você pode registrar diversas novas features para usar no seu tema:
register_nav_menu() // Menus dinâmicos
register_sidebar() // Sidebars/barra lateral
register_post_type() // Novo tipo de conteúdo
register_taxonomy() // Nova taxonomia
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
17. APIs disponíveis
http://codex.wordpress.org/WordPress_APIs
Existem várias APIs dentro do WP e as mais interessantes para temas são:
Settings API => Permite criar opções no administrador
Theme Customization API => Cria um menu para customizar o tema
Widgets API => Permite criar novos widgets
Shortcode API => Cria pequenos trechos de código para inserir
conteúdo extra ou dinâmico dentro dos posts/páginas.
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
18. Temas filhos
http://codex.wordpress.org/Child_Themes
É possível aproveitar um tema que já existe para ser usado como base.
Neste caso a base será o tema PAI e o seu novo tema o FILHO.
Tema PAI e FILHO devem estar em pastas separadas dentro de wpcontent/themes e indicar quem é o PAI pelo style.css:
/*
Theme Name: Nome do seu filho
...
Template: nome-da-pasta-do-tema-pai
...
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal
28. Licença
Este documento esta licenciado sobre GPLv2.
É possível encontrar uma cópia da licença no seguinte link:
http://www.gnu.org/licenses/gpl-2.0.txt
Como criar um tema para WordPress
@ClaudioSMweb | @RafaelFunchal