Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
- 1. Atualmente lendo: Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 1)
- 2. Tutorial WordPress: Como criar um tema WordPress a partir de HTML (Parte 2)
- 3. Uma introdução à anatomia de um tema WordPress
Se você começou com um site HTML ( + CSS), não precisa jogar tudo fora ao mudar para o WordPress. Você pode converter seu HTML em WordPress e executar seu site (agora mais poderoso) na plataforma dinâmica do WordPress.
Ou talvez não seja esse o caso. Talvez você esteja apenas se perguntando como converter o design HTML de um cliente em um tema WordPress completo. Ou talvez você queira aprender a programação básica do WordPress (+ PHP) do lado mais familiar do HTML.
Seja qual for o motivo pelo qual você está aqui hoje, este tutorial do WordPress apresentará os fundamentos da criação de um tema WordPress a partir de HTML. Você pode seguir este guia para criar seu tema do zero ou ir ao Github e baixar o tema inicial do WPExplorer, que fornece uma “tela vazia” para criar seu tema com todos os arquivos de modelo e código necessários para começar.
Então, se você é uma daquelas pessoas que prefere aprender lendo o código e depois baixar o tema inicial, pule o guia e veja como as coisas funcionam… Caso contrário, obtenha um editor de código (eu uso e recomendo o Notepad++ , ou SublimeText ) e um navegador pronto , siga este guia simples até o fim.
Nomeando seu tema WordPress
Primeiramente, temos que dar ao seu tema um nome exclusivo, o que não é necessário se você estiver criando um tema apenas para o seu site. Independentemente disso, precisamos nomear seu tema para torná-lo facilmente identificável na instalação.
Suposições gerais neste momento:
- Você tem sua folha de estilo index.html e CSS pronta.
- Você tem uma instalação do WordPress em funcionamento com pelo menos um tema, por exemplo, Twenty Fourteen
- Você já criou uma pasta de temas onde salvará seu novo tema WordPress
Vamos voltar a nomear seu tema WordPress. Abra seu editor de código e copie e cole o conteúdo de sua folha de estilo em um novo arquivo e salve-o como style.css na pasta do seu tema. Adicione as seguintes informações na parte superior do style.css recém-criado :
/*
Theme Name: Your theme’s name
Theme URI: Your theme’s URL
Description: A brief description of your theme
Version: 1.0 or any other version you want
Author: Your name or WordPress.org’s username
Author URI: Your web address
Tags: Tags to locate your theme in the WordPress theme repository
*/
Não deixe de fora as tags de comentário (/*…*/). Salve as alterações. Esta informação diz ao WordPress o nome do seu tema, o autor e coisas complementares como essa. A parte importante é o nome do tema, que permite escolher e ativar seu tema através do painel do WP.
Quebrando seu modelo HTML em arquivos PHP
Este tutorial pressupõe ainda que você tenha seu modelo HTML organizado da esquerda para a direita: cabeçalho, conteúdo, barra lateral, rodapé. Se você tiver um design diferente, talvez seja necessário brincar um pouco com o código. É divertido e super fácil.
A próxima etapa envolve a criação de quatro arquivos PHP. Usando seu editor de código, crie index.php, header.php, sidebar.php e footer.php, e salve-os na pasta do seu tema. Todos os arquivos estão vazios neste momento, então não espere que eles façam nada. Para fins de ilustração, estou usando os seguintes arquivos de folha de estilo index.html e CSS:
INDEX.HTML
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>How To Convert HTML Template to WordPress Theme – WPExplorer</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
</head>
<body>
<div id=”wrap”>
<header class=”header”>
<p>This is header section. Put your logo and other details here.</p>
</header><!– .header –>
<div class=”content”>
<p>This is the main content area.</p>
</div><!– .content –>
<div class=”sidebar”>
<p>This is the side bar</p>
</div><!– .sidebar –>
<footer class=”footer”>
<p>And this is the footer.</p>
</footer><!– .footer –>
</div><!– #wrap –>
</body>
</html>
FOLHA DE ESTILOS CSS
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
Você pode pegar os dois códigos se não tiver nada para trabalhar. Basta copiá-los e colá-los em seu editor de código, salvá-los, criar os quatro arquivos PHP que acabamos de mencionar e se preparar para a próxima parte. Abra seu header.php recém-criado (e vazio) . Faça login na sua instalação existente do WordPress, navegue até Appearance –>> Editor e abra header.php . Copie todo o código entre as tags <head> e cole-o em seu arquivo header.php. O seguinte é o código que eu peguei do arquivo header.php no tema Twenty Fourteen:
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head>
Em seguida, abra seu arquivo index.html e copie o código do cabeçalho (ou seja, o código na seção <div class= “header”>) para o seu header.php logo abaixo das tags <head> conforme mostrado abaixo:
<html>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head>
<body>
<header class=”header”>
<p>This is header section. Put your logo and other details here.</p>
</header>
Em seguida, adicione…
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” />
…em qualquer lugar entre as tags <head> no arquivo header.php para vincular sua folha de estilo. Lembre-se também de colocar as tags de abertura <html> e <body> no header.php como mostrado acima. Salve todas as alterações.
Copie a segunda seção (ou seja, <div class=”content”>…</div> de index.html para o index.php recém-criado e adicione…
<?php get_header(); ?>
… no topo e …
<?php get_sidebar(); ?>
<?php get_footer(); ?>
… ao fundo absoluto. Essas três linhas buscam header.php, sidebar.php e footer.php (nessa ordem) e os exibem no index.php, que reúne seu código novamente. Salve todas as alterações. Neste ponto, seu arquivo index.php deve se parecer com:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Em seguida, copie o conteúdo das seções sidebar e footer em seu index.html para sidebar.php e footer.php, respectivamente.
Adicionando postagens
Seu modelo HTML está prestes a se transformar em um tema WordPress. Só precisamos adicionar suas postagens. Se você tiver postagens em seu blog, como você as exibiria em seu tema personalizado “HTML-to-WordPress”? Você usa um tipo especial de função PHP conhecido como Loop . O Loop é apenas um pedaço de código especializado que exibe suas postagens e comentários onde quer que você o coloque.
Agora, para exibir seus posts na seção de conteúdo do template index.php, copie e cole o seguinte código entre as tags <div class=”content”> e </div> conforme mostrado abaixo:
<div class=”content”>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–.post-header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!–. entry–>
<footer class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</footer><!–.post-footer–>
</div><!– .post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<nav class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</nav><!–.navigation–>
<?php else : ?>
<?php endif; ?>
</div><!–.content–>
Isso cuidará de suas postagens. Fácil como ABC. Neste momento (e usando os arquivos de amostra fornecidos neste tutorial), seu header.php deve ficar assim:
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width”>
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js”></script>
<![endif]–>
<?php wp_head(); ?>
</head>
Seu sidebar.php deve ficar assim:
<?php dynamic_sidebar( ‘sidebar’ ); ?>
Seu footer.php deve ficar assim:
<footer class=”footer”>
<p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>
Você notou as tags de fechamento </body> e </html> no rodapé? Não se esqueça de incluí-los também.
Seu style.css deve ficar assim:
/*
Theme Name: Creating WordPress Theme from HTML
Theme URI: http://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @WPExplorer
Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
font-family: arial, helvetica, verdana;
font-size: 0.8em;
width: 100%;
height: 100%;
}
.header {
background-color: #1be;
margin-left: 14%;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 72%;
height: 250px;
}
.content {
background-color: #999;
margin-left: 14%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
.sidebar {
background-color: #1d5;
margin-right: 14%;
margin-top: 5px;
float: right;
border-width: 0.1em;
border-color: #999;
border-style: solid;
top: 180px;
width: 23%;
}
.footer {
background-color: red;
margin-left: 14%;
float: left;
margin-top: 5px;
width: 72%;
height: 50px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
}
E seu index.php deve ser semelhante a:
<?php get_header(); ?>
<div class=”content”>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”post-header”>
<div class=”date”><?php the_time( ‘M j y’ ); ?></div>
<h2><a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”author”><?php the_author(); ?></div>
</div><!–.post-header–>
<div class=”entry clear”>
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>
<?php the_content(); ?>
<?php edit_post_link(); ?>
<?php wp_link_pages(); ?>
</div><!–. entry–>
<footer class=”post-footer”>
<div class=”comments”><?php comments_popup_link( ‘Leave a Comment’, ‘1 Comment’, ‘% Comments’ ); ?></div>
</footer><!–.post-footer–>
</div><!– .post–>
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
<nav class=”navigation index”>
<div class=”alignleft”><?php next_posts_link( ‘Older Entries’ ); ?></div>
<div class=”alignright”><?php previous_posts_link( ‘Newer Entries’ ); ?></div>
</nav><!–.navigation–>
<?php else : ?>
<?php endif; ?>
</div><!–.content–>
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>
Novamente – isso é baseado em um site da esquerda para a direita com um layout de cabeçalho, conteúdo, barra lateral e rodapé. Você está seguindo? Todos os cinco arquivos devem ser salvos na pasta do seu tema. Nomeie a pasta como quiser e compacte-a em um arquivo ZIP usando o WinRar ou um programa equivalente. Carregue seu novo tema para sua instalação do WordPress, ative-o e veja seu tema convertido em ação!
Isso foi fácil, certo? Você pode estilizar seu tema como quiser, mas a maioria dos recursos que adoramos no WordPress ainda está inativa, pois… este tutorial abrange os conceitos básicos de conversão de modelos HTML em WordPress e deve ser de grande valor para você como iniciante. No próximo tutorial, levaremos as coisas um pouco mais além e brincaremos com outros aspectos da programação do WordPress (como Arquivos de modelo e Tags de modelo) que permitirão que você transforme seus modelos HTML da maneira que desejar. Fique ligado!