cursowordpress-130817003833-phpapp02 by Mário Davi - issuu
CRIANDO SITES COM WORDPRESS Curso de introdução
sábado, 17 de agosto de 13
QUEM Sร‰RGIO VILAR Front-End Engineer @ Vertex Tecnologia Graduando em Anรกlise e Desenv. de Sistemas @ Estรกcio/iDez
Desenvolvedor Php e Javascript. Criador do Turumim Framework e do Oxnt.me, desenvolve para a web hรก mais de 5 anos.
sรกbado, 17 de agosto de 13
O CURSO Temos como objetivo ao final 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
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 */ sábado, 17 de agosto de 13
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 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.
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é-definida em: http://getbootstrap.com/2.3.2/gettingstarted.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 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
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