Shortcodes sneltoetsen WordPress WooCommerce Mac Windows

Logo cursus traing wordpress

Shortcodes sneltoetsen WordPress WooCommerce Mac Windows

Door /

Handige voor het werken met shortcodes. Een compleet overzicht voor WordPress op Mac en Windows en .

Shortcodes sneltoetsen voor je computer en programma's

In deze handleiding worden de meest gebruikte sneltoetsen weergegeven. Dat zijn toetsen op een computer keyboard waarmee je snel en effectief een actie kunt uitvoeren en dit gebeurd allemaal zonder muis. Sneltoetsen worden ook wel functietoetsen of shortcodes genoemd. In dit overzicht wat nu volgt worden de sneltoetsen getoond die het meest gebruikt worden als je websites maakt.

Shortcodes Windows

CTRL C: Kopiëren van de geselecteerde tekst
CTRL V: Als je iets geknipt of gekopieerd hebt kun je het met deze sneltoets plakken.
CTRL X: Met control x kun je een tekst of een afbeelding knippen.
CTRL F: Deze wordt gebruikt om te zoeken in het venster waar jij je bevind.
CTRL Z: Met deze shortkey kun je een gemaakte fout herstellen.
CTRL A: Hiermee selecteer je de gehele tekst.

Shortcodes Apple Mac

Door op bepaalde toetscombinaties te drukken, kunt u dingen doen die normaal gesproken een muis, trackpad of ander invoerapparaat nodig hebben.

Om een sneltoets te gebruiken, houdt u een of meer wijzigingstoetsen ingedrukt en drukt u vervolgens op de laatste toets van de sneltoets. Om bijvoorbeeld Command-C (kopiëren) te gebruiken, houdt u de Commandotoets ingedrukt, daarna de C-toets en laat u beide toetsen los. Mac-menu's en toetsenborden gebruiken vaak symbolen voor bepaalde toetsen, waaronder wijzigingstoetsen:

  • Command (or Cmd) ⌘
  • Shift ⇧
  • Option (or Alt) ⌥
  • Control (or Ctrl) ⌃
  • Caps Lock ⇪

Knippen, kopiëren, plakken en andere veelvoorkomende snelkoppelingen

Command-X

Knip het geselecteerde item en kopieer het naar het klembord.

Command-C

Kopieer het geselecteerde item naar het Klembord. Dit werkt ook voor in de Finder.

Command-V

Plak de inhoud van het Klembord in het huidige document of de huidige app. Dit werkt ook voor bestanden in de Finder.

Command-Z

Maak het vorige commando ongedaan. U kunt dan op Shift-Command-Z drukken om het commando ongedaan te maken. In sommige apps kunt u meerdere commando's ongedaan maken en opnieuw uitvoeren.

Command-A

Selecteer alle items.

Command-F

Zoek items in een document of open een zoekvenster.

Command-G

Opnieuw zoeken

Zoek het volgende item dat eerder is gevonden. Om de vorige gebeurtenis te vinden, drukt u op Shift-Command-G.

Command-H

Verberg de vensters van de voorste app. Om de voorste app te bekijken, maar alle andere apps te verbergen, drukt u op Optie-Commando-H.

Command-M

Minimaliseer het voorste venster naar het Dock. Om alle vensters van de voorste app te minimaliseren, drukt u op Optie-Commando-M.

Command-O

Open het geselecteerde item, of open een dialoog om een bestand te selecteren dat moet worden geopend.

Command-P

Druk het huidige document af.

Command-S

Sla het huidige document op.

Command-T

Open een nieuw tabblad.

Command-W

Sluit het voorvenster. Om alle vensters van de app te sluiten, drukt u op Option-Command-W.

Optie-Commando-Esc

Forceer het afsluiten van een app.

Command-Space-balk

Toon of verberg het Spotlight-zoekveld. Om een Spotlight-zoekopdracht uit te voeren vanuit een Finder-venster, drukt u op Command-Option-Space-balk.
Als u meerdere invoerbronnen gebruikt om in verschillende talen te typen, veranderen deze snelkoppelingen de invoerbronnen in plaats van dat Spotlight wordt weergegeven.

