Auteur: Neil Lock

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

Met shortcodes kun je dingen toevoegen aan je website (zoals bijvoorbeeld widgets), zonder dat je enorme stukken code hoeft toe te voegen zoals ontwikkelaars dat gewoonlijk zouden doen.

Een regulier stuk code zou er qua lengte bijvoorbeeld waarschijnlijk ongeveer zo uitzien:

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

Laten we voor dit voorbeeld doen alsof het bovenstaande stukje code je een hele alinea Lorem Ipsum-plaatshoudertekst laat toevoegen.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

Stel je nu voor dat beide stukken code – het originele, lange stuk versus de shortcode die alleen het woord “lorem” bevat – allebei precies hetzelfde doen: Lorem Ipsum-tekst toevoegen.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

Als je een favoriete plug-in of widget hebt, is de kans groot dat deze een shortcode heeft die je kunt gebruiken.

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

In Page Builder Sandwich kun je shortcodes rechtstreeks aan je pagina toevoegen door ze simpelweg in je inhoudsgebied te typen of te kopiëren en plakken.

We hebben dit hieronder gedaan met een shortcode van Shortcodes Ultimate, waarmee een inhoudsvak is toegevoegd op de Page Builder Sandwich-demopagina:

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

Uit een van onze eerdere artikelen over Shortcode Mapping is de definitie als volgt:

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Dit betekent deels dat je niet langer handmatig naar je shortcodes hoeft te zoeken in hun respectievelijke documentatie of repositories.

Zolang je de plug-in met de shortcode op je WordPress-site hebt geïnstalleerd, is deze eenvoudig te gebruiken in Page Builder Sandwich.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

Dus als je aangepaste shortcodes wilt toevoegen, of shortcodes die je zelf hebt gemaakt, dan kan dat, zolang je ze op je WordPress-site hebt geïnstalleerd.

Here are some other helpful plugins that you can use to create your own custom shortcodes:

Er zijn tientallen en tientallen page builders op de markt, en je vraagt je vast af: wat is er zo speciaal aan Page Builder Sandwich? Waarom zou je de moeite nemen om het te gebruiken als je er al eentje tot je beschikking hebt?

In dit artikel som ik een aantal belangrijke functies van Page Builder Sandwich op die het uniek maken, en een absolute must-have voor zowel contentmakers als ontwerpers. Als je niet weet wat een page builder is en waarom je er een nodig hebt, maak je geen zorgen, we hebben materiaal dat je op weg kan helpen.

1. Je ziet niet alleen een visuele weergave van je content, je ziet en bewerkt je daadwerkelijke content

In andere page builders zie je vlakken die je content slechts representeren. Je maakt voornamelijk lay-outs met blokken en rechthoekige vormen, en het resultaat lijkt meer op een kader van hoe je content er uiteindelijk op je pagina uit zou komen te zien. Dit leidt tot constant klikken op de voorbeeldknop om te zien hoe de resultaten eruitzien.

Met Page Builder Sandwich vindt alle bewerking plaats in de front-end van je site en bewerk je je content direct, voor een echte what-you-see-is-what-you-get-ervaring.

2. Snel en eenvoudig direct bewerken zonder al die vervelende pop-upvensters

Pop-ups zijn een vast onderdeel geweest van page builders. Bij de meeste moet je, als je iets in je lay-out wilt bewerken – of het nu een koptekst, een knoptekst of een korte slagzin is –, eerst wachten tot er een pop-upvenster opent om daarin je wijzigingen door te voeren.

We hebben het ons doel gemaakt om het gebruik van pop-ups overal in Page Builder Sandwich tot een minimum te beperken. Door pop-ups te verwijderen, is het bewerken van content eenvoudiger en soepeler dan ooit gemaakt.

Bewerken gebeurt op een ongecompliceerde manier – klik op je tekst om je cursor daar te plaatsen en begin direct met typen. Je hoeft niet langer te wachten op een pop-upvenster met een TinyMCE-editor om te beginnen met bewerken. Het mooiste is dat je je content nog steeds kunt slepen en neerzetten.

Een andere innovatie die bijdraagt aan probleemloos bewerken, is de altijd aanwezige inspector. De inspector fungeert als je gereedschapskist en eigenschappenbewerker. Gereedschappen voor het opmaken van je content: tekstkleuren, kopteksten, lettergrootteaanpassingen, marges, paddings, kaders, blockquotes en nog veel meer zijn met één eenvoudige klik binnen handbereik.

3. Hergebruikte WordPress-functionaliteit

