Tema UFPel 2.0 – WP InstitucionalGuia de Opções de Personalização

Sumário

1. Configurações Iniciais................................................................................................2

1.1. Configurando o Menu Personalizado............................................................2

1.2. Configurando os Widgets..............................................................................3

2. Localize o nome de sua unidade, curso ou departamento.........................................4

3. Esquemas de Cores...................................................................................................5

4. Layout da Página Principal.........................................................................................6

4.1. Lista de Posts................................................................................................7

4.2. Imagem de Capa...........................................................................................9

4.3. Carrossel de Banners..................................................................................12

4.4. Destaques....................................................................................................14

4.5. Manchete.....................................................................................................16

5. Redes Sociais..........................................................................................................18

6. Rodapé....................................................................................................................18

7. Links Destacados (Widget)......................................................................................20

8. Destaques por categoria (Widget)............................................................................23

9. Páginas sem barra lateral........................................................................................24

1. Configurações Iniciais

Se você está migrando de um outro tema para o tema UFPEL 2.0, você deverealizar algumas configurações caso você utilize em seu site menu personalizadoe/ou widgets. Caso você não utilize nenhuma dessas opções, poderá começar a ler otutorial a partir da próxima seção.

1.1. Configurando o Menu Personalizado

No painel de controle do seu site, na barra lateral esquerda clique em Aparência (1) – Personalizar (2).

Na página de customização clique no link Navegação (3) e selecione o seu menu personalizado através da lista de menus (4).

1.2. Configurando os Widgets

Quando você migar o seu site para o tema UFPel 2.0, talvez alguns Widgetsnão estejam no lugar correto. Para corrigir isto, acesse a página de Widgets clicandoem Aparência (1) – Widgets (2).

Na página de Widgets, verifique se as áreas de Widgets (1) possuem os Widgets que você deseja.

2. Localize o nome de sua unidade, curso ou departamento

No menu Aparência (1) – Opções do tema (2), na aba Localização (3),atualize as informações de localização de sua unidade ou departamento.

Informe o endereço completo, telefones e e-mails de contato. As informaçõesde localização são exibidas no rodapé do site.

3. Esquemas de Cores

Para alterar o esquema de cores do site, acesse o menu Aparência(1) –Personalizar (2).

Em seguida, clique na aba Esquema de Cores (3) para expandi-la e exibir asopções disponíveis. À direita, será exibida uma prévia do site com o esquema de coresselecionado.

Para salvar a configuração selecionada, clique no botão Salvar & Publicar notopo da coluna da esquerda. Ou clique em Cancelar para descartar as modificações.

4. Layout da Página Principal

O tema UFPel 2.0 permite editar o layout da página principal do site, utilizandomódulos de conteúdo. Este recurso está disponível através do menu na lateralesquerda clicando em Aparência (1) – Opções do tema (2).

Na página Opções do Tema, você encontrará uma coluna na esquerda ondeestão representados os módulos disponíveis para montagem do layout e uma colunana direita onde estão os módulos atualmente ativos no site.

Para adicionar módulos ao layout do site, arraste o módulo desejado da colunada esquerda para a coluna da direita. É possível também reposicionar os módulos nacoluna da direita, na ordem desejada. Para remover um módulo do layout, arraste-opara fora da coluna da direita.

A imagem a seguir exemplifica a adição do módulo Manchete ao layout do site.

O módulo Lista de Posts já está inserido no layout quando você acessa apágina Opções do Tema, pois ele já é ativado no layout por padrão, este módulo exibeos posts mais recentes do site e uma barra lateral de widgets.

A seguir faremos uma descrição de cada módulo disponível para vocêadicionar ao seu site.

4.1. Lista de Posts

Este módulo exibe uma lista paginada dos posts de seu site, e a barra lateral de widgets na coluna da direita. Conforme exemplificação abaixo:

Quando você adiciona o módulo Lista de Posts ao layout (arrastando ele da coluna da esquerda para a direita) você irá notar que uma opção chamada Configurar (1) fica disponível no módulo, clicando nela você acessa o menu de configurações da Lista de Posts.

Na configuração deste módulo, você pode alterar o título que é exibido no cabeçalho da lista de posts.

Porém este módulo além de exibir a lista de posts, também adiciona uma coluna lateral de widgets, onde você poderá adicionar diversos conteúdos, como previsão do tempo, link para a rádio da UFPel, entre outros.

Para definir qual conteúdo deverá ser mostrado nesta coluna lateral, você deveacessar o menu de widgets, indo em Aparência (1) – Widgets (2).

Na página de Widgets, basta arrastar o widget que desejar que apareça emsua barra lateral para a coluna com o título Barra Lateral. No exemplo da figura aseguir, está sendo adiciona o widget Destaques por categoria.

