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
De esta forma tendremos enlazadas las distintas páginas hijas en su página principal.
Crear 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' ); }
Crear 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; }