Controle-opdrachten-ruimtebalk

Toon de Character Viewer, waaruit u emoji en andere symbolen kunt kiezen.

Besturingscommando F

Gebruik de app op het volledige scherm, indien ondersteund door de app.

Spatiebalk

Gebruik Quick Look om het geselecteerde item te bekijken.

Command-Tab

Schakel over naar de volgende meest recent gebruikte app onder uw geopende apps.

Shift-Command 5

Neem in macOS Mojave of later een schermafbeelding of maak een schermopname. Of gebruik Shift-Command3 of Shift-Command4 voor screenshots. Meer informatie over screenshots.

Shift-Command-N

Maak een nieuwe map in de Finder.

Command-Comma (,)

Open voorkeuren voor de voorste app.

Command+Control-F

Maak scherm beeldvullend (full screen), dus zonder menu en dock.

Shortcodes Chrome webbrowser (Mac)

Command+control+F

Zet full screen aan voor Chrome browser

Command+Shift+F (Mac)

Zet tabladen uit in Chrome browser

Command+Option+U (Mac)

Laat webpage source zien voor CSS code

Bekijk alle Chrome shortcodes

Shortcodes WordPress

Een Shortcodes is een korte code waarmee u een terugkerend element op uw pagina's en berichten kunt laten zien. Het voordeel van het gebruik van een shortcode is dat wanneer u iets wijzigt, u dit slechts één keer hoeft te doen. Het wordt dan automatisch bijgewerkt op alle pagina's waar u de korte code heeft gebruikt.
Er zijn verschillende manieren om Shortcodes op uw website te krijgen. Veel WordPress-thema's hebben al veel eigen shortcodes. Ik ben er geen fan van om deze te gebruiken. Lees in deze handleidingen waarom:

WordPress shortcode plugins

Als u uw eigen shortcodes wilt toevoegen, kunt u het beste een plugin aan uw thema toevoegen. Je kan de onderstaande WordPress plugin gebruiken:

Shortcodes WooCommerce

WooCommerce Shortcode | Standaard WooCommerce pagina's

Zodra u de installeert en activeert, beschikt u over allerlei shortcodes waarmee u bijvoorbeeld producten kunt weergeven. U kunt ook WooCommerce snelkoppelingen gebruiken om producten toe te voegen aan WordPress-pagina's en berichten. Als u weet welke snelkoppelingen u kunt gebruiken, kunt u bijna overal terecht.. Het enige wat u hoeft te doen is de pagina's opnieuw maken en één van de onderstaande shortcodes in uw pagina plakken:

Mijn account:
[woocommerce_my_account]

Winkelmandje:
[woocommerce_cart]
Checkout:
[woocommerce_checkout]
Voeg een van deze shortcodes toe, en WooCommerce zal automatisch de juiste functionaliteit (bijv. een winkelwagen) aan de pagina toevoegen.

WooCommerce Shortcode | Nieuwe Producten

Er is ook een korte code in WooCommerce waarmee u uw nieuwste producten kunt laten zien. De korte code heeft ook twee eigenschappen waarmee u de manier waarop producten worden getoond kunt ‘aanpassen':

[recente_producten per_pagina="18" kolommen="3"]
In dit geval kies ik ervoor om 18 producten per “pagina” te tonen, verdeeld over drie kolommen. Natuurlijk kunt u hier ook andere nummers invoeren. Het is het beste als u een veelvoud van het aantal kolommen per_pagina invoert, zodat alle kolommen mooi gevuld zijn.

WooCommerce Shortcode | Formulier voor het volgen van bestellingen

Wilt u dat klanten de status van hun bestelling kunnen “volgen”? Dan hoeft u alleen maar een pagina aan te maken met de volgende korte code:

[woocommerce_order_tracking]
WooCommerce maakt dan automatisch een aan waarin klanten hun ordernummer en e-mailadres kunnen invoeren. Als de gegevens correct zijn, zal WooCommerce hen de status van hun bestelling laten zien:

WooCommerce Shortcode | Volg uw bestelling

Om dit formulier een toegevoegde waarde te laten zijn, moet u ervoor zorgen dat u de status van de bestellingen in WooCommerce altijd up-to-date houdt.

