Crear un theme para WordPress I Publicada el Martes 31 de Octubre de 2006 a las 3:54 am por Infected-FX
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 ?>
Eden
Octubre 31, 2006 a las 6:34 pm
eres fantastico bro!!
gran utilidad la de este tuto!!
HostMx Alon
Octubre 31, 2006 a las 10:44 pm
ahorita no tengo mucho tiempo, pero yo era de los principales interesados en este tuto, gracias ifx luego lo checho :D
lucas
Mayo 24, 2007 a las 1:08 pm
muy bueno el tutorial amigo!!!
lucas
Agosto 2, 2007 a las 10:12 am
REALMENTE EXELENTE!
..::N3r1::..
Noviembre 28, 2007 a las 11:28 am
yo nose si soy yo el idiota pero porque no aprende a escribir el que hizo esta entrada??
es imposible leerlo..
Chau
Motif
Septiembre 17, 2008 a las 10:48 pm
No se por que pero no puedo descargarme los archivos.. me dice que la pagina no existe =(