CSS + Wordpress + HTML + Validação

Mensagem por Yeltsin Lima às 1 maio, 2008

3 comentários

Esta mensagem está na categoria: [ Geral ]

Eu não sou profissional em CSS. Mas, o básico que sei resolvi compartilhar com vocês. Tem muita gente usando ainda tabelas, e deixando seus sites lentos, inacessível e não-aprovados… Aqui você vai aprender como usar os conceitos de tableless.

Em conjunto com o essa matéria, você também irá aprender a criar tema para Wordpress, HTML e Validando um site.

Não vou dividi-lá em tópicos e, sim em páginas (como o IDGNow!)

Material Necessário:

Recomendo que vocês baixem a última versão do Wordpress. Nela vocês irão encontrar o tema Default, trabalharemos com o código-fonte dele. Você pode optar por baixar o tema por aqui: Tema Default.

As páginas principais são:

index.php - É o conteúdo da página, os posts, e o resto fica aqui.

header.php - É o cabeçalho da página, aqui fica informações como o Feed, etc…

footer.php - É o rodapé da pagina. Você pode colocar seu copyright, suas informações de privacidade, etc…

style.css - É o estilo da página.

Sem essas páginas seu tema não será exibido. Existem algumas outras páginas que são opcionais, como a 404.php, archive.php, archives.php, comments.php, comments-popup.php, functions.php, image.php, links.php, page.php, search.php, searchform.php, sidebar.php, single.php

Ensinarei a editar todas elas. Infelizmente não sei se a função de código irá funcionar, então terei que colocar uma imagem…

Wordpress

Primeiro abra um novo documento no seu editor de códigos. Pode ser o bloco de notas também. O nome dele será:

Header

Salve ele como header.php. Irei colocar nele o básico de todos os blogs:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Arquivo do Blog <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="website">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

Explico o que significa cada tag.

<?php language_attributes(); ?>

Segundo o W3C, você é obrigado a colocar o idioma utilizado no site. Assim tornando seu site válido.

<head profile="http://gmpg.org/xfn/11">

São os famosos “amigos”. Quando você coloca uma referência à algum site de algum amigo seu, parente, etc… Ou então seu próprio site, ele faz uma referência à esse site.

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

É o Charset. Se você colocar o Charset errado seu site pode ao invés de exibir as letras acentuadas, ele exibe interrogações ou quadrados.

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Arquivo do Blog <?php } ?> <?php wp_title(); ?></title>

É o título do site. O bloginfo(’name’) é o nome do seu blog. Ele exibirá mais ou menos como meu blog. Nome-do-blog | Título-da-mensagem

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

É utilizado para exibir o style.css. Sem ele seu site carregará sem estilo.

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

É utilizado para exibir o rss do seu blog. Mais tarde irei explicar os termos utilizados nessa matéria.

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

É utilizado para exibir o link do pingback do seu blog. Pode ser utilizados para criação e utilização em APIs.

<?php wp_head(); ?>

Define que aqui é o “cabeçalho” do seu blog.

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

A função get_option(’home’) pega o link do início do seu blog. Por exemplo, se o visitante está em algum post e clicar aí, ele será redirecionado para a página principal do blog. A função bloginfo(’name’) pega o nome do seu blog. Você pode alterar o nome do seu blog nas configurações do Wordpress.

<h2><?php bloginfo('description'); ?></h2>

bloginfo(’description’) serve exatamente para exibir a descrição do seu blog, que também pode ser alterada nas configurações do Wordpress.

Agora vamos ao index.php que é o conteúdo da sua página.

Index

Aqui está o código do index.php:

<?php get_header(); ?><div id="conteudo">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Link para <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="mensagem">
<?php the_content('Ler o resto da mensagem »'); ?>
</div>
<p class="postmeta"><?php the_tags('Tags: ', ', ', '<br />'); ?> Postado em <?php the_category(', ') ?> | <?php edit_post_link('Editar', '', ' | '); ?>  <?php comments_popup_link('0 comentários »', '1 comentário »', '% comentários »'); ?></p>
</div>
<?php endwhile; ?>
<div class="navegacao">
<div class="alignleft"><?php next_posts_link('« Antigas') ?></div>
<div class="alignright"><?php previous_posts_link('Novas »') ?></div>
</div>
<?php else : ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

