Tutorial Template Para WordPress (Parte II) – Separação
• Publicado em: junho 13, 2013
Separando o HTML em partes:
Agora vamos separar o nosso html em partes do nosso template.
Primeiro vamos começar com header.php copia e cole em um novo arquivo em branco e salve como o nome header.php
[code lang=”html”]
Primeiro Template para WordPress/title>
<link rel="stylesheet" href="style.css" type="text/css" />
<p></head><br />
<body></p>
<p><!-- Section Corpo --> </p>
<section id="corpo">
<!-- Header --> </p>
<header>
<h1>Titulo 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>
<p> <!-- Header --><br />
[/code]</p>
<p></p>
<p>Logo apos o header, temos uma section com id “conteudo” é valido se atentar que nessa parte não vai a tag aside com id “sidebar”, ela irá logo após em outro arquivo, essa parte do código você irá criar os seguintes arquivos: <strong>index.php, single.php, arquive.php e search.php</strong> e o código fica assim:</p>
<p></p>
<p>[code]<br />
<!-- Section Conteudo --> </p>
<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>
</section>
<p><!-- Fim Section Conteudo --><br />
[/code]</p>
<p></p>
<p>Agora sim, colocaremos o código do sidebar e criaremos uma section e o nome do arquivo é sidebar.php</p>
<p></p>
<p>[code]<br />
<!-- Sidebar --> </p>
<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>
<p><!-- Fim Sidebar --><br />
[/code]</p>
<p></p>
<p>Nesse ponto chegamos na parte final da separação do nosso html e falta que é o footer e você colocara nada mais nada menos que o código restante e o nome do arquivo será <strong>footer.php</strong></p>
<p></p>
<p>[code]<br />
<!-- Footer --> </p>
<footer>
<p>© 2013 – Todos os Direitos Reservados</p>
</footer>
<p><!-- Fim Footer --> </p>
</section>
<p><!-- Fim Section Corpo --><br />
</body><br />
</html><br />
[/code]</p>
<p></p>
<p>Peguem todos os arquivos criado nesse artigo e coloque em uma pasta e dê um nome para ela, o interessante que seja o nome do seu tema. </p>
<p>Bom, nos próximos capítulo iremos aprender a dá um estilo a nosso tema. E em questão da semântica da montagem do html, nomes dos id ou class tag usada pode ser a sua manera. </p>
<p></p>
<p>Até a próxima. </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>