Guia de utilização do WordPress

Como utilizar o template do Governo de Brasília

Assessoria de Projetos e Interação Digital

Subsecretaria de Comunicação Digital
Secretaria de Comunicação - Governo de Brasília
comunicacao.digital@buriti.df.gov.br
(61) 3961-1564
Sumário

Sumário 1

Acessar o publicador 2

Alterar nome, sigla, redes sociais e endereço do rodapé 2

Fale Conosco 2

Módulos 3
Como fazer 3
Detalhamento dos módulos 4
Botões 4
Destaques 4
Notícias e Destaques 5
Órgãos Vinculados 6
Serviços Rodapé 7
Propaganda 7
Áudio e Vídeo 8
Galeria de Fotos 9

Categorias 10
Como fazer 10
Templates de categorias 11
Apresentação da categoria 11
Acesso à Informação, Carta de Serviço e Ouvidoria 12

Posts 14
Como fazer 14
Conteúdo 15
Inserindo arquivos 15
Acessibilidade nas Imagens 16
Imagem Destacada 16
TAGS nas notícias 16
Incorporação 16
Tipos de Single Template 16

Home 19
Como fazer 19

Menu Superior 21
Organização dos Menus 21
Incluir e alterar itens de menu 22

1
Tópicos especiais 28
Configurando a Galeria de Fotos 28
Criação de tabelas 31
Estilizando a tabela 32
Criação de Accordeons 36
Tabs no WordPress 37
Tamanhos de Imagens 39

