O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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...
Próximos SlideShares
Carregando em…5
×

Como criar um tema para WordPress

2.994 visualizações

Publicada em

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.

Publicada em: Tecnologia
Licença: CC Attribution License
no profile picture user

  • Entre para ver os comentários

Exibir mais

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

×