Blog

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

Gli shortcode ti consentono di aggiungere elementi al tuo sito web (come i widget, ad esempio), senza dover inserire enormi blocchi di codice come farebbero normalmente gli sviluppatori.

Ad esempio, un normale frammento di codice, in termini di lunghezza, avrebbe probabilmente un aspetto simile a questo:

<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>​

Per questo esempio, facciamo finta che il frammento di codice sopra ti permetta di aggiungere un intero paragrafo di testo segnaposto Lorem Ipsum.

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.

Ora immagina che entrambi i frammenti di codice – il frammento originale e lungo, rispetto allo shortcode contenente solo la parola “lorem” – facciano esattamente la stessa cosa: aggiungere testo Lorem Ipsum.

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?

Se hai un plugin o un widget preferito, è molto probabile che abbiano uno shortcode disponibile da utilizzare.

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

Su Page Builder Sandwich, puoi aggiungere shortcode direttamente sulla tua pagina semplicemente digitandoli o incollandoli nella tua area di contenuto.

Lo abbiamo fatto qui sotto con uno shortcode di Shortcodes Ultimate, aggiungendo un riquadro di contenuto nella pagina demo di Page Builder Sandwich:

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

Da uno dei nostri articoli precedenti su Shortcode Mapping, la definizione è la seguente:

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.

Ciò significa in parte che non dovrai più cercare manualmente i tuoi shortcode nelle rispettive documentazioni o repository.

Finché avrai il plugin che include lo shortcode installato sul tuo sito WordPress, sarà facilmente disponibile per l’uso su 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.

Quindi, se vuoi aggiungere shortcode personalizzati o shortcode creati da te, puoi farlo, purché tu li abbia installati sul tuo sito WordPress.

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

Ci sono dozzine e dozzine di page builder là fuori, e sicuramente ti starai chiedendo: cosa rende Page Builder Sandwich così speciale? Perché dovresti preoccuparti di usarlo se ne hai già uno a portata di mano?

In questo articolo, elencherò una serie di funzionalità chiave presenti in Page Builder Sandwich che lo rendono unico e un vero e proprio must-have sia per i creatori di contenuti che per i designer. Se non sai cosa sia un page builder e perché ne hai bisogno, non preoccuparti, abbiamo del materiale che può aiutarti.

1. Non vedrai solo una rappresentazione visiva dei tuoi contenuti, vedrai e modificherai i tuoi contenuti reali

In altri page builder, vedi aree che si limitano a rappresentare i tuoi contenuti. Imposti il layout dei contenuti principalmente con blocchi e forme rettangolari, e il risultato assomiglia più a una struttura di come apparirebbero alla fine i tuoi contenuti nella pagina. Questo porta a fare continuamente clic sul pulsante di anteprima solo per vedere come saranno i risultati.

Con Page Builder Sandwich, tutte le modifiche vengono eseguite nel front-end del tuo sito e modifichi i tuoi contenuti direttamente per una vera esperienza what-you-see-is-what-you-get (ciò che vedi è ciò che ottieni).

2. Modifica diretta facile e veloce senza tutte quelle fastidiose finestre di dialogo a comparsa

I popup sono sempre stati un punto fermo nei page builder. Nella maggior parte di essi, se vuoi modificare qualsiasi cosa nel tuo layout, che si tratti di un titolo, dell’etichetta di un pulsante o di un breve slogan, devi prima aspettare che si apra una finestra di dialogo a comparsa ed eseguire le modifiche al suo interno.

Ci siamo posti l’obiettivo di ridurre al minimo l’uso dei popup a tutti i livelli in Page Builder Sandwich. Rimuovendo i popup, la modifica di qualsiasi contenuto è resa più semplice e fluida che mai.

La modifica avviene in modo lineare: fai clic sul testo per posizionare il cursore e inizia subito a digitare. Non devi più aspettare una finestra popup contenente un editor TinyMCE per iniziare a modificare. La parte migliore è che puoi comunque trascinare e rilasciare i tuoi contenuti dove preferisci.

Un’altra innovazione che contribuisce a un’esperienza di modifica senza problemi è l’ispettore sempre presente. L’ispettore funge da cassetta degli attrezzi ed editor delle proprietà. Gli strumenti per la formattazione dei tuoi contenuti: colori del testo, titoli, regolazioni della dimensione del carattere, margini, spaziatura interna (padding), bordi, citazioni a blocchi e molti altri sono facilmente a portata di clic.

