Con este código podemos listar las páginas hijas de una página con un simple sortcode, por ejemplo, si tenemos una página de abogados, podemos después de todo el texto de abogados, poner un listado de todas las páginas que cuelgan de esa página, ejemplo:
Pagina padre:
/abogados/
Páginas hijas:
/abogados/abogados-de-oficio/ /abogados/abogados-laborales/ /abogados/abodados-herencias/ etc Para profundizar en los fundamentos, consulta la documentación oficial de shortcodes de WordPress y aprende las mejores prácticas.
De esta forma tendremos enlazadas las distintas páginas hijas en su página principal.
¿Cómo crear un shortcode de extracto en páginas?
Para personalizar más los listados, añadiremos un shortcode para activar el extracto y poder añadir textos personalizados de cada página hija. El código se añade en el functions.php del tema activo del wordpress.
add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}
¿Cómo crear un shortcode de listado de páginas hijas?
Para añadir el listado de las páginas hijas agregamos el siguiente código también en el functions.php de nuestro tema.
function muestra_hijos(){
$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);
if ($attachments) {
$elhtml = '<div class="bloque-paginas-internas">';
$elhtml .= '<div class="container">';
$elhtml .= '<div class="row">';
foreach ($attachments as $post) {
$elhtml .= '<div class="col-md-4">';
$elhtml .= '<div class="trat-hijo">';
$elhtml .= get_the_post_thumbnail( $post->ID,'large',array('title'=> get_the_title($post->ID),'alt'=>get_the_title($post->ID),'class'=>'img-fluid')).'<br>';
$elhtml .= '<div class="bloque-trat-hijo">';
$elhtml .= '<h3>'.$post->post_title.'</h3>';
$elhtml .= '<p>'.$post -> post_excerpt.'</p>';
$elhtml .= '<a class="btn-hijo" href="'. get_permalink($post->ID).'" title="'.sprintf( "Enlace permanente a %s", get_the_title($post->ID) ).'">Ver tratamiento</a><br>';
$elhtml .= '</div>';
$elhtml .= '</div>';
$elhtml .= '</div>';
}
}
$elhtml .= '</div>';
$elhtml .= '</div>';
$elhtml .= '</div>';
return $elhtml;
}
add_shortcode('paginas_hijo', 'muestra_hijos');
Añadimos estilos css
Y por último añadimos los estilos, en este caso, como uso bootstrap, solo le damos estilos a los elementos que se han creado nuevos.
.trat-hijo {
box-shadow: 0 0 10px #00000026;
}
.bloque-trat-hijo {
padding: 20px;
margin-bottom: 40px;
}
a.btn-hijo {
background: #b7579f;
color: #fff;
padding: 10px 20px;
}
.bloque-trat-hijo h3 {
font-size: 16px;
font-weight: bold;
margin: 0;
height: 60px;
}
.bloque-trat-hijo p {
font-size: 14px;
min-height: 70px;
}
a.btn-hijo:hover {
color: #fff;
background: #000;
transition: 0.3s;
}
Shortcode de páginas hijas en WordPress
- Crea un shortcode para listar automáticamente las páginas hijas de una página padre en WordPress
- Habilita el campo de extracto en páginas mediante código en functions.php
- El shortcode muestra miniatura, título, extracto personalizado y enlace de cada página hija
- Utiliza Bootstrap para la estructura de grid responsive de tres columnas
- Permite enlazar jerárquicamente páginas relacionadas desde la página principal
