Início » Tutoriais e Dicas » Tema básico para WordPress em html5
Pessoal nosso amigo Rafael Cirolini do site Nerd Head fez este post sobre html5 e WordPress, muito se tem falado sobre html5 e css3, e realmente acreditamos que isto vem para solucionar vários dos problemas que temos nos últimos tempos, e parar de usar soluções paliativas, e caras em tempo de desenvolvimento e processamento de renderização.
Hoje vamos mostrar de uma forma bem simples, como pode ser usado um layout em html5 para um tema do WordPress.
Não vamos falar em que arquivo vamos colocar cada parte do esqueleto, é somente uma idéia final de como deve ficar.
Segue abaixo o codigo.
[sourcecode language=”php”]<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( ‘charset’ ); ?>" />
<title><?php the_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( ‘stylesheet_url’ ); ?>">
<link rel="shortcut icon" href="/favicon.ico">
<!– server para os internet explorer entenderem a estrutura html5 –>
<!–[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
</head>
<body>
<div id="wrap">
<!– definimos com a tag header o cabeçalho do conteiner wrap –>
<header >
<!– agora a tag a suporta ser link de varios componentes –>
<a href="<?php bloginfo(‘url’); ?>"><h1> <?php bloginfo(‘name’); ?> </h1>
<h3><?php bloginfo( ‘description’ ); ?></h3></a>
<!– uma das novas tags agora para descrever o menu –>
<nav>
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
</nav>
</header>
<!– criamos uma seção de posts –>
<section id="posts">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<!– Cada post é um artigo composto de outros componentes –>
<article class="post" id="<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content(); ?>
</div>
<footer> <?php the_author(); ?></footer>
</article>
<?php endwhile; endif; ?>
<!– agora uma seção de navegação –>
<section class="navigation">
<div class="left"><?php next_posts_link(‘« Arquivos Antigos’) ?></div>
<div class="right"><?php previous_posts_link(‘Arquivos Novo »’) ?></div>
</section>
</section>
<!– Sidebar – criamos com esta nova tag a sidebar –>
<aside>
<?php dynamic_sidebar( ‘primary-widget-area’ ); ?>
</aside>
<!– Footer – novamente usamos a tag footer mas agora para finalizarmos o conteiner wrap –>
<footer>
<p> Copyright 2011 NerdHead Todos os direitos reservados | Termos e condições de uso </p>
</footer>
</div>
</body>
</html>[/sourcecode]
Como vocês podem ver diminuiu bastante o uso de divs, e deixou a semantica muito mais bonita.
Via Esqueleto básico de um tema WordPress com html5
Pessoal,
uma honra ter um post meu aqui… vlw!!!
[]`s
Opa de nada Rafael ^^
Rafael,
Trabalho unicamente com WP, e sou professor de WP.
Meus alunos só falam do seu post como ele é simples, e explica muito bem como montar o THEME em HTML5.
Parabens!!!