Sie sind auf Seite 1von 57

Documento que serve como base para a manuteno do site web do Agrupamento de Escolas de Condeixaa-Nova (http://aecondeixa.

pt)

wordpress
Manual de utilizador

Equipa PTE/Condeixa

wordpress 2010/11

ndice
ndice
ndice ................................................................................................................................ 1 ndice de Ilustraes ......................................................................................................... 4 Login ................................................................................................................................. 7 Painel Wordpress.............................................................................................................. 8 Posts.................................................................................................................................. 9 Editar um post ............................................................................................................... 9 Edio rpida de um post ........................................................................................... 10 Eliminar um post ......................................................................................................... 10 Edio .......................................................................................................................... 11 Inserir um novo post ................................................................................................... 11 Categorias ................................................................................................................... 12 Tags ............................................................................................................................. 13 Ordenar categorias(plugin) ......................................................................................... 14 Media .............................................................................................................................. 15 Biblioteca .................................................................................................................... 15 Novo ficheiro............................................................................................................... 18 Links ................................................................................................................................ 19 Adicionar Novo............................................................................................................ 20 Categorias de Links ..................................................................................................... 21 Pginas ............................................................................................................................ 22 Criar uma Nova Pgina................................................................................................ 24 Comentrios ................................................................................................................... 25 Apresentao .................................................................................................................. 26
Pg. 1 Equipa PTE/Condeixa

wordpress 2010/11
Temas .......................................................................................................................... 26 Widgets ....................................................................................................................... 28 Menus ......................................................................................................................... 31 Opes do Graphene .................................................................................................. 33 Opes Mostrar do Graphene .................................................................................... 34 Fundo .......................................................................................................................... 35 Cabealho.................................................................................................................... 35 Editor ........................................................................................................................... 36 Plugins............................................................................................................................. 37 Adicionar Plugin .......................................................................................................... 37 Editor ........................................................................................................................... 38 Utilizadores ..................................................................................................................... 39 Adicionar Novo............................................................................................................ 40 O seu Perfil .................................................................................................................. 40 Ferramentas.................................................................................................................... 41 Importar ...................................................................................................................... 41 Exportar....................................................................................................................... 42 Opes ............................................................................................................................ 43 Escrita .......................................................................................................................... 43 Leitura ......................................................................................................................... 44 Discusso..................................................................................................................... 44 Media .......................................................................................................................... 45 Privacidade.................................................................................................................. 46 Ligaes permanentes ................................................................................................ 46 Anexos ............................................................................................................................ 47 Cabealho (header.php) ............................................................................................. 47
Pg. 2 Equipa PTE/Condeixa

wordpress 2010/11
Rodap (footer.php) ................................................................................................... 51 Style.css (folha de estilos) ........................................................................................... 53

Pg. 3

Equipa PTE/Condeixa

wordpress 2010/11

ndice de Ilustraes
FIGURA 1 JANELA DE ENTRADA NA ADMINISTRAO FIGURA 2 MENU LATERAL FIGURA 3 PAINEL PRINCIPAL DO WORDPRESS FIGURA 4 MENU POSTS FIGURA 5 LISTA DE POSTS EXISTENTES FIGURA 6 EDIO DE POST FIGURA 7 JANELA DE EDIO DE POST FIGURA 8 JANELA DE EDIO RPIDA FIGURA 9 PASTA DOS POSTS ELIMINADOS, FIGURA 10 MENU DE EDIO FIGURA 11 JANELA PARA INSERIR UM POST FIGURA 12 BARRAS DE EDIO NA JANELA DE EDIO/INSERO DE POSTS FIGURA 13 INSERIR NOVA CATEGORIA FIGURA 14 REA DE CATEGORIAS FIGURA 15 JANELA PARA INSERIR, EDITAR TAGS FIGURA 16 ORDENAR CATEGORIAS FIGURA 17 MENU MEDIA FIGURA 18 BIBLIOTECA DE FICHEIROS FIGURA 19 EDIO DE UM FICHEIRO PDF FIGURA 20 EDIO DE UMA IMAGEM FIGURA 21 EDITAR IMAGEM FIGURA 22 REDIMENSIONAR IMAGEM FIGURA 23 INSERIR FICHEIRO NA BIBLIOTECA FIGURA 24 MENU LINKS FIGURA 25 LISTAGEM DE LINKS FIGURA 26 EDIO DE LINK FIGURA 27 NOVO LINK FIGURA 28 GERIR CATEGORIAS DE LINKS FIGURA 29 MENU PGINAS FIGURA 30 LISTAGEM DE PGINAS EXISTENTES FIGURA 31 EDIO DE PGINA FIGURA 32 OPES DE PUBLICAO FIGURA 33 CRIAR NOVA PGINA FIGURA 34 LINK COMENTRIOS FIGURA 35 PGINA DE COMENTRIOS FIGURA 36 MENU APRESENTAO Pg. 4 7 8 8 9 9 9 10 10 11 11 11 12 12 13 13 14 15 15 16 16 17 17 18 19 19 20 20 21 22 22 23 23 24 25 25 26 Equipa PTE/Condeixa

