De HTML a WordPress

De HTML a WordPress

Hace poco se publicó un tutorial de como pasar una página de PSD a HTML, en esta ocasión usamos la base que teníamos para pasar nuestra plantilla a WordPress. Te recomiendo que visites PHP útil en WordPress para que consigas muchos de los códigos q vamos a usar aquí.

Paso 1

Lo primero que debemos hacer es crear un nuevo directorio en la carpeta wp-content/themes/ de tu instalación de WordPress (http://www.tupagina.com/wp-content/themes/tutema). A esa carpeta vas a subir las imágenes y aquí es a donde vamos a agregar los archivos que creemos luego en este tutorial.

tut1

Paso 2

Ahora vamos a trabajar con el estilo, Ábrelo con tu dreamweaver y agrega las siguientes líneas al principio del mismo.

1
2
3
4
5
6
7
8
9

/*
Theme Name: Nombre de tu tema
Theme URI: URL de tu tema
Description: Descripción de tu tema
Version: Version de tu tema
Author: Autor del tema
Author URI: URL del autor del tema
Tags: Etiquetas (separadas por coma)
*/

*Coloca tus datos en los campos correspondientes
Guarda tu estilo editado con el nombre de “style.css” en la carpeta creada en el primer paso. Las líneas que agregamos arriba sirven para que WordPress identifique tu tema y lo acepte, sin ellas no vas a poder usar el mismo.

Paso 3

Debes pensar tu tema como una unión de partes de una página, es decir, una página común (index) que une a otras tres (header, sidebar y footer). Con el dibujo de abajo entenderás mejor de que te hablo.

Vamos a trabajar con el primero, con el header, abre una nueva página PHP en tu dreamweaver o cualquier programa que uses para crear webs y copia todo el header de tu web en HTML, en nuestro caso es lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tu P&aacute;gina Web</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="wraper"><!--Comienza Wraper-->
		<div id="header"><!--Comienza header-->
			<div id="logo"><a href="#">Tu página web</a></div><!--Logo de la web-->
			<ul id="menu"><!--Comienza menu-->
				<li><a href="#" id="menu-home">Home</a></li>
				<li><a href="#" id="menu-web">Web</a></li>
				<li><a href="#" id="menu-tutoriales">Tutoriales</a></li>
				<li><a href="#" id="menu-contacto">Contacto</a></li>
			</ul><!--Termina menu-->
		</div><!--Termina header-->
		<div id="contenido"><!--Comienza contenido-->
			<div id="imagen-contenido"></div><!--Imagen que esta sobre el sidebar y el contenido-->

*Justo antes de que comience el div del sidebar.

Primero hacemos la parte del head, vamos a agregar los siguientes códigos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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="text/html; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_home()) { echo bloginfo('name');
			} elseif (is_404()) {
			echo '404 No Encontrado';
			} elseif (is_category()) {
			echo 'Categoria:'; wp_title('');
			} elseif (is_search()) {
			echo 'Resultados de la Busqueda';
			} elseif ( is_day() || is_month() || is_year() ) {
			echo 'Archivos:'; wp_title('');
			} else {
			echo wp_title('');
			}
			?></title>
<link href="<?php bloginfo('stylesheet_url'); echo '?'.filemtime( get_stylesheet_directory().'/style.css'); ?>" rel="stylesheet" type="text/css" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" /> 
<?php }?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>

Vamos a revisar algunos códigos PHP que son importantes aquí, los que no nombre, los encuentras AQUI:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php if (is_home()) { echo bloginfo('name');
			} elseif (is_404()) {
			echo '404 No Encontrado';
			} elseif (is_category()) {
			echo 'Categoria:'; wp_title('');
			} elseif (is_search()) {
			echo 'Resultados de la Busqueda';
			} elseif ( is_day() || is_month() || is_year() ) {
			echo 'Archivos:'; wp_title('');
			} else {
			echo wp_title('');
			}
?>

