Manual para la creación de plantillas para wodpress

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Manual para la creación de plantillas para wodpress"

Miguel Páez Sandoval
hace 7 años
Vistas:

1 Manual para la creación de plantillas para wodpress Creado por Enrique Martínez Para Estructura Base de archivos de una Plantilla WordPress Para crear una plantilla debemos seguir determinadas normas para que wordpress las integre en su núcleo o en su sistema. Los archivos mínimos que debe tener una plantilla WordPress son: Index.php y style.php pero eso sería demasiado básico así que aremos algo mejor: header.php es nuestro encabezado sidebar.php corresponde a las noticias, buscador, últimos post etc. footer.php nuestro pie de pagina functions.php funciones que veremos más adelante style.css - nuestra hoja de estilos index.php el home o página principal donde llamaremos los otros archivos y el loop de Wordpress Vamos a crear estos archivos en la carpeta themes de wodpress dentro de una carpeta llamada tema1 o como quieran. Hasta ahora tenemos todos estos archivos en blanco entonces vamos a ir a nuestro style.css y escribiremos estas líneas a fin que wordpress reconozca nuestra plantilla /* Theme Name: Mi Tema1 Theme URI: Description: Tema básico Version: 0.1 Author: Enrique Martínez Author URI: */ Ahora ya wodrpress será capaz de reconocer el tema, así que lo activamos.

2 Ver la siguiente imagen: No verán la caja naranja ni el nombre Tutorialesenvideo.net ya que esto corresponde a un archivo llamado screenshot.png de 600x450 pixeles alojado en la misma carpeta de nuestro tema. En este caso lo más practico seria copiar este archivo de otro tema y editar la imagen y poner una captura de nuestro tema cuando este esté pronto mientras estará en gris.

Esta imagen corresponde a los nombres de los div que vamos a usar para mantener una buena lógica de lo que hacemos. Comencemos con el código header.php <!

3 Esta imagen corresponde a los nombres de los div que vamos a usar para mantener una buena lógica de lo que hacemos. Comencemos con el código header.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <?php language_attributes();?>> <head>

4 <meta http-equiv="content-type" content="<?php bloginfo('html_type');?>; charset=<?php bloginfo('charset');?>" /> <title><?php bloginfo('name');?> <?php wp_title();?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>>/css/reset.css" /> ***Esto es opcional si queremos incluir el frame 960 o otra hoja de estilos*** <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/css/960.css" /> *************************************************************** Este código enlaza la hoja de estilos style.css <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url');?>" /> <?php wp_head();?> esto permite aceptar plugins </head> <body> abrimos el body y nuestro contenedor principal llamado wrapper, estos se cerraran en el footer <div id="wrapper"> <div id="header"> <h1><?php bloginfo('name');?></h1> <p><?php bloginfo( 'description' );?></p> </div>  <div id="menu"> <ul class="menu"> <li><a href="<?php echo get_option('home');?>/">home</a></li> <?php wp_list_pages('title_li=');?> </ul> </div>

5 *********************fin de head.php*************************** sidebar.php <div id="sidebar"> <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar')) : else :?> <h4>entradas recientes</h4> <ul> <?php get_archives('postbypost', 10);?> </ul> <h4>archivo</h4> <ul> <?php wp_get_archives('type=monthly');?> </ul> <?php endif;?> </div> ************fin sidebar.php************************ footer.php <div id="footer"> <p>copyright 2013 <?php bloginfo('name');?></p> </div> </div> <?php wp_footer();?> </body> </html>

6 **************fin footer********************** functions.php <?php if ( function_exists('register_sidebar') ): register_sidebar(array( 'name' => 'Sidebar', 'id' => 'sidebar', 'description' => 'Sidebar Widget', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); endif;?> *************fin functions.php**************

7 Index.php <?php get_header();?> <div id="content" class="clearfix"> <div class="grid_12 alpha" id="post"> <?php if (have_posts()) : while (have_posts()) : the_post();?> <div id="post-content"> <a class="post-title" href="<?php the_permalink();?>"><h2><?php the_title();?></h2></a> <div class="date">escrito el <?php the_time('j \d\e F \d\e Y');?> a las <?php the_time()?>, por <?php the_author();?> <small><?php edit_post_link('(editar este contenido?)','','');?></small></div> <?php the_content( ('Seguir leyendo'));?> <div id="postmeta"> <p>categoría: <?php the_category(', ');?></p> </div> </div> <?php endwhile; else:?> <p><strong>ups! Aqui no hay nada.</strong></p> <?php endif;?> </div>  <?php get_sidebar();?> </div> <?php get_footer();?> ********************fin index.php********************* Bueno con esto pronto solo nos queda darle estilo a nuestro tema dentro de style.css Esto será en el próximo manual

8 Saludos Enrique Martínez

Documentos relacionados

Segundo seminario de Wordpress Las tripas de Wordpress y sus plugins

Segundo seminario de Wordpress Las tripas de Wordpress y sus plugins Segundo seminario de Wordpress Las tripas de Wordpress y sus plugins 1 2 3 Introducción a Worpdress Las tripas de Wordpress y sus plugins