wordpress 2010/11
FIGURA 37 GERIR TEMAS FIGURA 38 INSTALAR TEMAS FIGURA 39 - WIDGETS FIGURA 40 RODAP DO SITE FIGURA 41 WIDGET TEXTO FIGURA 42- LISTAGEM DE CATEGORIAS NO SITE FIGURA 43 WIDGET LINKS FIGURA 44 GOOGLE READER FIGURA 45 WIDGET RSS FIGURA 46 WIDGET NUVEM DE TAGS FIGURA 47 - NUVEM DE TAGS NO SITE FIGURA 48 MENUS E SUBMENUS NO SITE WEB FIGURA 49 JANELA DO MENUS FIGURA 50 BARRA DE CIMA DA JANELA MENU FIGURA 51 LINK PERSONALIZADO FIGURA 52 ADICIONAR CATEGORIA AO MENU FIGURA 53 ADICIONAR PGINA AO MENU FIGURA 54 MENU NO BACKOFFICE FIGURA 55 OPES DO GRAPHENE FIGURA 56 OPES MOSTRAR DO GRAPHENE FIGURA 57 SELECO DE IMAGEM PARA O CABEALHO FIGURA 58 EDITOR DO TEMA FIGURA 59 MENU PLUGIN FIGURA 60 LISTAGEM DE PLUGINS FIGURA 61 JANELA DE INSTALAO DE PLUGINS FIGURA 62 JANELA DE EDIO DE PLUGINS FIGURA 63 MENU DE UTILIZADORES FIGURA 64 LISTAGEM DE UTILIZADORES FIGURA 65 JANELA DO PERFIL DO UTILIZADOR FIGURA 66 JANELA PARA ADICIONAR NOVO UTILIZADOR FIGURA 67- MENU FERRAMENTAS FIGURA 68 INFORMAO DE DUAS FERRAMENTAS DO WORDPRESS FIGURA 69 POSSIBILIDADES DE IMPORTAO NESTE SITE FIGURA 70 EXPORTAR CONTEDO DO PORTAL FIGURA 71 MENU OPES FIGURA 72 REA DE DEFINIES GERAIS FIGURA 73 JANELA DA ESCRITA FIGURA 74 DEFINIES DE LEITURA 26 27 28 28 29 29 29 30 30 31 31 31 31 32 32 32 32 33 34 34 35 36 37 37 38 38 39 39 39 40 41 41 41 42 43 43 44 44

Pg. 5

Equipa PTE/Condeixa

wordpress 2010/11
FIGURA 75 DEFINIES DE DISCUSSO FIGURA 76 OPES DE MEDIA FIGURA 77 DEFINIES DE PRIVACIDADE DO SITE FIGURA 78 DEFINIES DE LIGAES PERMANENTES 45 45 46 46

Pg. 6

Equipa PTE/Condeixa

wordpress 2010/11

Login
Fazer o login de administrao em http://www.aecondeixa.pt/wp-login.php

Figura 1 Janela de entrada na administrao

Pg. 7

Equipa PTE/Condeixa

wordpress 2010/11

Painel Wordpress

Figura 3 Painel principal do wordpress

Pgina de entrada no backoffice do site Aecondeixa.pt. Tem a informao de nmero de posts colocados na pgina principal, nmero de pginas, categorias e tags. Podem-se alterar as opes deste ecr clicando no boto Opes deste ecr. Na barra superior permite a colocao imediata de um novo post, assim como Terminar a sesso. No lado esquerdo surge o menu de navegao do Wordpress onde existem trs blocos: Painel, Gesto dos contedos a visualizar no site e gesto do site a nvel de caractersticas e interface e de ferramentas.

Figura 2 menu lateral

Pg. 8

Equipa PTE/Condeixa

wordpress 2010/11

Posts
Quando se clica no menu posts surge o seguinte submenu na zona lateral.

Na rea principal aparecem os posts inseridos e publicados, com a informao do autor que os publicou, a categoria a que pertencem bem como as tags que possuem.

Figura 4 menu posts

Ainda existe a possibilidade de pesquisar pelos posts existentes, visualizar o nmero total de posta, editar um post e criar um novo post.

Figura 5 Lista de posts existentes

Editar um post
Selecciona-se o post que se deseja editar na lista de posts existentes.

Figura 6 Edio de post

Ao clicar em Editar surge a janela onde se pode editar o post. Para editar este post pode-se utilizar a formatao da janela de edio ou editar o post em html. Edita-se como se fosse um documento word, podendo seleccionar estilos de formatao.
Pg. 9 Equipa PTE/Condeixa

wordpress 2010/11

Figura 7 Janela de edio de post

No esquecer de Actualizar (zona lateral direita) antes de fechar, para que o post fique publicado.

Edio rpida de um post


Selecciona-se o post que se deseja e depois clica-se m edio rpida. Esta edio faz com que o post se desdobre e surja os seguintes lementos:

Figura 8 Janela de edio rpida

Pode-se alteral o ttulo do post, as categorias, as tags, a data de publicao ou mesmo colocar uma password de acesso. No esquecer de Acatualizar antes de sair.

Eliminar um post
Selecciona-se o post que se deseja eliminar na lista de posts existentes. E depois selecciona-se a opo Lixo. Ou opo Editar >> Mover para Lixo. Este post vai directamente para o Lixo (pasta que vai conter os itens eliminados).
Pg. 10 Equipa PTE/Condeixa

wordpress 2010/11
Caso se queira apagar definitivamente ou repor, ento clica-se na pasta Lixo (zona de cima da rea de posts) e selecciona-se a opo pretendida.

Figura 9 Pasta dos posts eliminados,

Edio
Caso se pretenda editar por datas seleccionar o ms pretendido na barra por cima.

Figura 10 menu de edio

Inserir um novo post


Para inserir um post clicar em Novo post (zona lateral esquerda ou na zona superior da listagem de posts)

Figura 11 Janela para inserir um post

Pg. 11

Equipa PTE/Condeixa

