Criando sites com Wordpress

CRIANDO
SITES COM
WORDPRESS
Curso de introdução
sábado, 17 de agosto de 13

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

O CURSO
Temos como objetivo ao ﬁnal do dia
desenvolvermos um site de uma
empresa de cursos.

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

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

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

O QUE É UM CMS?
CMS = Content Managment System ||
Sistema de gerenciamento de
conteúdo;

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

.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 :)

ATIVIDADE 1
Baixe e instale o Wordpress na sua
máquina.

ESTRUTURA
DE PASTAS
/- wp-admin
/ - wp-includes
/ - wp-content
/- uploads
/- plugins
/- themes

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
*/

ESTRUTURA
DE DADOS
Post Type = Entidade Forte
Taxonomia = Entidade fraca por associação
Ex:
Post type FILME
Taxonomias: - Gênero
- Ano
- Diretor

POST TYPES
register_post_type( 'curso',
array(
'labels' => array('name' => 'Cursos'),
'public' => true,
'supports' => array( 'title', 'editor'),
'has_archive' => true
)
);

TAXONOMIES
E TERMS
register_taxonomy(‘area’, ‘curso’, array(
'labels' => array('name' => 'Area')
));
OBS: Terms são registro do tipo taxonomy

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.

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.

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.

HOOKS
/- FILTERS
São usados pra ﬁltrar e modiﬁcar 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.

ATIVIDADE 3
- Crie o post type CURSO
- Crie as taxonomies PROFESSOR e AREA

ATIVIDADE 4
1 - Baixe o Twitter Bootstrap e escolha uma
template pré-deﬁnida 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.

HIERARQUIA
DO WORDPRESS
index.php
page.php
archive.php
archive-{post-type}.php
page-{slug}.php
taxtonomy-{taxonomy}.php
single.php
single-{post-type}.php

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

O LOOP
while(have_posts()): the_post();
echo “<h2>”;
the_title();
echo “</h2>”;
the_content();
endwhile;

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

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();

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

ATIVIDADE 6
Abra seu arquivo index.php e identiﬁque 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();

ATIVIDADE 7
1 - Nas conﬁguraçõ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

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

É ISSO AÍ,
ATÉ LOGO.
http://sergiovilar.com.br
http://github.com/sergiovilar

Criando sites com Wordpress

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Criando sites com Wordpress (20)

Último (20)

Criando sites com Wordpress