Come utilizzare il blocco HTML personalizzato di WordPress

Il Blocco HTML personalizzato ti consente di aggiungere contenuto HTML e modificarlo senza dover visualizzare la pagina o pubblicare come HTML. Puoi incorporare HTML e persino usarlo per contrassegnare il tuo testo e quindi convertirlo in un blocco di paragrafo con testo in stile, se lo desideri. Questo blocco è ottimo per coloro che preferiscono lavorare in HTML ed è uno dei modi migliori per incorporare determinati tipi di codice, come Google Maps.

In questo articolo, esamineremo da vicino il blocco HTML personalizzato. Vedremo come aggiungerlo ai tuoi post e alle tue pagine, esamineremo le sue impostazioni e opzioni, vedremo i suggerimenti su come usarlo e vedremo le domande frequenti.

Iscriviti al nostro canale Youtube

Come aggiungere il blocco HTML personalizzato al tuo articolo o pagina

Per aggiungere il Blocco HTML personalizzato al tuo contenuto, posiziona il cursore nel punto in cui desideri che appaia il blocco e seleziona lo strumento Inserimento. Si aprirà una casella di ricerca in cui è possibile inserire un termine di ricerca o scorrere le opzioni. Cerca html e seleziona il blocco quando viene visualizzato nei risultati.

In alternativa, puoi digitare /html dove vuoi che appaia il blocco e premere invio o selezionarlo dalle opzioni sopra l'area del blocco.

Ora hai un blocco HTML personalizzato all'interno del tuo contenuto in cui puoi aggiungere HTML. Vedremo alcuni esempi con il codice mentre esaminiamo le impostazioni.

Impostazioni e opzioni del blocco HTML personalizzato

A differenza della maggior parte dei blocchi, il Blocco HTML personalizzato non include opzioni nella barra laterale dell'editor. Troverai tutte le opzioni di cui hai bisogno nella barra degli strumenti.

Barra degli strumenti del blocco HTML personalizzato

Fare clic in un punto qualsiasi del blocco per visualizzarne gli strumenti. Se non li vedi tutti, fai clic sotto il blocco in una nuova area, quindi il resto degli strumenti verrà visualizzato quando selezioni nuovamente il blocco.

Ogni blocco ha i propri controlli specifici in cui è possibile selezionare le opzioni per il blocco. Un piccolo insieme di opzioni di blocco sopra la barra degli strumenti consente di modificare il tipo di blocco, convertire in blocchi e aprire le opzioni.

Diamo un'occhiata a ciascuna impostazione in dettaglio.

Blocco o stile di modifica HTML personalizzato

Selezionando HTML nelle opzioni si apre una casella a discesa in cui è possibile trasformare il blocco in altri tipi di blocchi. Le opzioni includono Codice, Colonne o Gruppo.

Codice : trasforma il Blocco HTML personalizzato in un Blocco codice in modo da poter visualizzare diversi tipi di codice.

Colonne : posiziona il blocco all'interno delle colonne.

Gruppo : aggiunge il blocco a un gruppo in modo da poterli regolare come un unico blocco.

Strumento di trascinamento del blocco HTML personalizzato

Lo strumento di trascinamento include sei punti che puoi afferrare con il mouse per spostarlo.

Quindi, trascina semplicemente il blocco ovunque desideri all'interno del tuo contenuto e rilascialo. Apparirà una linea blu che indica dove verrà rilasciato il blocco mentre trascini il blocco.

Quando vedrai apparire la linea blu nel punto in cui desideri il blocco, rilascia il pulsante del mouse e il tuo blocco verrà posizionato nella nuova posizione.

Sposta blocco HTML personalizzato

Le frecce su e giù spostano il blocco di una sezione di contenuto ogni volta che fai clic su di esse. Lo schermo scorrerà mentre il blocco si sposta automaticamente nella nuova posizione. Questo è un modo semplice per spostare il blocco di una o due sezioni.

Blocco HTML personalizzato HTML e anteprima

I pulsanti HTML e Anteprima consentono di selezionare come funziona il blocco con HTML nell'editor. Il pulsante HTML è selezionato per impostazione predefinita. Questo mostra l'HTML nella sua forma di codice invece di eseguirlo. Questo esempio mostra l'HTML di una mappa di Google.

La selezione di Anteprima mostra come apparirà l'HTML sul frontend mentre viene eseguito all'interno del browser. È facile passare da una vista all'altra per modificare l'HTML e vedere come apparirà all'utente finale. Questo è un modo eccellente per apportare modifiche e visualizzare rapidamente i risultati. Questo esempio mostra una mappa di Google incorporata come apparirebbe all'interno del contenuto.

Come altro esempio, ecco dell'HTML per aggiungere uno stile a una riga di testo. Questa è la vista HTML, dove posso creare e modificare l'HTML.

Ecco la modalità Anteprima che mostra come apparirà sul front-end.

Opzioni di blocco HTML personalizzate