wordpress 2010/11
Colocar o ttulo do post. Colocar o texto, tabelas, links e imagens do novo post (ver figura 11). Seleccionar a categoria a que pertence e a tag (caso tenha). No caso da tag, pode-se adicionar uma nova, ou escolher entre as existentes. Para finalizar clicar em publicar. O post fica imediatamente te publicado no site.

Figura 12 Barras de edio na janela de edio/insero de posts

Categorias
Para criar e editar categorias de posts clicar na opo categorias na barra lateral esquerda.

Figura 13 Inserir Nova categoria

Para adicionar uma nova categoria introduzir o seu nome e o seu pai, isto , dizer se uma categoria que est dependente de outra (subcategoria).

Pg. 12

Equipa PTE/Condeixa

wordpress 2010/11
Na zona direita consegue-se ter uma noo das categorias existentes, subcategorias e nmeros de posts publicados em cada. Ao seleccionar uma categoria existente, na zona direita, pode-se editar, fazer uma edio rpida ou eliminar a categoria.

Figura 14 rea de categorias

Tags
Para criar e editar Tags dos posts clicar na opo categorias na barra lateral esquerda.

Figura 15 Janela para inserir, editar tags

A criao de uma tag nova semelhante criao de uma categoria. A edio e eliminao de uma tag tambm se pode fazer da mesma forma que as categorias.

Pg. 13

Equipa PTE/Condeixa

wordpress 2010/11
Ordenar categorias(plugin)
Para ordenar categorias seleccionar a opo na barra lateral esquerda. Surge a seguinte janela:

Figura 16 Ordenar categorias

Para efectuar a ordenao basta seleccionar a categoria desejada e arrast-la para a posio pretendida. Aps essa alterao deve-se clicar em Seleccione para Ordenar Categorias. Para ordenar as subcategorias clicar no boto Ordenar subcategorias, e fazer o mesmo com as categorias para realizar a ordenao.

Pg. 14

Equipa PTE/Condeixa

wordpress 2010/11

Media
Quando se clica no menu Media surge o seguinte submenu na zona lateral.
Figura 17 menu Media

O Wordpress tem uma base de dados onde se podem armazenar ficheiros, desde imagens, ficheiros pdf, etc.

Biblioteca
rea onde esto todos os ficheiros inseridos.

Figura 18 Biblioteca de Ficheiros

Todos os ficheiros inseridos no Media aparecem nesta Biblioteca. Podem-se editar por data, ver apenas as imagens ou mesmo visualizar os ficheiros que no esto directamente anexados a um post ou a uma pgina. Os ficheiros so ordenados por ordem de colocao. Ao seleccionar um ficheiro da Biblioteca pode-se editar, apagar definitivamente ou apenas ver. Ao editar o ficheiro aparece a seguinte janela:

Pg. 15

Equipa PTE/Condeixa

wordpress 2010/11

Figura 19 edio de um ficheiro pdf

Ao editar um ficheiro obtm-se alguma informao sobre o mesmo, podendo alterar o nome, legenda e descrio. Tambm aqui est presente o URL do ficheiro, que bastante til quando se quer colocar como uma hiperligao num post ou numa pgina.

Figura 20 Edio de uma imagem

Pg. 16

Equipa PTE/Condeixa

wordpress 2010/11
Ao editar uma imagem a informao semelhante a um ficheiro acrescenta o facto de se poder colocar texto alternativo (alt em HTML) da imagem. Tem ainda o boto Editar Imagem em baixo do cone representativo da imagem editada.

Figura 21 Editar Imagem

Ao editar a imagem pode-se recortar, rodar para a esquerda ou para a direita, inverter na horizontal e na vertical. Pode-se redimensionar a Imagem, clicando no boto na zona lateral direita.

Figura 22 redimensionar imagem

Pg. 17

Equipa PTE/Condeixa

wordpress 2010/11
Novo ficheiro
Para inserir novo ficheiro clicar na opo desejada, na barra lateral esquerda ou na rea de cima da biblioteca de ficheiros.

Figura 23 Inserir ficheiro na Biblioteca

Selecciona-se o ficheiro que se pretende fazer upload e de seguida clica-se em upload. O ficheiro vai automaticamente para a biblioteca.

No esquecer que o ficheiro no pode ter mais de 2Mb e no pode ter nomes com espaos e pontuao.

Pg. 18

Equipa PTE/Condeixa

wordpress 2010/11

Links
Quando se clica no menu Links surge o seguinte submenu na zona lateral.

Os links funcionam de forma semelhante s categorias dos posts. Se seleccionarmos a opo links temos uma listagem dos links inseridos no site. Tambm se podem visualizar as categorias a que pertencem.

Figura 24 menu Links

Figura 25 Listagem de links

O nome que se d a um link o que vai aparecer no site, o URL o seu endereo na internet, a categoria a que pertence e a sua visibilidade no site tambm possvel ver nesta listagem. Ainda possvel ver apenas algumas categorias de Links ou efectuara a ordenao de outra forma, basta seleccionar a opo pretendida na barra de cima da listagem de links. Pode-se seleccionar um link e editar ou eliminar. Ao editar aparecem as seguintes opes:

Pg. 19

Equipa PTE/Condeixa

wordpress 2010/11

Figura 26 Edio de Link

Pode-se alterar o nome, o URL a descrio do link bem com a categoria a que pertence. Aps as alteraes efectuadas no esquecer de Actualizar Link.

Adicionar Novo
Para inserir novo Link clicar na opo desejada, na barra lateral esquerda ou na rea de cima da listagem de links existentes.

Figura 27 Novo link

