Como criar um tema para WordPress
Upcoming SlideShare
Loading in...5
×
 

Como criar um tema para WordPress

on

  • 870 views

Palestra realizada na Campus Party Brasil 2014. #CPBr7 ...

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.

Statistics

Views

Total Views
870
Views on SlideShare
863
Embed Views
7

Actions

Likes
4
Downloads
10
Comments
0

2 Embeds 7

http://www.slideee.com 4
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Como criar um tema para WordPress Como criar um tema para WordPress Presentation Transcript

    • 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 oficial do WordPress; Líder do projeto Odin Framework; Trabalha atualmente na Infranology. Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
    • @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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • footer.php Exemplo para o rodapé: <?php wp_footer(); ?> </body> </html> Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Starter Themes _s (Underscores) Roots Gantry Bones Quark Como criar um tema para WordPress Whiteboard Hybrid Core BootstrapWP Thesis @ClaudioSMweb | @RafaelFunchal
    • 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://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
    • 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
    • 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
    • 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
    • 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
    • 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