3. Funzionalità di WordPress riutilizzate

Un’altra cosa che abbiamo notato in altri page builder è che spesso reinventano la ruota. Alcuni implementano i propri selettori di colore, caricatori di immagini, creatori di gallerie e vari altri strumenti. Non c’è nulla di sbagliato in questo di per sé, ma WordPress è una miniera d’oro di frammenti di codice, quindi perché non usarli?

WordPress è una piattaforma enorme e meravigliosa e contiene molti fantastici strumenti realizzati da una miriade di collaboratori eccezionali. Page Builder Sandwich utilizza il più possibile le funzionalità già integrate in WordPress.

Invece di utilizzare il nostro selettore di colori, usiamo il selettore di colori Iris. Invece di un nostro caricatore di immagini, utilizziamo il gestore dei media. Ci sono poi anche backbonejs, underscorejs, wp.hooks e wp.shortcode, solo per citare altri utili script. Usiamo tutti questi, e questo ha reso le nostre vite più facili e porta anche a una base di codice più stabile.

Il riutilizzo delle funzionalità di WordPress ha portato anche ad alcune piacevoli sorprese. Ad esempio, poiché abbiamo utilizzato il gestore dei media per inserire immagini, è stata una piacevole sorpresa scoprire che potevamo gestire fin da subito anche le gallerie di WordPress, le playlist video e audio e gli URL remoti. Abbiamo anche potuto utilizzare semplicemente il gestore dei media per eseguire la modifica delle immagini, eliminando ore di inutili grattacapi durante lo sviluppo.

4. Navigazione da tastiera e scorciatoie

In altri page builder, il mouse è il tuo migliore amico. Trascini e rilasci elementi con esso e fai doppio clic sulle cose per modificarle. Ma la tastiera viene spesso trascurata.

Ad esempio, in alcuni builder, non puoi modificare facilmente il testo un paragrafo/sezione più sopra rispetto a dove stai modificando, perché dovresti uscire da una finestra popup con un clic ed entrare in una nuova. In Page Builder Sandwich, puoi navigare con la tastiera. Premi i tasti freccia per spostarti tra i tuoi contenuti: funziona anche se l’altro contenuto è inserito all’interno di un’altra riga o colonna.

Un’altra caratteristica importante sono le scorciatoie da tastiera per annullare e ripristinare. All’inizio potrebbero non sembrare un granché, ma pensa a questo: e se trascinassi e rilasciassi accidentalmente il tuo contenuto nella posizione sbagliata? In alcuni page builder, dovresti trascinarlo nuovamente nella sua posizione originale. In Page Builder Sandwich, funzionano sia l’annullamento che il ripristino. Quindi, sia che tu voglia rivedere ciò che hai digitato, sia che tu voglia ripristinare il contenuto trascinato (o più contenuti trascinati), ti basta premere annulla o ripristina. Annulla e ripristina funzionano per i contenuti trascinati e rilasciati e persino per le modifiche alle proprietà come le dimensioni dei caratteri e i padding delle righe. Questo li rende strumenti potenti nel tuo arsenale di modifica.

5. Un vero page builder front-end – Un’esperienza di modifica più rilassante e senza stress

La nostra mentalità durante lo sviluppo è che la modifica nel front-end non dovrebbe farti sentire come se stessi ancora modificando utilizzando strumenti di back-end. Non dovrebbe sembrare che il builder sia stato creato inizialmente per il back-end e poi convertito per il front-end.

Tutto sommato, per me, il principale elemento distintivo di Page Builder Sandwich è che lo abbiamo costruito con l’obiettivo di essere un “vero” page builder front-end: una reimmaginazione di come dovrebbe essere l’editing nel front-end.

Questo articolo fornirà una breve panoramica su come funziona Page Builder Sandwich ed è pensato come introduzione per chi è interessato a capire come il nostro page builder si integra con i diversi elementi di WordPress. Non mi soffermerò sulle singole funzionalità di Page Builder Sandwich; se vuoi scoprirle, visita la nostra pagina dei video in cui mostriamo ogni funzionalità singolarmente con brevi screencast.

Se vuoi scoprire in cosa Page Builder Sandwich si differenzia dagli altri page builder disponibili, dai un’occhiata al nostro articolo In che modo Page Builder Sandwich è diverso dagli altri.

Dov’è? E cosa posso modificare con esso?

