index.php
Esta es de las partes más importantes ya que vamos a definir como se mostrarán nuestros posts y todo eso. Para empezar creamos un archivo llamado index.php y lo guardamos en la carpeta de nuestro theme, ahora hay que mandar a llamar el header que hicimos anteriormente.
-
<?php get_header(); ?>
Después de esto vamos a ir con el contenedor de nuestros posts así como el loop que es de las partes podriamos decir más complicadas de WordPress.
-
<!-- INICIA CONTENIDO -->
-
<div id="container">
-
<?php if (have_posts()) : ?>
-
<?php while (have_posts()) : the_post(); ?>
-
<div class="post" id="post-<?php the_ID(); ?>">
Una vez que tengamos esto, que es la definición del inicio de nuestros posts, donde tenemos una condicional que se refiere a que "si hay post" entonces mostrará lo que hará que se repitan el formato que le demos gracias al while y definimos la clase post para "encapsular" cada entrada de nuestro sitio.
Continuamos con la fecha, la haremos en formato de calendario gracias a una referencia de anieto2k quedaría de la siguiente forma.
-
<acronym class="published" title="<?php the_time('F jS, Y'); ?>">
-
<span class="pub-month"><?php the_time('M'); ?></span>
-
<span class="pub-date"><?php the_time('j'); ?></span>
-
</acronym>
Seguimos con el título de nuestro post, no hay mucho que decir al respecto, queda de esta forma.
-
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
-
<?php the_title(); ?>
-
</a><?php edit_post_link('*', '<sup>', '</sup>'); ?></h2>
Aquí yo generalmente añado el link para editar el post lo que corresponde a edit_post_link(); y lo que hacemos es ponerlo dentro de los tags sup y el link sería un asterisco (*) igual pueden ponerle editar post ó como lo identifiquen ustedes en lugar del asterisco.
Los detalles de cada entrada resultan importantes ya que sabemos bajo que categoría(s) se publicó, el autor y cuantos comentarios tiene. Justo debajo del título de nuestros post ponemos lo siguiente:
-
<small> Publicado en
-
<?php the_category(', ') ?>
-
por
-
<?php the_author() ?>
-
y tiene
-
<?php comments_popup_link('0 comentarios', 'un comentario', '% comentarios »'); ?>
-
</small>
- the_category(); : Usamos la "coma"(,) como divisor por si se muestra en más de una categoría.
- the_author(); Muestra el nombre del autor que publicó la entrada.
- comments_popup_link(); Muestra el # de comentarios y un link que apunta al formulario para añadir comentarios
Entonces hasta el momento nuestro título de cada post se vería de la siguiente forma (no tomen en cuenta la fecha que aún no modificamos la CSS para esta parte)
El contenido de nuestro post quedaría de la siguiente forma:
-
<div class="entry">
-
<?php the_content('Continuar leyendo »'); ?>
-
</div>
the_content(); es lo que manda a llamar el contenido de nuestro post, la parte que se encuentra entre las comillas simples será el texto que se muestre cuando en el post seleccionemos lo que corresponde a generalemente aparece como "Read the rest..." ó "more..." aquí lo pueden modificar.
Vamos a cerrar el loop y el div que corresponde al post, justo debajo ponemos lo siguiente:
-
</div>
-
<!-- TERMINA EL POST -->
-
-
<?php endwhile; ?>
-
<!-- TERMINA LOOP -->
Hemos cerrado el div correspondiente a cada post y terrminado el loop.
Continuamos con la navegación, cuando hemos sobrepasado el # de post que deseemos que se muestren en la página principal aparecerán los siguientes enlaces ya sea para ver los anteriores ó las siguientes entradas.
-
<!-- INICIA NAVEGACION -->
-
<div class="navigation">
-
<div class="alignleft">
-
<?php next_posts_link('« Entradas anteriores') ?>
-
</div>
-
<div class="alignright">
-
<?php previous_posts_link('Siguientes entradas »') ?>
-
</div>
-
</div>
-
<!-- TERMINA NAVEGACION -->
Igual pueden modificar lo que se encuentra entre las comillas simples para que quede a su gusto.
Que pasa si no hemos puesto ningún post? aaah!! bueno, para eso es la condicional que pusimos al principio ¿recuerdan? la parte que decía if (have_posts()) , entonces abajo de la navegación ponemos lo siguiente:
-
<?php else : ?>
-
<h2 class="center">Ups!!!</h2>
-
<p class="center">Lo siento pero creo que lo que estás buscando no se encuentra aquí.</p>
Igual pueden modificar su mensaje de error a como mejor les parezca.
Para terminar con esta sentencia y con el contenedor que abrimos al principio ponemos esta parte:
-
<?php endif; ?>
-
</div>
Con esto terminamos por cerrar lo que nos faltaba de nuestros post y de la sentencia. Por último mandamos a llamar lo que será posteriormente nuestro sidebar.php y footer.php
-
<?php get_sidebar(); // mandamos llamar la sidebar ?>
-
<?php get_footer(); // mandamos llamar el footer ?>
16 comentarios para Crear un theme para WordPress I
eres fantastico bro!!
gran utilidad la de este tuto!!
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho
muy bueno el tutorial amigo!!!
REALMENTE EXELENTE!
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(
He visto que han cambiado la estructura de los permalink por eso no funcionan los enlaces
http://infectedfx.net/layout-xhtml-css-i/2006/
pon el año despues del nombre del post y funcionan
Muy bueno excelente introducción ahora me podre a practicar….gracias men…..
hola mira quiero aserte una consulta con respecto al index.php, nesesito saver en el siguiente codigo:
como deveria ponerlo, para que enves de que salga las fraces “entradas anteriores” y “sigientes entradas”, salga los nuemeros de las paginas, es desir una navegacion igual a la de gratisjuegos.org, como veras hay solo sale el numero de paginas, espero tu respuesta
¡Muchas gracias!
Tiene serios problemas de redacción este articulo. Aunque de cualquier forma es muy educativo; gracias.
Muchas gracias!
Los enlaces a las partes anteriores estan caidos, podria solucionarlo?? Mil gracias!!
Los archivos no funcionan.
No funcionan los enlaces de:
- Layout XTML & CSS I
- Layout XHTML & CSS II
ARREGLEN LAS ENTRADAS ¬¬