Image Image Image Image Image
Scroll to Top

Topo

26

dez
2011

Sem Comentários

Em Blog
HTML
Wordpress

Por Allison

Esqueleto Básico de um tema WordPress com html5

Em 26, dez 2011 | Sem Comentários | Em Blog, HTML, Wordpress | Por Allison

Pessoal, muito se tem falado em html5 e css3, e eu realmente acredito 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 quero mostrar de uma forma bem simples, como pode ser usado um layout em html5 para um tema do WordPress.

Não vou falar em que arquivo colocar cada parte do esqueleto, é somente uma ideia final de como deve ficar.

Segue abaixo o código:

<!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="http://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&phpMyAdmin=8C%2CP2bFpgP9WryjAxnBRYbq8ub5 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&phpMyAdmin=8C%2CP2bFpgP9WryjAxnBRYbq8ub5 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>

Como vcs podem ver diminuiu bastante o uso de divs, e deixou a semantica muito mais bonita.

Bom, logo vou estar transformando este esqueleto em um framework completo para o wordpress que ja estou trabalhando!!!

Fonte: Rafael Cirolini/NerdHead

Redes Sociais

Tags | , ,

Enviar um Comentário