WooCommerce Shortcode | Toon aanbevolen producten

Met WooCommerce kunt u producten in de WordPress admin omgeving een “ster” geven om er een “featured product” van te maken. Er is ook een korte code om uitgelichte producten te tonen. U kunt deze gebruiken om bijvoorbeeld uw meest populaire producten te laten zien, of om te kiezen welke producten u wilt markeren.

Met deze korte code vindt u ook eigenschappen, waarmee u het aantal producten en kolommen kunt bepalen:

[featured_products per_page="6" columns="3"]

WooCommerce Shortcode | Toon specifiek product

WooCommerce product IDIn WooCommerce heeft elk product een “ID”. In de screenshot hiernaast kunt u zien hoe u dit nummer voor een bepaald product kunt opvragen.

U kunt dit unieke ID gebruiken in een korte code om een specifiek product te tonen op een WordPress pagina of bericht.

[product id="72"]
Hoe het product wordt weergegeven is afhankelijk van welk thema u gebruikt.

U kunt ook een SKU (Stock Keeping Unit) nummer gebruiken om producten te laten zien. In dat geval gebruikt u de korte code als volgt:

[product sku="W01892"]
Toon product shortcodeHet SKU-nummer van uw producten is aan u. Dit werkt alleen als u het ook gebruikt. Zo niet, dan kunt u het beste het ID gebruiken, want WooCommerce maakt het automatisch voor elk product aan. In de afbeelding rechts ziet u hoe uw product in uw WordPress-bericht of -pagina kan worden weergegeven. Natuurlijk kan het er, afhankelijk van uw thema, ook heel anders uitzien.

Het leuke van deze korte code is dat uw bezoekers het product direct aan hun winkelwagen kunnen toevoegen. Op deze manier kunt u van de blog op uw webshop een echte conversietool maken, die bezoekers direct aanzet tot het kopen van uw producten.

Als het product niet wordt getoond, controleer dan of u alles correct hebt ingevoerd en of het product niet per ongeluk als “Onzichtbaar” is ingesteld.

WooCommerce Shortcode | Toon meerdere producten met één korte code

Er is ook een variatie op bovenstaande korte code die het mogelijk maakt om meerdere producten tegelijk te tonen. Dankzij de korte code-eigenschappen kunt u deze ook sorteren volgens bepaalde criteria. Deze shortcode is ideaal om relevante producten te tonen in een blogbericht of op een pagina.

U kunt meerdere product-ID's toevoegen in de volgorde waarin u de producten wilt tonen:

[products ids="17, 11, 89, 64"]

Ook hier kunt u de SKU-nummers gebruiken:

[products skus="W181, A184, B316"]

[products skus="W121, A124, B456" orderby="date" order="asc"]

WooCommerce Shortcode | In winkelmandje knop

Toevoegen aan winkelwagenWilt u dat uw klanten – buiten de productpagina om – een bepaald product aan hun winkelwagen toevoegen? Daar is ook een standaard korte code voor. Gebruik ook hier de ID van uw product om aan te geven welk product aan het winkelmandje moet worden toegevoegd.

[add_to_cart id="18"]
U kunt ook het SKU-nummer opnieuw gebruiken (in plaats van “ID”) om een bepaald product aan te duiden.

WooCommerce Shortcode | Toon categorie

Er is ook een korte code waarmee u meerdere producten uit één categorie tegelijk kunt laten zien. Om dit te doen, heeft u de slimheid van de categorie nodig. Deze kunt u vinden in WordPress onder Producten > Categorieën:

WooCommerce Shortcode | Productcategorie slug

Het identificeren van de “slug” van een productcategorie
In het bovenstaande voorbeeld heeft onze categorie de slug “ebooks”. Om producten uit deze categorie op onze WordPress-pagina te tonen, gebruiken we de volgende korte code:

[product_category category="e-boeken"]

Deze korte code is erg handig om te gebruiken op bijvoorbeeld uw homepage, zodat u uw bezoekers een voorbeeld kunt geven van de producten uit een bepaalde categorie.

WooCommerce Shortcode | Bekijk categorie overzicht