Iets anders dat ons is opgevallen bij andere page builders is dat ze vaak het wiel opnieuw uitvinden. Sommige implementeren hun eigen kleurkiezers, afbeelding-uploaders, galerijmakers en diverse andere tools. Daar is op zich niets mis mee, maar WordPress is een schatkamer aan codefragmenten, dus waarom zou je die niet gebruiken?

WordPress is een enorm en prachtig platform en bevat veel handige tools die gebouwd zijn door tal van fantastische bijdragers. Page Builder Sandwich maakt zoveel mogelijk gebruik van functionaliteit die al standaard in WordPress zit.

In plaats van onze eigen kleurkiezer te gebruiken, gebruiken we de Iris-kleurkiezer. In plaats van een eigen afbeelding-uploader, gebruiken we de mediamanager. Daarnaast zijn er nog backbonejs, underscorejs, wp.hooks en wp.shortcode, om nog een paar handige scripts te noemen. We gebruiken ze allemaal, en dit heeft ons leven makkelijker gemaakt en leidt bovendien tot een stabielere codebase.

Het hergebruiken van functionaliteit van WordPress heeft ook voor een aantal geweldige verrassingen gezorgd. Omdat we bijvoorbeeld de mediamanager gebruikten om afbeeldingen in te voegen, was het een aangename verrassing dat we nu direct ook WordPress-galerijen, video- en afspeellijsten en externe URL’s konden ondersteunen. We konden ook gewoon de mediamanager gebruiken voor het bewerken van afbeeldingen, wat uren aan onnodige ontwikkelingshoofdpijn scheelde.

4. Toetsenbordnavigatie en sneltoetsen

In andere page builders is de muis je beste vriend. Je sleept en zet er dingen mee neer en dubbelklikt op elementen om ze te bewerken. Maar het toetsenbord wordt vaak over het hoofd gezien.

In sommige builders kun je bijvoorbeeld niet eenvoudig tekst bewerken in een alinea/sectie boven waar je aan het bewerken bent, omdat je eerst een pop-upvenster moet wegklikken en in een nieuwe moet klikken. In Page Builder Sandwich kun je met je toetsenbord navigeren. Gebruik de pijltjestoetsen om tussen je content te navigeren; het werkt zelfs als je andere content weggestopt zit in een andere rij of kolom.

Een andere belangrijke functie zijn de sneltoetsen voor ongedaan maken en opnieuw uitvoeren. Ze lijken op het eerste gezicht misschien niet veel bijzonders, maar denk hier eens over na: wat als je per ongeluk je content naar de verkeerde plek sleept? In sommige page builders moet je het weer terug naar de oorspronkelijke positie slepen. In Page Builder Sandwich werken zowel ‘ongedaan maken’ als ‘opnieuw uitvoeren’. Dus of je nu wilt herzien wat je hebt getypt of je versleepte content (of meerdere versleepte elementen) wilt terugzetten, gebruik gewoon ‘ongedaan maken’ of ‘opnieuw uitvoeren’. Ongedaan maken en opnieuw uitvoeren werkt voor versleepte content en zelfs voor eigenschapswijzigingen zoals lettergroottes en rijpaddings. Dit maakt ze tot krachtige tools in je bewerkingsarsenaal.

5. Een echte front-end page builder – Een meer ontspannen en zorgeloze bewerkingservaring

Onze instelling tijdens de ontwikkeling was dat bewerken in de front-end niet moet aanvoelen alsof je nog steeds met back-endtools aan het bewerken bent. Het mag niet aanvoelen alsof de builder aanvankelijk voor de back-end is gemaakt en vervolgens naar de front-end is overgezet.

Al met al is voor mij de belangrijkste onderscheidende factor van Page Builder Sandwich dat we het hebben gebouwd met als doel een “echte” front-end page builder te zijn – een hernieuwde visie op hoe front-end bewerken zou moeten zijn.

Dit artikel geeft een kort overzicht van hoe Page Builder Sandwich werkt, en is bedoeld als introductie voor diegenen die geïnteresseerd zijn in hoe onze page builder integreert met verschillende onderdelen van WordPress. Ik zal niet ingaan op de afzonderlijke functies van Page Builder Sandwich; als u die wilt zien, ga dan naar onze videopagina waar we elke functie afzonderlijk laten zien met korte screencasts.

Als u wilt weten waarin Page Builder Sandwich verschilt van de andere page builders die er zijn, bekijk dan ons artikel How Page Builder Sandwich Is Different from the Rest.

Waar is het? En wat kan ik ermee bewerken?

In tegenstelling tot veel andere page builders bevindt Page Builder Sandwich zich in de frontend van uw website. Als u zich in de backend bevindt, hebben we naast de knoppen van de content editor een knop “Frontend” geplaatst die u naar de frontend van uw pagina brengt.

Met Page Builder Sandwich kunt u uw berichten, pagina’s en content van custom post types bewerken. Het stelt u echter niet in staat om direct uw verzamelde blogberichten op de voorpagina en andere niet-individuele gedeelten op uw site te bewerken. Zie het maar zo: als hetgeen u wilt bewerken een content editor heeft in de backend (zoals “Nieuw bericht” en “Nieuwe pagina”), dan kan Page Builder Sandwich worden gebruikt. U kunt uw afzonderlijke pagina’s en blogberichten bewerken, en als u bijvoorbeeld een plug-in hebt die restaurantmenu’s of portfolio-items toevoegt, kunt u die ook bewerken.

In de frontend hebben we een blauwe knop “Edit with Page Builder Sandwich” in uw beheerbalk geplaatst. Klik daarop om uw pagina te bewerken.

Directe contentbewerking

Met Page Builder Sandwich hebben we het bewerken van content zo eenvoudig en pijnloos mogelijk gemaakt. Content bewerken is ongecompliceerd en eenvoudig: gewoon klikken en typen. Zo simpel is het.

Introductie van de inspector

We hebben gemerkt dat veel page builders veel pop-ups hebben. Persoonlijk hou ik niet van pop-ups omdat ze afleidend werken en eigenlijk zeggen: “hé, stop waar je mee bezig bent totdat je eerst deze velden invult”. Ze verstoren de flow van een verder soepele bewerkingservaring. Daarom hebben we het gebruik van pop-ups over de hele linie tot een minimum beperkt, en hebben we in plaats daarvan de inspector gecreëerd.

De inspector is een zijbalkachtig gedeelte dat alle opmaak- en lay-outhulpmiddelen bevat die u ooit nodig zult hebben. De inspector kan aan de linker- of rechterkant van uw scherm worden vastgezet, zodat u gemakkelijk kunt zien wat u bewerkt.

Vanuit de inspector kunt u verschillende teksteigenschappen aanpassen, zoals koppen, lettergroottes, vet, cursief, tekstkleuren en nog veel meer. Daarnaast kunt u er afbeeldingen mee toevoegen en rijen of inhoud in kolommen maken. Het is ook geschikt voor meer geavanceerde bewerkingen, zoals het aanpassen van rijen naar de volledige paginabreedte, achtergrondkleuren van rijen en kolommen, verticale uitlijning van inhoud, evenals marges en achtergronden. Het is behoorlijk krachtig en u zult merken dat u het grotendeels gebruikt.

Integratie met WordPress-thema’s

Page Builder Sandwich bevat van nature bijna geen eigen stylings. Wanneer u uw content bewerkt, zijn de stijlen die u ziet grotendeels gebaseerd op uw thema.

Integratie met shortcodes

Shortcodes zijn een belangrijk aspect in WordPress en waarschijnlijk gebruikt u een handvol shortcodes op uw site. Page Builder Sandwich gaat hier uitstekend mee om, waarbij uw shortcodes gerenderd worden weergegeven in de frontend. Shortcodes blijven ook bewerkbaar, en het mooiste is: nadat u uw shortcodes hebt bewerkt, worden ze opnieuw gerenderd met uw wijzigingen erin.

Voor het gemak kunt u uw shortcodes bewerken met behulp van de inspector. Als u meer controle wilt, kunt u ook dubbelklikken op shortcodes om ze in hun ruwe vorm te bewerken. Daarnaast worden alle shortcodes die beschikbaar zijn op uw website weergegeven in de inspector, zodat u ze eenvoudig in uw content kunt opnemen.

Hoe zit het met website-bloat?

Wie houdt er van trage websites? Wij niet, en u zeker niet. We hebben ervoor gezorgd dat Page Builder Sandwich vrijwel geen invloed heeft op de prestaties van uw website. Wanneer u bent uitgelogd, worden er op zijn minst alleen CSS-stijlen voor rijen en kolommen ingeladen, samen met de benodigde JS- en CSS-scripts voor de shortcodes die u hebt gebruikt.

Voor ontwikkelaars

Als u een ontwikkelaar bent en u shortcodes in uw WordPress-plug-ins hebt, biedt Page Builder Sandwich een Shortcode-API waarmee u uw klanten eenvoudig velden kunt bieden om uw shortcodes gemakkelijk aan te maken en te wijzigen.

Als u de mogelijkheden verder wilt uitbreiden of wilt integreren met bepaalde onderdelen van Page Builder Sandwich, hebben we ook een reeks nuttige action- en filter-hooks die u kunt gebruiken.