wordpress institucional ufpel manual do tema “ufpel 2.0”

Download WordPress Institucional UFPel Manual do tema “UFPel 2.0”

Post on 12-Dec-2016

218 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • GABINETE DO REITOR COORDENAO DE TECNOLOGIA DA INFORMAO NCLEO DE SISTEMAS DE INFORMAO SEO DE TECNOLOGIAS PARA WEBSITES

    WordPress Institucional UFPel Manual do tema UFPel 2.0

    Verso 2.3

    Maio de 2016

  • Sumrio

    Introduo

    1. Configuraes iniciais 1.1. Informaes de contato e localizao 1.2. Redes sociais 1.3. Opes de visualizao 1.4. Esquema de cores

    2. Layout da pgina inicial

    2.1. Mdulo Lista de Posts 2.2. Mdulo Imagem de Capa 2.3. Mdulo Carrossel de Banners 2.4. Mdulo Destaques 2.5. Mdulo Manchete 2.6. Mdulo Pgina Esttica 2.7. Mdulo Vitrine

    3. Widgets

    3.1. reas de widgets 3.2. Widget Links Destacados 3.3. Widget Destaques por categoria 3.4. Widget Arquivo Institucional 3.5. Widget Imagem com Link 3.6. Widget Manchete 3.7. Widget Previso do Tempo 3.8. Widget Rdio Federal FM

    4. Modelo de pgina sem barra lateral

    1

  • Introduo

    UFPel 2.0 um tema para WordPress que implementa os padres atuais de identidade visual da Universidade Federal de Pelotas, recomendado para sites institucionais da UFPel.

    Visando atender as necessidades e especificidades de unidades acadmicas e administrativas, o tema UFPel 2.0 oferece diversas opes de personalizao e adiciona funcionalidades ao WordPress, atravs de novos widgets e tipos de posts.

    Este manual documenta os recursos especficos do tema UFPel 2.0 e suas opes de configurao. Para orientaes gerais sobre o WordPress Institucional, por favor consulte nossos outros guias disponveis em wp.ufpel.edu.br/tutoriais. 1. Configuraes iniciais

    As opes de configurao especficas do tema UFPel 2.0 esto reunidas em uma tela prpria, ilustrada na Figura 1.1. Essa tela de opes acessada atravs do menu Aparncia - Opes do Tema, no painel administrativo do site.

    Figura 1.1: Painel administrativo: (a) menu Aparncia; (b) opo Opes do Tema; (c) aba Localizao.

    1.1. Informaes de contato e localizao

    Atualize as informaes de contato e localizao de sua unidade/departamento, atravs da aba Localizao das Opes do Tema, indicada na Figura 1.1(c).

    As informaes de contato e localizao so exibidas no rodap do site,

    conforme Figura 1.2.

    2

    http://wp.ufpel.edu.br/tutoriais/

  • Figura 1.2: Rodap do site: (a) informaes de localizao; (b) cones de RSS e redes sociais. Caso necessite adicionar outras informaes, poder faz-lo atravs das reas

    de widgets no rodap do site (ver seo 3.1 deste manual).

    1.2. Redes sociais

    Links para as principais redes sociais so disponibilizados atravs de cones na barra inferior do site, indicado na Figura 1.2(b), juntamente com o feed RSS do site.

    Caso possua endereos no Facebook, Twitter ou Google+ relacionados ao seu

    site, poder configur-los na aba Redes Sociais, conforme apresentado na Figura 1.3.

    Figura 1.3: Opes do Tema: (a) aba Redes Sociais; (b) links para redes sociais; (c) imagem padro de compartilhamento; (d) texto padro de compartilhamento.

    3

  • possvel definir tambm uma imagem padro para compartilhamento de posts sem imagens. Faa upload da imagem desejada na biblioteca de mdia e cole o endereo (URL) da imagem no campo indicado na Figura 1.3(c). O texto padro para compartilhamento pode ser definido no campo indicado na Figura 1.3(d).

    1.3. Opes de visualizao

    A aba Personalizar oferece algumas opes gerais de personalizao do tema, conforme apresentado na Figura 1.4.

    Figura 1.4: Opes do Tema: (a) aba Personalizar.

    A Unidade de origem, se especificada, ser exibida no cabealho, acima do ttulo do site.

    A opo Exibir barra do Governo configura se a barra de identidade visual do Governo Federal deve ser exibida no topo do site.

    O Esquema de cores seleciona a cor de destaque utilizada no site. Essa configurao pode ser feita tambm com visualizao em tempo real, conforme apresentado na Seo 1.4, a seguir.

    O quadro CSS Personalizado permite realizar pequenos ajustes em outros aspectos visuais do site, atravs de cdigos CSS.

    4

  • 1.4. Esquema de cores

    Para alterar o esquema de cores do site, acesse o menu Aparncia e a opo Personalizar, conforme indicado na Figura 1.5.

    Figura 1.5: Painel administrativo: (a) menu Aparncia; (b) opo Personalizar. A Figura 1.6 apresenta a tela de personalizao do tema. Clique na aba

    Esquema de Cores, destacada na Figura 1.6(a), para exibir as opes disponveis. direita, ser exibida uma prvia do site com o esquema de cores selecionado.

    Para salvar a configurao selecionada, clique no boto Salvar & Publicar no

    topo da coluna da esquerda. Ou clique no X para descartar as alteraes.

    Figura 1.6: Personalizao do tema: (a) opo Esquema de cores; (b) boto Salvar & Publicar; (c) boto fechar/cancelar.

    5

  • 2. Layout da pgina inicial

    O tema UFPel 2.0 permite editar o layout da pgina principal do site de forma visual, utilizando mdulos de contedo. Este recurso est disponvel na aba Layout, na tela de Opes do Tema.

    A tela de layout apresenta duas colunas, conforme ilustrado na Figura 2.1: na

    coluna da esquerda encontram-se os mdulos disponveis para montagem do layout; na coluna na direita esto os mdulos atualmente ativos no site.

    Figura 2.1: Opes do Tema - Layout: (a) mdulos de contedo disponveis; (b) layout ativo no site; (c) mdulo sendo adicionado; (d) acesso configurao do mdulo.

    Para adicionar mdulos ao layout do site, clique e arraste o mdulo desejado

    da coluna da esquerda para a coluna da direita. possvel tambm reposicionar os mdulos na coluna da direita, na ordem desejada. Para remover um mdulo do layout, arraste-o para fora da coluna da direita.

    Os mdulos ativos no site podem ser configurados ao clicar no link Configurar

    de cada mdulo, como indicado na Figura 2.1(d). Para salvar as alteraes, clique no boto Salvar Opes. A seguir sero apresentados os mdulos de contedo disponveis, e suas

    opes de configurao.

    6

  • 2.1. Mdulo Lista de Posts

    O mdulo Lista de Posts inserido por padro no layout quando o site criado. Este mdulo exibe os posts mais recentes do site e a barra lateral de widgets na coluna da direita, conforme ilustrado na Figura 2.2.

    Figura 2.2: Site de exemplo: (a) ttulo da lista de posts; (b) lista de posts; (c) barra lateral de widgets. A Figura 2.3 ilustra a configurao do mdulo. O Ttulo do bloco especifica o

    ttulo exibido no cabealho da lista de posts no site (Fig. 2.2(b)). A opo Exibir seleciona a exibio do texto completo ou apenas o resumo de cada post na lista.

    Figura 2.3: Opes do Tema - Layout: (a) link de configurao do mdulo; (b) opes de configurao.

    Para salvar alteraes, clique no boto Salvar na janela de configurao e,

    aps, no boto Salvar Opes na tela de layout.

    7

  • 2.2. Mdulo Imagem de Capa

    As imagens de capa podem ser utilizadas para complementar a identidade visual do site, ou para publicar contedo com grande destaque. Este mdulo permite a exibio de uma ou mais imagens, tanto na pgina de entrada do site quanto nas pginas internas.

    A Figura 2.4 demonstra a aplicao do mdulo Imagem de Capa no site,

    destacando o seletor e a barra de ttulo sobre a imagem, ambos opcionais.

    Figura 2.4: Site de exemplo: (a) imagem de capa; (b) seletor de imagens; (c) ttulo da imagem. A Figura 2.5 apresenta a janela de configurao do mdulo.

    Figura 2.5: Opes de configurao do mdulo Imagem de Capa.

    8

  • O mdulo Imagem de Capa possui as seguintes opes de configurao: (a) Nmero de imagens: seleciona quantas imagens sero exibidas no site; (b) Ordem de exibio: permite exibir as imagens em ordem cronolgica

    (mais recentes antes) ou aleatria (cada acesso gera uma ordem diferente); (c) Exibir seletor: seleciona se deve ou no ser exibido o seletor, que permite

    ao visitante do site trocar as imagens manualmente; (d) Tempo entre transies (seg): configura o tempo, em segundos, que cada

    imagem fica visvel; (e) Efeito de transio: seleciona se a transio entre as imagens deve ocorrer

    atravs de deslocamento para a direita, para a esquerda ou atravs de fade (uma imagem desaparece enquanto a outra comea a surgir);

    (f) Exibir nas pginas internas: configura se o mdulo deve ser exibido tambm no cabealho ou no rodap de posts e pginas internas do site.

    Para salvar as configuraes clique em Salvar na janela de configurao e,

    aps, no boto Salvar Opes na tela de layout. As imagens a serem exibidas no site devem ser adicionadas atravs do menu

    Imagem de Capa Adicionar nova. Esta pgina apresentada na Figura 2.6.

    Figura 2.6: Imagem de Capa - Adicionar Nova: (a) inserir Imagem de Capa; (b) quadro de Propriedades; (c) boto Publicar.

    Adicione a imagem desejada clicando em Inserir Imagem de Capa, indicado na

    Figura 2.6(a), ou utilize uma das imagens sugeridas, clicando sobre ela.

    9

  • No quadro Propriedades, indicado na Figura 2.6(b), encontram-se opes adicionais de configurao. Marque a opo Exibir ttulo sobre a imagem se desejar que o ttulo desta imagem seja exibido sobre ela, no site