Apostila de

WordPress

Gustavo Teixeira da Cunha CoelhoHenrique Gemignani Passos Lima

14 de maio de 2013

Primeira Edicao

Copyright (C) 2013 USPGameDev

A edicao mais recente pode ser encontrada em:http://uspgamedev.org/apostilas/

Escrito por:

• Gustavo Teixeira da Cunha Coelho (coelho at uspgamedev.org)

• Henrique Gemignani Passos Lima (henrique at uspgamedev.org)

Sumario

1 Sobre o WordPress 3

2 Visao Geral 32.1 Conceitos do WordPress . . . . . . . . . . . . . . . . . . . . . 3

3 Instalando 4

4 Postando 54.1 Autorizacao . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54.2 Criando um post . . . . . . . . . . . . . . . . . . . . . . . . . 54.3 Categorias e Tags . . . . . . . . . . . . . . . . . . . . . . . . . 74.4 Paginas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

5 Conteudo Elaborado 95.1 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.2 Vıdeos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95.3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

5.3.1 Adicionando um mapa do Google Maps . . . . . . . . . 11

6 Temas 146.1 Gerenciando temas . . . . . . . . . . . . . . . . . . . . . . . . 14

7 Widgets 15

2

1 Sobre o WordPress

O WordPress e um sistema de gerenciamento de conteudo para Paginas Web,usado para a criacao de blogs. Ele possui muitas ferramentas que facilitam acriacao do seu site e e o sistema de criacao de blogs mais usado na internet.

Para saber um pouco mais da historia do WordPress clique aqui.

2 Visao Geral

O WordPress, sendo uma plataforma de criacao de blogs, facilmente permiteque o seu usuario manipule todas as partes relevantes de um blog, como acriacao de posts e paginas, e tambem de toda a mıdia necessaria que serausada, como imagens e vıdeos.

2.1 Conceitos do WordPress

• Um Post e uma entrada no seu blog. Sao apresentados em ordemcronologica reversa, ou seja, os posts mais novos sao apresentadosprimeiro para o seu leitor.

• Uma Pagina e um tipo especial de post. Normalmente e usada paraapresentar informacoes relevantes para o seu usuario, como informacoessobre o blog ou de contato. Elas se apresentam fora da cronologianormal do blog, podendo ser acessadas mais facilmente do que um postnormal.

• A Biblioteca de Mıdia armazena a mıdia do seu blog, tais comoimagens e vıdeos. O WordPress permite que um item de sua bibliotecapossa ser mostrado facilmente em um post qualquer.

• O Tema, e, essencialmente, a aparencia de sua pagina. O WordPressdisponibiliza varios temas que podem ser facilmente instalados em seublog. Uma mudanca de Tema muda a forma como as informacoes saomostradas em sua pagina.

• Os Widget sao pequenos elementos visuais que podem ser usadospara mostrar mais informacoes para o seu usuario. O WordPress porpadrao possui varios Widgets que podem ser facilmente colocados nasua pagina.

3

• Um Plugin e usado para extender as funcionalidades do WordPress.O WordPress disponibiliza metodos bastante faceis para a instalacaode Plugins.

3 Instalando

O primeiro passo para ter um WordPress configurado e disponıvel para ainternet, e decidir onde coloca-lo. Para tal, existem basicamente duas opcoes:

• Utilizar um servico de blogs online, como o WordPress.com.Esses sao simples e faceis de utilizar, mas possuem limitacoes. Umaconta gratuita do WordPress.com nao pode instalar plugins por exem-plo.

• Utilizar um servico de hospedagem de sites. Existem inumeras em-presas que oferecem servicos de hospedagem na internet, com os maisvariados precos e qualidades. A pessoa responsavel por essa parte deinfraestrutura e popularmente chamada de webmaster.

Se voce escolher essa opcao, peca para o responsavel pelo seu site queele instale o WordPress.Caso essa pessoa seja voce, siga as instrucoes do site oficial1.

1http://codex.wordpress.org/Installing_WordPress

4

4 Postando

4.1 Autorizacao

E importante notar que o WordPress possui um controle de acesso, logosomente pessoas autorizadas podem criar novos posts.

Para tal, precisamos realizar o login antes de podermos continuar comqualquer tarefa.

(a) Link para a pagina de login (b) Digitando usuario e senha

Figura 1: Processo de login

4.2 Criando um post

Criar um post e extremamente simples. O modo mais facil de faze-lo e usara barra do WordPress, onde por padrao existe uma secao para criacao deconteudo novo, e clicar em Novo Post. Apos isso basta usar o editor visualpara gerar e publicar o post.