Colocar o nome do link (nome com que vai ser visualizado no site), o endereo web (URL), uma pequena descrio e a categoria a que pertence. A categoria de links til pois uma das formas de mostrar os links no site.
Pg. 20 Equipa PTE/Condeixa

wordpress 2010/11
No esquecer de Actualizar Link.

Categorias de Links
Ao clicar na opo Categorias de Links aparece a seguinte rea:

Figura 28 Gerir categorias de Links

Esta opo muito semelhante s categorias dos posts, com a diferena que no se pode criar subcategorias. Pode-se editar, criar ou apagar categorias de links.

Pg. 21

Equipa PTE/Condeixa

wordpress 2010/11

Pginas
Quando se clica no menu Pginas surge o seguinte submenu na zona lateral.
Figura 29 menu Pginas

Esta seco dedicada ao contedo esttico do site. Podem-se visualizar as pginas existentes e clicando faz-se a sua edio.

Figura 30 Listagem de pginas existentes

Esta listagem aparece por ficheiros de 20 em 20, podendo ir alterando na zona superior da listagem:

As pginas principais aparecem com o nome sem um trao antes as restantes so as subpginas da que est acima. Por exemplo SPO subpgina de Agrupamento. Pode-se ainda efectuar uma pesquisa nas pginas existentes, na opo Pesquisar Pginas, acima da listagem Esta pesquisa feita por palavra, isto , procura a palavra digitada no ttulo e contedo das pginas. A manipulao da pginas em tudo semelhante aos posts.

Pg. 22

Equipa PTE/Condeixa

wordpress 2010/11
As opes de edio, edio rpida e lixo funcionam exactamente da mesma forma que nos posts.

Quando se Edita uma pgina, aparece o seguinte ecr:

Figura 31 Edio de Pgina

A forma de trabalhar na pgina idntica dos posts. Na zona lateral direita surgem os atributos da pgina e a as opes de publicao. Nas opes de publicao podemos alterar a visibilidade da pgina, apenas permitindo que certos utilizadores vejam. Pode-se publicar ou no. Alterar a data de publicao. Ou ainda proteger a pgina por password. Ainda se pode mover a pgina para o lixo. Sempre que a pgina estiver pronta a publicar clicar no boto Publicar/Actualizar.

Figura 32 Opes de publicao

Pg. 23

Equipa PTE/Condeixa

wordpress 2010/11
Nos atributos da pgina podemos definir como pgina principal ou atribuir um pai (pgina j existente que funciona como pgina principal). A definio de Ordem pode ser til em alguns modelos do Wordpress que utilizem esta numerao para mostrar os menus no site. Neste Tema especfico os menus so apenas concebidos na rea de Apresentao. Embora se deva definir nas pginas qual a estrutura de menus para termos uma melhor percepo do site.

Criar uma Nova Pgina


Para criar uma nova pgina clicar no boto acima da listagem de pginas existentes ou na barra lateral.

Figura 33 Criar nova pgina

Colocar o nome da pgina e o seu contedo, utilizando o editor do WordPress ou o HTML. Colocar os atributos da pgina e publicar. Tambm aqui se podem adicionar elementos dos media (imagem, som, vdeo, ) de forma anloga aos posts.

Pg. 24

Equipa PTE/Condeixa

wordpress 2010/11

Comentrios
Quando se clica na opo comentrios podem-se gerir os comentrios existentes no site.
Figura 34 Link comentrios

Neste nas opes do tema foi definido que no se aceitavam comentrios da no ter sentido falar desta seco.

Figura 35 Pgina de comentrios

Pg. 25

Equipa PTE/Condeixa

wordpress 2010/11

Apresentao
A opo apresentao a primeira do bloco dedicado gesto do site a nvel de layout e tcnico. Quando se clica no menu Apresentao surge o seguinte submenu na zona lateral.

Figura 36 apresentao

Menu

Temas
Nesta opo podemos gerir os temas instalados bem como procurar outros temas para instalar.

Figura 37 gerir Temas

Esta seco tem uma pequena descrio do tema escolhido bem como do seu autor. Para activar um outro tema, j instalado, basta seleccionar na lista abaixo.

Para instalar um tema seleccionar a opo Instalar Temas e posteriormente pesquisar o tema desejado (esta pesquisa feita on-line)
Pg. 26 Equipa PTE/Condeixa

wordpress 2010/11

Figura 38 Instalar temas

Pode-se fazer uma pesquisa por Termo, Autor ou TAG na caixa respectiva. Na zona de cima ainda se pode Procurar nos Temas em Destaque, Mais recentes ou Actualizados Recentemente. possvel aplicar um filtro ao tema a pesquisar que pode ter a ver com as cores, colunas, Largura, etc. Estes temas so baseados em CSS (Cascading Style Sheet) onde esto definidas certas formataes para tipos de fonte, cores, tipo de pgina, formulrios, etc.

Pg. 27

Equipa PTE/Condeixa

wordpress 2010/11
Widgets

Figura 39 - Widgets

Widgets so funcionalidades que o Wordpress disponibiliza. Consoante o tema instalado as reas de Widgets podem aparecer em locais distintos. No tema instalado temos duas reas: rea do Widget da barra lateral e rea de Widget do Rodap. No est activo a segunda rea, caso estivesse surgiria na zona de rodap do site imediatamente abaixo do ltimo post publicado, na homepage.

Figura 40 Rodap do site

Para colocar uma funcionalidade na rea Lateral basta seleccionar o widget pretendido, dentro dos disponveis, e arrast-lo para a rea do Widget da Barra Lateral. Dentro da prpria barra arrastamos com o rato o widget para a posio pretendida. Consoante o widget que colocamos temos vrias opes que se tm de definir.