Este código lo que hace es mostrar el titulo de forma dinámica, es decir, cuando estés en un post, va a mostrar algo así: “Nombre del post Tupaginaweb”. También mostrara las categorías, los archivos y los resultados de la búsqueda.

1

<link href="<?php bloginfo('stylesheet_url'); echo '?'.filemtime( get_stylesheet_directory().'/style.css'); ?>" rel="stylesheet" type="text/css" />

Muestra tu estilo de una manera particular, evita q se almacene en la cache.

1
2
3
4
5

<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" /> 
<?php }?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Muestra un código útil para las búsquedas, el link RSS y el link de pingback.

Esta primera parte del código (la que está en el head) puede ser la misma para todos los temas, es decir, si estás haciendo el tuyo propio tienes la posibilidad de copiar y pegar ese head tal cual esta ahí.

Ahora comenzamos con el body de tu web, solo copia los códigos que muestren la URL y el nombre de tu web donde corresponde. Al final vamos a tener nuestro archivo head.php de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!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="text/html; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_home()) { echo bloginfo('name');
			} elseif (is_404()) {
			echo '404 No Encontrado';
			} elseif (is_category()) {
			echo 'Categoria:'; wp_title('');
			} elseif (is_search()) {
			echo 'Resultados de la Busqueda';
			} elseif ( is_day() || is_month() || is_year() ) {
			echo 'Archivos:'; wp_title('');
			} else {
			echo wp_title('');
			}
			?></title>
<link href="<?php bloginfo('stylesheet_url'); echo '?'.filemtime( get_stylesheet_directory().'/style.css'); ?>" rel="stylesheet" type="text/css" />
<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<meta name="description" content="<?php bloginfo('description') ?>" />
<?php if(is_search()) { ?>
<meta name="robots" content="noindex, nofollow" /> 
<?php }?>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
	<div id="wraper"><!--Comienza Wraper-->
		<div id="header"><!--Comienza header-->
			<div id="logo"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></div><!--Logo de la web-->
			<ul id="menu"><!--Comienza menu--><!--Para saber hacer menús para WordPress visita http://www.skyandstars.net/menu-con-tres-estados-para-cms/-->
				<li><a href="<?php echo get_option('home'); ?>" id="menu-home">Home</a></li>
				<li><a href="<?php echo get_option('home'); ?>/web/" id="menu-web">Web</a></li>
				<li><a href="<?php echo get_option('home'); ?>/tutoriales/" id="menu-tutoriales">Tutoriales</a></li>
				<li><a href="<?php echo get_option('home'); ?>/contacto/" id="menu-contacto">Contacto</a></li>
			</ul><!--Termina menu-->
		</div><!--Termina header-->
		<div id="contenido"><!--Comienza contenido-->
			<div id="imagen-contenido"></div><!--Imagen que esta sobre el sidebar y el contenido-->

*Recuerda guardar este archivo como header.php

Paso 4

Es el turno del sidebar, para eso tenemos que hacer algunas modificaciones al estilo ya que vamos a habilitar nuestro tema a los widgets de WordPress. Agregamos lo siguiente a nuestro estilo original:

1
2
3
4
5
6
7
8
9

.widget {
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #545b5d;
	margin-bottom: 13px;
}
li, ul, ol {
margin-left: 10px;
}

No es más que estilo a los widgets que vamos a usar en nuestro sidebar.

Ahora abre una nueva página PHP y pega lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
if ( function_exists('register_sidebar') )
{
 
 register_sidebar
    (   array
        (
          'name' => 'Barra Lateral',
          'before_widget' => '<div class="widget">',
          'after_widget' => '</div>',
          'before_title' => '<h1>',
          'after_title' => '</h1>',
        )
    );
}
?>

Guarda esta página como “functions.php”.