Acessar o publicador
O acesso é realizado pelo endereço ​http://www.​orgao​.df.gov.br/publicador​, onde a
palavra "orgao" da URL será a sigla da entidade ou pasta a qual representa (EX:
http://www.​comunicacao​.df.gov.br/publicador​). Este endereço é comunicado quando o
portal é publicado na internet. Enquanto o portal estiver em desenvolvimento, o
endereço será: ​http://www​1.​ orgao.df.gov.br/publicador​, seguindo a mesma lógica
anterior para a palavra "orgao". Este endereço é comunicado no mesmo e-mail que
informa as credenciais de acesso.

Alterar nome, sigla, redes sociais e endereço

do rodapé
Todas essas informações devem ser enviadas para a Subsecretaria de Comunicação
Digital, solicitando a inclusão ou atualização dessas informações. O email de contato
é: ​comunicacao.digital@buriti.df.gov.br​.

Fale Conosco
Para alterar as informações (endereço da unidade e dados da ASCOM) desta página,
basta entrar no menu ​Páginas​ localizado na barra lateral do painel de controle do
WordPress, e abrir a página Fale com a Secretaria1. Na página em questão, haverão
dois campos para a inclusão/atualização destas informações.

1
Ou ​Fale conosco​, os nomes podem variar de acordo com o template em questão.

2
Módulos
A Home pode ser organizada de diferentes formas, por meio dos módulos. Eles podem
ser posicionados de acordo com o nível de prioridade de cada pasta.
Existem 15 módulos no template e cada módulo é controlado por uma categoria de
mesmo nome (com exceção dos módulos de áudio, vídeo e galeria de fotos), assim o
único conteúdo que pode ser mostrado naquele determinado módulo é aquele
associado à categoria correspondente.

Como fazer
No menu do painel de controle, escolha a opção ​Módulos​. Alí, é possível clicar e
arrastar os módulos e colocá-los na posição desejada.

Caso a pasta não veja necessidade de algum dos módulos, basta selecionar a opção
Não​ na caixa de seleção do lado direito de cada módulo, fazendo com que eles sejam
desativados.

Organização dos módulos onde o módulo de RSS da Agência Brasília não está habilitado enquanto os serviços do 
rodapé estão. 

Uma vez que todas as alterações forem realizadas, clique em ​Salvar Configurações​.

3
Detalhamento dos módulos

Botões
A página inicial apresenta 4 módulos de botões diferentes:

HOME Categoria Módulos

TRANSPARENCIA-4-BOTOE TRANSPARENCIA-4-BOTOE TRANSPARNECIA

S S

MODULO-6-BOTOES MODULO-6-BOTOES PARA-VOCE

MODULO-EXTRA-6-BOTOES MODULO-EXTRA-6-BOTOES PARA-VOCE2

MODULO-15-BOTOES MODULO-15-BOTOES SERVICOS-MAIS-PROCURADOS

O ​nome​ dos módulos podem ser editados em HOME e eles podem ser tanto links
externos como links para conteúdos dentro do próprio site, basta especificar no
momento da criação do post de cada botão.
Esses módulos ainda permitem a personalização do plano de fundo de cada um
deles, editando sua respectiva categoria, incluindo uma imagem do seu agrado no
formato 1920 x 270 pixels.

Destaques
O módulo de destaques é o único composto por dois componentes e por tanto, duas
categorias distintas.

HOME Categoria Módulos

CARROSSEL DESTAQUE Módulo carrossel de destaques DESTAQUES-GERAIS

PRINCIPAL principais

MÓDULO DESTAQUES Módulo destaques da secretaria DESTAQUES-GERAIS

DA SECRETARIA

O ​componente de destaques​ que fica ao lado do carrossel pode ser renomeado e

mostra até 5 itens, entre links externos e internos, permitindo ser usado das mais
diversas formas como por exemplo: avisos, acesso rápido, importante, entre outros.

4
Notícias e Destaques
Existem três módulos com propostas e aparências semelhantes, são eles: Notícias da
secretaria, destaques com foto e destaques sem foto.
O módulo ​notícias da secretaria​ é o utilizado para colocar as notícias em destaque
secundário no site. Essas notícias podem ou não ter imagem e etiquetas. A presença
ou não dessas informações são controladas na criação do post.
Os outros dois módulos apresentam apenas as opções de título e conteúdo (e imagem
em caso específico)

HOME Categoria Módulos

NOTÍCIAS DA Notícias da Secretaria NOTICIAS-DA-SECRETARIA

SECRETARIA

DESTAQUES-FUNDO-AZ Módulo Destaques Sem Foto - DESTAQUES-SEM-FOTO

UL-SEM-FOTOS FUNDO AZUL

DESTAQUES-FUNDO-AZ Módulo Destaques com fotos - NOTÍCIAS-COM-FOTOS

UL-COM-FOTOS FUNDO AZUL

O módulo permite organizar outras notícias da pasta, com um carrossel de até 9

notícias, além disso, é o ​único m
​ ódulo que possui a chamada para ​todas as notícias
da pasta, portanto é muito importante a sua presença na página.

5
Órgãos Vinculados
Ideal para identificar os órgãos que trabalham vinculados à pasta, no entanto, caso o
nome não seja o adequado, é possível personalizá-lo.

HOME Categoria Módulos

ORGAOS-VINCULADOS MÓDULO ÓRGÃOS VINCULADOS MÓDULO ÓRGÃOS

VINCULADOS

O módulo foi construído para utilizar apenas links externos, uma vez que esses
vinculados tem seus próprios sites.

6
Serviços Rodapé
Este módulo é ​obrigatório​ em todos os sites e a SECOM aconselha que ele seja o
último módulo da página. Este módulo que tem links importantes além do serviço de
busca do DOFDF não é configurado pela pasta, assim, não possui categoria nem está
na Home.

HOME Categoria Módulos

- - SERVICOS-RODAPE

Apesar de não possuir as mesmas caraterísticas dos outros módulos, ele leva para
três ambientes muito importantes em todos os sites, são eles: Acesso à Informação,
Ouvidoria e Carta de Serviços. Cada um desses possui uma categoria e um ​WP
Simple Template​ específicos.

Propaganda
Este é um módulo Institucional. Será atualizado pela Secretaria de Comunicação
quando houver campanha ou algo de interesse institucional, abrangendo todas as
pastas de uma vez.

HOME Categoria Módulos

- - PROPAGANDAS

7
Por se tratar de um módulo de atualização externa, este também não possui categoria
ou é apresentado na Home.

Áudio e Vídeo
Esses módulos são especiais pois tem uma forma de alimentação diferenciada. Os
módulos de ​áudio​ e ​vídeo​ são molduras para incorporação de conteúdos de áudio e
vídeo. Nós sugerimos que sejam usados ​YouTube​ para vídeos e ​SoundCloud​ para
áudios, mas outras plataformas que apresentem a possibilidade de
embed/incorporação podem ser utilizadas também.

HOME Categoria Módulos

- - MODULO-AUDIO

- - MODULO-YOUTUBE

Para mudar o conteúdo desses módulos, vá até o vídeo no caso do YouTube, e

procure pela opção ​compartilhar​ e depois por ​incorporar​ ou ​embed​ e copie o código
alí disponibilizado.

Em posse do código, cole no campo ​embed​ na página específica do módulo. Para que
a aparência do vídeo não seja comprometida é muito importante prestar atenção na
altura e comprimento do vídeo antes de copiar o código de incorporação.

8
Galeria de Fotos
O módulo ​Galeria de fotos​ reúne fotos hospedadas no Flickr, evitando que seja
preciso atualizar a galeria sempre que uma nova imagem for incluída no site.

HOME Categoria Módulos

- - GALERIA-DE-FOTOS

Este módulo no entanto requer configuração especial, e todos os passos podem ser
encontrados no ​Anexo 1​.

9
Categorias
As categorias são parte essencial na organização do site. Elas são as responsáveis
por colocar cada parte do conteúdo em seu devido lugar e com a devida aparência
(junto com os ​WP Single Template​).

Todas as categorias podem ter seu nome editados, no entanto, aconselhamos que
elas sejam renomeadas apenas se a ASCOM achar os nomes atuais difíceis de
trabalhar. Nesse caso, é aconselhado que seja mantido um arquivo com o nome
original e o novo nome, de forma que os atuais e futuros integrantes da ASCOM
possam usar os manuais disponibilizados pela SECOM sem nenhuma confusão.

As categorias criadas junto ao template ​NÃO PODEM SER APAGADAS​. Cada uma
delas tem um papel importante no funcionamento do site.

Como fazer
Para criar uma categoria, posicione o mouse sobre o item Posts e quando o menu
expandir, vá para ​Categorias​. Uma listagem de todas as categorias existentes será
exibida, bem como um formulário para criação de uma nova categoria. Basta
preenchê-lo adequadamente e clicar no botão ​Adicionar nova categoria​.

● Nome:​ Nome que será apresentado ao pesquisar pela categoria.

● Slug:​ Endereço URL da categoria.​ Não alterar​.
● Categoria Mãe:​ Caso seja necessário criar uma subcategoria de uma
categoria existente, basta escolhê-la neste item, caso seja uma categoria
independente, escolha ​Nenhuma​.
● Descrição da categoria:​ Espaço reservado para descrição de para que aquela
categoria é reservada e como/quando ela deve ser utilizada. ​Esse texto não é
mostrado no site​.
● Template:​ Apresenta 3 opções que definirão a aparência da listagem dos posts
associados a essa categoria, essas são: Default Template, Menu lateral e
Caixas.
● Image:​ Permite adicionar uma imagem à categoria, no entanto isso só tem
efeito em categorias específicas como as relacionadas aos módulos de botões.

OBS:​ O campo ​slug​ é preenchido automaticamente e não deve ser alterado em

hipótese alguma.

Uma vez que todos os campos estejam preenchidos adequadamente, basta clicar em
Adicionar nova categoria​.

10
Templates de categorias
É possível utilizar determinadas visualizações personalizadas em categorias criadas
pela pasta, de forma a facilitar a organização dos conteúdos dentro dos sites.
Atualmente as visualizações disponíveis são:
● Default template:​ faz uma listagem dos posts associados àquela categoria,
como em notícias.
● Menu lateral:​ Mostra o conteúdo do post junto a um menu lateral (a esquerda)
com os outros posts daquela categoria.
● Caixas:​ Lista os posts daquela categoria dentro de caixas, apresentando o
título e uma parte do texto.

Uma vez que uma categoria for criada com o template ​menu lateral​ ou ​caixas​, ela
irá apresentar todo o conteúdo que todas as categorias que utilizam aquele
template, até que essa categoria seja alimentada com seus próprios posts.

A alimentação da categoria acontece como nas outras categorias.

Crie uma postagem, escolha a categoria que foi criada e o ​WP Post Template
correspondente no caso do ​menu lateral​. Caso o ​WP Post Template​ não seja
selecionado, o post será listado na categoria, mas não apresentará o menu lateral
quando for acessado.

Apresentação da categoria
Quando cria-se a categoria, ela vai listar todo o conteúdo que lhe foi associado, no
entanto a sua página inicial/apresentação aparecerão vazias.

Para popular esse espaço com conteúdo é necessário criar um novo post utilizando a
categoria e o WP Post Template com ​o mesmo nome da categoria​, separado por​ “-”
(hífen) ​e antecedido por​ texto-​, todo em m
​ inúsculo​ e ​sem acentos​, assim, se o
nome da categoria é ​Menu lateral​ o nome do post deve ser ​texto-menu-lateral​.

11
Após salvar o post, a categoria apresentará o texto criado na postagem.

Acesso à Informação, Carta de Serviço e Ouvidoria

Esses três ambientes possuem categorias e templates específicos afim de
proporcionar uma visualização melhor de seus conteúdos.
No momento da criação do post que seja direcionado a um desses ambientes é
necessário escolher as informações com atenção.

Categoria Wp Single Template

Lei de Acesso à Informação Acesso à Informação

Ouvidoria Ouvidoria

Carta de Serviços Carta de Serviços

Assim como o ​Template de categorias​, essas três categorias especiais precisam de uma
apresentação​, no entanto os nomes e links utilizados são um pouco diferentes dos descritos no
tópico anterior. Abaixo está a tabela com os nomes e o final do slug de cada post
correspondente à apresentação da categoria.

É importante lembrar que a edição do ​slug​ é uma prática desaconselhada pela SECOM pois a
navegação do site é baseada nele, no entanto, essa parte específica do site precisa ter um
slug idêntico ao da tabela. Caso o post esteja sendo criado, o slug será preenchido
automaticamente da forma que aparece abaixo, mas caso já exista um post com as

12
 informações desejadas e opte-se por colocá-lo como apresentação, é necessário editar o
slug para que ele atenda as exigências.

Nome Slug

texto_lei_acesso_informacao texto_lei_acesso_informacao

texto_ouvidoria texto_ouvidoria

texto_carta_de_servicos texto_carta_de_servicos

A imagem a seguir, ilustra a aparência desses três ambientes, bem como os criados com
template de categoria ​menu lateral​.

13
Posts
Os posts são a forma de alimentação principal do site. Quase todos os módulos são
alimentados por eles. O post possui por padrão um campo para título, conteúdo,
categorias, WP Single Template e Imagem Destacada. Existem algumas categorias
que personalizam os campos do post, eles serão abordados adiante.
No menu lateral, ao clicar em ​Posts​ é possível acessar a listagem de todos posts
criados.

Como fazer
Para criar um post, posicione o mouse sobre o item Posts e quando o menu expandir,
vá para ​Adicionar novo​. Um formulário para criação de novo post será apresentado.

Uma vez que esteja com o formulário de criação de post aberto ​SEMPRE​ escolha a
categoria do post antes de alimentá-lo, uma vez que alguns formulários são
diferentes de outros e esses são controlados pelas categorias.

Escolha a categoria condizente com a finalidade do post, feito isso, caso seja uma
categoria personalizada o formulário será alterado, caso contrário ele permanecerá
normal. Nesse ponto, basta preencher os campos com as informações desejadas.

14
Conteúdo
Esse é o campo onde, na maioria dos casos, todo o conteúdo do post é colocado.
Esse conteúdo pode ser composto por imagens, vídeos, áudios, links, PDFs entre
outros.
Principalmente para textos, existe uma barra de ferramentas de formatação com as
opções de negrito, itálico, criação de listas ordenadas e desordenadas, alinhamento a
esquerda,direita ou centralizado, criação e remoção de links, inclusão ou remoção de
recuos, estilos de fontes, criação e edição de tabelas entre outras.

Inserindo arquivos
Vários arquivos são suportados pelo WordPress como PDF, DOC, JPG, PNG, SVG,
XLS, MP4, AVI, MPG, OGG, MP3, entre outros, mas apesar disso, prezando pela
qualidade da velocidade de navegação dos sites, a SECOM recomenda que arquivos
de vídeo sejam hospedados no Youtube e de áudio no SoundCloud ou compatível.
Esses serviços de hospedagem oferecem a possibilidade de incorporação de seus
conteúdos em outras páginas, e é esse o método que utilizamos.
Para os outros tipos de arquivos, ao elaborar o post, basta clicar em ​Adicionar mídia​,
uma janela como a da imagem abaixo será apresentada.

A partir dessa tela é possível arrastar os arquivos de uma pasta do computador para
ela ou, clicando em ​Selecionar arquivos​, navegar pelas pastas do computador e subir
os arquivos necessários. Feito isso, os arquivos subidos estarão todos selecionados,
para incluí-los no conteúdo, basta clicar em ​Inserir no post​.

15
Acessibilidade nas Imagens
Uma das grandes dificuldades para os usuários cegos em navegar nos sites é a falta
de descrição das imagens. Portanto a SECOM determina que todas as imagens
tenham o campo ​Texto alternativo​ sempre preenchido com riqueza de detalhes, pois
é a forma como “os cegos veem”.

Imagem Destacada
É a imagem que ficará como destaque na home do site nas publicações como as
notícias em destaque e no módulo de destaques com foto. Este tipo de imagem é
inserida também durante a produção do post, entretanto, no lugar de INSERIR MÍDIA,
a opção escolhida deve ser DEFINIR IMAGEM DESTACADA (no rodapé, ao lado
direito do publicador).

Tipos de Single Template

Todo o conteúdo a ser incluído no site ​DEVE​ ser por meio de ​Posts​. ​A criação de
páginas é reservada apenas a SECOM e a TI da Casa Civil​.

Para atender as necessidades de todos os conteúdos que vão compor o site, são
disponibilizados 3 single templates. São esses:

● Padrão;

16
 ● Com DATA sem REDE SOCIAL;

● Sem DATA/REDE SOCIAL.

Para utilizar os templates, basta escolher o que mais atende a sua necessidade na
caixa ​WP Single Template​ logo abaixo da caixa Tags e/ou Categorias. Na mesma
caixa são encontrados os single templates usados ​OBRIGATORIAMENTE​ com as
categorias ​Carta de Serviços​, ​LAI​ e ​Ouvidoria.

17
Home
A ​Home​ é a parte no painel administrativo em que você pode controlar o que, se
tratando de conteúdo, deve ser apresentado na página inicial do site. Isso evita a
necessidade de ficar alterando o horário das publicações para que elas assumam as
posições desejadas, além de poder renomear alguns dos módulos de modo a atender
melhor às necessidades da pasta.
Como a ​Home​ controla tudo o que vai ser apresentado na página inicial do site ​é
necessário​ que todo ​novo post​ que deva aparecer na página inicial seja habilitado
em seu módulo nesta página, caso contrário, por mais que esteja na categoria
correta, ele não aparecerá na página como esperado.

Como fazer
No menu do painel de controle, escolha a opção ​Home​, feito isso será apresentada
uma lista de módulos com caixas de texto e de seleção.

Todos os módulos que apresentam a possibilidade de ter um nome personalizado

apresentam uma caixa de texto logo acima da caixa de controle dos posts, com o
mesmo nome do módulo antecedido pela palavra ​texto​.

Na caixa do lado esquerdo estão listados todos os posts que foram marcados na
categoria correspondente àquele módulo. É possível pesquisar por um post em
específico digitando o nome do mesmo na barra de pesquisa da caixa. Uma vez que o

18
post desejado seja encontrado, basta clicar no botão de ​+​ que se encontra no canto
direito do título do post.

Na caixa do lado direito estão todos os post que atualmente estão sendo apresentados
na página inicial. Neste ambiente é possível modificar a ordem de apresentação de
cada item arrastando para baixo ou para cima o item desejado além de retirar os itens
que não mais devem ser apresentados clicando no botão ​-​ no canto direito ao lado do
título.

Depois que todas as alterações desejadas forem concluídas, basta clicar em ​Atualizar
para que elas sejam aplicadas ao site.

19
Menu Superior
A administração dos menus e itens de menu do gerenciador de conteúdo WordPress é
realizada através da opção “Aparência” e em sequência "Menus", conforme a figura 1
abaixo.
  

 
Figura 1 - Opção "Menus" para administração dos menus do portal 
  

Organização dos Menus

Atualmente o template padrão é composto por 1 único menu chamado MenuSEC. O
menu, ilustrado pela figura 2 abaixo, possui os itens de menu específicos do órgão.
Dessa forma, cada órgão deverá incluir os itens e subitens de menu de acordo com a
sua necessidade. Para esta customização, consulte o próximo tópico deste manual
(Incluindo itens de menu).

Figura 2 - Localização do MenuSEC

20
Incluir e alterar itens de menu
Neste tópico será explicado como inserir e alterar ​Itens de Menu​. Vale ressaltar que
não será explicado como se cria um novo Grupo de Menu, pois só são permitidos
aqueles previamente definidos no template padrão. Antes de criar um novo item de
menu é importante que o conteúdo para o qual aquele item de menu será linkado
esteja pronto ou definido. Dessa forma, utilizaremos o ​menuSEC​ para inserir um item
de menu.

1º Passo - Acessar a administração de menus.

Após efetuar o login na área administrativa do site, mover o mouse até ​Aparência​ e
então clicar na opção ​Menus​, conforme a figura abaixo.

Após abrir as opções de menu, serão exibidos os itens do menu e as opções

administrativas daquela área. Os itens de menu podem ser criados com os conteúdos:
páginas, posts, links personalizados e categorias.

21
 Tela de administração de menus.

As opções de páginas, posts e categorias possuem três abas:

● Mais recentes:​ Lista os 15 itens mais recentes no site;
● Ver tudo:​ lista todos os itens existentes na página em ordem alfabética;
● Pesquisar:​ oferece a possibilidade de fazer uma busca nominal pelo item desejado.

2º Passo - Inserir item ao menu.

Após escolher qual o tipo de conteúdo será utilizado no menu a ser criado, escolher o item
correspondente caso seja uma página, post ou categoria ou preencher os dados no link
personalizado.

● Item de post (ou página ou categoria)​: Basta escolher qual item será usado no menu
por meio das lista de ​mais recentes​, t​ odos​ ou pela ferramenta de ​pesquisa​,
selecionar o item em questão e clicar em ​Adicionar ao menu​, como mostra na figura s
seguir.

22
 Inclusão de postagem como item de menu.

● Item de Link externo​: É só preencher o campo U​ RL​ com o endereço web da página
que se deseja acessar e o campo ​Texto do link​ com o nome que será apresentado no
menu e depois clicar em ​Adicionar ao menu​, como na figura.

23
 Inclusão de link personalizado como item de menu.

Os itens serão incluídos no fim da lista de itens do menu como pode ser observado a
seguir.

Lista de itens componentes do menu.

3º passo - Opcional - Renomear item do menu.

É possível renomear um item de menu. Para isso basta clicar na seta localizada no
lado direito do item desejado e caixa com uma série de opções serão apresentadas.
No campo ​Rótulo de navegação​ você substitui o nome lá apresentado, pelo nome
desejado no menu, a informação é atualizada automaticamente sem a necessidade de
salvar essa etapa.

24
 Opções de itens de menu, e item renomeado.

Lista atualizada de itens componentes do menu.

 
Além de renomear é possível ainda mudar a posição do item que está selecionado para a 
posição acima, filha do item acima e para o topo do menu. 
 
4º passo - Opcional - Alterar organização dos itens do menu.
O painel de administração de menus permite organizar os itens de menu de forma
muito simples, bastando apenas arrastar e soltar o item na posição desejada para que
o menu tome a forma esperada.

25
 Alterando posição do item de menu.

● Mover para cima ou para baixo​: Isso altera a ordem em que os itens são
apresentados.
● Mover para a direita ou para a esquerda​: Altera a forma como o item apresentado.
Caso houver um espaço entre o item e a margem a esquerda, o item será apresentado
como subitem do item imediatamente superior alinhado a esquerda.

O resultado pode ser observado a seguir.

MenuSEC atualizado.

Uma vez finalizada a inclusão, alteração ou remoção de itens de menu, basta clicar no botão
Salvar menu​ no canto inferior direito da tela para que as alterações sejam publicadas.

26
Tópicos especiais

Configurando a Galeria de Fotos

Para configurar a Galeria de Fotos é necessário obter um número de identificação do ​Flickr​.
Uma vez em posse desse número, é necessário configurar a API do Flickr e então teremos
tudo o necessário para ativar a Galeria.

Antes de mais nada, é necessário ter uma conta de email (gmail, yahoo, etc)para poder efetuar
o seu cadastro do flickr, caso já tenha uma conta no Flickr desconsidere esse passo.

Para obter o ​Flickr Id Number​ é necessário estar logado na sua conta deste site, e uma vez
nele vá em ​Minhas coisas​ e depois em ​Galeria​. Feito isso copie a URL do site encontrada no
topo do navegador, que deve ter um formato semelhante ao seguinte:
https://www.flickr.com/photos/xxxxxxxxxxxxx/​.

Agora acesse a Ferramenta de identificação no link a seguir:

https://www.webpagefx.com/tools/idgettr/​, uma vez no site, cole a URL no campo indicado e um
id​ será apresentado como na imagem abaixo.

Em posse ​Flickr Id Number​ acesse o serviço de API da ferramenta pelo link

https://www.flickr.com/services/api/​ ​e clique em ​Chaves API​ como ilustra a imagem abaixo.

27
Ao clicar no link, uma página com o email e nome da conta será apresentada, nela clique no
botão ​Obter outra chave​, como na imagem abaixo.

Na página seguinte serão apresentadas duas opções de chaves, uma comercial e uma não
comercial, escolha uma das opções conforme a imagem abaixo.

Agora é necessário configurar o aplicativo, para isso você preencher os campos ​Qual
é o nome de seu aplicativo​ com o título da sua galeria e O​ que você está criando
com uma breve descrição sobre a galeria/aplicativo explicando a sua finalidade.

28
Uma vez que você tenha preenchido todos os campos, marcado todas as caixas e
enviado as informações, uma página com a chave da galeria será apresentada, essa
chave é o que você precisa para configurar a galeria dentro do site da sua pasta.

​ ódulo galeria de fotos, no Wordpress, já poderá ser preenchido,

Com tudo pronto o​ m
conforme imagem abaixo.

É possível colocar até 6 fotos no módulo, mas caso seja colocado um valor diferente
de 3 ou 6 a galeria mostrará espaços vazios.

29
Criação de tabelas
As tabelas podem ser criadas por meio de código HTML ou pelo editor de conteúdo.

No editor de conteúdo, basta clicar no ícone que as opções de tabela serão

apresentadas:

No painel que abre, basta escolher o tamanho da tabela que ela será inserida logo
após a localização do cursor.
Já no HTML funciona da seguinte forma:
<​table​>
​<​tr​>
​<​th​>​Coluna 1​<​/th​>
​<​th​>​Coluna 2​<​/th​>
​<​/tr​>
​<​tr​>
​<​td​>​Coluna 1​<​/td​>
​<​td​>​Coluna 2​<​/td​>
​<​/tr​>
<​/table​>
A tag <table> define uma tabela em HTML. Uma tabela em HTML consiste em um
elemento <table> e um ou mais elementos <tr> (table-row), <th> (table-head) e <td>
(table-data). O elemento <tr> define uma linha da tabela, o elemento <th> define a
linha título da tabela e o elemento <td> define uma célula da tabela, de forma que a
quantidade de células em uma determina a quantidade de colunas da tabela.

30
Estilizando a tabela
As tabelas no wordpress apresentam as bordas no ambiente de edição, como
observado na imagem a seguir, no entanto não apresentam nada quando a postagem
é publicada. Para resolver essa questão, pode-se utilizar das classes de estilo (CSS)
disponíveis no framework ​Bootstrap 3.x​.

Uma vez que a tabela foi criada, mude o modo de edição de ​Visual ​para ​Texto n ​ as
abas presentes no canto superior direito da caixa de edição. Feito isso, busque no seu
navegador a opção ​Encontrar na página​, ou utilize o atalho de teclado ​Ctrl+F​, e no
campo que aparece digite ​table​. Uma tela parecida com a seguinte deve ser
apresentada com o texto ​table ​em destaque.

31
Na linha ​<table … >​ (não confundir com ​</table>​) verifique se existe o texto
class=”qualquer-coisa”​, caso não exista digite o texto em questão trocando
qualquer-coisa​ por ​table​, como a seguir:

O resultado disso é o seguinte:

32
 ATENÇÃO​: Caso já exista o texto ​class=”qualquer-coisa”​, acrescente um
espaço depois de ​qualquer-coisa​ e acrescente a palavra t​ able​. Não exclua o
outro conteúdo.

Para que a tabela fique com todas as bordas é necessária a inclusão de outra classe
chamada ​table-bordered​.

Isso produzirá o seguinte resultado:

É possível ainda criar uma tabela com linhas de cores alternadas (uma clara e uma
mais escura) para facilitar a visualização em tabelas grandes, para isso usa-se a
classe ​table-striped​.

33
E caso seja do interesse da ASCOM, pode-se combinar as duas últimas possibilidades
colocando-se table-bordered e table-striped separadas por um espaço.

34
Criação de Accordeons
O trecho de código abaixo deve ser colado no campo de conteúdo do post com a
visualização e edição marcada como Texto.

O trecho corresponde a um ítem de carrossel e para cada novo item é necessário que
o ​HREF​ e ​ID​ (em amarelo) sejam modificados com termos únicos e identificadores.

<div class="panel panel-default"> 

<div class="panel-heading" role="tab" data-toggle="collapse" 
href="#​
identificador​" aria-expanded="true"> 
<h3 class="panel-title"> 
<span style="color: #ffffff; font-size: 18pt;">​Título​
</span> 
</h3> 
</div> 
<div id="​identificador​
" class="panel-collapse collapse" 
role="tabpanel" aria-labelledby="headingOne" aria-expanded="true" 
style=""> 
<div class="panel-body"> 
<p>​
A
​qui vem o conteúdo do item.​</p> 
​
</div> 
</div> 
</div> 

● Para cada ítem que se desejar mostrar na sanfona é necessário copiar o código acima.
● IMPORTANTE​: O texto em ​amarelo ​precisa ser personalizado a cada elemento da sanfona
(isso que permite a abertura e fechamento correto da sanfona).
● O texto em ​azul ​representam o título e o conteúdo de cada ítem do accordeon.

35
Tabs no WordPress
O trecho de código abaixo deve ser colado no campo de conteúdo do post com a
visualização e edição marcada como Texto.

O trecho corresponde a três tabs e para cada novo item é necessário que o ​HREF​ e ​ID
(em amarelo) sejam modificados com termos únicos e identificadores.
 
<style> 
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>
a:focus{ 
color: #ffffff !important; 
background-color: #4079bc; 
border: 1px solid #4079bc; 
} 
div.tab-content{ 
border-top: 3px solid #4079bc; 
padding-top: 30px; 
margin-top: 0px; 
} 
</style> 
<div> 
<ul class="nav nav-tabs"> 
<li class="active"><a href="#​tab-01​" data-toggle="tab" 
target="_blank" aria-expanded="false">​ Aba 1​
</a></li> 
​
<li class=""><a href="#​tab-02​
" data-toggle="tab" 
target="_blank" aria-expanded="false">​ Aba 2​</a></li> 
<li class=""><a href="#​tab-03​
" data-toggle="tab" 
target="_blank" aria-expanded="false">​ Aba 3​
</a></li> 
</ul> 
<div class="tab-content"> 
<div id="​tab-01​
" class="tab-pane active">   
<p>​
Aqui vem um conteúdo qualquer​</p> 
</div> 
​
<div id="​tab-02​
" class="tab-pane"> 
<p>​
Aqui vem um outro conteúdo qualquer​</p> 
</div> 
<div id="​tab-03​
" class="tab-pane"> 
<p>​
E mais conteúdo aqui​
</p> 
</div> 
</div> 
</div> 
 
 

36
● Para cada aba que se desejar mostrar é necessário copiar o trecho código ​em negrito​ acima
nas duas partes do código.
● IMPORTANTE​: O texto em ​amarelo ​precisa ser personalizado a cada aba incluída (isso que
permite a navegação correta entre as abas).
● O texto em ​azul ​representam o título e o conteúdo de cada aba.

37
Tamanhos de Imagens
Abaixo estão os tamanhos das imagens nos diferentes módulos disponíveis no site.

38