Introdução ao WordPress<br />Simpósio Acreano de Sistemas de Informação 2011<br />(Kennedy Lucas)<br />
Agenda (manhã)<br />O que é um CMS<br />O que é WordPress<br />Porque escolher WordPress?<br />Cases<br />Instalando o Wor...
Agenda (tarde)<br />Construindo nosso próprio tema<br />Padrões de design<br />HTML<br />CSS<br />Convertendo para um tema...
O que é CMS?<br />
O que é CMS?<br />Content Management Systems - CMS, um sistema que integra ferramentas necessárias para criar, gerir (inse...
O que é WordPress?<br />
O que é WordPress?<br />Em poucas palavras: Sistema de blog de código aberto.<br />Em belas palavras: O WordPress é uma pl...
Tipos de sites suportados<br />Sites normais com conteúdo relativamente estático: páginas, subpáginas, etc.<br />Blogs: or...
O que é o Wordpress ?<br />Uma plataforma de publicação.<br />
Porque escolher WordPress?<br />
Porque o WordPress...<br />Esta há um longo tempo em aperfeiçoamento.<br />Está em desenvolvimento contínuo .<br />Possui ...
Cases<br />Ministério da Cultura<br />Tráfico de Pessoas<br />
Como instalar o Wordpress<br />
Requisitos Básicos<br />PHP 4.3+<br />MySQL 4.1.2+<br />Mais detalhes http://www.wordpres.org/about/requirements/<br />
Download<br />http://www.wordpress.org/download/<br />
Instalação Manual<br />O arquivo wp-config.php<br />
Dashboard (onde tudo acontece)<br />Configurações gerais<br />
O Post<br />Unidade de conteúdo em um blog<br />Equivale a um artigo em um jornal/revista<br />Possui título, conteúdo e a...
Criando um post<br />Titulo, conteúdo, categoria e tags<br />Lipsum.com, o amigo nas horas dificeis.<br />Criar um post co...
Comentários<br />
Comentários<br />O principal meio de contato do leitor<br />Comentando<br />Moderando comentários<br />
Páginas<br />
Páginas<br />Criando uma página sobre<br />Criando uma página de contato<br />
Plugins<br />
Plugins<br />Pequenos pacotes de códigos que incrementam uma funcionalidade.<br />Procurar, baixar e instalar.<br />Pelo w...
Widgets<br />
Widgets<br />Uma pequena caixa de conteúdo, dinamica ou não, exibida em uma parte do site preparada para recebê-los.<br />...
Temas<br />
Temas<br />Uma das maiores vantagens ao usar um CMS é poder trocar o visual do seu site sem precisar ser especialista em H...
Bom almoço!<br />
Desevolvendo nosso próprio tema<br />
Padrões de design<br />Qualquer site pode ser transformado em tema para wordpress, mas há alguns padrões, tanto de design,...
Padrões de HTML<br />Usar marcação semânticaPreferir <div class=“conteudo-principal”> ao invés de <div class=“coluna-do-me...
CSS<br />Metadados de tema:/*<br />Theme Name: Culinária<br />Theme URL: http://wordpress.org/<br />Description: Tema para...
CSS<br />Estrutura normal de CSS, a critério do designer/desenvolvedor<br />Classes do wordpress:<br />a.more-link<br />.a...
Convertendo para WordPress<br />A pasta do tema e seus arquivos básicos: index.php, style.css e screenshot.png<br />O proc...
A tag <head> e o “header”<br />bloginfo('name') e bloginfo('description')<br />bloginfo('stylesheet_url')<br />body_class(...
“sidebar”<br />Entre <ul> e </ul><br />wp_list_categories('title_li=') e wp_get_archives()<br />
Widgets no “sidebar”<br />3 Simples passos para deixar o “sidebar” pronto para receber widgets:<br />Tornar o “sidebar” um...
“footer”<br />wp_footer();<br />O Footer também pode receber widgets, como no “sidebar”. O procedimento é o mesmo.<br />
O Loop<br />
O Loop<br />É a parte mais importante em um tema.<br />Exibe os posts de forma cronológica, escolhendo apenas aqueles que ...
Dentro do Loop<br />Exibe as informações de cada post.<br />Titulo:the_permalink() the_title()<br />Atributos:the_author()...
bloginfo<br />A tag bloginfo(), assim como o nome sugere, exibe várias informações do blog.<br />Exemplos:Nome, descrição,...
Templates<br />Divindo o tema em parte (index.php, header.php, sidebar.php, footer.php)<br />archives.php – mudar o conteú...
Visão geral de uso em site não-blog<br />Páginas estáticas<br />Múltiplos loops<br />Múltiplas áreas de widget<br />
Onde obter ajuda e recursos?<br />Documentação: http://codex.wordpress.org/<br />Fórum de suporte: http://br.forums.wordpr...
Duvidas/Perguntas?<br />
Próximos SlideShares
Carregando em…5
×

Introducao ao WordPress

1.548 visualizações

Publicada em

Instrodução ao Wordpress. Mini curso ministrado no SASI 2011.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.548
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
80
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introducao ao WordPress

  1. 1. Introdução ao WordPress<br />Simpósio Acreano de Sistemas de Informação 2011<br />(Kennedy Lucas)<br />
  2. 2. Agenda (manhã)<br />O que é um CMS<br />O que é WordPress<br />Porque escolher WordPress?<br />Cases<br />Instalando o WordPress<br />Configurações gerais<br />O Post<br />Opções avançadas de post<br />Páginas<br />Comentários<br />Plugins<br />Widgets<br />Temas<br />
  3. 3. Agenda (tarde)<br />Construindo nosso próprio tema<br />Padrões de design<br />HTML<br />CSS<br />Convertendo para um tema<br />Arquivos básicos de um tema<br />Tags básicas<br />O loop<br />bloginfo<br />Templates<br />Visão geral de tema para site não-blog<br />
  4. 4. O que é CMS?<br />
  5. 5. O que é CMS?<br />Content Management Systems - CMS, um sistema que integra ferramentas necessárias para criar, gerir (inserir e editar) conteúdo.<br />(Wikipedia) <br />
  6. 6. O que é WordPress?<br />
  7. 7. O que é WordPress?<br />Em poucas palavras: Sistema de blog de código aberto.<br />Em belas palavras: O WordPress é uma plataforma semântica de vanguarda para publicação pessoal, com foco na estética, nos Padrões Web e na usabilidade.(br.wordpress.org)<br />
  8. 8. Tipos de sites suportados<br />Sites normais com conteúdo relativamente estático: páginas, subpáginas, etc.<br />Blogs: organizado cronologicamente, atualizado frequentemente, categorizado, "taggeado" e arquivado.<br />
  9. 9. O que é o Wordpress ?<br />Uma plataforma de publicação.<br />
  10. 10. Porque escolher WordPress?<br />
  11. 11. Porque o WordPress...<br />Esta há um longo tempo em aperfeiçoamento.<br />Está em desenvolvimento contínuo .<br />Possui uma grande comunidade de colaboradores.<br />É amplamente extensível .<br />É fácil de usar e gerenciar .<br />Possui suporte para vários idiomas, inclusive PT-BR , claro.<br />Vários outros motivos (Feeds automáticos, suporte a conteúdo protegido, importa conteúdo de outros blogs, permite publicar via e-mail e aplicativos móveis, etc) <br />
  12. 12. Cases<br />Ministério da Cultura<br />Tráfico de Pessoas<br />
  13. 13. Como instalar o Wordpress<br />
  14. 14. Requisitos Básicos<br />PHP 4.3+<br />MySQL 4.1.2+<br />Mais detalhes http://www.wordpres.org/about/requirements/<br />
  15. 15. Download<br />http://www.wordpress.org/download/<br />
  16. 16. Instalação Manual<br />O arquivo wp-config.php<br />
  17. 17. Dashboard (onde tudo acontece)<br />Configurações gerais<br />
  18. 18. O Post<br />Unidade de conteúdo em um blog<br />Equivale a um artigo em um jornal/revista<br />Possui título, conteúdo e autor<br />
  19. 19. Criando um post<br />Titulo, conteúdo, categoria e tags<br />Lipsum.com, o amigo nas horas dificeis.<br />Criar um post com video, deixar em rascunho.<br />Criar um post com listas, links e citações, deixar agendado.<br />
  20. 20. Comentários<br />
  21. 21. Comentários<br />O principal meio de contato do leitor<br />Comentando<br />Moderando comentários<br />
  22. 22. Páginas<br />
  23. 23. Páginas<br />Criando uma página sobre<br />Criando uma página de contato<br />
  24. 24. Plugins<br />
  25. 25. Plugins<br />Pequenos pacotes de códigos que incrementam uma funcionalidade.<br />Procurar, baixar e instalar.<br />Pelo wordpress.org<br />Automaticamente<br />
  26. 26. Widgets<br />
  27. 27. Widgets<br />Uma pequena caixa de conteúdo, dinamica ou não, exibida em uma parte do site preparada para recebê-los.<br />Lista de links, arquivos, categorias, etc<br />Criando uma lista de links<br />
  28. 28. Temas<br />
  29. 29. Temas<br />Uma das maiores vantagens ao usar um CMS é poder trocar o visual do seu site sem precisar ser especialista em HTML ou CSS<br />Onde achar temas: wordpress.org/extend/themes/; Google “wordpress themes”<br />O que faz parte de um tema?<br />Baixando e instalando um tema<br />
  30. 30. Bom almoço!<br />
  31. 31. Desevolvendo nosso próprio tema<br />
  32. 32. Padrões de design<br />Qualquer site pode ser transformado em tema para wordpress, mas há alguns padrões, tanto de design, quanto de HTML/CSS que facilitam o processo.<br />
  33. 33.
  34. 34.
  35. 35.
  36. 36. Padrões de HTML<br />Usar marcação semânticaPreferir <div class=“conteudo-principal”> ao invés de <div class=“coluna-do-meio”><br />(ID ou classes) padrões: “header”, “main-content”, “sidebar” e “footer”<br />Navegação principal é uma lista não-ordenada<br />Dentro do “main-content” há uma div chamada “post”<br />O “sidebar” é uma grande lista não-ordenada, para facilitar a inclusão dinâmica de plugins<br />
  37. 37. CSS<br />Metadados de tema:/*<br />Theme Name: Culinária<br />Theme URL: http://wordpress.org/<br />Description: Tema para blog feito no mini-curso de Wordpress<br />Author: Kennedy Lucas<br />Version: 1.0<br />License: GNU General Public License<br />Tags: red, two columns<br />*/<br />
  38. 38. CSS<br />Estrutura normal de CSS, a critério do designer/desenvolvedor<br />Classes do wordpress:<br />a.more-link<br />.alignleft, .alignright, .aligncenter<br />.wp-caption<br />.current-page-item<br />
  39. 39. Convertendo para WordPress<br />A pasta do tema e seus arquivos básicos: index.php, style.css e screenshot.png<br />O processo de converter um HTML para WordPress consiste básicamente em substituir partes do código por tags, que a tornarão dinâmicas.<br />
  40. 40. A tag <head> e o “header”<br />bloginfo('name') e bloginfo('description')<br />bloginfo('stylesheet_url')<br />body_class()<br />wp_nav_menu() e wp_list_pages()<br />
  41. 41. “sidebar”<br />Entre <ul> e </ul><br />wp_list_categories('title_li=') e wp_get_archives()<br />
  42. 42. Widgets no “sidebar”<br />3 Simples passos para deixar o “sidebar” pronto para receber widgets:<br />Tornar o “sidebar” uma lista não-ordenada<ul class=“sidebar”><li> <h2>Arquivos</h2> <ul> <li><a href=“#”>Agosto</a></li><li><a href=“#”>Agosto</a></li> </ul></li></ul><br />Registrar area de widgets no arquivo functions.php<br />Incluir o seguinte código:if ( !function_exists('dynamic_sidebar') ||!dynamic_sidebar() )<br />
  43. 43. “footer”<br />wp_footer();<br />O Footer também pode receber widgets, como no “sidebar”. O procedimento é o mesmo.<br />
  44. 44. O Loop<br />
  45. 45. O Loop<br />É a parte mais importante em um tema.<br />Exibe os posts de forma cronológica, escolhendo apenas aqueles que são apropriados.<br />Começa com:<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><br />Termina com:<?php endwhile; ?> <?php else : ?><h2>Não encontramos nada</h2><p>Desculpe, mas não achamos nada.</p> <?php endif; ?><br />
  46. 46. Dentro do Loop<br />Exibe as informações de cada post.<br />Titulo:the_permalink() the_title()<br />Atributos:the_author()the_time('F jS, Y')the_category(', ')the_tags()<br />Conteúdo:the_content()the_excerpt()<br />
  47. 47. bloginfo<br />A tag bloginfo(), assim como o nome sugere, exibe várias informações do blog.<br />Exemplos:Nome, descrição, url, atom_url, rss2_url, stylesheet_url, template_url, charset, version<br />Lista completa em http://codex.wordpress.org/Function_Reference/bloginfo<br />
  48. 48. Templates<br />Divindo o tema em parte (index.php, header.php, sidebar.php, footer.php)<br />archives.php – mudar o conteúdo usando excerpt()<br />single.php – adicionar comentários<br />page.php – tirar comentários<br />page-contato.php – adicionar comentários (novamente) para mostrar na prática como funciona a hierarquia de templates.<br />
  49. 49. Visão geral de uso em site não-blog<br />Páginas estáticas<br />Múltiplos loops<br />Múltiplas áreas de widget<br />
  50. 50. Onde obter ajuda e recursos?<br />Documentação: http://codex.wordpress.org/<br />Fórum de suporte: http://br.forums.wordpress.org/<br />Comunidade WP Brasil:http://wp-brasil.org/<br />Google<br />Email: kennedy.lucas@gmail.com<br />
  51. 51. Duvidas/Perguntas?<br />

×