Criando sites com Wordpress

1,125 views
1,097 views

Published on

Published in: Education
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
1,125
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Criando sites com Wordpress

  1. 1. CRIANDO SITES COM WORDPRESS Curso de introdução sábado, 17 de agosto de 13
  2. 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. 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. 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. 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. 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. 7. O QUE É UM CMS? CMS = Content Managment System || Sistema de gerenciamento de conteúdo; sábado, 17 de agosto de 13
  8. 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. 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. 10. ATIVIDADE 1 Baixe e instale o Wordpress na sua máquina. sábado, 17 de agosto de 13
  11. 11. ESTRUTURA DE PASTAS /- wp-admin / - wp-includes / - wp-content /- uploads /- plugins /- themes sábado, 17 de agosto de 13
  12. 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. 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
  14. 14. 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
  15. 15. TAXONOMIES E 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
  16. 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. 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. 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. 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. 20. ATIVIDADE 3 - Crie o post type CURSO - Crie as taxonomies PROFESSOR e AREA sábado, 17 de agosto de 13
  21. 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
  22. 22. 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 sábado, 17 de agosto de 13
  23. 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
  24. 24. O LOOP while(have_posts()): the_post(); echo “<h2>”; the_title(); echo “</h2>”; the_content(); endwhile; sábado, 17 de agosto de 13
  25. 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. 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. 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. 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. 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. 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. 31. É ISSO AÍ, ATÉ LOGO. http://sergiovilar.com.br http://github.com/sergiovilar sábado, 17 de agosto de 13

×