Wilt u een overzicht van de verschillende categorieën in uw WooCommerce webshop? Ook hiervoor is een korte code (met eigenschappen) beschikbaar.

[product_categorieën nummer="18" ouder="0"]

Bovenstaande korte code geeft maximaal 18 categorieën aan. Door parent=”0″ toe te voegen zorgt u ervoor dat alleen de hoofdcategorieën worden getoond. Wilt u ook directe subcategorieën tonen? Door een getal in te voeren kunt u kiezen hoe “diep” u de subcategorieën wilt tonen.

WooCommerce Shortcode | Verberg lege categorieën

U kunt ook het volgende eigenschap aan deze korte code toevoegen om geen lege categorieën te tonen:

[product_categories number="12" parent="0"]

WooCommerce Shortcode | Laadt de hele productpagina

U kunt WooCommerce ook gebruiken om een hele productpagina in een pagina of bericht te laden. Gebruik ook hier een ID of SKU om een specifieke productpagina te laden.

[product_pagina id="183"]

Of met een SKU:

[product_pagina sku="F131"]
De pagina waarop u deze korte code gebruikt, ziet er bijna hetzelfde uit als een productpagina. Alle elementen die u normaal gesproken op een productpagina heeft staan, worden weergegeven.

WooCommerce Shortcode | Toon best beoordeelde producten

WooCommerce bevat een standaard functie waarmee uw klanten uw producten kunnen beoordelen. U kunt deze beoordelingen gebruiken om uw best beoordeelde producten te tonen op een pagina of in een bericht met een korte code.

[top_rated_products per_page="9"]

WooCommerce Shortcode | Producten in de verkoop

In WooCommerce is er een standaard mogelijkheid om producten aan te bieden in een (al dan niet tijdelijke) “Sale”. Om producten uit de verkoop te tonen, hoeft u geen aparte categorie aan te maken, er is alleen een korte code voor!

[sale_products per_page="9" colums="3"]
Net als bij andere shortcodes kunt u ervoor kiezen om een X aantal producten per pagina te tonen en het aantal kolommen te kiezen. Ook hier adviseer ik u om per_pagina te kiezen voor een veelvoud van het aantal kolommen dat u kiest.

