Damos comienzo aquí a una serie de artículos sobre la creación de un tema WordPress. En este primer artículo, vamos a crear ya nuestra primera plantilla, sin muchas explicaciones, que por supuesto no nos ofrecerá un resultado excesivamente atractivo, pero nos servirá de base para posteriores mejoras hasta dar con el resultado deseado.
Indice
Tema WordPress. Pasos previos:
Primeramente, tenemos que crear el directorio en el que pondremos nuestro tema. Para ello, iremos al directorio donde tengamos wordpress > wp-content > themes, y allí creamos un nuevo directorio, p.ej., ‘miTema’.
A partir de aquí, con un editor de texto plano, crearemos los ficheros básicos de este tema, empezando por los dos imprescindibles:
style.css
|
1 2 3 4 5 6 7 8 |
/* Theme Name: Minority Theme URI: http://sergiotoca.com Description: Tema de WP cuyo front page se basa en Minority Report Author: Sergio TOCA MORENO Author URI: http://sergiotoca.com Version: 1.0 */ |
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php get_header(); ?> <section id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php the_content(); ?> <?php endwhile; else: ?> <p><?php _e('No hay entradas .'); ?></p> <?php endif; ?> </section> <!-- Fin de la sección main --> <?php get_sidebar(); get_footer(); ?> |
Estos dos ficheros, sí o sí, deben estar. A partir de aquí, desarrollamos los otros dos que son necesarios para la creación de la página:
header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <!-- Definir el viewport para dispositivos móviles --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head> <body> <div class="wrapper"> <header> <h1><a href="<?php echo get_option( 'home' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> </header> |
|
1 2 3 4 5 6 7 8 9 |
<footer> <p>The Minority Theme by STM</p> </footer> </div> <!-- Fin de wrapper --> <?php wp_footer(); ?> </body> </html> |
Y, finalmente, dispondremos dos ficheros más, para poder tener una barra lateral con elementos adicionales (widgets):
|
1 2 3 4 5 6 |
<section id="barraLateral"> <?php if (!function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar( 'Main Sidebar')) : endif; ?> </section> |
functions.php
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php // Barra Lateral if(function_exists('register_sidebar')) register_sidebar(array( 'name' => 'Main Sidebar', 'before_widget' => '<hr>', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); ?> |
El resultado, francamente, es lamentable. Pero no nos preocupemos, iremos adentrándonos en el código, entendiéndolo, y mejorándolo, hasta que consigamos un resultado digno.
En cuanto a conocimientos, sería interesante saber acerca de HTML, CSS, PHP, JavaScript, jQuery, conocer el WP Codex, SQL, saber leer perfectamente inglés, e incluso cómo abrir una offshore en Panamá (para ocultar el dinero que ganaremos con la creación de plantillas, jeje).
Pero si no es así, intentaré explicar la codificación lo más detenidamente que pueda, para que cualquiera pueda seguir las explicaciones.
Editado
Esta entrada se basa en el artículo Aprende a crear un tema WP desde 0 de Sandra Sanmartí.
Una respuesta a “Crea el tema WordPress más simple”