¿Para que mostrar un resumen de páginas en WordPress? Por ejemplo, pongamos que tenemos una categoría llamada «Seguros de coche», y dentro de esta categoría tenemos las siguientes páginas internas: «Comparador de seguros», «Compañías de seguros», etc.
La idea es que en nuestra página de «Seguros de coche» mostremos lo que hayamos escrito y al final de la página carguen todas las páginas hijas de esa categoría con su foto, título y descripción, facilitando al usuario un resumen rápido de lo que se puede encontrar en esta categoría. Empecemos… Para entender mejor cómo funcionan las plantillas de página en tu sitio, te recomendamos consultar la documentación oficial de WordPress.
¿Cómo mostrar un resumen de páginas en WordPress?
Para empezar, modificaremos el archivo functions.php para añadir un campo a la plantilla de Páginas de nuestro wordpress, el campo en cuestión es el de extracto, así podremos personalizar cada resumen.
//PONER EXTRACTO EN PÁGINAS
add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}
¿Cómo crear una plantilla de página padre?
Ahora crearemos una nueva plantilla de tipo página para posteriormente introducirle el código que genere el resumen de sus páginas internas.
Buscamos por ftp el tema que estamos usando y el archivo page.php lo duplicamos y le cambiamos el nombre, por ejemplo «page_categorias.php«.
Editamos el archivo y le ponemos un nombre a la nueva plantilla de tipo página de la siguiente forma, borramos la parte superior y la cambiamos por algo así:
<?php
// Exit if accessed directly
if ( !defined('ABSPATH')) exit;
/*
* Template Name: Pagina >>> Página Con Páginas Internas
*/
get_header();
Con esto ya hemos creado una nueva plantilla de página para nuestro WordPress que podremos utilizar al crear una nueva página.
¿Cómo implementar el código para mostrar resúmenes?
Ahora sólo nos queda implementar el código en nuestra nueva plantilla de página «page_categorias.php» para mostrar foto, titulo y descripción de cada página hija que contenga esta página.
Buscamos en el código el lugar donde se muestra nuestra página, hay que encontrar el código que hace que se muestre el título, y el contenido, algo como the_content(), normalmente esta función se encuentra dentro de un div llamado entry-content, post-entry, etc, la cuestión es que debajo de esta función hay que mostrar los resúmenes de las páginas internas, es ahí donde tenemos que pegar el código que implemente estos resumenes.
En mi caso, en el tema que estoy usando como ejemplo tengo el siguiente código:
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
Entonces podemos implementar el código justo debajo de la función the_content(), quedando algo así:
<?php
// LISTADO DE PÁGINAS HIJAS
$elide=get_the_ID();
$args = array(
'post_type' => 'page', // tipo de página
'numberposts' => 10, //número máximo de posts
'post_status' => 'publish',
'post_parent' => $elide,
);
$attachments = get_posts($args);
print_r("attachements:" . $attachements);
$tamano='340'; //ancho de la foto
$tamano1='250'; //alto de la foto
$longitud_titulo='150'; // caracteres en el título
$longitud_desc='250'; // caracteres en el resumen
if ($attachments) {
echo '<div class="bloque-paginas-internas">';
foreach ($attachments as $post) {
echo '<div class="pagina-interna" >';
echo get_the_post_thumbnail(get_the_id(),array($tamano,$tamano1),array('title'=>get_the_title(),'alt'=>get_the_title(),'class'=>'imagen-pag'));
echo '<div class="pagina-interna-text">';
echo '<h3><a href="'. get_permalink().'" title="'.sprintf( "Enlace permanente a %s", get_the_title() ).'">';
echo wp_html_excerpt (get_the_title(), $longitud_titulo );
echo '</a></h3>';
echo $post -> post_excerpt;//get_the_excerpt();
echo get_post_meta($post->ID, 'extracto', true);
echo ($excerpt)?'<p>' . wp_html_excerpt($excerpt,$longitud_desc).'</p>':'';
echo '<div class="boton"><a href="' . get_permalink() . '">Leer más</a></div>';
echo '</div>';
echo '</div>';
}
}
echo '</div>';
// FIN LISTADO PÁGINAS HIJAS
?>
¿Cómo dar estilos a los resúmenes?
Ahora les damos un poco de estilos con css:
/* bloque paginas hijas */
.extracto{
background:#eee;
padding:10px 15px;
font-style:italic;
margin-bottom:20px;
}
.pagina-interna .imagen-pag {
display: inline-block;
width: 200px;
height: 147px;
margin: 0 20px 20px 0;
border: 6px solid #fff;
transition: 0.5s;
}
.pagina-interna .imagen-pag:hover {
border:6px solid #F29D9F;
transition: 0.5s;
}
.pagina-interna {
clear: both;
width: 97%;
min-height: 175px;
margin-bottom: 10px;
border-bottom: 1px dashed #ccc;
}
.pagina-interna-text {
display: inline-block;
width: 365px;
vertical-align: top;
}
.pagina-interna-text h3 a {
color: #000;
}
.pagina-interna-text h3 a:hover {
color: #D12F2F;
}
.pagina-interna-text .boton{
margin-top:15px;
}
.pagina-interna-text .boton a {
background: #333;
color: #fff;
padding: 5px 11px 5px 11px;
transition: 0.5s;
}
.pagina-interna-text .boton a:hover {
background: #D12F2F;
color: #fff;
transition: 0.5s;
}
Estructura de páginas
Una vez creada la nueva plantilla tenemos que asignarle a cada página su plantilla correspondiente, es decir, las que contienen hijos debemos asignarles la que acabamos de crear «page_categorias.php» y a las páginas hijas la plantilla «page.php» por defecto.
Ejemplo:
Resultado final
Y debería de quedar algo así:
Resúmenes de páginas en WordPress
- Los resúmenes de páginas muestran título, foto y descripción de subpáginas al final de una página padre
- Habilita el campo de extracto en páginas modificando functions.php para personalizar cada resumen
- Duplica y renombra el archivo page.php para crear una plantilla personalizada de página padre
- Añade el nombre de la plantilla en comentarios PHP al inicio del archivo para identificarla en WordPress
- Inserta el código de resúmenes debajo de the_content() en la plantilla para mostrar páginas internas