Pg. 28

Equipa PTE/Condeixa

wordpress 2010/11
Existem vrios widgets j definidos no Wordpress, bem como no tema graphene, no entanto podem-se adicionar mais atravs da instalao de plugins que os contenham. Neste caso os activos so:

- No caso de TEXTO podemos escrever ou editar em HTML, por exemplo se quisermos colocar uma imagem. Esto sempre disponveis as opes de eliminar, para retirar a funcionalidade da Barra, Fechar e Guardar.

Figura 41 Widget Texto

- O Widget My Category Order um plugin que fui buscar para poder mostrar as categorias e subcategories dos posts colocados na pgina. Tem que se definir as vrias opes.

Figura 42- Listagem de categorias no site

- Links permitem colocar os links que queremos, seleccionando-os dentro das vrias categorias

Pg. 29

Equipa PTE/Condeixa Figura 43 Widget Links

wordpress 2010/11
- RSS (noticias de blogs de departamentos, turmas, cursos, etc. do Agrupamento) Para ir buscar as ltimas notcias utiliza-se o Google reader (da equipa PTE), onde se colocam os blogues que pretendemos obter as notcias, clicando em adicionar inscrio.

Figura 44 Google reader

J est criada uma pasta denominada Notcias do Agrupamento, para onde se arrasta a nova inscrio. Para obter o cdigo rss, a inserir no site, temos que clicar em gerenciar inscries >> Pastas e Tags >> Seleccionar a pasta Notcias do Agrupamento >> Visualizar pgina Pblica, depois seleccionar a opo Feed Atom e copiar o endereo para o RSS. Neste momento esta seco est a funcionar, apenas se tem que adicionar novas inscries caso se pretenda colocar outros blogues.
Figura 45 Widget RSS

Pg. 30

Equipa PTE/Condeixa

wordpress 2010/11
- Nuvem de Tags Permite mostrar os tags, colocados nos posts, em forma de nuvem:

Figura 47 - Nuvem de Tags no site

Figura 46 Widget Nuvem de Tags

- Arquivo Mostra os posts colocados no site por ms de publicao.

Menus
Seco onde se faz a gesto dos menus e submenus, para que eles apaream como

pretendemos no site web.

Figura 48 Menus e submenus no site web

Figura 49 Janela do menus

Pg. 31

Equipa PTE/Condeixa

wordpress 2010/11
Este ema admite um menu que j est criado, para o gerir basta adicionar pginas, categorias ou links personalizados e no esquecer de guardar o menu.

Figura 50 Barra de cima da janela menu

Para se adicionar um link personalizado, por exemplo para as ementas, deve-se colocar o link do Google, onde esto as ementas ena etiqueta colocar o nome com que vai aparecer no menu. No esquecer de clicar em adicionar ao menu.
Figura 51 link personalizado

Para adicionar uma pgina existente ao menu seleccionar na listagem e Adicionar ao menu.

Figura 53 Adicionar pgina ao menu

Para adicionar uma categoria de posts ao menu fazer de forma semelhante s pginas. No esquecer de clicar em adicionar ao menu.

Figura 52 Adicionar categoria ao menu

Pg. 32

Equipa PTE/Condeixa

wordpress 2010/11
Deois de adicionado ao menu a pgina, a categoria ou o link personalizado, arrastar os botes para que o menu fique como o pretendido.

Figura 54 menu no backoffice

No esquecer de clicar em GUARDAR MENU depois das alteraes efectuadas.

Opes do Graphene
Opes especficos deste tema onde nos permite activar/desactivas algumas opes, nomeadamente o slider. Lembro que este Tema tem um slider que aparecia por defeito acima das noticias (posts), mas que se encontra desactivado.

Pg. 33

Equipa PTE/Condeixa

wordpress 2010/11

Figura 55 Opes do Graphene

Opes Mostrar do Graphene


Opes especficos deste tema onde nos permite activar/desactivas algumas opes, nomeadamente mostrar o autor dos posts, comentrios, alterar cores para mais claro, etc.

Figura 56 Opes Mostrar do Graphene

Pg. 34

Equipa PTE/Condeixa

