Wp Show Post – personalizziamo l’elenco dei post

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{...}
...