Copia sidebar de nuestra página HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

			<div id="sidebar"><!--Comienza sidebar-->
				<h1>Bienvenida</h1>
				<p>Bienvenidos a tupagina web, aquí puedes encontrar todo lo que quieras sobre diseño y mucho mas, espero que disfrutes el contenido de esta página</p>
				<h1>Afiliados</h1>
				<p>Carlos, Luis, Pedro, Carmen, Alberto, Steven, Jose Luis, Maickol, Jesus.</p>
				<h1>Paginas</h1>
				<ul id="menu-sidebar"><!--Comienza menu sidebar-->
					<li><a href="#" class="menu-paginas">Home</a></li>
					<li><a href="#" class="menu-paginas">Web</a></li>
					<li><a href="#" class="menu-paginas">Tutoriales</a></li>
					<li><a href="#" class="menu-paginas">Photoshop</a></li>
					<li><a href="#" class="menu-paginas">WordPress</a></li>
					<li><a href="#" class="menu-paginas">CuteNews</a></li>
					<li><a href="#" class="menu-paginas">Coppermine</a></li>
				</ul><!--Termina menu sidebar-->
				<h1>Copyrigth</h1>
				<p>Todo el contenido que se encuentra en esta página es 100% original, está prohibida la copia parcial o total de la misma sin permiso previo del <a href="#">Administrador</a></p>
			</div><!--Termina sidebar-->

Todo el contenido del sidebar lo puedes agregar con widgets, de manera que vamos a dejar solo los divs, nuestro archivo sidebar.php nos va a quedar de la siguiente manera:

1
2
3
4
5

			<div id="sidebar"><!--Comienza sidebar-->
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<?php endif; ?>
			</div><!--Termina sidebar-->

*Recuerda guardar este archivo como sidebar.php

Paso 5

Seguimos con el footer, copia todo lo que está debajo del div del contenido central, en nuestro caso sería lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

			<div class="clear"></div>
		</div><!--Termina contenido-->
	</div><!--Termina Wraper-->
	<div id="footer"><!--Comienza footer-->
		<div id="footer-contenido"><!--Comienza footer contenido-->
			<div id="footer-izquierda"><!--Comienza footer izquierda-->
				<div id="tu-opinion"></div>
				<div id="footer-izquierda-contenido"><!--Comienza footer izquierda contenido-->
				<p>Nombre:</p> <input type="text" class="formulario-footer" /><br />
				<p>Email:</p> <input type="text" class="formulario-footer" /><br />
				<p>Comentario:</p> <textarea id="texto-footer"></textarea>
				</div><!--Termina footer izquierda contenido-->
			</div><!--Termina footer izquierda-->
			<div id="footer-derecha"><!--Comienza footer derecha-->
				<div id="autores-web"></div>
				<p><b>Esteban:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
				<p><b>Luis:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
			</div><!--Termina footer derecha-->
			<div class="clear"></div>
		</div><!--Termina footer contenido-->
	</div><!--Termina footer-->
</body>
</html>

A esta página al igual que con el header solo hay que agregarle los códigos para agregar la URL de tu página y el nombre de la misma, nuestro footer quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

			<div class="clear"></div>
		</div><!--Termina contenido-->
	</div><!--Termina Wraper-->
	<div id="footer"><!--Comienza footer-->
		<div id="footer-contenido"><!--Comienza footer contenido-->
			<div id="footer-izquierda"><!--Comienza footer izquierda-->
				<div id="tu-opinion"></div>
				<div id="footer-izquierda-contenido"><!--Comienza footer izquierda contenido-->
				<p>Nombre:</p> <input type="text" class="formulario-footer" /><br />
				<p>Email:</p> <input type="text" class="formulario-footer" /><br />
				<p>Comentario:</p> <textarea id="texto-footer"></textarea>
				</div><!--Termina footer izquierda contenido-->
			</div><!--Termina footer izquierda-->
			<div id="footer-derecha"><!--Comienza footer derecha-->
				<div id="autores-web"></div>
				<p><b>Esteban:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
				<p><b>Luis:</b> Creador, adminitrador y editor de tupaginaweb con experiencia en diferentes medios de creacion de paginas webs</p>
			</div><!--Termina footer derecha-->
			<div class="clear"></div>
		</div><!--Termina footer contenido-->
	</div><!--Termina footer-->
		<?php wp_footer(); ?>