Explicando as tags.

<?php if (have_posts()) : ?>

Se tiver post ele mostra:

<?php while (have_posts()) : the_post(); ?>

O post.

<?php the_ID(); ?>

O ID do post. Cada post tem seu ID. Por exemplo, o ID deste post é 825.

 <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Link para <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

O the_permalink é o link fixo do seu post. Por exemplo, o link permanente do post sobre Crimes no Brasil é: http://site.com.br/post/crimes-brasil/ O the_title_attribute é o título que você definiu para o post. Porém é usado apenas no código. O título que será exibido para as pessoas é mostrado como the_title.

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

the_time é a data em que seu post foi postado. E o the_autor é por quem o post foi escrito.

<?php the_content('Ler o resto da mensagem »'); ?>

Não aparece automaticamente. Quando você estiver escrevendo um post, você pode colocar a tag more. Colocando ela, a partir de onde ela foi colocada, o texto será exibido apenas se clicar no post e não página principal.

<?php the_tags('Tags: ', ', ', '<br />'); ?> Postado em <?php the_category(', ') ?> | <?php edit_post_link('Editar', '', ' | '); ?>  <?php comments_popup_link('0 comentários »', '1 comentário »', '% comentários »'); ?>

the_tags é um recurso opcional. Ao invés de você criar várias categorias, pode criar várias tags e colocar seus posts nelas. O the_category é mais importante. Se você esquecer de definir a tag, o post ficará na tag default. edit_post_link é um recurso apenas para administração que serve para editar o post atual. comments_popup_link é a área em que você exibirá o número de comentário que seu post tem. A última opção é usada % pois ele exibirá o número dinamicamente.

<div class="alignleft"><?php next_posts_link('« Antigas') ?></div>
<div class="alignright"><?php previous_posts_link('Novas »') ?></div>

O next_posts_links e o previous_posts_links são tags que, ficam no fim do blog e são usadas para visualizar notícias antigas ou recentes.

<?php get_sidebar(); ?><?php get_footer(); ?>

A mesma coisa do get_header. O sidebar será definida depois. A sidebar é aquela barra lateral ou horizontal que pode ser atualizada dinamicamente pelo blogueiro.

Footer

O footer é o rodapé. É importante observar se as tags estão corretamente fechadas se não, o tema poderá ficar desfigurado.

O footer é a menor página:

<div id="rodape"
<?php bloginfo('name'); ?>|<a href="<?php bloginfo('rss2_url'); ?>">Entradas (RSS)</a> e <a href="<?php bloginfo('comments_rss2_url'); ?>">Comentários (RSS)</a>.
</div>
</div><?php wp_footer(); ?>
</body
</html

Você deve estar se perguntando porque as tags body e html são fechadas aqui. Bom, porque o blog Wordpress não cria uma página index.php com o cabeçalho e o rodapé dentro dela. Ele divide o site. Ele quebra em páginas. Essas páginas acima criadas.

Por isso que, essas tags são fechadas na última página que ele monta. Que é a footer.php

As outras páginas

Agora vou mostrar o código fonte das outras páginas. Somente as mais importantes.

Single.php

<?php get_header(); ?>
<div id="conteudo">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="navegacao"
<div class="alignleft"><?php previous_post_link('« %link') ?></div>
<div class="alignright"><?php next_post_link('%link »') ?></div>
</div>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="mensagem">
<?php the_content('<p class="serif">Read the rest of this entry »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
<p class="postmetadata alt">
<small>
Essa mensagem foi postada em <?php the_time('l, F jS, Y') ?> às <?php the_time() ?> na(s) categoria(s) <?php the_category(', ') ?>.
Você pode ver as respostas dos comentários, assinando o nosso <?php post_comments_feed_link('RSS 2.0'); ?> feed.
<?php } edit_post_link('Edit this entry.','',''); ?>
</small>
</p>
</div>
</div>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>