wordpress 2010/11
Fundo
Opo que permite alterar a cor de fundo ou colocar um padro. No nosso caso o fundo est azul-escuro (#033150). A cor pode ser seleccionada ou simplesmente colocar-se a cor no seu cdigo em HTML.

Cabealho
Permite modificar a imagem do cabealho do site. Ter em atenas as medidas 900 x 198 pixeis.

Figura 57 Seleco de imagem para o cabealho

Pg. 35

Equipa PTE/Condeixa

wordpress 2010/11
Editor
Permite editar os ficheiros .php e .css do tema instalado. Para modificar basta seleccionar, na zona lateral direita, o ficheiro a alterar. Depois das alteraes Actualizar ficheiro.

Figura 58 Editor do tema

Antes de fazer qualquer alterao deve fazer um backup de todo o site na opo Ferramentas >> Exportar.

Neste Tema especfico os ficheiros alterados foram: footer.php; header.php e style.css. A negrito esto as alteraes efectuadas, os ficheiros vo em anexo.

Sempre que se faz uma actualizao da verso do wordpress ou do tema deve-se sempre fazer backup de todo o site. Pode acontecer que os ficheiros referidos anteriormente voltem a no ter as alteraes efectuadas.

Pg. 36

Equipa PTE/Condeixa

wordpress 2010/11

Plugins
O menu de plugins permite a insero de plugins no site wordpress. Quando se clica no menu Plugins surge o seguinte submenu na zona lateral.
Figura 59 menu Plugin

Na rea direita aparece a listagem dos plugins instalados bem como possveis actualizaes.

Figura 60 listagem de plugins

Para desactivar ou editar um plugin basta seleccionar a opo desejada e desactivar/editar ou eliminar.

Adicionar Plugin
Para adicionar um plugin clicar na opo Adiccionar Plugin que se encontra no menu ou na listagem de plugins. Ao clicar surge a seguinte janela:

Pg. 37

Equipa PTE/Condeixa

wordpress 2010/11

Figura 61 Janela de Instalao de plugins

Pode-se fazer uma pesquisa por termo, seleccionar os mais recentes ou activar atravs dos tags populares.

Editor
O editor de plugins permite editar os ficheiros html ou php dos plugins instalados. Para tal selecciona-se o plugin a editar, alterar o ficheiro e no fim gravar o ficheiro.

Figura 62 Janela de edio de plugins

Pg. 38

Equipa PTE/Condeixa

wordpress 2010/11

Utilizadores
O menu de Utilizadores permite a insero e edio de utilizadores do site, bem como do backoffice. Quando se clica no menu Utilizadores surge o seguinte submenu na zona lateral.
Figura 63 Menu de Utilizadores

Surge do lado direito a listagem de utilizadores activos. Neste caso apenas existe o admin (Administrador).

Figura 64 Listagem de Utilizadores

Ao editar o utilizador surge uma janela com os seus dados de perfil:

Figura 65 Janela do perfil do Utilizador

Pg. 39

Equipa PTE/Condeixa

wordpress 2010/11
No perfil do utilizador onde se podem alterar algumas das opes pessoais, dados do utilizador, password, etc. Ao fim no esquecer de Actualizar Perfil.

Adicionar Novo
Ao clicar neste boto, na listagem de utilizadores, ou no menu lateral surge a seguinte janela:

Figura 66 Janela para adicionar Novo Utilizador

Permite adicionar um novo utilizador, dando nome, email e password e designar uma determinada funo. Ao fim clicar em Novo Utilizador.

O seu Perfil
Semelhante ao editar, referido anteriormente. Permite editar o perfil de um determinado utilizador.

Pg. 40

Equipa PTE/Condeixa

wordpress 2010/11

Ferramentas
O menu de Ferramentas permite a utilizao de algumas ferramentas na gesto do portal.

Figura 67- menu ferramentas

Na zona lateral direita surge a seguinte informao:

Figura 68 Informao de duas ferramentas do Wordpress

Com algumas funcionalidades do Wordpress.

Importar
Esta opo permite importar dados de outras ferramentas, assim como do prprio wordpress (caso se faa uma cpia de segurana e se pretenda importar)

Figura 69 Possibilidades de importao neste site

Pg. 41

Equipa PTE/Condeixa

wordpress 2010/11
Exportar
Permite exportar o contedo do site. Esta exportao pode ser redefinida tendo em conta um determinado perodo, um determinado autor, tags de posts, tipos de contedo ou estados. Ao transferir o ficheiro o programa solicita um local para se gravar. Esta funcionalidade ptima para ir fazendo cpias de segurana.

Figura 70 exportar contedo do portal

Pg. 42

Equipa PTE/Condeixa

wordpress 2010/11

Opes
No menu de Opes o administrador pode configurar algumas das caractersticas do portal

Quando se clica no menu opes surge a seguinte informao na rea lateral direita do backoffice.

Figura 71 menu opes

Figura 72 rea de definies gerais

Aqui define-se o ttulo do site, subttulo, endereo no wordpress e url do site. Um email de contacto e outras definies gerais como: Formato da data e da hora. Aps as definies editadas no esquecer de Guardar Alteraes.

Escrita
Nesta seco altera-se/edita-se as definies de escrita no backoffice do Wordpress. Como por exemplo o tamanho das notcias colocadas.

Pg. 43

Equipa PTE/Condeixa

wordpress 2010/11

Figura 73 Janela da Escrita

Leitura
Pode-se configurar as opes de leitura do site, isto , a forma como o site aparece ao visitante.

Figura 74 definies de leitura

Discusso
Local onde se configura as opes de discusso, quando utilizadas. Neste caso no se utiliza.

Pg. 44

Equipa PTE/Condeixa

wordpress 2010/11

Figura 75 Definies de discusso

Media
Local onde se define como os media (imagens, ficheiros, etc) introduzido so visveis.

Figura 76 Opes de Media

Pg. 45

Equipa PTE/Condeixa

wordpress 2010/11
Privacidade
Define-se as opes de privacidade do site.

Figura 77 Definies de privacidade do site

Ligaes permanentes
Define-se qual o url para as ligaes permanentes, tais como ligaes a ficheiros pdf, imagens, etc.

Figura 78 definies de ligaes permanentes

Pg. 46

Equipa PTE/Condeixa

wordpress 2010/11

Anexos
Cabealho (header.php)
Neste ficheiro onde se definem os links superiores, onde esto os cones.

<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="content-main"> * * @package WordPress * @subpackage Graphene * @since graphene 1.0 */ ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; bloginfo('charset'); ?>" /> <title><?php graphene_title(); ?></title> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <!--[if lte IE 6]> <style>#container{background:none !important;}</style> <script> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <![endif]--> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); Pg. 47

Strict//EN"

charset=<?php

Equipa PTE/Condeixa

wordpress 2010/11

/* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head><?php flush(); ?> <body <?php body_class(); ?>> <div id="container"> <div id="top-bar">

<div id="rss"> <a href="<?php bloginfo('rss2_url'); ?>" title="<?php esc_attr_e('Subscribe to RSS feed', 'graphene'); ?>" class="rss_link"><span><?php _e('Subscribe to RSS feed', 'graphene'); ?></span></a> <?php do_action('graphene_feed_icon'); ?> </div> <div id="moodle"> <a href="http://agcondeixaanova-m.ccems.pt" target=_blank></a> </div> <div id="mail"> <a href="http://www.gmail.com" target=_blank></a> </div> <div id="gato"> <a href="http://gato.ccems.pt" target=_blank></a> </div> <div id="cno"> <a href="http://cnofernandonamora.blogspot.com" target=_blank></a> </div> <div id="seguranet"> <a href="http://www.seguranet.pt" target=_blank></a> </div> <div id="me"> <a href="http://www.min-edu.pt" target=_blank></a> </div> <div id="mapa"> <a href="http://194.65.231.40/mapa-do-site/"></a>
Pg. 48 Equipa PTE/Condeixa

wordpress 2010/11
</div> <div id="pte"> <a href="https://sites.google.com/a/aecondeixa.pt/pte-aecondeixa/" target=_blank></a> </div>

<?php /** * Retrieves our custom search form. Note that this search form is only used * in the top bar of the theme. Since the theme uses the default wordpress * search form somewhere else, we do not use get_search_form() here. */ ?> <div id="top_search"> <?php get_search_form(); ?> <?php do_action('graphene_top_search'); ?> </div> </div> <?php if ( is_singular() && has_post_thumbnail( $post->ID ) && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH && !get_option('graphene_featured_img_header')) { // Houston, we have a new header image! // Gets only the image url. It's a pain, I know! Wish Wordpress has better options on this one $header_img = get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); $header_img = explode('" class="', $header_img); $header_img = $header_img[0]; $header_img = explode('src="', $header_img); $header_img = $header_img[1]; } else { $header_img = get_header_image(); } /* * Check if the page uses SSL and change HTTP to HTTPS if true * * Currently commented out as it causes more trouble than it fixes. If you want * to use it, just uncomment it. */ /* if (is_ssl() && !stripos($header_img, 'https')){ $header_img = str_replace('http', 'https', $header_img); } */ // Gets the colour for header texts, or if we should display them at all Pg. 49 Equipa PTE/Condeixa

wordpress 2010/11
if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || '' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR)) $style = ' style="display:none;"'; else $style = ' style="color:#' . get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) . ';"'; ?> <div id="header" style="background-image:url(<?php echo $header_img; ?>);"> <?php if (get_option('graphene_link_header_img')) : ?> <a href="<?php echo home_url(); ?>" id="header_img_link" title="<?php esc_attr_e('Go back to the front page', 'graphene'); ?>">&nbsp;</a> <?php endif; ?> <h1 <?php echo $style; ?> class="header_title"><a <?php echo $style; ?> href="<?php echo home_url(); ?>" title="<?php esc_attr_e('Go back to the front page', 'graphene'); ?>"><?php bloginfo('name'); ?></a></h1> <h2 <?php echo $style; ?> class="header_desc"><?php bloginfo('description'); ?></h2> <?php do_action('graphene_header'); ?> </div> <div id="nav"> <!-- BEGIN dynamically generated and highlighted menu --> <?php wp_nav_menu(array('container' => '', 'menu_id' => 'menu', 'menu_class' => 'clearfix', 'fallback_cb' => 'graphene_default_menu', 'depth' => 5, 'theme_location' => 'Header Menu')); ?> <?php do_action('graphene_top_menu'); ?> <!-- END dynamically generated and highlighted menu --> </div> <?php do_action('graphene_before_content'); ?> <div id="content" class="clearfix<?php if (is_page_template('template-onecolumn.php')) {echo ' one_column';} ?>"> <div id="content-main" class="clearfix"> <?php do_action('graphene_top_content'); ?>

