Marketing Digital / Web

Plantilla de página para mostrar Custom Post Types

Plantilla de página para mostrar Custom Post Types

son una gran manera de introducir contenido que tiene su propio conjunto de puntos de datos, diseño y otras personalizaciones. Un caso de uso favorito para este tipo de correos son artículos de revisión, tales como libros y películas. En nuestro caso queremos construir una plantilla de página que mostrar los trabajos de nuestro portafolio.

Primero tenemos que crear nuestro Custom Post Type (CPT). Esto se puede hacer manualmente o por medio de plugin. Una opción Plugin sinceramente puedo recomendar es Types. Te permite crear fácilmente custom post types y custom fields.

Al Instalar y activar Types, añada un custom type, asegúrese de que su slug es «portafolio», personalice los campos que necesite (como añadir una imagen destacada), ajuste cualquier otra opción, y guardar.

Ahora que tenemos nuestro portfolio post type, queremos que aparezca en nuestro sitio. Lo primero que vamos a hacer es crear la página en cuestión. Tenga en cuenta que si elige portafolio “, como el slug del CPT, la página no puede tener el mismo slug. Puede crear clients-portfolio y también agregué un poco de texto ejemplo.

Ejemplo de página con custom post type

Después de añadir algunos artículos en la sección post type ‘portafolio’, queremos que aparecen en nuestra página de la derecha debajo del contenido de la página.

Para ello vamos a utilizar de nuevo un derivado del archivo page.php, lo llamaremos portfolio-template.php y cambiaremos la cabecera para esto:

<?php
/*
 * Template Name: Portfolio Template
 * Description: Page template to display portfolio custom post types 
 * underneath the page content
 */

Sin embargo, en este caso vamos a tener que hacer algunos cambios en la plantilla original. Cuando usted toma un vistazo al código de page.php, verá que llama a otro archivo de plantilla en el centro, llamado content-page.php (donde dice <?php get_template_part( 'content', 'page' ); ?>). En ese archivo se encuentra el siguiente código:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
 <?php the_post_thumbnail(); ?>
 <?php endif; ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 </header>

 <div class="entry-content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
 </div><!-- .entry-content -->
 <footer class="entry-meta">
 <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- .entry-meta -->
</article><!-- #post -->

Como se puede ver, es aquí que el título de la página y el contenido son llamados. Pero definitivamente queremos aquellos en nuestro sitio portafolio, tendremos que copiar las partes necesarias de esta plantilla para nuestra plantilla page.php. El resultado se ve así:

get_header(); ?>

<div id="primary" class="site-content">
 <div id="content" role="main">

 <?php while ( have_posts() ) : the_post(); ?>
 <header class="entry-header">
 <?php the_post_thumbnail(); ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 </header>

 <div class="entry-content">
 <?php the_content(); ?>
 </div><!-- .entry-content -->
 
 <?php comments_template( '', true ); ?>
 <?php endwhile; // end of the loop. ?>

 </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Para obtener los artículos del portafolio de nuestra página, vamos a añadir el siguiente código justo debajo de la llamada the_content ().

<?php
 $args = array(
 'post_type' => 'portfolio', // enter custom post type
 'orderby' => 'date',
 'order' => 'DESC',
 );
 
 $loop = new WP_Query( $args );
 if( $loop->have_posts() ):
 while( $loop->have_posts() ): $loop->the_post(); global $post;
 echo '<div class="portfolio">';
 echo '<h3>' . get_the_title() . '</h3>';
 echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';
 echo '<div class="portfolio-work">'. get_the_content().'</div>';
 echo '</div>';
 endwhile;
 endif;
?>

Esto hará que se muestre el  CPT arriba en la página:

Y aquí está el código completo para la plantilla de página de nuestro portafolio:

<?php
/*
 * Template Name: Portfolio Template
 * Description: Page template to display portfolio custom post types 
 * underneath the page content
 */

get_header(); ?>

<div id="primary" class="site-content">
 <div id="content" role="main">

 <?php while ( have_posts() ) : the_post(); ?>
 
 <header class="entry-header">
 <?php the_post_thumbnail(); ?>
 <h1 class="entry-title"><?php the_title(); ?></h1>
 </header>

 <div class="entry-content">
 <?php the_content(); ?>
 <?php
 $args = array(
 'post_type' => 'portfolio', // enter custom post type
 'orderby' => 'date',
 'order' => 'DESC',
 );
 
 $loop = new WP_Query( $args );
 if( $loop->have_posts() ):
 while( $loop->have_posts() ): $loop->the_post(); global $post;
 echo '<div class="portfolio">';
 echo '<h3>' . get_the_title() . '</h3>';
 echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';
 echo '<div class="portfolio-work">'. get_the_content().'</div>';
 echo '</div>';
 endwhile;
 endif;
 ?>
 </div><!-- #entry-content -->
 <?php comments_template( '', true ); ?> 
 <?php endwhile; // end of the loop. ?> 
 </div><!-- #content -->
</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

Basado en el artículo: A Detailed Guide To WordPress Custom Page Templates