Embed Size (px)
DESCRIPTION
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.
Citation preview
Como criar um tema para WordPress
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
@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
@RafaelFunchalPublicitá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
Este é o arquivo mais importante! É ele que registra o tema no WP!
/*Theme Name: Nome do seu temaTheme URI: Site ou documentação do tema.Description: Descrição do temaAuthor: Nome do autorAuthor URI: Site do autorVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.html*/
style.css
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
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(); ?>>
header.php
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
index.php
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(); ?>
http://codex.wordpress.org/The_Loop
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
Exemplo para o rodapé:
<?php wp_footer(); ?>
</body></html>
footer.php
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
Custom Post Type
archive-{post_type}.php
archive.php
index.php
Author
author-{nicename}.php
author-{id}.php
author.php
archive.php
index.php
Anexos
MIME_type.php
Hierarquia dos arquivosHome
home.php
index.php
Front Page
front-page.php
index.php
Single
single-{post_type}.php
single.php
index.php
Page
page-{slug}.php
page-{id}.php
page.php
index.php
Categoria
category-{slug}.php
category-{id}.php
category.php
archive.php
index.php
Tag
tag-{slug}.php
tag-{id}.php
tag.php
archive.php
index.php
Taxonomies
taxonomy-{taxonomy}.php
taxonomy.php
archive.php
index.php
Date
date.php
archive.php
index.php
Resultado da Pesquisa
search.php
index.php
404
404.php
index.php
http://codex.wordpress.org/Template_Hierarchy
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
É 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()) .
Funções personalizadas
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
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 );
Exemplo de gancho/actionhttp://codex.wordpress.org/Plugin_API/Action_Reference
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
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' );
Exemplo de filtro/filterhttp://codex.wordpress.org/Plugin_API/Filter_Reference
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
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
Tags/funções condicionaishttp://codex.wordpress.org/Conditional_Tags
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
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.
http://codex.wordpress.org/WordPress_APIs
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
É 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 wp-content/themes e indicar quem é o PAI pelo style.css:
/*Theme Name: Nome do seu filho...Template: nome-da-pasta-do-tema-pai...
Temas filhoshttp://codex.wordpress.org/Child_Themes
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
Starter Themes
_s (Underscores)RootsGantryBonesQuark
WhiteboardHybrid CoreBootstrapWPThesis
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
Odin Frameworkwpod.in
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchalhttp://wpod.in/pt-br/docs/
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
Perguntas?
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
http://codex.wordpress.org/Theme_Developmenthttp://codex.wordpress.org/Template_Hierarchyhttp://codex.wordpress.org/Function_Reference/get_headerhttp://codex.wordpress.org/Function_Reference/get_footerhttp://codex.wordpress.org/Function_Reference/wp_headhttp://codex.wordpress.org/Function_Reference/wp_footerhttp://codex.wordpress.org/Function_Reference/language_attributeshttp://codex.wordpress.org/Function_Reference/bloginfohttp://codex.wordpress.org/Function_Reference/wp_titlehttp://codex.wordpress.org/Function_Reference/get_stylesheet_urihttp://codex.wordpress.org/Function_Reference/body_classhttp://codex.wordpress.org/The_Loophttp://codex.wordpress.org/Function_Reference/have_postshttp://codex.wordpress.org/Function_Reference/the_post
Links e referências
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
http://codex.wordpress.org/Function_Reference/the_IDhttp://codex.wordpress.org/Function_Reference/post_classhttp://codex.wordpress.org/Function_Reference/the_permalinkhttp://codex.wordpress.org/Function_Reference/the_titlehttp://codex.wordpress.org/Function_Reference/the_contenthttp://codex.wordpress.org/Function_Reference/the_excerpthttp://codex.wordpress.org/Function_Reference/the_categoryhttp://codex.wordpress.org/Function_Reference/the_tagshttp://codex.wordpress.org/Function_Reference/the_authorhttp://codex.wordpress.org/Function_Reference/the_timehttp://codex.wordpress.org/Function_Reference/the_datehttp://codex.wordpress.org/Plugin_API/Action_Referencehttp://codex.wordpress.org/Plugin_API/Filter_Referencehttp://codex.wordpress.org/Function_Reference/add_filter
Links e referências
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
http://codex.wordpress.org/Function_Reference/add_actionhttp://codex.wordpress.org/Function_Reference/wp_enqueue_scripthttp://codex.wordpress.org/Function_Reference/get_template_directory_urihttp://codex.wordpress.org/Function_Reference/get_permalinkhttp://codex.wordpress.org/Conditional_Tagshttp://codex.wordpress.org/Function_Reference/is_homehttp://codex.wordpress.org/Function_Reference/is_front_pagehttp://codex.wordpress.org/Function_Reference/is_pagehttp://codex.wordpress.org/Function_Reference/the_datehttp://codex.wordpress.org/Plugin_API/Action_Referencehttp://codex.wordpress.org/Plugin_API/Filter_Referencehttp://codex.wordpress.org/Function_Reference/add_filterhttp://codex.wordpress.org/Function_Reference/add_actionhttp://codex.wordpress.org/Function_Reference/wp_enqueue_script
Links e referências
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
http://codex.wordpress.org/Function_Reference/get_template_directory_urihttp://codex.wordpress.org/Function_Reference/get_permalinkhttp://codex.wordpress.org/Conditional_Tagshttp://codex.wordpress.org/Function_Reference/is_homehttp://codex.wordpress.org/Function_Reference/is_front_pagehttp://codex.wordpress.org/Function_Reference/is_pagehttp://codex.wordpress.org/Function_Reference/is_singlehttp://codex.wordpress.org/Function_Reference/is_categoryhttp://codex.wordpress.org/Function_Reference/is_adminhttp://codex.wordpress.org/Function_Reference/wp_is_mobilehttp://codex.wordpress.org/Function_Reference/register_nav_menuhttp://codex.wordpress.org/Function_Reference/register_sidebarhttp://codex.wordpress.org/Function_Reference/register_post_typehttp://codex.wordpress.org/Function_Reference/register_taxonomy
Links e referências
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
http://codex.wordpress.org/Settings_APIhttp://codex.wordpress.org/Theme_Customization_APIhttp://codex.wordpress.org/Widgets_APIhttp://codex.wordpress.org/Shortcode_APIhttp://codex.wordpress.org/Child_Themes
Links e referências
Como criar um tema para WordPress @ClaudioSMweb | @RafaelFunchal
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
Licença
![[E-book] Como criar e manter um site ou blog com o Wordpress](https://img.document.onl/doc/110x75/5874fae31a28ab29208b4975/e-book-como-criar-e-manter-um-site-ou-blog-com-o-wordpress.jpg)
![[WordPress]Como Instalar o Wordpress e Enviar Arquivos via Filezilla](https://img.document.onl/doc/110x75/557201604979599169a16d36/wordpresscomo-instalar-o-wordpress-e-enviar-arquivos-via-filezilla.jpg)
