[ CSS ]

Home » CSS » Conceitos CSS para WordPress
Inscreva-se em nosso canal no Youtube Daviwp


Conceitos CSS para WordPress

01/07/2011 CSS | WordPress (1) comentário

WordPress depende muito da apresentação dentro de estilos CSS. Com o uso de temas , você tem uma escolha quase infinita de opções de layout. Temas WordPress torná-lo fácil de mudar o seu olhar do Web site, e abrir o campo para ajudá-lo a criar seu próprio tema e layout de página.

CSS significa Cascading Style Sheets . Ele permite que você armazene informações de apresentação de estilo (como cores e layout) separada da sua estrutura HTML. Isto permite o controle preciso do layout do seu site e faz suas páginas mais rápido e mais fácil de atualizar.

Este artigo descreve brevemente o uso de CSS na WordPress, e lista algumas referências para mais informações. Para obter informações sobre CSS em si, ver Know Your Sources # CSS .

WordPress e CSS

WordPress Temas usar uma combinação de arquivos de modelo , tags de template , e arquivos CSS para gerar olhar o site do WordPress.

Arquivos de modelo
Arquivos de modelo são os blocos que se unem para criar seu site. Na estrutura Tema WordPress , o cabeçalho, sidebar, conteúdo e rodapé estão todos contidos dentro de arquivos individuais. Eles se juntam para criar sua página. Isso permite que você personalizar os blocos de construção. Por exemplo, no tema padrão do WordPress, a visão multi-pós encontrado na primeira página, categoria, arquivos , e busca páginas da web em seu site, a barra lateral está presente. Clique em qualquer post, você será levado para o ponto de vista único post e na barra lateral vai ter desaparecido. Você pode escolher que partes e peças aparecem na sua página, e personalizá-los individualmente, permitindo um cabeçalho diferente ou barra lateral para aparecer em todas as páginas dentro de uma categoria específica. E muito mais. Para uma introdução mais ampla de modelos, ver Entrando Templates .
Tag modelo
Tags de template são os bits de código que fornecem instruções e pedidos de informações armazenadas no banco de dados WordPress. Alguns destes são altamente configurável, permitindo que você personalize a data, hora, listas e outros elementos exibidos em seu site. Você pode aprender mais sobre tags de template no Entrando Tags de modelo .
Stylesheet
O arquivo CSS é onde tudo vem junto. Em cada arquivo de modelo no seu site há elementos HTML acondicionada em torno de suas tags de template e conteúdo. Na folha de estilo dentro de cada tema são regras para controlar o design e layout de cada elemento HTML. Sem estas instruções, sua página de simplesmente olhar como uma longa página digitada. Com estas instruções, você pode mover o bloco de construção de estruturas ao redor, fazendo seu cabeçalho muito longo e cheio de gráficos ou fotografias, ou simples e estreito. Seu site pode “flutuar” no meio da tela do espectador com o espaço à esquerda e à direita, esticar ou em toda a tela, preenchendo toda a página. Sua barra lateral pode ser à direita ou à esquerda, ou até mesmo iniciar a meio caminho para baixo a página. Como você estilo de sua página é até você. Mas as instruções para o estilo são encontradas no style.css arquivo dentro de cada pasta Theme.

WordPress Gerado Classes

Várias classes para alinhar as imagens e os elementos do bloco ( div , p , mesa , etc) foram introduzidas em WordPress 2.5: aligncenter , alignleft e AlignRight . Além disso, a classe alignnone é adicionado a imagens que não estão alinhados, de modo que pode ser denominado de forma diferente, se necessário.

As mesmas classes são usadas para alinhar imagens que ter uma legenda (em WordPress 2.6). Três classes CSS adicionais são necessários para as legendas, em conjunto as classes de alinhamento e de legenda são:

/ * = WordPress Núcleo --------------------------------------------- ----------------- * / alignnone {margin: 5px 20px 20px 0;}.. aligncenter, div.aligncenter {display: block; margin: 5px 5px auto auto;}. AlignRight {float: right; margin: 5px 0 20px 20px;} alignleft {float: left; margin: 5px 20px 20px 0;}. aligncenter {display: block; margin: 5px 5px auto auto;}. img.alignright uma bóia { : right; margin: 5px 0 20px 20px;} uma img.alignnone {margin: 5px 20px 20px 0;} {flutuar uma img.alignleft: left; margin: 5px 20px 20px 0;} uma img.aligncenter {display: block; margin-left: auto; margin-right:. auto} wp-caption {background: # fff; border: 1px solid # f0f0f0; max-width: 96% / * Imagem não transborde a área de conteúdo * / padding: 5px 3px 10px; text-align:. center;} wp-caption.alignnone {margin:. 5px 20px 20px 0;} wp-caption.alignleft {margin:. 5px 20px 20px 0;} wp-caption.alignright {margin: 5px 0 20px 20px;} wp-caption img {border:. 0 none; height: auto; margin: 0; max-width: 98,5%; padding: 0; width:. auto;} wp-caption p.wp-legenda- texto {font-size: 11px; line-height: 17px; margin: 0; padding: 0 5px 4px;}
Cada tema deve ter estes ou estilos semelhantes em seu style.css arquivo para ser capaz de exibir imagens e legendas corretamente. Os elementos HTML exata e os valores de classe e ID dependerá da estrutura do tema que você está usando.

Templates e CSS

Para ajudar você a entender mais sobre como funciona CSS em relação a sua página web, você pode querer ler alguns dos artigos citados nestas listas:

  • Usando Temas – Há também muitos artigos avançados nessa lista.
  • Modelos – Lista completa dos WordPress Tema e artigos Template.
  • Tema Desenvolvimento – WordPress Tema guia de Desenvolvimento e os padrões de código.

WordPress Ajuda layout

Se você está tendo alguns problemas ou perguntas sobre o seu tema WordPress ou o seu layout, comece por verificar o site do autor do tema para ver se há uma atualização ou respostas às suas perguntas. Aqui estão alguns outros recursos:

CSS Recursos

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.

  • It’s woendrful to have you on our side, haha!