</body>
</html>

*Recuerda guardarlo como footer.php
El código de la línea 22 es importante que lo tengas ya que es usado por muchos plugins.

Paso 6

Es el turno del archivo más importante y quizás el mas difícil de nuestro tema en WordPress, se trata del index, este archivo lo que se encarga es de acoplar las paginas que creamos anteriormente (header, sidebar y footer) y también de llamar a las noticias que publiquemos. Vamos a entender un poco como funciona el index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php get_header(); /*Inserta el header*/?>
<?php get_sidebar(); /*Inserta el sidebar*/?>
<?php if (have_posts()) : /*Abre el loop*/?>
<?php while (have_posts()) : the_post(); /*abre el post*/?>
 
Aquí colocas el código correspondiente al aspecto que van a tener tus noticias cuando se muestren
 
<?php endwhile; /*Termina el post*/?>
 
Aquí colocas los links a las entradas siguientes o a las entradas anteriores
 
<?php else : /*Una condicion*/?>
 
Aquí colocas lo que va a ser mostrado en caso de que no se encuentre la página
 
<?php endif; /*Termina el loop*/?>
<?php get_footer(); /*Inserta el footer*/?>

Los temas de WordPress trabajan así como te mostré arriba, de tal manera que si entiendes como funciona este archivo index, lo demás va a ser más sencillo. Vamos a hacer nuestro index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php get_header(); ?>
<?php get_sidebar(); ?>
			<div id="contenido-central"><!--Comienza contenido central-->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
				<div class="entrada" id="post-<?php the_ID(); ?>"><!--Comienza entrada-->
					<h1><?php the_title(); ?></h1>
					<div class="imagen-entrada"><img src="<?php bloginfo('template_directory'); ?>/Imagenes/entrada.png" alt="" /></div><!--Para aprender a colocar esta imagen en cada post, visita http://www.skyandstars.net/imagen-caracteristica-del-post-wordpress/-->
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<?php the_content(''); ?>
					</div><!--Termina entrada contenido-->
					<p class="seguir-leyendo"><a href="<?php the_permalink() ?>">Seguir Leyendo</a></p><!--Seguir leyendo-->
				</div><!--Termina entrada-->
<?php endwhile; ?>
<?php next_posts_link('&#8249; Entradas Antiguas') ?><br />
<?php previous_posts_link('Entradas nuevas &#8250;') ?>
<?php else : ?>
				<div class="entrada"><!--Comienza entrada-->
					<h1>No Encontrado</h1>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						Disculpa, El post que estas buscando no ha sido encontrado, por favor revisa nuevamente.
					</div><!--Termina entrada contenido-->
				</div><!--Termina entrada-->
<?php endif; ?>
			</div><!--Termina contenido central-->
<?php get_footer(); ?>

*Recuerda guardar este archivo como index.php
Como puedes darte cuenta la estructura es básicamente igual como te la mostré arriba, es importante que notes también la ubicación del div “contenido central”, del resto son códigos que puedes encontrar en este tutorial.

Paso 7

Cuando haces clic en “Seguir leyendo” debe aparecer la entrada completa, esta entrada va a tener también los comentarios que se hagan en el post, para eso vamos a crear dos archivos, single.php y comments.php.

Primero que nada debemos tener un modelo de cómo va a quedar nuestra página en HTML, algo parecido a lo que hicimos en el tutorial “de PSD a HTML”, mi página modelo HTML de los comentarios me quedo así:

tu22