Pg. 50

Equipa PTE/Condeixa

wordpress 2010/11
Rodap (footer.php)
Neste ficheiro altera-se a zona de baixo do site.
<?php /** * The template for displaying the footer. * * Closes the <div> for #content and #container, <body> and <html> tags. * * @package WordPress * @subpackage Graphene * @since Graphene 1.0 */ ?> <?php if (is_page_template('template-onecolumn.php')) : ?> </div><!-- #content-main --> <?php endif; ?> </div><!-- #content --> <?php /* Get the footer widget area */ ?> <?php get_template_part('sidebar','footer'); ?> <?php do_action('graphene_before_footer'); ?>

<div id="footer"> <?php if (!get_option('graphene_hide_copyright')) : ?> <div id="copyright" <?php if (!get_option('graphene_show_cc')) {echo 'style="background:none;padding-left:20px;"';} ?>> <?php if (get_option('graphene_copy_text') == '') : ?> <p> <?php _e('&copy; Agrupamento de Escolas de Condeixaa-Nova','graphene'); ?> </p> <?php else : ?> <?php echo stripslashes(get_option('graphene_copy_text')); ?> <?php endif; ?> <?php do_action('graphene_copyright'); ?> </div>
<?php endif; ?> <div id="w3c"> <p>

Pg. 51

Equipa PTE/Condeixa