A differenza di molti altri page builder, Page Builder Sandwich risiede nel front-end del tuo sito web. Se ti trovi nel back-end, abbiamo aggiunto un pulsante “Frontend” accanto ai pulsanti dell’editor di contenuti che ti porterà direttamente al front-end della tua pagina.

Page Builder Sandwich ti consente di modificare i contenuti di articoli, pagine e custom post type. Tuttavia, non consente di modificare direttamente gli articoli del blog aggregati nella home page o altre aree non singole del tuo sito. Consideralo in questo modo: se ciò che vuoi modificare dispone di un editor di contenuti nel back-end (come “Nuovo articolo” e “Nuova pagina”), allora puoi utilizzare Page Builder Sandwich. Puoi modificare le tue singole pagine e i post del blog e, ad esempio, se hai un plugin che introduce menu per ristoranti o elementi di portfolio, puoi modificare anche quelli.

Quando sei nel front-end, abbiamo posizionato un pulsante blu “Modifica con Page Builder Sandwich” nella tua barra di amministrazione. Fai semplicemente clic su di esso per iniziare a modificare la tua pagina.

Modifica diretta dei contenuti

Con Page Builder Sandwich abbiamo reso la modifica dei contenuti il più semplice e immediata possibile. Modificare i contenuti è lineare e facile: basta fare clic e digitare. È davvero così semplice.

Ti presentiamo l’ispettore

Abbiamo notato che molti page builder utilizzano un gran numero di popup. Personalmente non amo i popup, poiché distraggono e in pratica ti dicono: “ehi, fermati da quello che stai facendo finché non compili questi campi”. Interrompono il flusso di un’esperienza di modifica altrimenti fluida. Per questo motivo abbiamo ridotto al minimo l’uso dei popup su tutta la linea, creando invece l’ispettore.

L’ispettore è un’area simile a una barra laterale che contiene tutti gli strumenti di formattazione e impaginazione di cui potresti aver bisogno. L’ispettore può essere ancorato sul lato sinistro o destro dello schermo, in modo da poter vedere chiaramente ciò che stai modificando.

Dall’ispettore puoi regolare diverse proprietà del testo come intestazioni, dimensioni dei caratteri, grassetto, corsivo, colori del testo e molto altro. Oltre a questo, ti consente anche di aggiungere immagini e creare righe o contenuti organizzati in colonne. È inoltre in grado di eseguire modifiche più avanzate, come adattare le righe alla larghezza dell’intera pagina, impostare i colori di sfondo di righe e colonne, l’allineamento verticale dei contenuti, nonché margini e sfondi. È davvero potente e ti ritroverai a usarlo per la maggior parte del tempo.

Integrazione con i temi WordPress

Page Builder Sandwich, per sua natura, non include quasi alcuno stile predefinito. Quando modifichi i tuoi contenuti, gli stili che vedi si basano principalmente sul tuo tema.

Integrazione con gli Shortcode

Gli shortcode sono un aspetto importante in WordPress e molto probabilmente ne utilizzerai diversi nel tuo sito. Page Builder Sandwich li gestisce in modo ottimale, visualizzandoli già renderizzati nel front-end. Gli shortcode rimangono comunque modificabili e, la cosa migliore, è che dopo averli modificati verranno nuovamente renderizzati insieme alle tue modifiche.

Per comodità, potrai modificare i tuoi shortcode utilizzando l’ispettore. Se desideri un maggiore controllo, potrai anche fare doppio clic sugli shortcode per modificarli in formato raw. Oltre a ciò, tutti gli shortcode disponibili nel tuo sito web sono elencati nell’ispettore per poterli inserire facilmente nei tuoi contenuti.

E per quanto riguarda l’appesantimento del sito?

A chi piacciono i siti web lenti? A noi no, e di certo nemmeno a te. Ci siamo assicurati che Page Builder Sandwich abbia un impatto pressoché nullo sulle prestazioni del tuo sito web. Quando non sei connesso, vengono caricati al massimo solo gli stili CSS per righe e colonne, insieme ai necessari script JS e CSS per gli shortcode che hai utilizzato.

Per gli sviluppatori

Se sei uno sviluppatore e utilizzi shortcode nei tuoi plugin WordPress, Page Builder Sandwich fornisce una Shortcode API che ti consente di offrire facilmente ai tuoi utenti campi per la creazione e la modifica rapida dei tuoi shortcode.

Se desideri estendere ulteriormente le funzionalità o integrarti con alcune parti di Page Builder Sandwich, mettiamo a disposizione anche una serie di utili hook di azione e filtro da poter utilizzare.