Lo que va a cambiar con respecto a nuestro index es la sección que llamamos “contenido central”, aquí esta como me quedo a mí.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

			<div id="contenido-central"><!--Comienza contenido central-->
				<div class="entrada"><!--Comienza entrada-->
					<h1>Nuevo Tema</h1>
					<div class="imagen-entrada"><img src="Imagenes/entrada.png" alt="" /></div>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<p>Esta es una página web creada por skyandstars para hacer un tutorial de cómo hacer una página web desde cero puedes ver el resultado visitando <a href="#">http://www.skyandstars.net</a>, que esperas para hacerlo?. Esta es una página web creada para mostrarte como debes hacer tu propia página, que esperas para ingresar?</p>
					</div><!--Termina entrada contenido-->
					<div id="caracteristicas"><!--Comienza caracteristicas-->
						<p>Entrada Publicada el 14 de Julio del 2009 por <a href="#">Mijael166</a> y esta archivada bajo la(s) categorías Tutorial, Registro, web, contenido tutoriales. Hasta ahora hay 13 Comentarios</p>
						</div><!--Termina caracteristicas-->
					<h1 id="comentarios-referencia">Hay 2 Comentarios en tutoriales wordpress</h1>
					<div class="comentario"><!--Comienza comentario-->
						<img src="http://www.gravatar.com/avatar/5b5e443530ef845000a83ed96485f020?s=80&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" alt="" class="avatar" />
						<h2><a href="#">Mijael</a></h2>
						<p class="fecha">13 de Julio del 2009</p>
						<p>Muy buen tutorial bla bla bla bla bla bla bla bla bla bla bla blaEntrada Publicada el 14 de Julio del 2009 por</p>
						<div class="clear"></div>
					</div><!--Termina comentario-->
					<div class="comentario"><!--Comienza comentario-->
						<img src="http://www.gravatar.com/avatar/5b5e443530ef845000a83ed96485f020?s=80&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" alt="" class="avatar" />
						<h2><a href="#">Mijael</a></h2>
						<p class="fecha">13 de Julio del 2009</p>
						<p>Muy buen tutorial bla bla bla bla bla bla bla bla bla bla bla blaEntrada Publicada el 14 de Julio del 2009 por</p>
						<div class="clear"></div>
					</div><!--Termina comentario-->
					<h1>Deja un Comentario</h1>
					<div id="formulario-contacto"><!--Comienza formulario contacto-->
						<input type="text" value="" class="primer-form" />*Nombre<br />
						<input type="text" value="" class="primer-form" />*E-Mail<br />
						<input type="text" value="" class="primer-form" />Web<br />
						<textarea id="segundo-form"></textarea>Comentario<br />
						*Campos Obligados
					</div><!--Termina formulario contacto-->
				</div><!--Termina entrada-->
			</div><!--Termina contenido central-->

A esta página hay que dividirla también en dos nuevas, una que va a ser la estructura general (single.php) y otra que va a ser la encargada de llamar a los comentarios (comments.php), así lo seleccione yo en esta página HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13

			<div id="contenido-central"><!--Comienza contenido central-->
				<div class="entrada"><!--Comienza entrada-->
					<h1>Nuevo Tema</h1>
					<div class="imagen-entrada"><img src="Imagenes/entrada.png" alt="" /></div>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<p>Esta es una página web creada por skyandstars para hacer un tutorial de cómo hacer una página web desde cero puedes ver el resultado visitando <a href="#">http://www.skyandstars.net</a>, que esperas para hacerlo?. Esta es una página web creada para mostrarte como debes hacer tu propia página, que esperas para ingresar?</p>
					</div><!--Termina entrada contenido-->
					<div id="caracteristicas"><!--Comienza caracteristicas-->
						<p>Entrada Publicada el 14 de Julio del 2009 por <a href="#">Mijael166</a> y esta archivada bajo la(s) categorías Tutorial, Registro, web, contenido tutoriales. Hasta ahora hay 13 Comentarios</p>
						</div><!--Termina caracteristicas-->
AQUI SE VA A LLAMAR AL ARCHIVO COMMENTS.PHP
				</div><!--Termina entrada-->
			</div><!--Termina contenido central-->

Ese sería el modelo en HTML del archivo single.php, fíjate que en la línea 11 debemos llamar al archivo comments.php para que nos muestre los comentarios de las entradas.

Ahora empezamos a crear nuestra página single.php. La estructura es muy parecida a la del archivo index.php, te muestro como es:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php if (have_posts()) : /*Abre el LOOP*/?>
<?php while (have_posts()) : the_post(); /*Abre la entrada*/?>
 
Aquí colocas el código PHP encargado de mostrar las entradas
 
<?php comments_template(); /*llama a los comentarios*/?>
 
<?php endwhile; /*Termina la entrada*/?>
<?php else : ?>
 
Aquí colocas lo que se va a mostrar cuando no se encuentre la página
 
<?php endif; /*Termina el LOOP*/?>
<?php get_footer(); ?>

Como te dije anteriormente, la estructura es muy parecida, solo que aquí agregamos el archivo comments.php y no mostramos los links a las entradas anteriores y a las entradas siguientes, ahora te dejo como ha quedado nuestro archivo single.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
25
26
27

<?php get_header(); ?>
<?php get_sidebar(); ?>
			<div id="contenido-central"><!--Comienza contenido central-->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
				<div class="entrada" id="post-<?php the_ID(); ?>"><!--Comienza entrada-->
					<h1><?php the_title(); ?></h1>
					<div class="imagen-entrada"><img src="<?php bloginfo('template_directory'); ?>/Imagenes/entrada.png" alt="" /></div><!--Para aprender a colocar esta imagen en cada post, visita http://www.skyandstars.net/imagen-caracteristica-del-post-wordpress/-->
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<?php the_content(''); ?>
					</div><!--Termina entrada contenido-->
					<div id="caracteristicas"><!--Comienza caracteristicas-->
						<p>Entrada Publicada el <?php the_time('j F, Y') ?> por <a href="<?php the_author_url() ?>"><?php the_author() ?></a> y esta archivada bajo la(s) Categoria(s)<?php the_category(', ') ?>. Hasta ahora <a href="<?php the_permalink() ?>/#comentarios-referencia"><?php comments_number('no hay Comentarios', 'hay 1 Comentario', 'hay % comentarios'); ?></a></p>
						</div><!--Termina caracteristicas-->
<?php comments_template(); ?>
				</div><!--Termina entrada-->
<?php endwhile; ?>
<?php else : ?>
				<div class="entrada"><!--Comienza entrada-->
					<h1>No Encontrado</h1>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						Disculpa, El post que estas buscando no ha sido encontrado, por favor revisa nuevamente.
					</div><!--Termina entrada contenido-->
				</div><!--Termina entrada-->
<?php endif; ?>
			</div><!--Termina contenido central-->
<?php get_footer(); ?>

*Recuerda guardar este archivo como single.php

Paso 8

El modelo HTML de nuestro archivo comments.php me ha quedado así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

					<h1 id="comentarios-referencia">Hay 2 Comentarios en tutoriales wordpress</h1>
					<div class="comentario"><!--Comienza comentario-->
						<img src="http://www.gravatar.com/avatar/5b5e443530ef845000a83ed96485f020?s=80&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" alt="" class="avatar" />
						<h2><a href="#">Mijael</a></h2>
						<p class="fecha">13 de Julio del 2009</p>
						<p>Muy buen tutorial bla bla bla bla bla bla bla bla bla bla bla blaEntrada Publicada el 14 de Julio del 2009 por</p>
						<div class="clear"></div>
					</div><!--Termina comentario-->
					<div class="comentario"><!--Comienza comentario-->
						<img src="http://www.gravatar.com/avatar/5b5e443530ef845000a83ed96485f020?s=80&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" alt="" class="avatar" />
						<h2><a href="#">Mijael</a></h2>
						<p class="fecha">13 de Julio del 2009</p>
						<p>Muy buen tutorial bla bla bla bla bla bla bla bla bla bla bla blaEntrada Publicada el 14 de Julio del 2009 por</p>
						<div class="clear"></div>
					</div><!--Termina comentario-->
					<h1>Deja un Comentario</h1>
					<div id="formulario-contacto"><!--Comienza formulario contacto-->
						<input type="text" value="" class="primer-form" />*Nombre<br />
						<input type="text" value="" class="primer-form" />*E-Mail<br />
						<input type="text" value="" class="primer-form" />Web<br />
						<textarea id="segundo-form"></textarea>Comentario<br />
						*Campos Obligados
					</div><!--Termina formulario contacto-->

