Resumen de paginas hijo usando Shortcode en el functions.php

Tabla de contenidos

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;
}

 

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Relacionados: