Page 1

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.

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 -

sábado, 17 de agosto de 13

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;

sábado, 17 de agosto de 13


PORQUE O WORDPRESS? SE EXISTEM TANTOS? WORPRESS É: -

sábado, 17 de agosto de 13

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

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

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


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


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

sábado, 17 de agosto de 13


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


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


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


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


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.br http://github.com/sergiovilar

sábado, 17 de agosto de 13


cursowordpress-130817003833-phpapp02  
Advertisement
Read more
Read more
Similar to
Popular now
Just for you