> Manuales > Curso gratuito de iniciación Wordpress

Vemos como mostrar los Custom Post Type y sus campos personalizados en nuestro frontend.

Este es el último de los artículos relacionados con el tema de los Custom Post Type y Metabox o campos personalizados.

En este artículo vamos a mostrar tanto la entrada personalizada como sus campos en nuestro tema de Wordpress, es decir, vamos con el último paso para que nuestro trabajo sea totalmente operativo.

El primer paso que tenemos que realizar es crear un archivo dentro de nuestra carpeta wp-content/themes/theme-elegido/single-nombrecustompost/
Es decir un archivo con single y el nombre que le hemos dado a nuestro custom post type.

En ese archivo crearemos la plantilla para mostrar todos los datos relacionados con nuestro nuevo tipo de entrada.

<?php
/*
Template Name: Single Libro
*/
?>
<?php get_header(); ?>

<div class="content">
            
                <?php
if ( have_posts() ){

 while ( have_posts() ) : the_post();
	$type = get_post_type( get_the_ID() );
	if($type == 'libro'){
		the_title();
		the_content();
	}
endwhile;
}
?>
                        
 </div><?php
get_footer();
?>

Obtener y mostrar los valores de los campos personalizados es la parte más dificil. WordPress ofrece varias funciones para obtener los meta fields. Las más importantes son:

Un ejemplo de como quedaría nuestro single con los campos personalizados utilizando get_post_meta sería el siguiente:

<?php
/*
Template Name: Single Libro
*/
?>
<?php get_header(); ?>

<div class="content">
            
                <?php


 while ( have_posts() ) {
     the_post();
     the_content();
     $post_id = get_the_ID();
 	$type = get_post_type( get_the_ID() );
 	if($type == "libro"){
     //dentro del loop no es necesario pasar el $post ID
     $text_meta_field = get_post_meta( $post_id, 'my_meta_box_text', true );
      
     ?>
     <ul>
          <?php if( $text_meta_field != "" )  { ?>
          <li>Text input: <?php echo $text_meta_field; ?></li>
          <?php } ?>

     </ul>
     <?php
 }
 }

?>
                        
 </div><?php
get_footer();
?>
 

Por supuesto tendríamos que darle estilos, pero en el articulo de hoy no es de importancia. Lo dejamos a vuestra imaginación para hacer que este tipo de entradas sean acorde al theme que tenéis instalado.

Nota: Es muy importante que no se nos olvide hacer un pequeño truco para que nos muestre nuestro nuevo template. Tenemos que irnos a ajustes-> enlaces permanentes, cambiar la estructura, guardar y luego volver a poner la estructura que teníamos. De esta forma reconocerá el nuevo tipo de enlace y nos mostrará nuestro nuevo template.

Además si quieres profundizar más en el tema de las plantillas de página accede al codex de wordpress (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/)

Este sería el ejemplo más básico que podemos hacer. Ahora vamos a ver como mostrar el listado de todos los libros que hemos ido introduciendo en nuestro sistema.

Listado de Custom Post Type

Ahora ya sólo nos queda mostrar un listado de Custom Post Type, en nuestro ejemplo, un listado de libros.

Podemos hacerlo de dos formas distintas:

Mediante archive
Para poder realizarlo de esta forma, al realizar el custom post type hemos puesto la opción 'has_archive' =>true, Y actualizado los enlaces permanente que comentábamos en la nota de más arriba.

A continuación tan solo tenemos que crear un archivo llamado archive-libro.php y colocar el código que tenemos más abajo, que es común a los dos métodos.

<?php
/*
Template Name: Libros
*/
get_header();
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query(post_type=libro);
if ( $wp_query->have_posts() ) : while ($wp_query->have_posts()) : $wp_query->the_post();
	the_title();
	the_content();
	endwhile;
endif;
get_footer(); ?>

Básicamente lo que hacemos es crear una nueva query para que nos saque todos los libros que tengamos publicados. Si quieres puedes paginar el listado con las funciones que viene por defecto con wordpress. Más información en el codex de Wordpress(http://codex.wordpress.org/Function_Reference/wp_list_pages)

Evidentemente dentro del while podemos mostrar lo que necesitemos y darles los estilos apropiados. En el código de ejemplo simplemente mostramos el titulo y el contenido a modo de ejemplo.

Mediante page
Para ello tenemos que realizar una serie de pasos, el primero es crear un nuevo template de página.

El archivo debe ir dentro de la carpeta del theme y llamarse algo como page-libros.php. Dentro de este archivo vamos a crear el mismo código que teníamos para el otro método.

Una vez creado el templete nos vamos a la administración de wordpress y creamos una página que se llame libros. En ella simplemente tenemos que seleccionar en atributos de página la plantilla libros.

Con estos pasos si vamos al navegador y ponemos algo como http://midominio.com/libros/ nos mostrará un listado con todos los libros publicados hasta el momento.

Ambos métodos son validos y funcionan correctamente. Pero el primero es algo más profesional ya que no necesita de una página para mostrar el listado.

Sara Alvarez

Equipo DesarrolloWeb.com

Manual