Met deze korte code kunt u ook kiezen om de producten te sorteren, bijvoorbeeld op prijs:[sale_products per_page="9" colums="3" order per="price" order="asc""]
In de bovenstaande korte code toon ik negen producten uit de verkoop in drie kolommen, en sorteer ze op prijs (van laag naar hoog).

WooCommerce Shortcode | Toon meest verkochte producten

Uiteraard houdt WooCommerce bij hoe vaak een product wordt besteld. U kunt deze gegevens gebruiken door een korte code te gebruiken om uw meest verkochte producten te laten zien. Gebruik hiervoor de volgende korte code:

[best_selling_products per_page="8"]
Ook hier kunt u gebruik maken van alle korte code-eigenschappen die we eerder hebben laten zien. U kunt het aantal kolommen instellen, producten sorteren op basis van allerlei criteria en natuurlijk bepalen hoeveel producten u wilt laten zien.

WooCommerce Shortcode | Toon gerelateerde producten

In WooCommerce kunt u aan elk product “gerelateerde producten” toevoegen. Dit wordt ook wel “cross selling” genoemd en is een goede methode om per order meer te verkopen. Veel WooCommerce thema's voegen automatisch gerelateerde producten toe, maar je kunt dit ook handmatig doen met de volgende korte code:

[related_products per_page="4"]
U kunt deze korte code alleen aan productpagina's toevoegen, bijvoorbeeld in het veld Lange beschrijving.

WooCommerce Shortcode | Producten tonen op basis van een tag

U kunt ook producten op basis van tags laten zien:

[products tag="sportschoen"]

Met deze korte code kunt u ook allerlei eigenschappen gebruiken om bijvoorbeeld het aantal producten en kolommen te bepalen.

WooCommerce Shortcode | Producten tonen op basis van eigenschappen

In WooCommerce kunt u functies toevoegen aan producten. Deze eigenschappen kunnen door uw bezoekers worden gebruikt om een te gebruiken om bepaalde producten te vinden. Als u bijvoorbeeld een webshop heeft die sportschoenen verkoopt, kan de van een sportschoen een “eigenschap” zijn.

Is er bijvoorbeeld een WK of EK aan de gang en doet Nederland mee? Dan kun je met onderstaande korte code alle oranje sportschoenen laten zien:

[product_eigenschapeigenschap="kleur" filter="oranje"]
Uiteraard werkt dit alleen als u uw producten ook daadwerkelijk van de juiste eigenschappen heeft voorzien.

Meer info over shortcode-eigenschappen

We hebben hierboven al veel shortcodes behandeld en laten u zien hoe u eigenschappen kunt gebruiken om bepaalde eigenschappen aan uw shortcodes te geven. U kunt bijvoorbeeld het aantal producten instellen en bepalen hoeveel kolommen deze worden getoond. Maar er is nog veel meer mogelijk! We zullen nog wat meer nuttige eigenschappen opnoemen.

WooCommerce Shortcode | CSS-klasse toevoegen aan een korte code

De onderstaande korte code toont vier producten uit de “verkoop”, gesorteerd op populariteit. Het eigenschap on_sale=”true” geeft aan dat de producten uit de “verkoop” moeten komen. Met het eigenschap =”products-sale” geef ik een aangepaste CSS-klasse aan dit element, zodat ik het kan stylen met mijn eigen aangepaste CSS.

[productenlimiet="4" kolommen="4" volgorde per="populariteitsklasse"="verkoop van producten" op_verkoop="waar"]

WooCommerce Shortcode | Categorieën uitsluiten

Met onderstaande korte code toon ik acht producten in vier kolommen. Deze producten moeten afkomstig zijn uit een van de categorieën die ik in de korte code (“sportschoenen” of “broeken”) definieer:

[products limit="8" columns="4" category="sportschoenen, broeken"]
Als ik hetzelfde wil doen, maar alleen producten wil laten zien die niet in een van deze categorieën vallen, kan ik een zogenaamde cat_operator gebruiken, zoals “NOT IN”:

[products limit="8" columns="4" category="sportschoenen, broeken" cat_operator="NOT IN"]
Met zo'n “operator” zeg ik eigenlijk: Ik wil producten laten zien die niet uit een van deze categorieën komen.

WooCommerce Shortcode | Alle producten tonen

Met de shortcode hierboven laat ik alle producten uit de categorie sportschoenen zien, verdeeld over 3 kolommen.

[products limit="-1" columns="3" category="sportschoenen"]

WooCommerce training en handleidingen

Shortcodes in WordPress page builders

De meeste WordPress page builders als hebben ook Shortcodes. Een voorbeeld van de shortcodes met :
docs.wpbeaverbuilder.com/beaver-themer/field-connections/field-connection-shortcode-index-themer/

Schermafbeelding webpagina maken op ware grootte in Chrome

Google Chrome heeft een verborgen functie in de ontwikkelaarshulpmiddelen, waarmee u schermafbeeldingen van elke willekeurige webpagina kunt maken. Deze functie legt het geheel van een pagina vast, vergelijkbaar met een scrollende schermafbeelding, zonder gebruik te maken van een extensie van een derde partij zoals paparazzi (voor Mac).

Hoe maak je een beeldschermafbeelding op ware grootte van hele webpagina in Chrome?
Om te beginnen opent u Chrome en gaat u naar de webpagina die u wilt vastleggen. Eenmaal daar, klik op de drie puntjes, wijs naar “Meer Gereedschap” en klik dan op “Ontwikkelaar Gereedschap”. U kunt ook op Ctrl+Shift+I in Windows of Command+Shift+I op Mac drukken om het deelvenster met de ontwikkelaarshulpmiddelen te openen. Het staat hier goed uitgelegd
Schermafbeelding webpagina maken op ware grootte in Chrome

Meer informatie over Shortcodes sneltoetsen WordPress WooCommerce Mac Windowsof info?

Wil je meer informatie? Veel bezoekers met interesse in Shortcodes sneltoetsen WordPress WooCommerce Mac Windows bekeken ook de onderstaande handleidingen:

Scroll naar boven