Converter template blogger para wordpress

Disponível somente no TrabalhosFeitos
  • Páginas : 9 (2105 palavras )
  • Download(s) : 0
  • Publicado : 19 de novembro de 2012
Ler documento completo
Amostra do texto
Convertendo tema do Wordpress para o Blogger
Isto é que o você vai precisar para converter o tema:
• Faça o download do tema que será convertido aqui e guarde o link da visualização do tema(é o décimo segundo, de cima para baixo - GreenDark)
• Se você ainda não tem, baixe um editor de HTML. Recomendo o MAX's HTML Beauty++
• Baixe o Firebug, uma extensão indispensável do Firefox(ou seja, use o Firefox). Este item é muito importante, pois o Firebug nos dá uma visão rápida e clara da hierarquia da div's e classes.
• Providencie um local para guardar as imagens: recomendo o TinyPic, que ao contrário do ImageShack e do Photobucket, nunca me deixou na mão.
• Crie um blog só para isso, assim você não perde nada importante e pode errar à vontade. Coloque nele algumconteúdo falso, para poder visualizar bem as mudanças que irá fazendo. Você pode criar posts só com Lorem Ipsum. Copie e cole trechos deste texto sem sentido, para enxertar conteúdo no blog vazio. Crie lista para a sidebar, umas tres de preferência.
Faça o download do tema GreenDark e descompacte o arquivo em seu computador. Ao descompactar, você verá uma pasta com as imagens utilizadas no template,alguns arquivos em php e um arquivo CSS, denominado style. Abra este arquivo no editor de HTML . Neste arquivo encontra-se todo o estilo da página: fontes, cores, alinhamentos, espaços, largura das colunas, etc. O correspondente a estes códigos no HTML nós iremos acompanhar com o Firebug, Se você não usa o Firefox e nem pretende usar, visualize o html da página clicando com o botão direito, códigofonte.

Abra o demo do tema em uma aba do seu navegador e visualize a hierarquia das div's e classes com o Firebug:
[pic]

Note que quando você coloca o cursor sobre o nome de uma Div, ou Class, o espaço correspondente se destaca no template, em azul. Isto dá uma visão muito clara das correspondências e dimensões de cada elemento.

Mas, primeiro, vamos passar para o Blogger o documento CSSdo tema do Wordpress. Muitas pessoas, quando fazem conversões, utilizam os nomes dos seletores originais do tema convertido. Penso que isso dificulta bastante o usuário do Blogger a fazer modificações futuras, pois não encontrará denominações correspondentes em nenhum tutorial de ajuda. Por exemplo, se no tema do wordpress a div main-wrapper é chamada SCC, eu mantenho o nome main-wrapper, apenasaltero os códigos como manda o arquivo style.

Só para relembrar, a sintaxe de uma regra CSS é esta:

seletor{propriedade: valor }

O que faço é manter, tanto quanto possível, os seletores originais do Blogger.

1- Body e Outer-Wrapper

Abra o arquivo style no editor html. Logo no topo você encontrará os créditos do template. Sempre se certifique se o autor permite alterações no tema.Sempre mantenha os créditos! Copie todo o trecho e cole junto aos créditos originais do seu template (escolha o Mínima):

[pic]

Agora copie todo o trecho que vai de * {margin: 0;padding: 0;} até a {color: #728fa1;font-weight: bold;} do documento style, e cole, substituindo todos estes do seu blog:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

O que estamos fazendo é substituir um estilo por outro, apenas isso. Note que body do tema wordpress pede uma imagem defundo:

background: url(images/background.gif) repeat-x top #fff;

Esta imagem se encontra na pasta Images, com o mesmo nome: background. Hospede a imagem e coloque o link entre os parenteses.

Logo abaixo no documento style, você verá:

#wrapper {
width: 900px;
margin: 0 auto;
text-align: left;
}

Usando o Firebug você notará que esta div vem logo após body e que o correspondente...
tracking img