All'estrema destra della barra degli strumenti ci sono tre punti in una pila verticale. Questi tre punti aprono una serie di 10 opzioni in tre divisioni che consentono di nascondere le impostazioni, convertire in blocchi, copiare, duplicare, inserire prima o dopo, spostare, aggiungere a blocchi riutilizzabili, raggruppare o rimuovere il blocco.

Ecco cosa possono fare le opzioni Blocco HTML personalizzato:

Nascondi altre impostazioni : nasconde la barra laterale destra, espandendo l'area di lavoro.

Converti in blocchi : converte il contenuto negli altri blocchi appropriati. Il testo verrà convertito in blocchi di paragrafo, le immagini in blocchi di immagine, ecc. Il codice incorporato, come il codice di Google Map che ho usato nel mio esempio, rimarrà come blocco HTML personalizzato. Se altro HTML all'interno del blocco può essere convertito, verrà rimosso dal blocco e posizionato in un blocco diverso.

Copia : copia il blocco negli appunti in modo da poterlo incollare ovunque all'interno dell'editor.

Duplica : posiziona un duplicato del blocco sotto l'originale.

Inserisci prima : aggiunge un'area di blocco prima del blocco HTML personalizzato in modo da poter posizionare un altro blocco.

Inserisci dopo : aggiunge un'area dopo il blocco in cui è possibile posizionare un altro blocco.

Sposta in : consente di spostare il blocco in alto o in basso con i tasti freccia. Sposterai una linea blu. Quando raggiunge la posizione desiderata, premi invio e il blocco viene spostato all'istante.

Aggiungi a blocchi riutilizzabili : aggiunge il blocco HTML personalizzato ai blocchi riutilizzabili in modo da poterlo riutilizzare su qualsiasi pagina o post.

Gruppo : aggiunge il blocco a un gruppo in modo da poter regolare i blocchi come una singola unità.

Rimuovi blocco : elimina il blocco.

Suggerimenti e best practice per l'utilizzo efficace del blocco HTML personalizzato

Usa questo blocco per modellare il tuo testo e modificare prima l'HTML, quindi usa lo strumento Converti in blocchi per creare paragrafi o altri tipi di contenuto. Questo ti dà un maggiore controllo sul contenuto ed è particolarmente utile se non hai bisogno di mantenere la versione HTML. Puoi visualizzare l'anteprima mentre procedi. Ciò ti impedisce di dover cambiare tra gli editor visivi e di codice nelle impostazioni di WordPress nella barra laterale.

Usa questo blocco per mappe incorporate, annunci, video, ecc. In questo modo non devi passare alla visualizzazione Editor di codice e aggiungere il codice in altri tipi di blocchi, come il Blocco paragrafo.

L'utilizzo di questo blocco anziché della versione dell'editor di codice delle tue pagine e dei tuoi post ti evita di dover lavorare con i tag della pagina e dei post. Questo crea un ambiente di lavoro più pulito e più facile da usare.

Sia che tu stia aggiungendo il tuo codice HTML o incorporando il codice da un'altra fonte, usa spesso la funzione Anteprima per assicurarti che il tuo HTML venga eseguito nel modo desiderato.

Non utilizzare il tag script nel blocco. Potrebbe essere rimosso e quindi il tuo codice non funzionerebbe.

Domande frequenti sul blocco HTML personalizzato

Che cosa fa il Blocco HTML personalizzato?

Ti consente di inserire HTML in un campo in modo da poterci lavorare mantenendo la pagina o il post nell'editor visivo.

Come può essere utilizzato il Blocco HTML personalizzato?

È possibile aggiungere qualsiasi HTML con i tag supportati. Puoi utilizzare il blocco per annunci, mappe, video, qualsiasi cosa con iframe, tabelle, ecc. È anche un modo semplice per contrassegnare il tuo testo e quindi convertirlo in un blocco di paragrafo.

Codificherà a colori il markup?

No, il markup nel blocco assomiglia a qualsiasi editor di testo.

Il blocco HTML personalizzato esegue l'HTML?

Esegue l'HTML normalmente sul front-end. Nell'editor, può eseguire l'HTML o mostrarti il ​​codice. Sta a te decidere cosa visualizzare e puoi selezionare tra le due opzioni in qualsiasi momento con un solo clic del pulsante.

Sono supportati tutti i tag HTML?

No. Puoi vedere un elenco di tag HTML supportati nella pagina del codice supportato da WordPress.

Conclusione

Questo è il nostro sguardo al blocco HTML personalizzato. Questo blocco non è solo per gli sviluppatori. Il vantaggio principale dell'utilizzo di questo blocco è che non è necessario passare dall'editor visuale all'editor di codice per lavorare con l'HTML. Ciò significa che puoi lavorare con il resto dei tuoi contenuti visualizzati normalmente. Puoi quindi lavorare con HTML nel blocco e visualizzarne l'anteprima in qualsiasi momento. Il blocco HTML personalizzato fornisce un modo semplice per lavorare con l'HTML nell'editor di blocchi.

Vogliamo sentire da voi. Usi il blocco HTML personalizzato? Fateci sapere la vostra esperienza nei commenti.

Immagine in primo piano tramite enterlinedesign / shutterstock.com