WordPress: uno shortcode per elencare le pagine figlie con titolo, link e miniatura

di

StagioniIn questo breve articolo vi voglio mostrare come creare uno shortcode utilizzabile sia nel contenuto delle pagine che nell’area widget, per mostrare l’elenco delle pagine figlie di una data pagina, con il titolo, il link e la miniatura dell’immagine in evidenza.
Nella foto qui a fianco, c’è un esempio di utilizzo, la pagina genitore si chiama “Stagioni” e le pagine figlie sono nell’ordine: “Inverno”, “Primavera”, “Estate” e “Autunno”, ognuna con un’immagine in evidenza.
Lo shortcode viene posto nel contenuto della pagina “Stagioni”. Se lo shortcode viene utilizzato all’interno del contenuto delle pagine, non è necessario specificare l’ID della pagina, altrimenti (se viene messo nell’area widget o viene eseguito da codice all’esterno del loop) è necessario fornire il parametro pageid.
Ecco il codice che deve essere inserito nel file functions.php presente nella directory del tema attivo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
function ms_child_pages_func($atts) {
	// [ms_child_pages]
	global $post;
	global $wpdb;
 
    $a = shortcode_atts( array(
        'pageid' => '',       
    ), $atts );
 
	$a['pageid'] = empty($a['pageid']) ? $post->ID : intval($a['pageid']);
 
	$child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$a['pageid']."  AND post_type = 'page' ORDER BY menu_order", 'OBJECT'); 
 
	if ( $child_pages ) { 
		foreach ( $child_pages as $pageChild ) {
			echo "<div class='child-thumb'>\n";
			echo get_the_post_thumbnail($pageChild->ID, 'thumbnail');
			echo '<a href="'.$pageChild->guid.'" rel="bookmark" title="'.$pageChild->post_title.' ">'.$pageChild->post_title.'</a>';
			echo "</div>\n";
		} 
	}
 
}
add_shortcode( 'ms_child_pages', 'ms_child_pages_func' );
?>

Per un utilizzo all’interno del loop è sufficiente inserire nella pagina lo shortcode: [ms_child_pages]
Volendolo utilizzare al di fuori del loop bisognerà specificare l’ID della pagina genitore: [ms_child_pages pageid='1'] avendo cura di sostituire ‘1’ con l’esatto ID della pagina genitore.
Infine per dare un poco di stile al risultato possiamo utilizzare queste istruzioni CSS:

1
2
3
4
5
6
7
8
9

.child-thumb {
    display: block;
    float: left;
    padding: 20px;
}
.child-thumb a{
	display:table;
	margin:auto;
}

Riferimenti: