Tutorial Template Para WordPress (Parte I) – Introdução
• Publicado em: junho 11, 2013
Acho que muitos, assim como eu antes, achavam que o wordpress só servia para blog mas não ele é um poderoso CMS (Content Management System) que em português significa Sistema de Gerenciamento de Conteúdo.
Segue um tutorial bem limpo, ao meu ver, de como criar um tema para wordpress em uma linha mais para website junto terás no menu também um link para um blog assim como no meu site.
Nesse primeira parte teremos a instalação e conhecer como é dividido o tema, digo de passagem que uma vez que terá os arquivos que será apresentado nesse tutorial muito difícil será modificado para outros site que fará posteriormente só precisara do estruturação do html e css para cada site.
Ferramentas e Conhecimento Necessários:
- O browse utilizado é o Google Chrome mas pode ser o Firefox com firebug instalado também;
- Servidor local de preferencia WAMP (Windows), MAMP (Mac) e LAMP (Linux) Instalados;
- Editor de texto de sua preferência ou uma IDE que facilita a vida;
- Baixe o WordPress;
- Conhecimento em HTML e CSS são indispensável e se souber PHP melhor ainda. Nota: Eu não sei PHP, rsrsrs.
O WordPress:
No meu caso como uso o mac eu instalei o MAMP e o link para acessar é http://localhost:8888/MAMP/ e o primeiro passo click em no phpMyAdmin para fazermos o banco de dados do WordPress. Em seguida click na aba Base de Dados e no campo de texto Create database dê um nome para o banco, eu coloquei o nome de wordpress_db, click em criar.
Feito isso click no banco criado e irá aparecer uma aba chamada de Privilégios aperte em Adicionar Utilizador e preencha os seguintes campos:
- Nome do Utilizador;
- Máquina – Localhost;
- Palavra-passe – sua senha;
- Confirma a Senha;
- Em Privilégios Globais click em Todos;
- Adicionar Utilizador.
Agora descompacta a pasta do wordpress para dentro da pasta do MAMP (no meu caso no mac): /Applications/MAMP/htdocs.
E abra o Chrome e escreva no browser o endereço: http://localhost:8888/wordpress.
Agora ele irá pedir algumas informações:
Click em Enviar e pronto agora temos o WordPress instalado em nossa máquina.
A Estrutura de um Template do WordPress:
Antes de tudo temos que saber como o WordPress funciona. Um tema é basicamente uma pagina normal estruturada em HTML, mas dividida por partes tais listada abaixo:
- header.php: arquivo onde fica o código do cabeçalho;
- sidebar.php: arquivo onde fica o código da lateral;
- footer.php: arquivo onde fica o código do rodapé;
- index.php: código que mostra os artigos na página inicial;
- single.php: código que mostra o artigo na sua própria página;
- page.php: código que mostra o conteúdo de uma página estática;
- archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc;
- functions.php: arquivo onde ficam algumas funções que adicionam mais capacidades aos temas;
- 404.php: igual ao index.php, em vez de mostrar um artigo deverá de mostrar um texto a avisar que o conteúdo não foi encontrado;
- style.css: arquivo onde fica o stylesheet do tema;
Bom o ideal que sempre que a senhoria for fazer um site para o WordPress faça primeiro a estruturação da pagina no HTML e até mesmo com o CSS para facilitar na hora de separar todos as partes.
Segue o link de um código bem simples em HTML.
Baixo segue o mesmo código que usaremos no decorrer do tutorial:
[code lang=”html”]
Primeiro Template para WordPress/title>
<link rel="stylesheet" href="style.css" type="text/css" />
<p></head><br />
<body></p>
<section id="corpo">
<header>
<h1>Título do Site</h1>
<h2>Descrição do site</h2>
<nav id="menu">
<ul>
<li><a href="#">Página 1</a></li>
<li><a href="#">Página 2</a></li>
<li><a href="#">Página 3</a></li>
<li><a href="#">Página 4</a></li>
</ul>
</nav>
</header>
<section id="conteudo">
<section id="artigos">
<article class="artigo">
<h2>Titulo do artigo 1</h2>
<p>Conteudo do artigo</p>
</article>
<article class="artigo">
<h2>Titulo do artigo 2</h2>
<p>Conteudo do artigo</p>
</article>
</section>
<aside id="sidebar">
<ul class="widget">
<h3>Widget</h3>
<li><a href="#">Página 1</a></li>
<li><a href="#">Página 2</a></li>
<li><a href="#">Página 3</a></li>
<li><a href="#">Página 4</a></li>
</ul>
<ul class="widget">
<h3>Widget</h3>
<li><a href="#">Categoria 1</a></li>
<li><a href="#">Categoria 2</a></li>
<li><a href="#">Categoria 3</a></li>
<li><a href="#">Categoria 4</a></li>
</ul>
</aside>
</section>
<footer>
<p>© 2013 – Todos os Direitos Reservados</p>
</footer>
</section>
<p></body><br />
</html><br />
[/code]</p>
<p></p>
<p>No próximo continuaremos.</p>
</article>
</section>
<footer class="footer">
<ul class="rede-social ">
<li class="rede-social__item">
<a href="https://github.com/romulobrasil" class="icon-github" target="_blank" rel="noopener" aria-label="github"></a>
</li>
<li class="rede-social__item">
<a href="https://www.linkedin.com/in/romulobrasil/" class="icon-linkedin" target="_blank" rel="noopener" aria-label="linkedin"></a>
</li>
<li class="rede-social__item">
<a href="https://wa.me/5585988734371" class="icon-whatsapp" target="_blank" rel="noopener" aria-label="whatsapp"></a>
</li>
</ul>
</footer>
</main>
<script>/* EMBED WORDPRESS */
!function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),c=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]');for(r=0;r<c.length;r++)c[r].style.display="none";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if("link"===t.message)if(s=l.createElement("a"),n=l.createElement("a"),s.href=a.getAttribute("src"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),n=l.querySelectorAll("iframe.wp-embedded-content");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute("data-secret"))a=Math.random().toString(36).substr(2,10),r.src+="#?secret="+a,r.setAttribute("data-secret",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute("security"),r.parentNode.replaceChild(e,r)}}}}(window,document);</script>
<script>$ = jQuery.noConflict();
romae = {
geral: function(){
var altura = $('.case-img').outerHeight();
$('.front').css('height', altura);
$('.back').css('height', altura);
},
ajax: function(){
function cat_ajax_get(catID) {
var ajaxurl = document.location.origin + '/wp-admin/admin-ajax.php';
$.ajax({
type: 'POST',
url: ajaxurl,
data: {"action": "load-filter", cat: catID},
success: function(response) {
$("#blog_post").html(response);
$("#loading").hide();
return false;
}
});
}
$( ".btn_filter" ).click(function() {
$('.btn_filter').removeClass('current');
$(this).addClass('current');
$('#blog_post').empty();
$("#loading").show();
var catID = $(this).data('cat');
if (catID === false) {
$(this).removeClass('current');
}
cat_ajax_get(catID);
});
},
}
$(function () {
romae.geral();
romae.ajax();
});
$(window).resize(function() {
romae.geral();
}); </script>
</body>
</html>