wordpress 2010/11
<a title="<?php esc_attr_e('Valid XHTML 1.0 Strict', 'graphene'); ?>" href="http://validator.w3.org/check?uri=referer" id="w3c_xhtml"><span><?php _e('Valid XHTML 1.0 Strict', 'graphene'); ?></span></a> <a title="<?php esc_attr_e('Valid CSS', 'graphene'); ?>" href="http://jigsaw.w3.org/cssvalidator/check/referer/" id="w3c_css"><span><?php _e('Valid CSS Level 2.1', 'graphene'); ?></span></a> </p> <?php do_action('graphene_w3c'); ?> </div> <?php /** * This is where the credit for the theme is placed. Please keep the link back * to the author's website. Seriously, developing this awesome theme took a lot * of effort and time, weeks and weeks of voluntary unpaid work. I only ask * that you retain this link here, and you can use and/or modify the theme * however you like to. * * If you still would like to remove the credit, please consider a donation * through Graphene Options page under Appearance in Wordpress admin * to help support the author and future theme development/support. */ ?> <div id="developer"> <p> <?php /* translators: %1$s is the blog title, %2$s is the theme's name, %3$s is the theme's author */ ?> <?php printf(__('%1$s usa o tema %2$s','graphene'), '<a href="'.get_home_url().'">'.get_bloginfo('name').'</a>', '<a href="http://www.khairulsyahir.com/wordpress-dev/graphene-theme">'.ucfirst(get_template()).'</a>'); ?> </p> <?php do_action('graphene_developer'); ?> </div> </div><!-- #footer --> <?php do_action('graphene_after_footer'); ?> </div><!-- #container --> <?php /* Print out Google Analytics code if tracking is enabled */ ?> <?php if (get_option('graphene_show_ga')) : ?> <!-- BEGIN Google Analytics script --> <?php echo stripslashes(get_option('graphene_ga_code')); ?> <!-- END Google Analytics script --> <?php endif; ?> <?php wp_footer(); ?> </body> </html> Pg. 52 Equipa PTE/Condeixa

wordpress 2010/11
Style.css (folha de estilos)
aqui que se altera a posio dos cones da barra de cima. Estes cones devem ser colocados no servidor para que a aplicao os encontre.

/* Theme Name: Graphene Theme URI: http://www.khairul-syahir.com/wordpress-dev/graphene-theme Description: The Graphene theme for Wordpress 3.0 is a stylish, neat, and tight WordPress theme supporting 2 widget areas, with the ability to determine the number of columns to display in the footer widget area. It includes action hooks for greater customisability through child theme, and a jQuery slider for your featured posts. It has built-in Twitter widget, allows for customisable header and background through the WordPress admin, built-in AdSense placement and AddThis social sharing button, supports custom menu with drop-down navigation of up to 5 levels deep, and threaded comments of up to 10 levels deep! A one-column, full-width page template without the sidebar is included. You can hide post parameters, show post author's gravatar, use different widgets for the front page than the rest of the website, and specify font styles for header and content texts. The codes are written so that you can easily override or add functionality to the theme by using your own child theme without altering the parent theme's code. Seriously, there's too many features for this theme to describe them all here! This theme has been tested and confirmed compatible with IE6, IE7, IE8, Mozilla Firefox, Google Chrome, and Safari. Translations included: Malay, Brazilian Portuguese, Spanish, Italian, French, Polish, German, Norwegian, and Chinese. See this <a href="http://www.khairul-syahir.com/wordpress-dev/graphenetheme#changelog">theme's changelog</a>. Version: 1.1.2 Author: Syahir Hakim Author URI: http://www.khairul-syahir.com Tags: black, blue, white, two-columns, right-sidebar, fixed-width, custom-colors, custom-header, custom-background, custom-menu, editor-style, theme-options, threaded-comments, sticky-post, translation-ready License: GNU General Public License, v2 (or newer) License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html */ html,body,h1,h2,h3,h4,h5,h6,p,img,ul,ol,li,form,fieldset{border:0 none;margin:0;padding:0;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ body{ Pg. 53 Equipa PTE/Condeixa

wordpress 2010/11
/* background:url(images/sprite_h.png) left -196px repeat-x #4a4949; */ background:url(images/bg_g.gif) repeat #000 fixed; font:12px arial; } #container{ margin:0 auto; background:url(images/sprite_v.png) left top repeat-y; width:932px; } #top-bar{ height:54px; background:url(images/sprite_h.png) left -196px repeat-x #000; width:900px; margin-left:16px; }

/* #rss a{ margin:13px 0 0 23px; float:left; width:29px; height:29px; background:url(images/sprite_master.png) left top no-repeat; }*/

#moodle a{ margin:13px 0 0 23px; float:left; width:28px; height:20px; background:url(images/moodle.png) left top no-repeat; }

#mail a{ margin:13px 0 0 23px; float:left;


Pg. 54 Equipa PTE/Condeixa

wordpress 2010/11
width:21px; height:20px; background:url(images/mail.png) left top no-repeat; }

#gato a{ margin:13px 0 0 23px; float:left; width:15px; height:20px; background:url(images/gato.png) left top no-repeat; }

#cno a{ margin:13px 0 0 23px; float:left; width:39px; height:20px; background:url(images/cno.png) left top no-repeat; }

#seguranet a{ margin:13px 0 0 23px; float:left; width:19px; height:20px; background:url(images/seguranet.png) left top no-repeat; }

#me a{ margin:13px 0 0 23px; float:left;


Pg. 55 Equipa PTE/Condeixa

wordpress 2010/11
width:30px; height:20px; background:url(images/me.png) left top no-repeat; }

#mapa a{ margin:13px 0 0 23px; float:left; width:26px; height:20px; background:url(images/mapa.png) left top no-repeat; }

#pte a{ margin:13px 0 0 23px; float:left; width:37px; height:20px; background:url(images/pte.png) left top no-repeat; }
#rss span{ display:none; } #top_search{ float:right; width:210px; margin-top:15px; }

Pg. 56

Equipa PTE/Condeixa