Temas (III) Crear un tema en WordPress, ajustes básicos
Personalmente siempre me ha gustado hacer un mockup de lo que quiero crear, y en esta ocasión no va a ser menos, vamos a crear un tema en WordPress agregando funcionalidades y cogiendo los conocimientos por tanto para poder modificar los que ya tengamos u obtengamos.
Para comenzar he creado una estructura muy básica en html y css para para poder comenzar a trabajar y le he colocado un mínimo de responsive. Los colores elegidos han sido para utilizarlos de forma didáctica y estoy seguro que cualquiera de vosotros que tenga unos conocimiento mínimos en html y css no tendrá ningun problema en entenderlo.
Para comenzar, una vez creado mi código base he hecho una captura de pantalla de 880×660 que es la medida que WordPress utiliza para crear los screenshot de los temas que vemos desde el panel de control Apariencia > temas. Y los he guardado con el nombre screenshot.php. La imagen es:
Sí, ya se que es fea, pero de lo que se trata es de ir creando un tema básico y que se pueda moldear fácilmente…
El código CSS en style.css es el siguiente:
/* NOMBRE DEL TEMA: Voyaguer THEME URI: - DESCRIPTION: tema de prueba para tutorial VERSION: 1.0 AUTHOR: Miguel A. López Torralba AUTHOR URI: http://mialtoweb.es/ LICENSE: GNU General Public License v2 or later LICENSE URI: http:/www.gnu.org/licenses/gpl-2.0.html TAGS: - TEXT DOMAIN: ; */ body{ padding: 0 10%; } header{ width:100%; background-color: pink; } nav{ width:100%; background-color: orange; margin:0%; } main{ width:100%; } #cuerpo{ width:65%; float:left; background-color: #3DB9E8 } aside{ width:35%; float:left; background-color: #54B551; } footer{ clear:both; width:100%; background-color: #F59001 } @media (max-width: 750px) { #cuerpo{ width:100%; } aside{ width:100%; } }
Y el código html guardado como index.html es:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mitema</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="http://www.creabytes.com/media/servicios-logo.png" atl="logo"> <h3>Slogan</h3> </header> <nav> aqui viene el navegador </nav> <main> <section id="cuerpo"> <article> <h3>Articulo 1</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iure perspiciatis animi sit temporibus accusantium, culpa aut inventore doloremque? Illo culpa tempora voluptatibus aliquam expedita molestias vitae, quaerat aliquid tempore. </article> <article> <h3>Articulo 2</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam modi quo molestiae, dolorem amet. A maiores quae sed, adipisci provident quis rem possimus perspiciatis ut corporis qui cum dolore odit! </article> <article> <h3>Articulo 3</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos esse assumenda totam officia dicta rerum temporibus laudantium, consequuntur! Odio deserunt est, fuga aspernatur ratione voluptatum voluptates. Aspernatur itaque modi, aperiam. </article> </section> <aside> <h3>widget 1</h3> <h3>widget 2</h3> <h3>widget 3</h3> </aside> </main> <footer>El footer!!!</footer> </body> </html>
Y con esto ya tenemos todo lo necesario para ir haciendo nuestro tema, ahora ya tan solo hay que empezar a construir según DRY, y veremos como en muy poco tenemos un tema listo para presentar la información.