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.
Webcam su Linux: quando non funzionano subito
Ogni tanto le webcam su linux non funzionano subito. Quindi bisogna trovare un modo per farle andare. Il più delle volte non sappiamo che linux contiene gia le librerie per…
OBS studio per macOs, come lo configuro
Vogliamo fare un video in diretta sul nostro social preferito? Con Obs studio possiamo farlo senza troppe difficoltà e in modo semi professionale anche con MacOs. Obs Studio è liberamente…
Keepass, gestore di password per tutti
Utilizzate sempre la stessa password per gli account google, facebook, email e magari anche quello della banca? Non ci siamo proprio… la password, ma sopratutto una password complessa è l’unico…
RegEx per pulire gli ebook
Le regex possono essere utilizzate per pulire gli ebook. Fino a qualche anno fa utilizzato il comodo programma Pepito Cleaner per pulire gli ebook che avevano una formattazione fatta male….
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
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{...}
...