aula 02 - wordpress

segundo dia

EmentaEmenta

Primeiro dia: Introdução e visão geral

Segundo dia: Template

Terceiro dia: Blogando

Quarto dia: Criando páginas e Links

Quinto dia: Gerenciando e Comentando

Neste diaNeste dia

Templates

Conhecer e aplicar os Temas disponíveis

Aplicar Complementos

Alterar opções

Acesse sua conta

Acesse a sua conta no WordPress: www.wordpress.com.

Caso contrário deverá fazer o login com seu nome de usuário e senha, não o nome do blog, o seu nome de usuário e sua senha.

Caso você tenha ativado a caixa “Lembrar minha senha” (Remember me) sua entrada será automática.

Acesse sua conta

Altere o idioma para “Português do Brasil”.

Acesse a área administrativa do Blog

Clique em “Meu painel de controle” para ter acesso às ferramentas de administração do seu blog.

Acesse a área de controle da aparência

Clique em “Aparência” para ter acesso às opções que alteram a forma como o seu Blog é exibido.

Conhecendo os temas disponíveis

Nesta etapa você irá conhecer os Templates disponíveis, navegará entre as opções prontas, ativará algumas e reconhecerá as diferenças entre elas.

Páginas com mais temas disponíveis.

Tema atual e suas possibilidades de edição.

Ativando um tema disponível

Localize o tema “Benevolence”, na página 1, e dê um clique na imagem para abrir a imagem de ativação.

Clique na imagem ou no nome do tema para abrir a ampliação e poder ativar.

Descrição do tema.

Filtros de pesquisa.


Observe o botão de fechar o tema sem ativar.Dê um clique no link “Ativar “Benevolence””.

Botão para fechar o tema sem ativá-lo.


O tema é selecionado e a página retorna automaticamente para a área administrativa, indicando o sucesso da operação.Observe as opções de edição automática que este tema disponibiliza.


Localize a opção “DePo Masthead”, ative-a e observe que suas opções de edição são diferentes.

Dica: layout e conteúdoDica: layout e conteúdo

Você poderá repetir este procedimento sempre que desejar, sem perder o conteúdo do seu Blog:

Layout e conteúdo são independentes no WordPress.

Dica: buscar por um layout específico

Se desejar buscar algum layout mais específico, clique na seta da caixa “mostrar todos os temas”, observe as opções disponíveis com a barra de rolagem, clique na opção desejada e em seguida, clique no botão “Filter”.

Ativando o tema utilizado no curso

Dê um clique na seta da caixa “mostrar todos os temas”. Clique na opção “Blue” e em seguida clique no botão “Filter”. Localize a opção “Contempt” e ative-a.

Ativando Complementos

Dê um clique na opção “Complementos”.Esta seção mostra os assessórios que estão disponíveis e os utilizados em seu layout.

Nome do complemento.

Link de ativação do complemento.

Descrição do complemento.

Ativando Complementos

Ative os Complementos indicados acima.Localize o nome do Complemento a ser ativado e clique no respectivo link “Adicionar”.Ao final, clique no botão “Salvar Mudanças”

Editando um complemento: Text

Dê um clique no botão “Edit” do complemento “Text”.


Digite o texto acima, não é necessário mudar de linha, digite na sequência. Em seguida, clique no botão “Alterar”

<a href="http://internetnaeducacao.blogspot.com/" target="_blank“><img src="http://photos1.blogger.com/blogger/4323/2700/1600/seloComunidade.jpg" alt="selo da comunidade Blogs Educativos" width="180" height="158" /></a>


Dê um clique no botão “Salvar alterações” para salvar sua alteração. Em seguida clique em “ver o site”.


Este é o resultado, a imagem está inserida e, se clicada, levará você ao site da comunidade Blogs Educativos. Não é necessário clicar. Volte à página anterior utilizando a seta do navegador, conforme indicado na imagem acima.

ou

firefox 3.0

internet explorer 7.0

Resultado da caixa de texto

alterada

Dica: edição de complementosDica: edição de complementos

Para editar um complemento (widget), basta ativá-lo e clicar no link “editar”.

Cada controle possui suas próprias opções de edição.

