docManual plantillas wordpress
download 
Demanda Transcripción
Manual plantillas wordpress
Manual para la creación de plantillas para wodpress
Creado por Enrique Martínez
Para http://www.tutorialesenvideo.net
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: http://www.tutorialesenvideo.net
Description: Tema básico
Version: 0.1
Author: Enrique Martínez
Author URI: http://www.tutorialesenvideo.net
*/
Ahora ya wodrpress será capaz de reconocer el tema, así que lo
activamos.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php
language_attributes(); ?>>
<head>
<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"
bloginfo('template_directory'); ?>/css/960.css" />
href="<?php
***************************************************************
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>
<!-- Fin header -->
<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><!-- Fin menu -->
*********************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><!-- Fin footer-->
</div><!-- Fin wrapper-->
<?php wp_footer(); ?>
</body>
</html>
**************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**************
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><!-- Fin #postmeta -->
</div><!-- Fin #post-content -->
<?php endwhile; else: ?>
<p><strong>Ups! Aqui no hay nada.</strong></p>
<?php endif; ?>
</div> <!-- Fin #post -->
<?php get_sidebar(); ?>
</div><!-- Fin #content -->
<?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
Saludos
Enrique Martínez
http://www.tutorialesenvideo.net
