Gerenciando sites em WordPress de forma eficiente: do deploy à manutenção
Criando sites com Wordpress
-
Upload
sergio-vilar -
Category
Education
-
view
530 -
download
2
description
Transcript of Criando sites com Wordpress
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