5

Figura 2: Usando a barra do WordPress.

Figura 3: Usando o editor visual.

6

Figura 4: A direita (ou em baixo), o menu ’Publicar’. Utilizamos esse menupara configurar como e quando publicar o post.

4.3 Categorias e Tags

Na hora de criacao de um post, podemos adicionar categorias e tags paraagrupar posts quanto ao seu conteudo. Como regra geral, as categorias saousadas para dizer sobre o que o post de uma maneira bastante abrangente.Ja as tags sao normalmente usadas para dizer mais especificamente sobre oconteudo do post. Categorias e tags podem ser colocadas no momento decriacao de um post, mas tambem podem ser colocadas apos a cricao de umpost.

7

(a) Adicinando categorias a um post. (b) Adicinando tags a um post.

Figura 5: Abaixo do menu ’Publicar’ se encontram os menus ’Categorias’ e’Tags’.

4.4 Paginas

Um tipo especial de post no Wordpress sao as Paginas. Essas paginas saotratadas de maneira especial pelo seu tema, como por exemplo listando todasna pagina inicial.

Figura 6: Lista de paginas do tema padrao, logo abaixo do tıtulo do blog

8

5 Conteudo Elaborado

Nao e apenas de texto que o blog vai ficar bom.

5.1 Imagens

Adicionar imagens no seu post e simples, basta clicar em Adicionar Mıdia.

Figura 7: Botao ’Adicionar Mıdia’, entre o tıtulo do post e o editor deste.

Feito isso, voce pode ou enviar novas imagens para o site ou utilizaraquelas que ja estao disponıveis na aba Biblioteca de Mıdia2.

5.2 Vıdeos

A forma mais facil e enviar o vıdeo para algum dos sites que o WordPresstem suporte3 e entao colocar o link no post. O resto acontece sozinho.

Figura 8: Colocando um link para um video do YouTube no post.

2Menu da Esquerda - Mıdia - Biblioteca3http://codex.wordpress.org/Embeds

9

Figura 9: O WordPress converteu automaticamente o link para um videoincorporado.

5.3 HTML

Todo post no WordPress na realidade e feito em HTML. O editor visual euma forma de gerar esse HTML de uma forma simples e facil de se mexer.A qualquer momento voce pode ir para o editor modo texto, ver e modificaro HTML gerado, e entao voltar ao edtior visual, com as modificacoes ativas.

10

Figura 10: Post no modo visual.

Figura 11: O mesmo post no modo texto.

5.3.1 Adicionando um mapa do Google Maps

Como exemplo, aqui vai instrucoes de como colocar um mapa do GoogleMapas no final do seu post.

1. Escreva o seu post normalmente, colocando tudo o que bem intender.

2. Visite o Google Maps e ache o local de onde voce quer colocar o mapa.

3. Clique no botao de link e copie o texto no campo ”Paste HTML toembed in website”

11

Figura 12: Pegando um bloco de HTML pronto.

4. Volte ao seu post, e mude para o editor de texto. Como queremoscolocar o mapa no final, va ate o fim e entao cole o HTML que copioudo Google Maps.

5. Pronto, voce ja pode voltar ao editor visual e encontrar um retanguloindicando que existe algo excepcional ali, e que o editor visual naomostra.

6. Clique em Visualizar, e veja o mapa dentro de seu post!

12

Figura 13: Visualizando o post com o mapa.

13

6 Temas

Um tema do WordPress e apenas uma das aparencias que este pode ter.O WordPress vem por padrao com alguns temas, que embora seja possıvel

alterar partes, como tıtulo, descricao, cores do texto e o fundo, para podermodificar quantas colunas e posicionamento dessas, o posicionamento do logoe outras coisas relacionadas a estrutura das paginas, e necessario trocar otema em si.

6.1 Gerenciando temas

Figura 14: Localizando a pagina de temas

Nesta pagina e possıvel personalizar o tema atual, adicionar menus, widgetsou mudar o tema ativo. Tambem e possıvel procurar temas novos parainstalar.

14

7 Widgets

Widgets4 podem ser adicionados ao seu site para complementar as informacoesdisponıveis aos seus usuarios. Por padrao, novos sites WordPress ja sao cria-dos com alguns Widgets, como um Widget para busca no seu site, um Widgetmostrando os Posts recentes, alem de outros.

Figura 15: Exemplo de alguns Widgets padroes

4http://pt.wikipedia.org/wiki/Widget

15