Manual Wordpress

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
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.
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).
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.
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)
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'); ?>" />  <?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>
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'); ?>"> </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">  <?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'); ?>  </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> <?php endif; ?> </div> <?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('© 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> <?php do_action('graphene_after_footer'); ?> </div> <?php /* Print out Google Analytics code if tracking is enabled */ ?> <?php if (get_option('graphene_show_ga')) : ?>  <?php echo stripslashes(get_option('graphene_ga_code')); ?>  <?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;

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;

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

Manual Wordpress

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Wordpress

Uploaded by

Copyright:

Available Formats

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

Figura 1 Janela de entrada na administrao

Figura 3 Painel principal do wordpress

Figura 2 menu lateral

Figura 4 menu posts

Figura 5 Lista de posts existentes

Figura 6 Edio de post

Figura 7 Janela de edio de post

Edio rpida de um post

Figura 8 Janela de edio rpida

Figura 9 Pasta dos posts eliminados,

Figura 10 menu de edio

Inserir um novo post

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 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 30 Listagem de pginas existentes

Quando se Edita uma pgina, aparece o seguinte ecr:

Figura 31 Edio de Pgina

Figura 32 Opes de publicao

Criar uma Nova Pgina

Figura 33 Criar nova pgina

Figura 35 Pgina de comentrios

Figura 37 gerir Temas

Figura 38 Instalar temas

Figura 40 Rodap do site

Figura 41 Widget Texto

Figura 42- Listagem de categorias no site

Equipa PTE/Condeixa Figura 43 Widget Links

Figura 44 Google reader

Figura 47 - Nuvem de Tags no site

Figura 46 Widget Nuvem de Tags

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

pretendemos no site web.

Figura 48 Menus e submenus no site web

Figura 49 Janela do menus

Figura 50 Barra de cima da janela menu

Figura 53 Adicionar pgina ao menu

Figura 52 Adicionar categoria ao menu

Figura 54 menu no backoffice

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

Figura 55 Opes do Graphene

Opes Mostrar do Graphene

Figura 56 Opes Mostrar do Graphene

Figura 57 Seleco de imagem para o cabealho

Figura 58 Editor do tema

Figura 60 listagem de plugins

Figura 61 Janela de Instalao de plugins

Figura 62 Janela de edio de plugins

Figura 64 Listagem de Utilizadores