Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Como criar um tema para
WordPress
@ClaudioSMweb
Programador PHP, Python e Ruby;
Desenvolve com WordPress há 6 anos;
Possui mais de 30 plugins no repositório...
@RafaelFunchal
Publicitário, Designer e músico nas horas
vagas;
Desenvolve com WordPress há 5 anos;
Administrador do grupo...
Como funciona um tema?
De forma básica, funciona com arquivos de templates que
carregaram funções com loops/laços para a e...
Arquivos obrigatórios
Os arquivos mínimos para o funcionamento do tema são:

style.css
header.php
index.php
footer.php

Co...
style.css
Este é o arquivo mais importante! É ele que registra o tema no WP!
/*
Theme Name: Nome do seu tema
Theme URI: Si...
header.php
Precisará pelo menos ter o seguinte formato:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<met...
index.php
http://codex.wordpress.org/The_Loop

Exemplo bem simples de um template com loop/laço:
<?php get_header(); ?>
<?...
Outras funções dentro do loop/laço
Veja mais alguns exemplos de funções que exibem conteúdo dentro do loop:
the_excerpt() ...
footer.php
Exemplo para o rodapé:
<?php wp_footer(); ?>
</body>
</html>

Como criar um tema para WordPress

@ClaudioSMweb ...
Hierarquia dos arquivos
http://codex.wordpress.org/Template_Hierarchy

Home

Page

Tag

Custom Post Type

home.php

page-{...
Funções personalizadas
É possível criar funções que poderão ser acessadas de qualquer parte do
tema através do arquivo fun...
Exemplo de gancho/action
http://codex.wordpress.org/Plugin_API/Action_Reference

Exemplo de como carregar scripts no WordP...
Exemplo de filtro/filter
http://codex.wordpress.org/Plugin_API/Filter_Reference

Exemplo de como alterar uma função no Wor...
Tags/funções condicionais
http://codex.wordpress.org/Conditional_Tags

Veja alguns exemplos:
is_home() // Homepage
is_fron...
Registrando novas features
Você pode registrar diversas novas features para usar no seu tema:
register_nav_menu() // Menus...
APIs disponíveis
http://codex.wordpress.org/WordPress_APIs

Existem várias APIs dentro do WP e as mais interessantes para ...
Temas filhos
http://codex.wordpress.org/Child_Themes

É possível aproveitar um tema que já existe para ser usado como base...
Starter Themes
_s (Underscores)
Roots
Gantry
Bones
Quark

Como criar um tema para WordPress

Whiteboard
Hybrid Core
Bootst...
Odin Framework
wpod.in

Como criar um tema para WordPress

@ClaudioSMweb | @RafaelFunchal
http://wpod.in/pt-br/docs/
Como criar um tema para WordPress

@ClaudioSMweb | @RafaelFunchal
Perguntas?

Como criar um tema para WordPress

@ClaudioSMweb | @RafaelFunchal
Links e referências
http://codex.wordpress.org/Theme_Development
http://codex.wordpress.org/Template_Hierarchy
http://code...
Links e referências
http://codex.wordpress.org/Function_Reference/the_ID
http://codex.wordpress.org/Function_Reference/pos...
Links e referências
http://codex.wordpress.org/Function_Reference/add_action
http://codex.wordpress.org/Function_Reference...
Links e referências
http://codex.wordpress.org/Function_Reference/get_template_directory_uri
http://codex.wordpress.org/Fu...
Links e referências
http://codex.wordpress.org/Settings_API
http://codex.wordpress.org/Theme_Customization_API
http://code...
Licença
Este documento esta licenciado sobre GPLv2.
É possível encontrar uma cópia da licença no seguinte link:
http://www...
Upcoming SlideShare
Loading in …5
×

Como criar um tema para WordPress

2,887 views

Published on

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.

Published in: Technology

Como criar um tema para WordPress

  1. 1. Como criar um tema para WordPress
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. footer.php Exemplo para o rodapé: <?php wp_footer(); ?> </body> </html> Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  11. 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. 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. 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. 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. 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. 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. 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. 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
  19. 19. Starter Themes _s (Underscores) Roots Gantry Bones Quark Como criar um tema para WordPress Whiteboard Hybrid Core BootstrapWP Thesis @ClaudioSMweb | @RafaelFunchal
  20. 20. Odin Framework wpod.in Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  21. 21. http://wpod.in/pt-br/docs/ Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  22. 22. Perguntas? Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  23. 23. Links e referências http://codex.wordpress.org/Theme_Development http://codex.wordpress.org/Template_Hierarchy http://codex.wordpress.org/Function_Reference/get_header http://codex.wordpress.org/Function_Reference/get_footer http://codex.wordpress.org/Function_Reference/wp_head http://codex.wordpress.org/Function_Reference/wp_footer http://codex.wordpress.org/Function_Reference/language_attributes http://codex.wordpress.org/Function_Reference/bloginfo http://codex.wordpress.org/Function_Reference/wp_title http://codex.wordpress.org/Function_Reference/get_stylesheet_uri http://codex.wordpress.org/Function_Reference/body_class http://codex.wordpress.org/The_Loop http://codex.wordpress.org/Function_Reference/have_posts http://codex.wordpress.org/Function_Reference/the_post Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  24. 24. Links e referências http://codex.wordpress.org/Function_Reference/the_ID http://codex.wordpress.org/Function_Reference/post_class http://codex.wordpress.org/Function_Reference/the_permalink http://codex.wordpress.org/Function_Reference/the_title http://codex.wordpress.org/Function_Reference/the_content http://codex.wordpress.org/Function_Reference/the_excerpt http://codex.wordpress.org/Function_Reference/the_category http://codex.wordpress.org/Function_Reference/the_tags http://codex.wordpress.org/Function_Reference/the_author http://codex.wordpress.org/Function_Reference/the_time http://codex.wordpress.org/Function_Reference/the_date http://codex.wordpress.org/Plugin_API/Action_Reference http://codex.wordpress.org/Plugin_API/Filter_Reference http://codex.wordpress.org/Function_Reference/add_filter Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  25. 25. Links e referências http://codex.wordpress.org/Function_Reference/add_action http://codex.wordpress.org/Function_Reference/wp_enqueue_script http://codex.wordpress.org/Function_Reference/get_template_directory_uri http://codex.wordpress.org/Function_Reference/get_permalink http://codex.wordpress.org/Conditional_Tags http://codex.wordpress.org/Function_Reference/is_home http://codex.wordpress.org/Function_Reference/is_front_page http://codex.wordpress.org/Function_Reference/is_page http://codex.wordpress.org/Function_Reference/the_date http://codex.wordpress.org/Plugin_API/Action_Reference http://codex.wordpress.org/Plugin_API/Filter_Reference http://codex.wordpress.org/Function_Reference/add_filter http://codex.wordpress.org/Function_Reference/add_action http://codex.wordpress.org/Function_Reference/wp_enqueue_script Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  26. 26. Links e referências http://codex.wordpress.org/Function_Reference/get_template_directory_uri http://codex.wordpress.org/Function_Reference/get_permalink http://codex.wordpress.org/Conditional_Tags http://codex.wordpress.org/Function_Reference/is_home http://codex.wordpress.org/Function_Reference/is_front_page http://codex.wordpress.org/Function_Reference/is_page http://codex.wordpress.org/Function_Reference/is_single http://codex.wordpress.org/Function_Reference/is_category http://codex.wordpress.org/Function_Reference/is_admin http://codex.wordpress.org/Function_Reference/wp_is_mobile http://codex.wordpress.org/Function_Reference/register_nav_menu http://codex.wordpress.org/Function_Reference/register_sidebar http://codex.wordpress.org/Function_Reference/register_post_type http://codex.wordpress.org/Function_Reference/register_taxonomy Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  27. 27. Links e referências http://codex.wordpress.org/Settings_API http://codex.wordpress.org/Theme_Customization_API http://codex.wordpress.org/Widgets_API http://codex.wordpress.org/Shortcode_API http://codex.wordpress.org/Child_Themes Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
  28. 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

×