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
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
O que é CMS?
Content Management Systems - CMS, um sistema que integra ferramentas
necessárias para criar, gerir (inserir e editar) conteúdo.
(Wikipedia)
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)
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.
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)
Requisitos Básicos
• PHP 4.3+• MySQL 4.1.2+• Mais detalhes
http://www.wordpres.org/about/requirements/
O Post
• Unidade de conteúdo em um blog• Equivale a um artigo em um
jornal/revista• Possui título, conteúdo e autor
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.
Plugins
• Pequenos pacotes de códigos que incrementam uma funcionalidade.
• Procurar, baixar e instalar.• Pelo wordpress.org• Automaticamente
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
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
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.
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
CSS
Metadados de tema:/*Theme Name: CulináriaTheme URL: http://wordpress.org/Description: Tema para blog feito no mini-curso de WordpressAuthor: Kennedy LucasVersion: 1.0License: GNU General Public LicenseTags: red, two columns*/
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
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.
A tag <head> e o “header”
• bloginfo('name') e bloginfo('description')
• bloginfo('stylesheet_url')• body_class()• wp_nav_menu() e wp_list_pages()
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() )
“footer”
• wp_footer();• O Footer também pode receber
widgets, como no “sidebar”. O procedimento é o mesmo.
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; ?>
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()
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
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.
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: [email protected]