Introdução ao WordPress

Simpósio Acreano de Sistemas de Informação 2011

(Kennedy Lucas)

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?

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?

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.

O que é o Wordpress ?

Uma plataforma de publicação.

Porque escolher WordPress?

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)

Cases

• Ministério da Cultura• Tráfico de Pessoas

Como instalar o Wordpress

Requisitos Básicos

• PHP 4.3+• MySQL 4.1.2+• Mais detalhes

http://www.wordpres.org/about/requirements/

Download

• http://www.wordpress.org/download/

Instalação Manual

• O arquivo wp-config.php

Dashboard (onde tudo acontece)

• Configurações gerais

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.

Comentários

Comentários

• O principal meio de contato do leitor• Comentando• Moderando comentários

Páginas

Páginas

• Criando uma página sobre• Criando uma página de contato

Plugins

Plugins

• Pequenos pacotes de códigos que incrementam uma funcionalidade.

• Procurar, baixar e instalar.• Pelo wordpress.org• Automaticamente

Widgets

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

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

Bom almoço!

Desevolvendo nosso próprio 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()

“sidebar”

Entre <ul> e </ul>• wp_list_categories('title_li=') e

wp_get_archives()

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

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.

Visão geral de uso em site não-blog

• Páginas estáticas• Múltiplos loops• Múltiplas áreas de widget

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

Duvidas/Perguntas?