En el pasado hemos hablado de cómo crear un child-theme. En esa ocasión vamos a hacer algo un poco más avanzado, que es crear un theme complentametne desde 0. Vamos allá!
Para empezar, vamos a crear una carpeta con el nombre que le queramos dar al theme, pero por favor, jamás de los jamases uséis espacios ni caracteres especiales como acentos o eñes para los nombres de los archivos. Y dentro vamos a crear los archivos arriba mencionados en blanco (sin contenido, de momento).
Con un editor de texto (Word no es un editor de texto, es un procesador de texto. Editor de texto es el bloc de notas, pspad,… el que trae dreamweaver… ese tipo de editores de texto) abrimos style.css y el el principio del fichero escribimos:
/*
Theme Name: elnombredemitheme
Theme URI: la URL del tema, habitualmente la página de venta o descarga
Description: una breve descripción
Version: 1
Author: mi nombre
Author URI: la URL de mi web
*/
Con eso wordpress ya «sabe» que eso que está en esa carpeta es un theme, aunque aún no hay nada para mostrar. Debajo irán todas las reglas de estilo que queramos usar.
Ahora abrimos index.php y escribimos:
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<br class="clr">
<div class="entry">
<?php the_content('<p class="serif">Sigue leyendo »</p>'); ?>
</div>
</div>
<?php endwhile; else: ?>
<h2 class="center">No encontrado</h2>
<?php endif; ?>
</div>
<?php get_footer(); ?>
Aquí arriba tenemos, entre if (have_posts()) y <?php endif; ?> el mencionado loop.
Por encima del loop tenemos <?php get_header(); ?> que es para incluir el contenido de header.php y por debajo <?php get_footer(); ?> que es para incluir footer.php. Entre medias lo que hay es un poco de marcado html y poco más.
Básicamente, el loop lo que “dice” es “si hay posts”, “mientras los haya”, “tráeme el contenido de dicho post”.
Otro dia continuaremos añadiendole cosas a este theme, que la verdad es que asi tal cual es muy primitivo, pero para un primer contacto, no está mal.
Después muestra el titulo (del post) y el contenido (del post). Mientras haya entradas por mostrar hará loop entre la línea donde dice
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Y donde dice
<?php endwhile;
Y en el momento que se acaben los post por mostrar caerá fuera del if, es decir en
<?php endif; ?>
Y si no hubiera nada, caería en
else: ?>
para mostrar el mensaje de error y después seguir con el resto del código.
Este archivo index es muy muy sencillo, pues aun no hay sidebar, ni comentarios… eso se lo pondremos más adelante.
Para tener una primerísima versión de nuestro theme solo falta tocar 2 archivos más, header y footer.
En header.php vamos a escribir la cabecera de html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" >
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" >
<?php wp_head(); ?>
</head>
<body <?php body_class($class); ?>>
Evidentemente podemos poner muchísimas más cosas en la cabecera, de momento con esto vamos bien.
La línea más importante para que todo funcione es:
<?php wp_head(); ?>
Que es un hook de wordpress y sin él, los plugins y las funcionalidades built-in no funcionarán o no lo harán correctamente. Aunque el resto también tiene su importancia si queremos que todo se vea correctamente.
footer.php es más sencillo.
Allí solo completamos (y cerramos, que no queden etiquetas abiertas) el marcado html y tenemos esta línea que, como su “hermana” de la cabecera, es imprescindible si queremos que las cosas funcionen correctamente:
<?php wp_footer(); ?>
De forma que el footer queda algo así como:
<?php wp_footer(); ?>
</body>
</html>
Si por ejemplo queremos incluir un sidebar, necesitamos, por un lado registrarlo (en functions.php)
add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
register_sidebar( array(
'name' => __( 'Mi Sidebar Principal', 'theme-slug' ),
'id' => 'sidebar-1',
'description' => __( 'Sidebar principal de mi sitio.', 'theme-slug' ),
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
) );
}
y por otro incluirlo, en el lugar donde deseemos que aparezca con <?php get_sidebar(); ?>
De igual forma, el template de los comentarios se puede incluir (lo normal es que sea en single.php y/o page.php) añadiendo la linea <?php comments_template(); ?>.
Comentarios