Para que a mudança tenha efeito, você deve clicar novamente no botão “Salvar mudanças”.

Dica: edição de caixa de textoDica: edição de caixa de texto

Código HTML/XHTML pode ser inserido em caixas de texto.

Códigos mais complexos, como por exemplo <object> de vídeo do Youtube, não deram resultado.

Na dúvida: faça o teste. Coloque o código que deseja testar, salve, visualize no navegador o resultado.

Para saber mais sobre HTML/XHTML, visite:http://www.w3schools.com/xhtml/default.asp

Configurando opções Extras

Dê um clique na opção “Extras”.Deixe as caixas conforme indicado na figura e clique no botão “Atualizar extras”.

Dica: Snap Shot

Snap Shots são pequeno quadros que se abrem em todos os seus links, para que o visitante tenha uma pré-visualização do conteúdo do link

Resultado obtido nos links do seu Blog com a opção “Snap Shot” ativa.

Dica: Esconder links relacionados

Quando ativa, esta opção faz com que seus Posts não possam ser visíveis em outros blogs, impossibilitando que terceiros obtenham tráfego com suas postagens.

Configurando a imagem de cabeçalho

Dê um clique na opção “Imagem de Cabeçalho Personalizada”. Nesta seção, você pode trocar a imagem de cabeçalho além de outras edições.

Pré-visualização da imagem atual.

Opções de edição

simples.

Opções para o carregamento

de uma nova imagem.


Este é o resultado da imagem de cabeçalho com as configurações originais do tema escolhido.


Dê um clique no botão “Selecione uma Cor de Texto”. Clique na cor da janela e observe o resultado (repita o procedimento se desejar outra cor). Em seguida clique novamente no botão “Selecione uma Cor de Texto” para fechar a janela de cores.

Dica: salvando a cor do texto alterada

Você pode salvar a mudança clicando no botão “Salvar Mudança”, mesmo que a janela de cores ainda esteja aberta.


Dê um clique no botão “Esconder texto” e observe o resultado. Em seguida clique no botão “Salvar mudanças”.

Dica: para voltar o texto escondido

Se quiser que o texto original apareça novamente, dê um clique no botão “Mostrar texto”.


Dê um clique no botão “Escolher arquivo”, escolha o arquivo “imagem_superior_texto_az.jpg”. Em seguida clique no botão “Enviar”.


Aguarde até que a imagem tenha sido enviada.Dê um clique com o botão direito do mouse no botão “Visite o Site” para visualizar o Blog em uma nova guia, aba ou página, conforme o seu navegador.

Chrome

FireFox 3

Internet Explorer 7


Este é o resultado obtido das configurações feitas neste segundo dia.

Dica: observe o tamanho da imagem

Cada Tema possui um tamanho diferente de imagem de cabeçalho.

Dica: trabalhar com abas (ou guias)Dica: trabalhar com abas (ou guias)

Procure trabalhar com guias (ou abas) do seu navegador. Mantenha uma aba do navegador com a página administrativa do seu Blog e outra aba com o Blog propriamente dito. Faça suas alterações na área administrativa, clique na aba do Blog e pressione a tecla F5 (ou o comando de atualizar janela equivalente).

Alguns navegadores que possuem navegação por abas: Chrome FireFox Internet Explorer 7

Uma alternativa é trabalhar com 2 janelas abertas de navegador, uma com a área administrativa e outra com o blog. Altere na área de administração, clique na janela do Blog e atualize a visualização (F5).

Dica: para promover novas alterações

Clique novamente na opção “Imagem de Cabeçalho Personalizada”. Envie uma nova imagem ou clique no botão “Restaurar cabeçalho original” para começar do modelo original do tema.

Lembrete: botão “Salvar mudanças”

Lembre-se de clicar no botão “Salvar mudanças” para poder registrar as alterações realizadas.

Dica: programa grátis e online de edição de imagens

Um programa free, online e profissional de edição de imagens: https://www.photoshop.com/express

Próximo encontroPróximo encontro

Dar a sua cara ao blog é extremamente importante. A próxima etapa será inserir o seu conteúdo. Este será o tema do próximo encontro!! até lá!!

aula 02 - wordpress

Education