oficina criando seu primeiro tema do zero
DESCRIPTION
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.TRANSCRIPT
![Page 1: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/1.jpg)
CRIANDO SEU PRIMEIRO TEMA DO ZERO
Fellyph Cintra
domingo, 14 de julho de 13
![Page 2: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/2.jpg)
Fellyph Cintra (@fellyph)Gerente de Projetos Tech Center BlackBerry
http://www.fellyph.com.br/blog/
domingo, 14 de julho de 13
![Page 3: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/3.jpg)
domingo, 14 de julho de 13
![Page 4: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/4.jpg)
domingo, 14 de julho de 13
![Page 5: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/5.jpg)
WORDPRESSWordpress é 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
![Page 6: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/6.jpg)
IDENTIFICANDO ESTRUTURASdomingo, 14 de julho de 13
![Page 7: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/7.jpg)
SE IDENTIFICARMOS UM PADRÃO DE INFORMAÇÃO
PODEMOS UTILIZAR O WORDPRESS
domingo, 14 de julho de 13
![Page 8: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/8.jpg)
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
![Page 9: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/9.jpg)
TRÊS PASSOS MÁGICOS
1 - Montar o ambiente (local ou online)
2 - Criar banco3 - Configurar o wp-config(arquivo de configuração do
WordPress)
domingo, 14 de julho de 13
![Page 10: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/10.jpg)
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
![Page 11: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/11.jpg)
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
![Page 12: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/12.jpg)
PHPMYADMIN
domingo, 14 de julho de 13
![Page 13: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/13.jpg)
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
![Page 14: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/14.jpg)
WP-CONFIG.PHP
domingo, 14 de julho de 13
![Page 15: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/15.jpg)
ESTRUTURA DO WORDPRESS
domingo, 14 de julho de 13
![Page 16: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/16.jpg)
ORGANIZAÇÃO DE PASTASNos 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
![Page 17: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/17.jpg)
CRIANDO SEU PRIMEIRO TEMA
O wordpress passa a reconhecer um tema com apenasdois arquivos básicos. Index.php e style.css
domingo, 14 de julho de 13
![Page 18: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/18.jpg)
DEFININDO OS DETALHES DO SEU TEMA
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 temaTheme URI: http://www.urldomeutema.comAuthor: Nome do autor.Author URI: http://urldoautor.comDescription: Descrição do temaVersion: 1.0
domingo, 14 de julho de 13
![Page 19: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/19.jpg)
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
![Page 20: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/20.jpg)
ARQUITETURA BÁSICAHEADER.PHP
INDEX.PHP PAGE.PHP SINGLE.PHP CATEGORY.PHP SEARCH.PHP
SIDEBAR.PHP
FOOTER.PHP
domingo, 14 de julho de 13
![Page 21: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/21.jpg)
INCLUDE TAGS
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
temaget_sidebar() - incorpora o sidebar.php (barra lateral reponsável por uma série de
recursos do wordpress)
domingo, 14 de julho de 13
![Page 22: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/22.jpg)
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
![Page 23: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/23.jpg)
WP_HEAD E WP_FOOTERLogo 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
![Page 24: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/24.jpg)
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
![Page 25: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/25.jpg)
EXEMPLOS PARA O BLOGINFO()
name: nome do blogdescription: descrição do blogadmin_email: email do administradorstylesheet_directory: url da pasta do cssstylesheet_url: url do csstemplate_directory: diretorio do tematemplate_url: url do tema
domingo, 14 de julho de 13
![Page 26: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/26.jpg)
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
![Page 27: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/27.jpg)
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 Queryquery_posts( $args );
// The Loopwhile ( have_posts() ) : the_post();...
domingo, 14 de julho de 13
![Page 28: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/28.jpg)
EXEMPLOS DE QUERYquery_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 decategorias
query_posts('tag=cooking'); - por tag
domingo, 14 de julho de 13
![Page 29: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/29.jpg)
MAIS EXEMPLOScategory_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
![Page 30: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/30.jpg)
PERSONALIZANDO A ORDEM DOS POSTSNo 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
![Page 31: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/31.jpg)
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
![Page 32: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/32.jpg)
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
![Page 33: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/33.jpg)
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
![Page 34: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/34.jpg)
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
![Page 35: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/35.jpg)
OUTRA OPÇÃO: YUI
http://yuilibrary.com/
domingo, 14 de julho de 13
![Page 36: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/36.jpg)
REFERÊNCIAS
• Sublime TXT : 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
![Page 37: Oficina Criando seu primeiro tema do zero](https://reader033.vdocuments.site/reader033/viewer/2022051817/5483e5c3b4af9faa0d8b4a02/html5/thumbnails/37.jpg)
OBRIGADO PORTO ALEGRE
domingo, 14 de julho de 13