4.2. Imagem de Capa

As imagens de capa podem ser utilizadas para complementar a identidadevisual do site, ou para publicar conteúdo com grande destaque. Este módulo permite aexibição de uma ou mais imagens, tanto na página de entrada do site quanto naspáginas internas.

Para adicionar uma nova imagem de capa, acesse o menu Imagem de Capa(1) – Adicionar nova (2).

Insira a imagem desejada no quadro Imagem Destacada (3), na coluna dadireita. As dimensões ideais da imagem são 984x220 pixels - imagens maiores serãocortadas, a partir do canto superior esquerdo.

O texto do post é opcional. A opção Linkar para o post configura se a imagemdeverá funcionar como um link para o post completo, ao ser exibida no site. A opçãoExibir título sobre a imagem configura se o título do post deverá ser exibido sobre aimagem, no site.

Para ativar a exibição das imagens de capa, acesse a página Opções do Temaatravés dos botões Aparência (1) – Opções do Tema (2)).

Na página Opções do Tema arraste o módulo imagem de capa para a colunado layout, conforme imagem a seguir:

Para configurar as demais opções do módulo, após arrastá-lo para a coluna delayout, clique em Configurar (1).

A seguir apresentamos as características de cada opção:

(1) Número de imagens: Permite escolher quantas imagens devem aparecerem seu site através do módulo Imagem de Capa.(2) Ordem de exibição: Escolha entre exibir as imagens em seu siteordenando pela data (mais recentes antes) ou de modo aleatório (cada acessogera uma ordem diferente).(3) Exibir seletor: Refere-se ao seletor (7) que permite ao usuário trocar asimagens manualmente, conforme exemplo a seguir:

(4) Tempo entre transições (seg): Configure o tempo que leva para atransição entre cada imagem.(5) Efeito de transição: Escolha se a transição entre cada imagem deveocorrer através da movimentação para a direita, para a esquerda ou através defade (uma imagem desaparece enquanto a outra começa a aparecer).(6) Exibir nas páginas internas: Escolha se este módulo deve ser exibidotambém no cabeçalho ou no rodapé de posts e páginas internas do site.

4.3. Carrossel de Banners

Os banners são utilizados para criar links visuais para serviços ou sitesexternos que se deseja dar maior visibilidade no site. Segue exemplo de carrossel debanners:

Para ativar a exibição dos banners no site, adicione o módulo Carrossel deBanners ao layout do site, para isto, acesse o Aparência (1) – Opções do tema (2).

Na página Opções do Tema arraste o módulo carrossel para a coluna dolayout, conforme imagem a seguir:

Para configurar as demais opções do módulo, após arrastá-lo para a coluna delayout, clique em Configurar (1).

Na janela de configuração você pode escolher se deseja também que ocarrossel seja exibido no rodapé ou cabeçalho das páginas internas do site.

Para adicionar banners ao seu carrosel, você deve selecionar a aba Banners (1).

Basta arrastar os banners que desejar para o carrossel para adicioná-los aosite, na imagem a seguir é exemplificado a adição de um banner ao carrossel.

Após arrastar os banners desejados, basta clicar em Salvar Opções parasalvar as alterações.