A estrutura da página single.php é basicamente a mesma da index.php

Page.php

<?php get_header(); ?>
<div id="conteudo" class="narrowcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<div class="mensagem"
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_footer(); ?>

Comments.php

É útil para definir um estilo aos comentários. Essa é uma das maiores páginas do blog.

<?php // Do not delete these line
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a passwor
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
}
/* This variable is for alternating comment background *
$oddcomment = 'class="alt" ';
?>
<!-- You can start editing here. -->
<?php if ($comments) : ?
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br />
<small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','  ',''); ?></small>
<?php comment_text() ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
<?php endif; ?
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /
<label for="author"><small>Nome <?php if ($req) echo "(obrigatório)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /
<label for="email"><small>E-mail <?php if ($req) echo "(obrigatório)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> Você pode usar essas tags: <code><?php echo allowed_tags(); ?></code></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Enviar Comentário" /
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>

Vou dividir o resto em posts. Confira o andamento desse post regularmente.

Você pode seguir qualquer resposta à esse comentário, usando o RSS 2.0 feed. Ou você pode deixar uma resposta e/ou um trackback do seu site.

3 comentários em “CSS + Wordpress + HTML + Validação”

amoke

24 julho, 2008, 5:09

olá Yeltsin, legal o blog, eu estou tentando validar html, vou ler com calma para esclarecer algumas dúvidas.

Eu cliquei no validation para ver a validação do seu blog, e apresentou vários erros.

Você sabe o porquê?

abraços

[Responder]
Yeltsin Lima Respondido em julho 25th, 2008 6:41 pm:
Sim :)

Alguns erros se referem aos plugins que tem aqui no blog. Entre eles o Wp-Hotwords. E pela minha mania de esquecer de colocar o “Alt” nas imagens…

É 50/50 - 50% de problema meu e, 50% de problema dos plugins de terceiros.

Pela pressa de escrever, eu às vezes esqueço de colocar a tag Alt nas imagens…

Pelo menos, meu outro blog não é assim :)

Até,

[Responder]
alex

10 novembro, 2008, 18:09

massa, gostei e deu certo.

[Responder]

Deixe um comentário

« O Loop do Wordpress

SmileHappy Toolbar »

Assine nosso feed

Inscrever-se via RSS e fique informado das atualizações.

Inscrever-se via e-mail:

SmileHappy

MENSAGENS RECENTES

The pirate bay - Vamos crescer cada vez mais

Vida.

Passando FOTOS para seu IPOD.

O que é LINUX, onde ele está?

Só para definir quem sou.

Instalação, manutenção e desenvolvimento de temas e o que for para qualquer coisa

ÚLTIMOS COMENTÁRIOS

TAGS + POPULARES

CSS + Wordpress + HTML + Validação

Wordpress

Header

Index

Footer

As outras páginas

3 comentários em “CSS + Wordpress + HTML + Validação”

Deixe um comentário

Assine nosso feed

Publicidade

Publicidade

Inscreva-se

Arquivos

Mensagens Relacionadas

Enquete

RSS

Pesquise e Compre!

Links

SmileHappy

MENSAGENS RECENTES

The pirate bay - Vamos crescer cada vez mais

Vida.

Passando FOTOS para seu IPOD.

O que é LINUX, onde ele está?

Só para definir quem sou.

Instalação, manutenção e desenvolvimento de temas e o que for para qualquer coisa

ÚLTIMOS COMENTÁRIOS

TAGS + POPULARES

CSS + Wordpress + HTML + Validação

Wordpress

Header

Index

Footer

As outras páginas

3 comentários em “CSS + Wordpress + HTML + Validação”

Deixe um comentário

Assine nosso feed

Publicidade

Publicidade

Inscreva-se

Arquivos

Mensagens Relacionadas

Enquete

RSS

Pesquise e Compre!

Links

Painel de Controle