Al igual que los archivos index y single el archivo comments.php tiene una estructura más o menos definida, aquí te muestro como funciona.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<?php
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Por favor no cargues esta página directamente, Gracias!');
 
	if (!empty($post->post_password)) { 
		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  
			?>
 
			<p>Esta entrada esta protegida con password.</p>
 
			<?php
			return;
		}
	}
	$oddcomment = 'class="alt" ';
/*Lineas super importantes, no edites nada hasta aquí*/?>
<?php if ($comments) : /*Abre la condicion "si hay comentarios muestro lo siguiente"*/?>
					<?php foreach ($comments as $comment) : /*Abre comentarios*/?>
 
					Aquí colocas la estructura PHP que van a tener los comentarios
 
					<?php endforeach; /*Cierra comentarios*/?>
 <?php else : ?>
 
	<?php if ('open' == $post->comment_status) : ?>
 
	 <?php else : ?>
 
		Aquí colocas lo que quieras que se muestre en caso que los comentarios estén cerrados
 
	<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : /*Comienza, "si los comentarios estan abiertos"*/?>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
 
Aquí colocas lo que quieras que se muestre en caso de que se necesite ingresar para publicar comentarios
 
<?php else : ?>
					<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
 
Aquí colocas lo que quieras que se muestre en caso de que el usuario que comenta este en su sesión de usuario
 
<?php else : ?>
						Aquí la sección del formulario que no se va a mostrar a los usuarios que estén en su sesión de usuarios
<?php endif; ?>
						Aquí el resto del formulario
						</form>
<?php endif; ?>
 
<?php endif; ?>

Este es el archivo mas difícil de modificar a mi parecer, mi consejo es que si estas comenzando con tu tema WordPress te guíes del archivo comments.php que te dejo aquí para que puedas conseguir el tuyo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<?php
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Por favor no cargues esta página directamente, Gracias!');
 
	if (!empty($post->post_password)) { 
		if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  
			?>
 
			<p>Esta entrada esta protegida con password.</p>
 
			<?php
			return;
		}
	}
	$oddcomment = 'class="alt" ';
?>
<?php if ($comments) : ?>
					<h1 id="comentarios-referencia"><?php comments_number('No hay comentarios', '1 Comentario', '% Comentarios' );?> en <?php the_title(); ?></h1>
					<?php foreach ($comments as $comment) : ?>
					<div class="comentario"><!--Comienza comentario-->
						<img src="<?php echo get_avatar( $comment, 80 ); ?>" alt="" class="avatar" />
						<h2><?php comment_author_link() ?></h2>
						<p class="fecha"><?php comment_date('F jS, Y') ?></p>
						<?php if ($comment->comment_approved == '0') : ?>
						<p>Tu comentario espera moderación.</p>
						<?php endif; ?>
						<?php comment_text() ?>
						<div class="clear"></div>
					</div><!--Termina comentario-->
					<?php endforeach; ?>
 <?php else : ?>
 
	<?php if ('open' == $post->comment_status) : ?>
 
	 <?php else : ?>
		<p>Comentarios Cerrados.</p>
	<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
					<h1>Deja un Comentario</h1>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>Debes <a href="<?php wp_loginout(); ?>">Ingresar</a> para publicar un comentario.</p>
