2. QUEM
Desenvolvedor Php e Javascript.
Criador do Turumim Framework e do
Oxnt.me, desenvolve para a web há
mais de 5 anos.
SÉRGIO VILAR
Front-End Engineer @ Vertex Tecnologia
Graduando em Análise e Desenv. de Sistemas @ Estácio/iDez
sábado, 17 de agosto de 13
3. O CURSO
Temos como objetivo ao final do dia
desenvolvermos um site de uma
empresa de cursos.
sábado, 17 de agosto de 13
4. AGENDA
- Introdução (parte 1)
- O que é um CMS
- Porque Wordpress?
- .com ou .org?
- Baixando e instalando o Wordpress
- Introdução (parte 2)
- Estrutura de pastas
- Criando um novo tema
- Estrutura de dados
- Post Types
- Taxonomies e Terms
sábado, 17 de agosto de 13
5. AGENDA
- Montando a estrutura
- Criando os post types e taxonomies
- Preparando o layout
- Listando dados
- Hierarquia do Wordpress
- Estrutura de um tema
- Criando arquivos necessários
- O Loop
- A Classe WP_Query
- Implementando o site
- header.php, footer.php e sidebar.php
- Criando o menu
- Listando e exibindo os cursos
sábado, 17 de agosto de 13
6. PRÉ-REQUISITOS
- Algoritmos e lógica de programação
- Noções de Php
- Noções de HTML e CSS
- Apache/MySQL e editor de texto
sábado, 17 de agosto de 13
7. O QUE É UM CMS?
CMS = Content Managment System ||
Sistema de gerenciamento de
conteúdo;
sábado, 17 de agosto de 13
8. PORQUE O WORDPRESS?
SE EXISTEM TANTOS?
WORPRESS É:
- Flexível
- Fácil de usar
- Fácil de desenvolver
- Fácil de personalizar
- Possui uma gama enorme de plugins
- Comunidade ativa
sábado, 17 de agosto de 13
9. .COM OU .ORG?
Você tem basicamente duas formas de
usar o Wordpress:
.com = Blog criado nos servidores do
Wordpress, limitado como Blogger,
Posterous, etc.
.org = Wodpress self-hosted, você
baixa e faz o que quiser com ele :)
sábado, 17 de agosto de 13
10. ATIVIDADE 1
Baixe e instale o Wordpress na sua
máquina.
sábado, 17 de agosto de 13
12. ATIVIDADE 2
Crie uma pasta pro seu tema, baixe e
extraia o HTML5 Boilerplate para ela
e crie um arquivo style.css com o
conteúdo abaixo:
/*
Theme Name: Nome do seu tema
Author: Seu nome
Author URI: Seu site
Description: Breve descrição
Version: 1.0
*/
sábado, 17 de agosto de 13
13. ESTRUTURA
DE DADOS
Post Type = Entidade Forte
Taxonomia = Entidade fraca por associação
Ex:
Post type FILME
Taxonomias: - Gênero
- Ano
- Diretor
sábado, 17 de agosto de 13
16. HOOKS
Hooks são “ganchos” que “penduram” uma função
para que seja executada em determinado
momento.
Hooks são divididos em Actions e Filters.
sábado, 17 de agosto de 13
17. HOOKS
/- ACTIONS
Actions são executadas quando algum evento é
disparado, por exemplo, precisamos usar uma
action para registrar um post type ou uma
taxonomy:
add_action(“init”, “create_cursos”);
function cursos(){
// aqui vai o código de registro do post type
}
OBS: No exemplo a cima, a função é chamada após o core do
Wordpress ser iniciado.
sábado, 17 de agosto de 13
18. HOOKS
/- ACTIONS
Também são utilizadas para inserir conteúdo
personalizado em determinados locais, por
exemplo:
add_action(“wp_head”, “insert_description”);
function insert_description(){
echo “<meta name=”description” content=”descrição” />”;
}
OBS: No exemplo a cima, o conteúdo é inserido no local onde
a função wp_head() é chamada. Geralmente no head da página.
sábado, 17 de agosto de 13
19. HOOKS
/- FILTERS
São usados pra filtrar e modificar algum conteúdo
gerado ou inserido pelo Wordpress, por exemplo:
add_filter(“excerpt_lenght”, “new_excerpt_lenght”);
function new_excerpt_lenght($lenght){
return 100;
}
OBS: No exemplo a cima, a função muda o tamanho de
caracteres do resumo padrão do Wordpress.
sábado, 17 de agosto de 13
20. ATIVIDADE 3
- Crie o post type CURSO
- Crie as taxonomies PROFESSOR e AREA
sábado, 17 de agosto de 13
21. ATIVIDADE 4
1 - Baixe o Twitter Bootstrap e escolha uma
template pré-definida em:
http://getbootstrap.com/2.3.2/getting-
started.html#examples
2 - Com a template mais apropriada para um site
de uma empresa de cursos, crie um arquivo
index.php com o conteúdo da página.
sábado, 17 de agosto de 13
23. ATIVIDADE 5
Seguindo a estrutura de dados do nosso site, crie
os arquivos necessários para:
- Listar cursos
- Listar cusos de uma determinada Área
- Exibir os dados de um determinado curso
sábado, 17 de agosto de 13
25. A CLASSE
WP_QUERY
$cursos = new WP_Query(array(
‘posts_per_page’ => 5, // Limite de registros
‘post_type’ => ‘cursos’ // Post type
‘order’ => ‘ASC’,
‘tax_query’ => array( // Term “computacao”
‘taxonomy’ => ‘area’,
‘field’ => ‘slug’,
‘terms’ => ‘computacao’
)
));
Referência:
http://codex.wordpress.org/Class_Reference/WP_Query
sábado, 17 de agosto de 13
26. A CLASSE
WP_QUERY
$cursos = new WP_Query(array(
‘posts_per_page’ => 5, // Limite de registros
));
while($cursos->have_posts()): $cursos->the_post();
echo “<h2>”;
the_title();
echo “</h2>”;
the_content();
endwhile; wp_reset_postdata();
sábado, 17 de agosto de 13
27. O OBJETO
WPDB
global $wpdb;
$results = $wpdb->get_results(“SELECT * FROM wp_posts”);
foreach($resulsts as $result):
echo $result->post_title.”<br />”;
endforeach;
$count = $wpdb->get_var(“SELECT COUNT(*) FROM wp_posts
WHERE post_status=‘publish’”);
echo “O site tem “.$count.” posts”;
$wpdb->query(“UPDATE wp_posts SET post_title=‘Hehehe’”);
// A query acima atualizará todos os posts do banco =x
sábado, 17 de agosto de 13
28. ATIVIDADE 6
Abra seu arquivo index.php e identifique o que
é comum no topo, no rodapé e na lateral da
página a todas demais.
Separe nos arquivos header.php, footer.php e
sidebar.php
Nos arquivos de template, use as funções:
get_header();
get_footer();
get_sidebar();
sábado, 17 de agosto de 13
29. ATIVIDADE 7
1 - Nas configurações do seu Wordpress, vá em
Geral > Links Permanentes e mude para “Nome
do post”
2 - Aponte os links do seu menu para as
páginas corretas.
Ex: http://localhost/cursos
sábado, 17 de agosto de 13
30. ATIVIDADE 8
1 - Implemente o arquivo que irá listar os
cursos
2 - Implemente o arquivo que irá listar os
detalhes de um único curso
PS. Consulte a documentação da função
get_the_term_list para listar o professor e a área
do curso
sábado, 17 de agosto de 13
31. É ISSO AÍ,
ATÉ LOGO.
http://sergiovilar.com.br
http://github.com/sergiovilar
sábado, 17 de agosto de 13