Blog

Foto Rômulo Brasil

Tutorial Template Para WordPress (Parte II) – Separação

• Publicado em: June 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> <div class="single-border"></div> <div id="disqus_thread"> </div> <script type="text/javascript"> var disqus_url = 'https://romulobrasil.com/tutorial-template-para-wordpress-parte-ii/'; var disqus_identifier = '45 http://romulobrasil.com/?p=45'; var disqus_container_id = 'disqus_thread'; var disqus_shortname = 'romulobrasil'; var disqus_title = "Tutorial Template Para WordPress (Parte II) – Separação"; var disqus_config_custom = window.disqus_config; var disqus_config = function () { /* All currently supported events: onReady: fires when everything is ready, onNewComment: fires when a new comment is posted, onIdentify: fires when user is authenticated */ this.language = ''; this.callbacks.onReady.push(function () { // sync comments in the background so we don't block the page var script = document.createElement('script'); script.async = true; script.src = '?cf_action=sync_comments&post_id=45'; var firstScript = document.getElementsByTagName('script')[0]; firstScript.parentNode.insertBefore(script, firstScript); }); if (disqus_config_custom) { disqus_config_custom.call(this); } }; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> </article> </section> <footer class="footer"> <div class="content"> <ul class="list-social"> <li class="list-social--item"> <a href="https://github.com/romulobrasil" target="_blank" class="icon-github"></a> </li> <li class="list-social--item"> <a href="https://twitter.com/romsbrasil" target="_blank" class="icon-twitter"></a> </li> <li class="list-social--item"> <a href="https://www.instagram.com/romsbrasil" target="_blank" class="icon-instagram"></a> </li> </ul> <p>© Rômulo Brasil, 2017</p> </div> </footer> <section class="search-box"> <i class="icon-cross" id="searchExit" title="Fechar"></i> <div class="content"> <p class="search-label">Entre com sua busca:</p> <form role="search" method="get" class="search-form" action="https://romulobrasil.com/"> <input type="search" name="s" class="search-field" id="searchField" > <input type="submit" value="" class="btn-search"> </form> </div> </section> <script> </script> <script> document.getElementById("btnSearch").addEventListener("click",function(){document.getElementsByTagName("body")[0].classList.add("search-active"),document.getElementById("searchField").focus()}),document.getElementById("searchExit").addEventListener("click",function(){document.getElementsByTagName("body")[0].classList.remove("search-active")}); function bannerHeitgh() { var home = document.getElementById('home'); var home_inner = document.getElementById('home_inner'); var altura = window.innerHeight + 200; if(!home) { return false; } else { home.style.height = altura + 'px'; home_inner.style.height = window.innerHeight + 'px'; } } document.addEventListener("DOMContentLoaded", function(event) { bannerHeitgh(); window.addEventListener("resize", bannerHeitgh); }); </script> <script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-41647455-1'; </script> <a href="http://www.romae.com.br" target="_blank" id="romae" class="romae" title="Desenvolvido pela Romae"><strong>Romae</strong></a> <script> "use strict";var Ass=function(){return{init:function(){var a=document.getElementById("romae"),b={background:"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAASCAYAAAG7hmlcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REI3Nzg1NzlGOTNFMTFFNTg5RDU5NDhEMTNCMzlEMUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REI3Nzg1N0FGOTNFMTFFNTg5RDU5NDhEMTNCMzlEMUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQjc3ODU3N0Y5M0UxMUU1ODlENTk0OEQxM0IzOUQxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQjc3ODU3OEY5M0UxMUU1ODlENTk0OEQxM0IzOUQxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plmsm8gAAAWBSURBVHjaYvj//z8DCDPM+/8TxsaGWRgQoBREMM5n6IDyy4H4LBCvBvOgpi3CZxoIAwQQTKEtECsTY/Wh/4kMjEBr/4NsB+LdQOwCYgPFQc5RApm2G4iZCVkNEECMYGI+w1ugbiEgTgKaMB/IPwqkraE2dAJxBQMOALIRGTBBBYVBTgQyZwANARl8A5d+aKj9RwpBFAAQQGAXwjnzGd5B/SnIQCZgARrCDKR/AvF7oEFCKLbNB7ugAxqwRHkZFCuiQEGQwSVAvBjIrwbyH2Hx6j0gngXlg2IM5AsloB5BJMMZQWH4BMoH0XVAXIakABQh76HcMCgNEnMFYmMkC0BAGewrYFJ4BqR7gbgbaAATA4UAIIBQIgUp7DiA1G2gBbJIYp+BfF4kvguSlj3kOgA9DtABE9Sy/9DIhoFGIK6ByrEDcS+WiN4NNHwP1HHIvgQ5XAlNLcwzgkhsbB7F5EMzngQ0b4BS4ycgfg3Ek4AOWIGk8RSQb4bE/w+N91VIjv+Pxq5AShf/saj7j5zgoGbCQAUojcHKmr1AjgCS5aFAShxIzwPSIPEZyI5DMnQ1UA3IonfQksUVKQeAxEORlL9HYp+F0veQQpYBycNnoRmAASAAc1XMklAUhX1KtClBS4uBDrkELlFbg29rDB1tkqApCHpvERwi8Ce4BdVi0db0HB11jZaEaHJIcSsI7Dv1XTkcniAU1IXDefe+d8/93j3fOV8sBwnyFm6f00tsqCb+YMwrkgncNkA9cr4HV8d8J4YrnZ8AWLRIjlkoH+RB0oFjkHu4LdMhA/aakSX+b44kDsvCV4Wk0mEpKikCEeJuwt4w3TV7O+RJRYmKrVLfrNkf8b+1dPbjK7aK5QZFOnXqBOAS/Av8GWwVlgaYbkzwgKRu8vAn3qrjTUQtanNNv5tyTyRxGKvHuFPbZs7xfAIbMmXrWkHxvgS3hrUrleIcqzSkpESsYgesSe8RSKCq3CPosuKxb7jpuRRfwD9jYRmWhRXlxiimGdgGA9yYGxxQvVsE21ep9lUrmTfKBOp6pcSvEFioU3yAxZbZ/Mp0XcOOhJP45l2DUz0sT5AhD3UNemy+75seeKjSLX3vi8tM72CWPYh7Af4B1qCS1GB32HCa+AfjU4B2rOcVoiiMzkSzkBozSjaUYcOKZqkm1Cj5B5SdhdnasbFTjFKkZKYsWJIFCwu9kmwsRn4slGQs7TwLbMav89W5fK73ZiZJydw63de7975373nf/c65zzdR+yTvYVSrgOTJC0A20hN9VjNT0Q0wiAWeBf5BqfYgqQXVANAOhIA7YJfxvABMg5zJIiQfojoxGuDjgO3iqmTwq6WUkJXUEbW4Ee6fLeAaWGQmE8PVDYjY1ZNQP/Li3NOXJd47Qd0K8sOkmQcyfzICsXDRuWXalSmPfsfos4d6E0jgOkGiqogoyd0XqcAzTn5gbl7R6lD4XdWeZfKNqISbZltERXhSJeBR0461BJRKpDB3V539x+1dgvbsFwJxU7ZdCINE9hpISJjy1Qb0AT0cIye2MaCAcS8eUVgH1KLtvgg5M+rnxHtUcuEBRuIoF+0ol3RFn9BqjY0q6VznwqNq3C1NSFApWVIRHFeEJzG3K649pRRN5pMRt2WcvvaqTcApLp+BJaADEAIOgFkM6EXdDzwK0SLJPuTt8Et1lrOF1TnbNuUxj3uuiqCYJfH2kSfvcwwyRORosuKEfQCNKfJNnyOvPG1ERP5KnBv35VNCVNwhyZe0FKLCNUAjP8YaINH3UGYCN+fBHOEwMlKMtldO3FVOMc1+8W+mhrzl+yMez0oqm22/39Em0ljpbXYQU7jh8w9EBnZJdKHPZaBSPvtAWvo5blU5vRWYM8JU1XlgBeQVKrR9lDeju0K+vYjDggAAAABJRU5ErkJggg==) no-repeat",bottom:"0",height:"30px","line-height":"50px",overflow:"hidden",position:"fixed",right:"0","text-indent":"100px",transition:"width 0.8s ease-in-out",width:"27px","z-index":"99999999","text-indent":"-9999px"},c="";for(var d in b)b.hasOwnProperty(d)&&(c+=d+": "+b[d]+"; ");a.setAttribute("style",""+c),document.body.appendChild(a),a.addEventListener("mouseover",function(){a.style.width="80px"}),a.addEventListener("mouseout",function(){a.style.width="27px"})}}}();Ass.init(); </script> <script type="text/javascript"> // <![CDATA[ var disqus_shortname = 'romulobrasil'; (function () { var nodes = document.getElementsByTagName('span'); for (var i = 0, url; i < nodes.length; i++) { if (nodes[i].className.indexOf('dsq-postid') != -1 && nodes[i].parentNode.tagName == 'A') { nodes[i].parentNode.setAttribute('data-disqus-identifier', nodes[i].getAttribute('data-dsqidentifier')); url = nodes[i].parentNode.href.split('#', 1); if (url.length == 1) { url = url[0]; } else { url = url[1]; } nodes[i].parentNode.href = url + '#disqus_thread'; } } var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = '//' + disqus_shortname + '.disqus.com/count.js'; (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); }()); // ]]> </script> </body> </html>