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.
whatsmyip: uno script bash disponibile per tutti gli utenti
Scoprire qual’è il nostro indirizzo pubblico sulla rete direttamente da terminale non diventa cosi molto facile Con un semplicissimo script che richiama una funzione cURL scopriamo immediatamente quale sia il…
Linux creiamo un nuovo utente amministratore
Condividiamo lo stesso pc tra più utenti e vogliamo dare il permesso di installare software o eseguire azioni amministrative anche agli altri utenti: allora creiamo un nuovo utente amministratore La…
3 comandi per Bloccare la dock di Mac Os, posizione, dimensione e contenuto
Capita di voler bloccare alcune impostazione della dock di MacOs. Molte opzioni per questo launcher sono disponibili direttamente nel menu delle impostazioni. Alcune di questa vanno attivate o disattivate dal…
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…
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{...}
...