Ya sabemos para que sirve cada fichero de un theme de wordpress , ahora toca empezar a escribir nuestro theme.
Voy a adaptar una plantilla básica ,de las que vienen con Dreamweaver CS3 , para usarla como theme para WordPress, de esta forma, cuando tenga que realizar algún theme original, ya tendré mi plantilla adaptada y lista para modificar.
La plantilla en cuestión es esta:
El código es este:
Template original (Bajar y renombrar a Template.html)
Como puedes ver, es una plantilla típica de Dreamweaver.
Vamos a ver las partes del theme a implementar:
- Amarillo : el header (header.php).
- Rojo : el contenido principal (index.php , single.php , archives.php).
- Verde : el sidebar (sidebar.php).
- Azul : el footer (footer.php).
Por lo tanto tendremos que poner en cada fichero la parte de código que queremos que se genere.
Lo primero que vamos hacer es la hoja de estilos, que se ha de crear en el fichero style.css, y que ha de tener un comentario al inicio con los datos del template, para que WordPress sepa describirlo en el panel de administración.
Creamos el fichero style.css y pegamos el siguiente código :
/*
Theme Name: Plantilla del tutorial de Nosolocodigo.com
Theme URI: https://www.nosolocodigo.com
Original Theme URI: https://www.nosolocodigo.com
Description: Tema que sirve como plantilla, con sidebar a la derecha y preparado para widgets
Author: David Noguera
Author URI: https://www.nosolocodigo.com/
Traductor: David Noguera
Traductor URI: https://www.nosolocodigo.com/
*/
Estos son los datos de nuestro theme, sustituye si quieres mis datos por los tuyos, este comenatario es obligado incluirlo , si no se incluye, WordPress no podra ofrecer datos del theme.
A continuación de este comentario,vamos a poner las reglas css que se incluyen en el template base y que como habrás podido observar si has visto el código que he puesto antes, se incluyen todas en el head del template base. Nosotros las seleccionaremos y las sacaremos del template para ponerlas en el fichero style.css.
Copia a continuación el siguiente código :
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.twoColLiqRtHdr #container {
width: 80%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.twoColLiqRtHdr #header {
background: #DDDDDD;
padding: 0 10px;
}
.twoColLiqRtHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.twoColLiqRtHdr #sidebar1 {
float: right;
width: 24%;
height:100%;
background: #EBEBEB;
padding-top: 15px 0;
}
.twoColLiqRtHdr #sidebar1 h3, .twoColLiqRtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}
.twoColLiqRtHdr #mainContent {
margin: 0 26% 0 10px;
}
.twoColLiqRtHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.twoColLiqRtHdr #footer p {
margin: 0;
padding: 10px 0;
}
/* Miscellaneous classes for reuse */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Bien, ya tenemos nuestro fichero style.css listo para para seguir realizando nuestro theme.
En el siguiente tutorial vamos a crear la cabecera (header.php).