Plugin, beproefd en in gebruik (check feb 2019)

Shortcodes ultimate (gratis versie)

WP Shortcodes plugin — Shortcodes Ultimate

accordion
De accordion functie zorgt er in combinatie met de shortcode voor spoiler voor dat er telkens maar één spoiler geopend is. Open je de ene, dan sluit de andere.
Ook komen de spoilers dan dichter bij elkaar te liggen. Zie het verschil met de test-spoilers onderaan.
Je kan de accordion een stijl meegeven.
bijv.
class=”accordionoranje”
.accordionoranje {border-left:3px orange solid}
Alle shortcodes
Aanvankelijk vooral gekozen voor het maken van responsive kolommen. Maar er zit ook een shortcode voor su_spoilers in en diverse andere handige zaken.

Mogelijkheden in de gratis versie:

De items in rood horen bij de Proversie.

Support
Spoiler

Voor de spoiler (een openklappend item] krijg je deze opties om uit te kiezen:

Bij de proversie krijg je meer stijlen te zien.
NB: Aanpassing inhoudsdeel; .su-spoiler-content {background:#fff; border:1px solid #000}
Voor een opvallender layout kan je gebruik maken van het veld Extra CSS  Klasse. Zie onderaan.

Een lijst met bepaalde berichten, of pagina's of anderszins

Je kan een template kiezen en aanpassen:

het template van de berichten aanpassen.
De templates staan in dit pad:  shortcodes-ultimate/includes/partials/shortcodes/posts/templates
Plaats het template in je child theme.

De shortcode (moet tussen vierkante haken:  su_posts of su_posts template=”templates/teaser-loop.php” tax_term=”74″ order=”desc. Het resultaat van de laatste is: 10 berichten van de categorie 74 (plugins) in aflopende volgorde van publicatiedatum.

Nu 4 berichten op oplopende volgorde van titel: su_posts template=”templates/teaser-loop.php” posts_per_page=”4″ tax_term=”74″ order=”asc” orderby=”title”

Aanpassingen mbv CSS. Kies dan voor Class bij de shortcode. NB: het hangt blijkbaar af van de gekozen stijl: Standaard, Fancy of Simpel wat er verder nog mogelijk is.

Test 1 (stijl:standaard en icon: plus-circkel en stijl spoilerstandaard)
Je moet nu bij de stijl een naam opgeven en daar de CSS van bepalen.

In de shortcode wordt het dan:
su_spoiler title=”Test 1 (stijl:standaard en icon: plus-circkel en stijl spoilerstandaard)” icon=”plus-circle” anchor=”spoiler” anchor_in_url=”yes” class=”spoilerstandaard”

.spoilerstandaard {background-color: #CDE9FF!important;}

test2 (stijl: fancy en icon: caret-square)

Je hoeft nu geen naam te geven aan de stijl. De code wordt:
su_spoiler title=”test2 (stijl: fancy en icon: caret-square)” style=”fancy” icon=”caret-square” anchor=”test2″ anchor_in_url=”yes”

.su-spoiler-style-fancy>.su-spoiler-title {background:#CDE9FF!important}

Test3 (stijl: simpel; icon:chevron-circle;)
Bij deze layout van Simpel krijg je geen icon te zien, ook al kan je wel een icon selecteren. Ook nu: je hoeft geen aparte stijl op te geven, maar kunt de stijl hiermee aanpassen.

.su-spoiler-style-simple>.su-spoiler-title{background:#CDE9FF!important;}

Test3b (stijl: simpel; icon:chevron-circle; klasse: spoilersimpel)
Je kunt de class wel gebruiken om bijvoorbeeld een omlijning van het vak te maken.
su_spoiler title="Test3b (stijl: simpel; icon:chevron-circle; klasse:spoilersimpel)" style="simple" icon="chevron-circle" anchor="testsimpelb" anchor_in_url="yes" class="spoilersimpel"

.su-spoiler-style-simple.spoilersimpel {border: 3px solid red!important; color:red!important}

test4 : toevallige ontdekking met modern-light
Stel dat je al had gewerkt met de pro-versie en daar bijv. modern-light had gebruikt. Met CSS kan je dan alsnog de stijl bepalen. De pijl komt dan helemaal rechts te staan.

su_spoiler title="test4 : toevallige ontdekking met modern-light" style="modern-light" icon="arrow" anchor="test4" anchor_in_url="yes"

.su-spoiler-style-modern-light>.su-spoiler-title {padding: 7px 34px 7px 10px;background: #D9E9F3; color: #545A5E;}

.su-spoiler-style-modern-light>.su-spoiler-title>.su-spoiler-icon {right: 7px;left: auto;}
Of houd het pijltje links met:
.su-spoiler-style-modern-light>.su-spoiler-title {background: #D9E9F3 0 50%;}

Vergelijkbaar: