CRIANDO SITES COMWORDPRESSCurso 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 VILARFront-End Engineer @ Vertex TecnologiaGraduando em Análise e Desenv. de Sistemas @ Estácio/iDez

sábado, 17 de agosto de 13

O CURSO

Temos como objetivo ao final do dia desenvolvermos um site de uma empresa de cursos.

sábado, 17 de agosto de 13

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

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

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

O QUE É UM CMS?

CMS = Content Managment System ||Sistema de gerenciamento de conteúdo;

sábado, 17 de agosto de 13

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

.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

ATIVIDADE 1

Baixe e instale o Wordpress na sua máquina.

sábado, 17 de agosto de 13

ESTRUTURA DE PASTAS

/- wp-admin/ - wp-includes/ - wp-content

/- uploads/- plugins/- themes

sábado, 17 de agosto de 13

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 temaAuthor: Seu nomeAuthor URI: Seu siteDescription: Breve descriçãoVersion: 1.0*/

sábado, 17 de agosto de 13

ESTRUTURA DE DADOS

Post Type = Entidade ForteTaxonomia = Entidade fraca por associação

Ex:Post type FILME

Taxonomias: - Gênero- Ano- Diretor

sábado, 17 de agosto de 13

POST TYPES

register_post_type( 'curso',

array(

'labels' => array('name' => 'Cursos'),

'public' => true,

'supports' => array( 'title', 'editor'),

'has_archive' => true

)

);

sábado, 17 de agosto de 13

TAXONOMIESE TERMS

register_taxonomy(‘area’, ‘curso’, array(

'labels' => array('name' => 'Area')

));

OBS: Terms são registro do tipo taxonomy

sábado, 17 de agosto de 13

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

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

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

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

ATIVIDADE 3

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

sábado, 17 de agosto de 13

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

HIERARQUIADO WORDPRESS

index.phppage.phparchive.phparchive-{post-type}.phppage-{slug}.phptaxtonomy-{taxonomy}.phpsingle.phpsingle-{post-type}.php

sábado, 17 de agosto de 13

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

O LOOP

while(have_posts()): the_post();

echo “<h2>”;

the_title();

echo “</h2>”;

the_content();

endwhile;

sábado, 17 de agosto de 13

A CLASSEWP_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

A CLASSEWP_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

O OBJETOWPDB

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

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

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

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

É ISSO AÍ,ATÉ LOGO.

http://sergiovilar.com.brhttp://github.com/sergiovilar

sábado, 17 de agosto de 13