single.php
Creamos un nuevo archivo y lo guardamos como single.php, este archivo es el que manda a llamar únicamente el post al que entra el usuario, aquí es donde podemos ó cambiarle el aspecto del post a como se muestra en el index, hacer uso de otro tipo de referencias al código del loop y otras tantas cosas, ahora lo único que haremos será dejar nuestro post como lo mostramos en el index.php
Para empezar, vamos a mandar a llamar el header de nuestro site, y ponemos la siguiente línea:
-
<?php get_header(); ?>
Esto en especial, que hace referencia al "get" es para obtener los archivos, vienen algunos predefinidos en WordPress, como serían:
- get_header
- get_sidebar
- get_footer
Todas las demás funciones pueden encontrarlas en wp-includes/template-functions-general.php
Continuamos, aquí de la misma forma se maneja el loop de WordPress, pero lo manejaremos de la siguiente forma, será muy similar a lo que hicimos en el index.php como les mencionaba arriba.
El Loop
Comenzamos con la sentencia para que si es válida se genere el loop.
-
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Contenedor del post
Continuamos abriendo nuestra división para lo que será el post
-
<div class="post" id="post-<?php the_ID(); ?>">
Fecha de publicación
Lo que sigue será la fecha de publicación:
-
<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>
Título del post
El título y nuestra liga a la edición del post si estamos loggeados y tenemos permisos para editar post podremos ver un asteristo ( * )
-
<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>
Hasta este punto, lo que hemos hecho es copiar y pegar lo que habíamos hecho anteriormente en el index.php de aquí cambiaremos el nombre de una que otra función y añadiremos otras.
Detalles del post
Los detalles del post a simple vista parece lo mismo que hicimos en el index.php
-
<small> Publicado en
-
<?php the_category(', ') ?>
-
por
-
<?php the_author() ?>
-
y tiene
-
<?php comments_number(__('0 Comentarios'), __('Un Comentario'), __('% Comentarios')); ?>
-
</small>
Lo único que cambiamos fué la parte de comments_number(); que en el index.php es comments_popup_link(); esto es por que wordpress almacena aparte el número de comentarios además de que nosotros en el index lo ocupamos como liga hacia el formulario de comentarios; que también aquí es posible usando "anclas" y lo pondríamos de la siguiente forma:
-
<small> Publicado en
-
<?php the_category(', ') ?>
-
por
-
<?php the_author() ?>
-
y tiene
-
<a href="#gocommentForm"><?php comments_number(__('0 Comentarios'), __('Un Comentario'), __('% Comentarios')); ?></a>
-
</small>
El nombre de nuestra ancla será goCommentForm, que la definiremos más abajo en donde mandamos a llamar el template de nuestros comentarios.
El contenido de nuestra entrada
Ahora viene la parte del contenido que hemos escrito en nuestro post al verlo como entrada completa:
-
<div class="entry">
-
<?php the_content('Continuar leyendo »'); // Contenido?>
-
<?php link_pages('<p><strong>Páginas:</strong> ', '</p>', 'number'); // El uso de paginas internas en el post ?>
-
</div>
Recordarán que en el index.php solo teníamos la parte de the_content(); ahora añadimos lo que es link_pages();, esto se usa dándoles un ejemplo visible, este post, que consta de varias páginas y en la parte de abajo viene "Páginas 1 2 3 ... " para esto pueden ponerlo de varias formas:
-
<?php wp_link_pages('pagelink=Pagina%'); ?>
Con este código obtendrían algo como Pagina 1 Pagina 2 Pagina 3
También pueden manejarlo con tipo siguiente y anterior, para que no se estén salteando las páginas
-
<?php link_pages('<p>', '</p>', 'next', ' »', '« '); ?>
Con este código obtendrían solo las flechas de anterior y siguiente « »
Pueden jugar con esta parte si es que usarán este tipo de navegación en sus entradas, para más info pueden ir aquí
Termina el divisor del post
Es hora de cerrar la división de nuestro post, para eso solo ponemos lo siguiente:
-
</div>
Navegación entre posts
Ahora nos encontramos con otra navegación, pero esta es entre post, si se dán cuenta en la parte de abajo de esta entrada pueden pasarse al siguiente post ó al anterior de una manera muy rápida, para eso hacemos lo siguiente:
-
<div class="navigation">
-
<div class="alignleft">
-
<?php previous_post_link('« %link') ?>
-
</div>
-
<div class="alignright">
-
<?php next_post_link('%link »') ?>
-
</div>
-
</div>
- previous_post_link(); - Para ir al post anterior
- next_post_link(); - Para ir al siguiente post
- %link - Pondrá el titulo del post como enlace
Pueden poner con lo que mejor se identifiquen dentro de los paréntesis, algo como siguiente entrada, post anterior ó simplemente dejar que el título del post sea la liga, que en lo personal recomendaría más.
Llamar comentarios y formulario
Lo que haremos aquí será mandar a llamar nuestro template de comentarios, que contendrá la lista de los comentarios que nos hagan en esa entrada y el formulario para que puedan escribirlos. Además de poner el ancla que mandamos a llamar arriba en la parte donde mostramos el número de comentarios en la entrada, que le habíamos puesto gocommentForm.
-
<a name="gocommentForm" id="gocommentForm"></a><?php comments_template(); ?>
Terminar el loop
Al principio de esta página abrimos el loop de WordPress, es hora de cerrarlo
-
<?php endwhile; else: ?>
-
<p>Lo sentimos, no encontramos ningun post.</p>
-
<?php endif; ?>
También añadimos un else, por si no se encuentran post, mande un mensaje que pueden personalizar a su gusto.
Cerrar contenido
Para terminar con el single.php cerramos el contenido y mandamos a llamar nuestra sidebar y el footer
-
</div>
-
<?php get_sidebar(); // mandamos llamar la sidebar ?>
-
<?php get_footer(); // mandamos llamar el footer ?>
8 comentarios para Crear un theme para WordPress III
Muy buen tutorial! Esta todo muy bien explicado. Queria hacer mi propio theme para WP desde hace tiempo pero todos los tutoriales que encontraba no terminaban de quedarme claros, pero este me esta ayudando muchisimo. Muchas gracias.
Saludos
Hola.
Como siempre muy buena la explicacion. Ya lo tengo impreso para leerlo con calma. Por cierto, visitando el sitio stylecrunch vi un sistema de votos (ese con estrellas). Cuando nos ayudaras creando un tuto para esa tecnica?.
Saludos.
el maestro de WP!!!
:):)
si señor bro me sigues sorprendiendo ^^!
mil gracias
v4s1l1: muchas gracias, hace tiempo había puesto unos enlaces a tutoriales de como crear un theme para WP, pero me pareció bien crear un recurso más y al parecer está funcionando, comentarios como el tuyo que me hacen saber que se entiende son muy buenas referencias.
Ed: También gracias por tu comentario y hacerme saber que está bien explicado, sobre el sistema de estrellas es un plugin llamado WP-PostRatings muy útil.
Edén: Brother, un abrazo como siempre que gusto leerte… espero no dejar de hacerlo.
Como va? uso el theme innofire y queria saber como hacer para cambiar la forma de los comentarios que trae por defecto a una en la que pueda comentar cualquiera sin registracion/loggeo y que le pida el nombre, mail, sitio y el comentario por supuesto.
Y tal vez es mucho pedir pero se puede hacer que el espacio del comentario use el jquery de bbcode???
Por ultimo queria preguntar si me puedo comunicar con vos, es que recien empiezo y tengo muchas dudas :p
@fede777 Eso lo cambias en tu administrador, en la pestaña de Options » General en la pantalla verás la opción de “Users must be registered and logged in to comment” desactiva la casilla y listo.
No entiendo el porqué usar jQuery en el bbCode si estamos usando el mismo que utiliza WordPress creo que la comptaibilidad es mucho mayor que si hacemos un relajo con jQuery, a menos que ya exista uno. xP Pero me quedo con el normal para no hacer mezclas de librerías.
Muchas gracias por responder. Ya la pude sacar el loggeo, y puse un plugin wysiwyg para el campo de comentarios.
Tambien agregue el plugin de share-it/compartelo pero al activarlo me queda la barra de search siempre abierta y no se como hacer para que funcione como antes.
view