Your SlideShare is downloading. ×
  • Like
Introducao ao WordPress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introducao ao WordPress

  • 1,308 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,308
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
78
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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