Note que nesta página existem duas colunas de banners, a BannersInstuticionais e a Banners Próprios. A coluna Banners institucionais contém os bannersdo portal da UFPel e a coluna Banners próprios contém os banners adicionados porvocê. (Você pode adicioná-los clicando em Adicionar novo ao lado do título Bannerspróprios ou clicando no menu lateral da esquerda onde diz Banners (1) – AdicionarNovo (2).

Quando você clicar em Adicionar novo irá abrir uma página para adicionar onovo banner. Para inserir a imagem do banner clique no quadro Imagem Destacada(1), na coluna da direita. A imagem do banner deve possuir as dimensões de 96x66pixels ou 192x132 pixels para melhor resultado em dispositivos com telas de altadefinição.

No campo Link especifique o endereço completo (URL) para o qual o banner deverálinkar (não esqueça o http:// no início). A opção Abrir permite configurar se o linkdeverá ser aberto na mesma janela do site, ou em uma nova janela.

4.4. Destaques

Este módulo exibe os últimos posts da categoria selecionada, com resumo do texto e a respectiva imagem destacada.

Para adicionar este módulo ao seu site, basta ir Aparência (1) – Opções dotema (2).

E quando estiver na página Opções do Tema arrastar o módulo Destaquespara a coluna de layout, conforme imagem a seguir:

Após arrastar o módulo para a coluna de layout, a opção Configurar (1) estarádisponível.

Após clicar em Configurar, a janela de configuração deste módulo será aberta:

A opção Título do bloco (1) refere-se ao título que irá aparecer no cabeçalhodo módulo no site, a opção Categoria (2) refere-se a qual categoria o módulo devebuscar os posts para exibir.

4.5. Manchete

Este módulo exibe o título do post mais recente na categoria selecionada, e é indicado para comunicados importantes.

Para adicioná-la basta ir na página Opções do Tema, disponível em Aparência(1) – Opções do tema (2).

Quando estiver na página Opções do Tema, arraste o módulo Manchete para a coluna de layout, conforme imagem a seguir:

Após arrastar o módulo, você pode acessar as suas configurações através do link Configurar (1).

As opções de configuração são o Título do bloco (1) e a Categoria (2).

A opção Título do bloco (1) refere-se ao título que irá aparecer no cabeçalho do módulo no site, a opção Categoria (2) refere-se a qual categoria o módulo deve buscar a notícia para exibir como manchete.

5. Redes Sociais

Em Aparência (1) – Opções do tema (2), na aba Redes Sociais (3), vocêpode configurar os endereços de sua unidade ou departamento no Facebook, Twitter eGoogle+. Os links serão disponibilizados no site através de ícones no rodapé.

6. Rodapé

O rodapé do site é dividido em 3 colunas, conforme exemplo da imagem aseguir:

A coluna 1 apresenta as informações de localização da unidade (paraconfigurar veja a seção Informações de Localização).

As colunas 2 e 3 são áreas que podem ser utilizadas para exibição deconteúdos diversos. Essas áreas podem ser editadas através do menu Aparência (1)– Widgets (2), conforme imagem a seguir:

Após acessar a área de Widgets, fosse notará que existem duas caixas,Rodapé coluna 2 (1) e Rodapé coluna 3 (2), que correspondem as duas últimascolunas do rodapé.

Para adicionar conteúdo a estas colunas, basta arrastar algum widget paradentro delas. O widget de Texto é a opção mais versátil para adicionar informações àscolunas do rodapé. Outra possibilidade é utilizar o widget de Menu personalizado paradestacar seções importantes do site, ou links externos.

A seguir é apresentado uma imagem exemplificando a adição do widget delinks a coluna Rodapé coluna 2. Note que o widget links é arrastado até a coluna doRodapé.

7. Links Destacados (Widget)

Os links destacados são outra forma de dar maior visibilidade a conteúdosimportantes, utilizando imagens. Os links destacados são exibidos na barra lateral dosite, ficando visíveis em todas as páginas e posts. Conforme exemplo da imagem aseguir:

Para adicionar um novo link destacado, acesse o menu Links Destacados(1) –Adicionar novo (2).

Insira a imagem no quadro Imagem Destacada (3), na coluna da direita.

No campo Link especifique o endereço completo (URL) para o qual a imagemdeverá linkar (não esqueça o http:// no início). Você pode especificar o endereço deum post ou página do próprio site, ou um endereço externo. A opção Abrir permiteconfigurar se o link deverá ser aberto na mesma janela do site, ou em uma novajanela.

Para exibir os links destacados no site, acesse o menu Aparência (1) –Widgets (2).

Arraste o widget Links Destacados à barra lateral (ou outra área de Widgets,como a de rodapé por exemplo). No exemplo a seguir o Widget Link Destacados (1)está sendo arrastado para á area Barra lateral (2).

8. Destaques por categoria (Widget)

Através do widget Destaques por categoria você pode dar destaque especial,na barra lateral do site, para posts arquivados em uma determinada categoria. Essewidget cria uma galeria rotativa com os últimos posts da categoria que vocêespecificar, exibindo a imagem destacada, o título e um resumo do post.

Na imagem a seguir temos um exemplo do widget Destaques por categoria:

Para utilizar o widget, acesse o menu Aparência (1) – Widgets (2).

Na página de Widgets, arraste o Widget Destaques por categoria à barralateral, conforme imagem a seguir:

Na configuração do Widget, selecione a categoria desejada. Você pode criaruma categoria de posts específica para essa função (menu Posts – Categorias) eaplicar essa categoria aos posts que deseja destacar.

9. Páginas sem barra lateral

Nas páginas, é possível ocultar a barra lateral de Widgets e utilizar toda alargura do tema para o conteúdo. Para isso, ao criar ou editar uma página, selecione omodelo Sem barra lateral, no quadro Atributos de página, na coluna da direita datela de edição.

Atualizado em: 03/02/2014

Obtenha a versão mais recente em: http://wp.ufpel.edu.br/tutoriais/

Material elaborado por:

Seção de Tecnologias para WebsitesNúcleo de Sistemas de InformaçãoCoordenação de Tecnologia da Informação – CTI / UFPel

Envie dúvidas, correções ou sugestões para: webmaster@ufpel.edu.br