Il plugin Wp Show Post e stato scritto dallo stesso autore del tema GeneratePress.
Si tratta di un ottimo plugin, disponibile sia in versione free che a pagamento con opzioni aggiuntive.
Questo plugin si occupa di inserire, all’interno delle pagine, l’elenco degli ultimi post, organizzati per categoria o tag.
Molto simile nelle funzioni al plugin di Bill Erikson di cui ho gia parlato e per il quale ho creato un’estensione: Display Post.
Vediamo un esempio semplice
L’elenco che segue è un semplicissimo esempio dell’uso di Wp Show Post. Estraiamo 4 articoli dalla categoria Software e li visualizziamo in colonna da 2.
Quindi inseriamo anche l’immagine, il titolo ed il sommario dell’articolo.
[wp_show_posts id=”737″]
Con questo plugin potremo visualizzare solo le immagini, solo i titoli o anche tutto il corpo dell’articolo.
Avremo la possibilità di incolonnarlo fino a 5 colonne ed impostare un margine tra queste.
Anche le immagini dell’articolo possono essere ridimensionate facilmente. Cosi come scegliere se visualizzarle prima o dopo il titolo.
Un esempio pratico di utilizzo di questo plugin è nella pagina Final Cut Tips
Mentre nella pagina dei progetti si puo vedere l’uso applicato al codice CSS che segue nella sezione sottostante con i flip card.
Sono tanti i parametri che si possono personalizzare e poichè il codice che ne risulta è stato ben formattato possiamo customizzarlo con i css.
Show post con flip card in css3
Di seguito il codice css utilizzato per visualizzare gli articoli con effetto flip card.
E sufficiente copiare il codice in Customize->Additional CSS
e ci ritroveremo cosi i nostri articoli visualizzati con questo effetto.
.wp-show-posts-single {
background-color: transparent;
min-height: 230px;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
overflow: hidden;
}
.wp-show-posts-single:hover .wp-show-posts-inner {
transform: rotateY(180deg);
}
.wp-show-posts-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.wp-show-posts-entry-header,
.wp-show-posts-entry-summary,
.wp-show-posts-image {
width: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
box-sizing: border-box;
}
.wp-show-posts-image {
position: absolute;
background-color: #bbb;
color: black;
height: 100%;
}
.wp-show-posts-image img {
width: 100%;
height: 100%;
object-fit: cover !important;
}
.wp-show-posts-entry-header {
background: #ccc;
transform: rotateY(180deg);
color: #000;
padding: 10px;
float: left;
position: relative;
margin: 0;
}
.wp-show-posts-entry-summary {
transform: rotateY(180deg);
position: relative;
padding: 10px;
float: left;
background: #ccc;
height: 100%;
}
Possiamo anche personalizzare le differenti pagine utilizzando il codice Id rilasciato da WP Show Post, pre-metendolo ad ogni attributo css

Ad esempio se abbiamo uno shortcode simile, il nostro codice id sarà 418.
Potremo quindi utilizzare l’identificatore #wpsp-418 davanti ai vari selettori css:
#wpsp-418 .wp-show-posts-single{...} #wpsp-418 .wp-show-posts-inner{...} ...