Blog

Foto Rômulo Brasil

Tutorial Template Para WordPress (Parte I) – Introdução

• Publicado em: June 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:

  1. O browse utilizado é o Google Chrome mas pode ser o Firefox com firebug instalado também;
  2. Servidor local de preferencia WAMP (Windows), MAMP (Mac) e LAMP (Linux) Instalados;
  3. Editor de texto de sua preferência ou uma IDE que facilita a vida;
  4. Baixe o WordPress;
  5. 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:

  1. Nome do Utilizador;
  2. Máquina – Localhost;
  3. Palavra-passe – sua senha;
  4. Confirma a Senha;
  5. Em Privilégios Globais click em Todos;
  6. 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:

Captura de Tela 2013-06-11 às 14.22.43

 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:

  1. header.php: arquivo onde fica o código do cabeçalho;
  2. sidebar.php: arquivo onde fica o código da lateral;
  3. footer.php: arquivo onde fica o código do rodapé;
  4. index.php: código que mostra os artigos na página inicial;
  5. single.php: código que mostra o artigo na sua própria página;
  6. page.php: código que mostra o conteúdo de uma página estática;
  7. archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc;
  8. functions.php: arquivo onde ficam algumas funções que adicionam mais capacidades aos temas;
  9. 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;
  10. 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> <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-i/'; var disqus_identifier = '19 http://romulobrasil.com/?p=19'; var disqus_container_id = 'disqus_thread'; var disqus_shortname = 'romulobrasil'; var disqus_title = "Tutorial Template Para WordPress (Parte I) – Introduçã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=19'; 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>