Plugin, beproefd en in gebruik (check feb 2019)

*Display posts

Display Posts – Easy lists, grids, navigation, and more

Fijne plugin met veel mogelijkheden om zelf mooie lijsten te maken en goede documentatie.

https://en.support.wordpress.com/display-posts-shortcode/

https://displayposts.com/tutorials/

Zie deze pagina voor een mooie layout in blokken: https://displayposts.com/2019/01/04/post-grid-styling/

Voor pagination heb je deze extra Pagination plugin nodig: downloaden en installeren.

Nog wat handige items voor in een shortcode:

display-posts category=”nieuws”

orderby=”title”
orderby=”name” (voor de slug)
order=”ASC”
tag=”tag1, tag2″
include_date=”true” date_format=”j m Y”

meta_key=”_thumbnail_id”: hiermee worden alleen berichten getoond die een thumbnail hebben

https://wordpress.org/plugins/display-posts-shortcode/

Toelichting op deze wiki

Voorbeeld: plaatje links, tekst rechts, met datum; alleen de berichten van max 1 jaar oud

shortcode en CSS

Voorbeeld te vinden op https://transitiontowns.nl/actueel/
[display-posts category=”nieuws”  include_excerpt=”true” excerpt_length=”55″ include_date=”true” date_format=”j F Y” excerpt_more=”Lees verder” excerpt_more_link=”true” image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing image-left”  date_query_after=”-1 years” posts_per_page=”100″]

CSS:

.display-posts-listing.image-left .listing-item {
overflow: hidden;
margin-bottom: 32px;
width: 100%;
}

.display-posts-listing.image-left .image {
float: left;
margin: 0 16px 0 0;
}

.display-posts-listing.image-left .title {font-weight:bold; font-size:1.1em; display: block;
}

.display-posts-listing.image-left .excerpt-dash {
display: none;
}

.listing-item .date{font-size:0.85em; color: grey; display:block }

@media only screen and (max-width: 800px) {
.display-posts-listing.image-left .image {
float: none;
margin: 0 16px 0 0;
}
}

Ook op deze site: laat deze berichten zien:

[display-posts category=”nieuws”  date_query_before=”-1 years” date_query_after=”-2 years” include_date=”true” date_format=”j F Y” posts_per_page=”100″ ]

Nog meer voorbeelden van shortcodes:

[display-posts image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” posts_per_page=”-1″] [display-posts image_size=”inlijst” include_excerpt=”true” wrapper=”div” category=”voorpagina” posts_per_page=”7″ include_date=”false” order=”ASC” orderby=”title”] [display-posts category=”xxx” ” include_excerpt=”true” excerpt_length=”25″ include_date=”false” excerpt_more=”Lees verder” excerpt_more_link=”true” image_size=”thumbnail” wrapper=”div” wrapper_class=”display-posts-listing image-left” posts_per_page=”1″]

Met grid: https://displayposts.com/2019/01/04/post-grid-styling/
[display-posts category=”gezin” image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” include_date=”false” order=”ASC” orderby=”name” include_excerpt=”true” excerpt_length=”45″ excerpt_more_link=”false” ] Daar hoort deze css bij:

/* Grid style */
.display-posts-listing.grid {
display: grid;
grid-gap: 16px;
}

.display-posts-listing.grid .title {
display: block;
}

.display-posts-listing.grid img {
display: block;
max-width: 100%;
height: auto;
}

@media (min-width: 600px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 2, 1fr );
}
}

@media (min-width: 1024px) {
.display-posts-listing.grid {
grid-template-columns: repeat( 3, 1fr );
}
}

Andere handige codes:
date_format=”j M Y” (wordt 1 nov 2015)  (zie https://wordpress.org/support/article/formatting-date-and-time/)

Vergelijkbaar: