Como crear un theme para FlatPress (basico)
Lo primero que se necesita es saber HTML y CSS principalmente
Copiamos el theme leggero y lo renombramos por ejemplo ztheme o como mas te guste.
Ahora abrimos esa carpeta, veremos varios archivos tpl, ahora explico cada uno de ellos
admin.tpl
despliega la administración
comments.tpl
despliega los comentarios
cpheader.tpl
es el encabezado del panel de administracion
default.tpl
coloca la pagina de inicio por defecto
entry-default.tpl
el formato de las entradas
footer.tpl
el pie de pagina
header.tpl
encabezado del blog
index.tpl
genera el index del blog
preview.tpl
la entrada que se muestra sola al clicar en ella
previewstatic.tpl
el preview de las paginas estaticas
static.tpl
se encarga de las paginas estaticas
widgets.tpl
el formato de los widgets ( categorias, ultimos comentarios, etc, todo lo que va en la sidebar)
La ventaja de tener cada sección por separado, es que podemos incluir una dentro de otra, y editar cada una solo una vez, a diferencia que si tuvieramos todo el diseño completo dentro de cada archivo tuvieramos que editar todos cada vez que quisieramos cambiar algo.
bueno ahora borramos la carpeta leggero y la flatmaas-rev, y creamos una carpeta ‘img’ y otra ‘res’
No coloquemos nada ahií aun
Ahora creamos un archivo style.conf.php con el siguiente contenido
<?php /* Style Name: ztheme Style URI: http://www.tusitio.com/ Description: pon una descripcion de tu theme aqui Version: 0.705 Author: Tu nombre Author URI: http://www.tusitio.com/ */ $style['name'] = 'ztheme'; $style['author'] = 'tunombre'; $style['www'] = 'http://www.tusitio.com/'; $style['version'] = 0.705; $style['style_def'] = 'style.css"; $style['style_admin'] = 'admin.css'; $style['style_print'] = 'print.css'; $style['style'] = 'default'; ?>
y luego editamos el archivo theme.conf.php y colocamos lo siguiente
<?php
/*
Theme Name: ztheme
Theme URI: http://www.tusitio.com/
Description: una descripcion aqui
Version: 0.705
Author: tunombre
Author URI: http://www.tusitio.com/
*/
$theme['name'] = 'ztheme';
$theme['author'] = 'tunombre';
$theme['www'] = 'http://www.tusitio.com/';
$theme['description'] = 'Descripcion del theme'.
$theme['version'] = 0.705;
$theme['style_def'] = 'style.css';
$theme['style_admin'] = 'admin.css';
// Other theme settings
// overrides default tabmenu
// and panel layout
remove_filter('admin_head', 'admin_head_action');
// register widgetsets
register_widgetset('right');
register_widgetset('left');
?>
Por supuesto cambiamos los datos por los nuestros.
Por defecto se hace uso de la regla import con las hojas de estilo en el theme default, pero en vez de eso, aqui los he juntado en 2 archivos, esto para hacerlo mas ‘ergonomico’.
Bueno bajate estos archivos y colocalos en la carpeta ‘res’ que creaste.
style.css | admin.css
Con esto logramos tener un esqueleto basico, ahora podemos empezar a cambiar el css, en el archivo style.css dentro de la carpeta res. O podemos cambiar el maquetado del theme.
Para ello deberemos empezar por modificar el header.tpl que es donde comienza el diseño del sitio y que contiene el header del blog, alli podemos cambiar las IDs y la clases por las nuestras, claro cambiando a su vez las mismas en el css.
Por lo general los divs contenedores se abren en header.tpl, y se cierran en footer.tpl
La carpeta ‘imgs’ que creamos anteriormente la utilizaremos si usamos un theme con imagenes, las imagenes las colocaremos ahi, y las cargamos de la siguiente forma ‘url(’/..img/imagendeejemplo.jpg’)’ en la hoja de estilo en la parte que queramos.