<?php else : ?>
					<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Has ingresado como <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Salir">Salir &raquo;</a></p>
<?php else : ?>
						<input type="text" name="author" value="<?php echo $comment_author; ?>" class="primer-form" <?php if ($req) echo "aria-required='true'"; ?> />*Nombre<br />
						<input type="text" name="email" value="<?php echo $comment_author_email; ?>" class="primer-form" <?php if ($req) echo "aria-required='true'"; ?>/>*E-Mail (No será mostrado)<br />
						<input type="text" name="url" value="<?php echo $comment_author_url; ?>" class="primer-form" />Web<br />
<?php endif; ?>
						<textarea name="comment" id="segundo-form"></textarea>Comentario<br />
						<input type="submit" name="submit" value="Enviar Comentario" /><br />
						<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
						</form>
<?php endif; ?>
 
<?php endif; ?>
						*Campos Obligados

*Recuerda guardar este archivo como comments.php

Paso 9

Ya casi terminamos, solo nos falta agregar un archivo para poder usar la maravillosa función que tiene WordPress, las paginas estáticas, para hacerlo vamos a necesitar crear la página page.php.

Esta página tiene una estructura muy parecida a single.php, en mi caso solo le quite la línea que llama a los comentarios y listo, queda terminada la estructura de las paginas estáticas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php get_header(); ?>
<?php get_sidebar(); ?>
			<div id="contenido-central"><!--Comienza contenido central-->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
				<div class="entrada" id="post-<?php the_ID(); ?>"><!--Comienza entrada-->
					<h1><?php the_title(); ?></h1>
					<div class="imagen-entrada"><img src="<?php bloginfo('template_directory'); ?>/Imagenes/entrada.png" alt="" /></div><!--Para aprender a colocar esta imagen en cada post, visita http://www.skyandstars.net/imagen-caracteristica-del-post-wordpress/-->
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						<?php the_content(''); ?>
					</div><!--Termina entrada contenido-->
				</div><!--Termina entrada-->
<?php endwhile; ?>
<?php else : ?>
				<div class="entrada"><!--Comienza entrada-->
					<h1>No Encontrado</h1>
					<div class="entrada-contenido"><!--Comienza entrada contenido-->
						Disculpa, El post que estas buscando no ha sido encontrado, por favor revisa nuevamente.
					</div><!--Termina entrada contenido-->
				</div><!--Termina entrada-->
<?php endif; ?>
			</div><!--Termina contenido central-->
<?php get_footer(); ?>

*Recuerda guardar este archivo como page.php

Descarga el tema para WordPress resultante

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

5 Comentarios en "De HTML a WordPress"

  1. Af

    1 Noviembre 2009

    Respuesta

    Genial tu post, pero cómo podría llamar a una pagina html directamente al clickear en una pagina plantilla de wordpress? Muchas gracias

  2. Mijael

    1 Noviembre 2009

    Respuesta

    Igual que como lo haces normalmente…es decir en la plantilla puedes llamar links como http://www.tupagina.com/pagina.html, no tiene nada que ver que el link lo llames desde la plantilla de WordPress.

  3. Alejandro

    24 Enero 2010

    Respuesta

    Seguí tu guía, me sirvio mucho, pero como hago para que la página de comentarios me la llame desde el index.php? pongo en el index y no pasa nada, en cambio en el simple.php si llama a los comentarios.

  4. Alejandro

    24 Enero 2010

    Respuesta

    en el comentario de recien no salio el codigo xD. queria decir q pongo php comments_template(); en el index y no pasa nada

    • Mijael

      25 Enero 2010

      Respuesta

      Hola alejandro, si quieres que todo se muestre en el index puedes tratar de NO hacer un archivo single.php sino que dejas el index y colocas ese codigo que me colocaste ahi en el loop. Eso nunca lo he visto de tratar de mostrar los comentarios en la pagina inicial…no estoy seguro de que se pueda hacer pero intentalo a ver si asi te funciona.

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar