Oficina realizada no WordCamp Porto Alegre 2013, introdução sobre criação de temas os princípios básicos para criar o seu primeiro tema do Zero.

1. CRIANDO SEU PRIMEIRO
TEMA DO ZERO
Fellyph Cintra
domingo, 14 de julho de 13

2. Fellyph Cintra (@fellyph)
Gerente de ProjetosTech Center BlackBerry
http://www.fellyph.com.br/blog/
domingo, 14 de julho de 13

3. domingo, 14 de julho de 13

4. domingo, 14 de julho de 13

5. WORDPRESS
Wordpress é um sistema de gestão de conteúdo, também
conhecido como CMS( do inglês Content Management
Systems), escrito em PHP.
domingo, 14 de julho de 13

6. IDENTIFICANDO ESTRUTURAS
domingo, 14 de julho de 13

7. SE IDENTIFICARMOS UM PADRÃO
DE INFORMAÇÃO
PODEMOS UTILIZAR O WORDPRESS
domingo, 14 de julho de 13

8. TRABALHANDO LOCALMENTE
Para trabalhar com o wordpress temos que acessar o endereço:
http://www.wordpress.org
Lá temos a última versão do WordPress disponível para download.
domingo, 14 de julho de 13

9. TRÊS PASSOS MÁGICOS
1 - Montar o ambiente (local ou online)
2 - Criar banco
3 - Configurar o wp-config(arquivo de configuração do
WordPress)
domingo, 14 de julho de 13

10. PREPARANDO AMBIENTE LOCAL
Para trabalharmos localmente com o WordPress precisamos
configurar o Apache+mySQL + PHP para isso vamos
trabalhar com XAMPP, MAMP,WAMP ou LAMP. É uma
instalação pre-configurada desses recursos.
* COM O AMBIENTE PRONTO JOGAMOS A PASTA DO WORDPRESS NA PASTA
HTDOCS OU WWW DEPENDENDO DO AMBIENTE
domingo, 14 de julho de 13

11. CRIANDO O BANCO DE
DADOS
Com o nosso ambiente local instalado, agora precisamos criar
o nosso banco. Para acessar o administrador de banco de
dados no servidor local através do seguinte endereço :
http://localhost/phpmyadmin
domingo, 14 de julho de 13

12. PHPMYADMIN
domingo, 14 de julho de 13

13. EDITANDO O ARQUIVO DE
CONFIGURAÇÃO
Com o ambiente pronto e o banco de dados criado, agora
precisamos editar o nosso arquivo wp-config.php(wp-config-
sample.php)
domingo, 14 de julho de 13

14. WP-CONFIG.PHP
domingo, 14 de julho de 13

15. ESTRUTURA DO WORDPRESS
domingo, 14 de julho de 13

16. ORGANIZAÇÃO DE PASTAS
Nos arquivos do wordpress possuem três pastas básicas:
wp-admin: Tem todo o meu sistema de adiministração
wp-include: Tem todas as funcionalidades do wordpress,
funções e mêtodos especiais.
wp-content:Tem tudo relacionado a conteúdo, plugins,
uploads, e temas.
domingo, 14 de julho de 13

17. CRIANDO SEU PRIMEIRO
TEMA
O wordpress passa a reconhecer um tema com apenas
dois arquivos básicos. Index.php e style.css
domingo, 14 de julho de 13

18. DEFININDO OS DETALHES DO SEUTEMA
No arquivo style.css ficam as definições do seu tema.
Elas são configuradas em um comentário no começo do
arquivo.
Exemplo:
Theme Name: Nome do meu tema
Theme URI: http://www.urldomeutema.com
Author: Nome do autor.
Author URI: http://urldoautor.com
Description: Descrição do tema
Version: 1.0
domingo, 14 de julho de 13

19. OUTROS ARQUIVOS IMPORTANTES
•index.php
•single.php
•category.php
•search.php
•404.php
•page.php
•tag.php
•archive.php
•header.php
•footer.php
domingo, 14 de julho de 13

20. ARQUITETURA BÁSICA
HEADER.PHP
INDEX.PHP
PAGE.PHP
SINGLE.PHP
CATEGORY.PHP
SEARCH.PHP
SIDEBAR.PHP
FOOTER.PHP
domingo, 14 de julho de 13

21. INCLUDETAGS
Como o nome sugere, são comandos de inclusão de blocos de códigos para
montagem e modularização do nosso projeto, muito útil para realizar o reúso do
nosso código, são eles:
get_header() - incorpora o arquivo header.php(referente ao cabeçalho)
get_footer() - incorpora o footer.php arquivo responsável pelo rodapé do meu
tema
get_sidebar() - incorpora o sidebar.php (barra lateral reponsável por uma série de
recursos do wordpress)
domingo, 14 de julho de 13

22. LOOP
<?php while ( have_posts () ): the_post(); ?>
Conteúdo a ser executado a cada iteração...
<?php endwhile; ?>
Quando o wordpress carrega uma url ele verifica qual tipo de informação o usuário
deseja, assim consulta a informação no banco e deixa disponível para exibição, não temos
idéia da quantidade de posts que virão, assim utilizamos a função have_posts() verifica se
existem post a serem exibidos na fila.
A função the_post() faz o acesso ao post e atualiza o ponteiro de acesso da informação
a cada chamada.
domingo, 14 de julho de 13

23. WP_HEAD E WP_FOOTER
Logo quando criar o header.php é extremamente importante adicionar
antes de fechar a tag <head> adicionar a função :
wp_head();
Ela é responsável por gerenciar todos os includes do seu tema e plugins.
Com a mesma funcionalidade devemos adicionar ao footer.php antes de
fechar a tag <body> a função:
wp_footer();
domingo, 14 de julho de 13

24. RECOLHENDO INFORMAÇÕES
GERAIS DO WP
O Wordpress contém uma função bloginfo() que fornece informações do
seu site. Passamos como parâmetro qual informação queremos resgatar.
<?php bloginfo('qual o parâmetro'); ?>
exemplo :
<h1><?php bloginfo('name'); ?></h1>
A função acima resgata o nome do site
domingo, 14 de julho de 13

25. EXEMPLOS PARA O
BLOGINFO()
name: nome do blog
description: descrição do blog
admin_email: email do administrador
stylesheet_directory: url da pasta do css
stylesheet_url: url do css
template_directory: diretorio do tema
template_url: url do tema
domingo, 14 de julho de 13

26. POST_CLASS()
Essa função gera automaticamente uma série de classe
relacionadas ao tipo de conteúdo que está sendo carregado:
[loop]
<div <?php post_class(); ?> >
" <h2><?php the_title() ?></h2>
" <?php the_content() ?>
</div>
[fim do loop]
Também podemos atribuir um id único:
<div id="post-<?php the_ID(); ?>" <?php
post_class(); ?>>
domingo, 14 de julho de 13

27. QUERY_POSTS()
Query_posts() é uma função de filtro sobre o dados
do loop do WordPress, independente da url o que
será exibido é controlado pelo query_posts().
Exemplo:
<?php
// The Query
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
...
domingo, 14 de julho de 13

28. EXEMPLOS DE QUERY
query_posts('cat=3'); - Todos os posts da categoria 3
query_posts( 'cat=-3' ); - Todos os posts menos da categoria 3
query_posts( 'posts_per_page=5' ); - Apenas os 5 últimos posts
query_posts('cat=2,6,17,38'); - grupo de
categorias
query_posts('tag=cooking'); - por tag
domingo, 14 de julho de 13

29. MAIS EXEMPLOS
category_name=slug-da-categoria : cria um filtro através do slug
da categoria.
p=5 : carrega um post específico
posts_per_page = -1 ou showposts = -1 : lista todos os posts de
uma categoria
year=2012 : filtra os posts de um ano específico
monthnum : filtra os posts de um mês(numeral) específico
domingo, 14 de julho de 13

30. PERSONALIZANDO A ORDEM DOS POSTS
No query_posts podemos personalizar a ordem de listagem
definindo dois parâmetros “order” e o “orderby”. O order :ASC
ou DESC.
orderby : define qual a propriedade que ele irá fazer a
ordenação(padrão é por data de publicação):
ID' - ordena por ID.
'author' - Ordena por au.
'title' - Order by title.
'modified' - Order by last modified date.
'parent' - Order by post/page parent id.
'rand' - Random order.
'comment_count' - Ordena por comentário ( disponível na versão 2.9 ou
superior).
Lista completa : http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
domingo, 14 de julho de 13

31. PAGINAÇÃO
Por padrão o worpdress exibe 10 posts por loop.
Para criar uma paginação utilizamos duas funções :
next_posts_link(’texto do link'): cria um link para próxima
página
previous_posts_link(’texto do link’): criar um link para a página
anterior
A estrutura de paginação o wordpress gerência automaticamente criando links só
quando necessário
domingo, 14 de julho de 13

32. QUERY_POSTS X PAGINAÇÃO
Esta função faz acesso as informações da query do loop.
Exemplo:
<?php $page = (get_query_var('paged')) ?
get_query_var('page') : 1; ?> <h1>Você
está na página : <?php echo $page; ?></
h1>
domingo, 14 de julho de 13

33. QUERY_POSTS() X PAGINAÇÃO
$paged = (get_query_var("paged")) ?
get_query_var("paged") : "1" ;
query_posts(array( 'posts_per_page' => 5, 'paged' =>
$paged ));
domingo, 14 de julho de 13

34. BOOTSTRAP
• Scaffolding
• grid system
• fluid grid system
• resposive design
• Componentes
• Dropdowns
• Navs
• Breadcrumbs..
• JavaScript Components
• Transitions
• Modal
• Dropdown
• Tab
• Carousel
• Collapse...
domingo, 14 de julho de 13

35. OUTRA OPÇÃO:YUI
http://yuilibrary.com/
domingo, 14 de julho de 13

36. REFERÊNCIAS
• SublimeTXT : http://www.sublimetext.com/
• Plugins: http://wbond.net/sublime_packages/package_control
• Emmet: https://github.com/sergeche/emmet-sublime#how-to-install
• Codex!: http://codex.wordpress.org/
• Grupo no face: https://www.facebook.com/groups/wordpress.brasil/
• BLOG: http://www.fellyph.com.br/blog/
• GIT: http://www.github.com/fellyph/
domingo, 14 de julho de 13

37. OBRIGADO PORTO ALEGRE
domingo, 14 de julho de 13