Cum se utilizează blocul HTML personalizat WordPress

Blocul HTML personalizat vă permite să adăugați conținut HTML și să îl editați fără a fi nevoie să vizualizați pagina sau să postați ca HTML. Puteți încorpora HTML și chiar îl puteți utiliza pentru a vă marca textul și apoi îl puteți converti într-un bloc de paragrafe cu text stilizat, dacă doriți. Acest bloc este excelent pentru cei care preferă să lucreze în HTML și este unul dintre cele mai bune moduri de a încorpora anumite tipuri de cod, cum ar fi Google Maps.

În acest articol, vom arunca o privire atentă asupra blocului HTML personalizat. Vom vedea cum să-l adăugăm la postările și paginile dvs., să analizăm setările și opțiunile acestuia, să vedem sfaturi despre cum să îl utilizați și să vedem întrebările frecvente.

Abonați-vă la canalul nostru Youtube

Cum să adăugați blocul HTML personalizat la postarea sau pagina dvs.

Pentru a adăuga blocul HTML personalizat la conținutul dvs., plasați cursorul în locul în care doriți să apară blocul și selectați instrumentul Inserter. Se va deschide o casetă de căutare unde puteți introduce un termen de căutare sau puteți derula opțiunile. Căutați html și selectați blocul atunci când este afișat în rezultate.

Alternativ, puteți tasta / html unde doriți să apară blocul și să apăsați Enter sau să îl selectați din opțiunile de deasupra zonei blocului.

Acum aveți un bloc HTML personalizat în conținutul dvs., unde puteți adăuga HTML. Vom vedea câteva exemple cu cod pe măsură ce parcurgem setările.

Setări și opțiuni de blocare HTML personalizate

Spre deosebire de majoritatea blocurilor, blocul HTML personalizat nu include opțiuni în bara laterală a editorului. Veți găsi toate opțiunile de care aveți nevoie în bara de instrumente.

Bara de instrumente de blocare HTML personalizată

Faceți clic oriunde în bloc pentru a vedea instrumentele sale. Dacă nu le vedeți pe toate, faceți clic sub bloc într-o zonă nouă, iar apoi restul instrumentelor se vor afișa când selectați din nou blocul.

Fiecare bloc are propriile controale specifice în care puteți selecta opțiuni pentru bloc. Un set mic de opțiuni de bloc de deasupra barei de instrumente vă permite să schimbați tipul de bloc, să convertiți în blocuri și să deschideți opțiunile.

Să analizăm fiecare setare în detaliu.

Bloc sau stil de schimbare HTML personalizat

Selectarea HTML în opțiuni deschide o casetă derulantă în care puteți transforma blocul în alte tipuri de blocuri. Opțiunile includ cod, coloane sau grup.

Cod - transformă blocul HTML personalizat într-un bloc de cod, astfel încât să puteți afișa diferite tipuri de cod.

Coloane - plasează blocul în coloane.

Grup - adaugă blocul la un grup, astfel încât să le puteți regla ca un singur bloc.

Instrument personalizat de blocare a blocurilor HTML

Instrumentul de tragere include șase puncte pe care le puteți apuca cu mouse-ul pentru a-l muta.

Apoi, pur și simplu trageți blocul oriunde doriți în conținutul dvs. și plasați-l. Va apărea o linie albastră care indică locul în care va fi scăzut blocul în timp ce trageți blocul în jurul său.

După ce vedeți linia albastră apare unde doriți blocul, eliberați butonul mouse-ului și blocul dvs. va fi plasat în noua sa locație.

Mutare bloc personalizat HTML

Săgețile în sus și în jos deplasează blocul cu o secțiune de conținut de fiecare dată când faceți clic pe ele. Ecranul va derula pe măsură ce blocul se mută automat în noua sa locație. Acesta este un mod ușor de a muta blocul o secțiune sau două.

Blocare HTML personalizată HTML și previzualizare

Butoanele HTML și Previzualizare vă permit să selectați modul în care funcționează blocul cu HTML în editor. Butonul HTML este selectat în mod implicit. Aceasta arată codul HTML în forma sa de cod, mai degrabă decât executarea acestuia. Acest exemplu arată codul HTML al unei hărți Google.

Selectarea Previzualizării arată cum va arăta HTML-ul pe frontend pe măsură ce este executat în browser. Este ușor să comutați înainte și înapoi între vizualizări pentru a edita codul HTML și a vedea cum ar arăta utilizatorul final. Acesta este un mod excelent de a face modificări și de a vizualiza rapid rezultatele. Acest exemplu arată o hartă Google încorporată așa cum ar apărea în conținut.

Ca un alt exemplu, iată câteva HTML pentru a adăuga stil la o linie de text. Aceasta este vizualizarea HTML, unde pot crea și edita HTML.

Iată modul Previzualizare care arată cum va arăta în partea frontală.

Opțiuni de blocare HTML personalizate

În extrema dreaptă a barei de instrumente sunt trei puncte într-o stivă verticală. Aceste trei puncte deschid un set de 10 opțiuni în trei divizii care vă permit să ascundeți setările, să le convertiți în blocuri, să copiați, să copiați, să inserați înainte sau după, să vă mutați, să adăugați la blocuri reutilizabile, să grupați sau să eliminați blocul.

Iată ce pot face opțiunile de blocare personalizată HTML:

Ascundeți mai multe setări - aceasta ascunde bara laterală din dreapta, extinzând spațiul de lucru.

Convertiți în blocuri - transformă conținutul în celelalte blocuri corespunzătoare. Textul va fi convertit în blocuri de paragraf, imagini în blocuri de imagine etc. Cod încorporat, cum ar fi codul Google Map pe care l-am folosit în exemplul meu, va rămâne ca un bloc HTML personalizat. Dacă pot fi convertite alte coduri HTML din cadrul blocului, acesta va fi eliminat din blocul plasat într-un alt bloc.

Copiați - aceasta copiază blocul în clipboard, astfel încât să îl puteți lipi oriunde în editor.

Duplicat - aceasta plasează un duplicat al blocului sub original.

Inserați înainte - aceasta adaugă o zonă de bloc înainte de blocul HTML personalizat, astfel încât să puteți plasa un alt bloc.

Inserați după - aceasta adaugă o zonă după bloc în care puteți plasa un alt bloc.

Mutare în - vă permite să mutați blocul în sus sau în jos cu tastele săgeată. Veți muta o linie albastră. Când ajunge la locația dorită, apăsați Enter și blocul este mutat instantaneu.

Adăugați la blocuri reutilizabile - adaugă blocul HTML personalizat la blocurile dvs. reutilizabile, astfel încât să îl puteți utiliza din nou pe orice pagină sau postare.

Grup - aceasta adaugă blocul la un grup, astfel încât să puteți ajusta blocurile ca o singură unitate.

Eliminare bloc - aceasta șterge blocul.

Sfaturi și cele mai bune practici pentru utilizarea eficientă a blocului HTML personalizat

Utilizați acest bloc pentru a vă stiliza textul și a edita HTML mai întâi, apoi utilizați instrumentul Conversie în blocuri pentru a crea paragrafe sau alte tipuri de conținut. Acest lucru vă oferă mai mult control asupra conținutului și este util mai ales dacă nu este nevoie să păstrați versiunea HTML. Puteți vizualiza previzualizarea pe măsură ce mergeți. Acest lucru vă împiedică să vă schimbați între editorele vizuale și cele de cod din setările WordPress din bara laterală.

Utilizați acest bloc pentru hărți încorporate, reclame, videoclipuri etc. Acest lucru vă împiedică să treceți la vizualizarea Editorului de cod și să adăugați codul în alte tipuri de blocuri, cum ar fi blocul de paragrafe.

Utilizarea acestui bloc mai degrabă decât versiunea Editorului de cod al paginilor și postărilor dvs. vă împiedică să lucrați cu etichetele de pagină și postare. Acest lucru creează un mediu de lucru mai curat și mai ușor de utilizat.

Indiferent dacă adăugați propriul cod HTML sau încorporați codul dintr-o altă sursă, utilizați deseori funcția Previzualizare pentru a vă asigura că HTML va executa modul în care intenționați.

Nu utilizați eticheta de script din bloc. S-ar putea să fie eliminat și atunci codul dvs. nu ar funcționa.

Întrebări frecvente despre blocul HTML personalizat

Ce face blocul HTML personalizat?

Vă permite să introduceți HTML într-un câmp, astfel încât să puteți lucra cu acesta păstrând pagina sau postarea în Editorul vizual.

Cum poate fi utilizat blocul HTML personalizat?

Orice HTML cu etichetele acceptate poate fi adăugat. Puteți utiliza blocul pentru reclame, hărți, videoclipuri, orice cu iframe, tabele etc. Este, de asemenea, o modalitate ușoară de a marca textul și apoi de a-l converti într-un bloc de paragrafe.

Va codifica culoarea marcajului?

Nu, marcajul din bloc arată ca orice editor de text.

Blocul HTML personalizat rulează HTML?

Rulează HTML în mod normal pe front-end. În editor, acesta poate rula codul HTML sau vă poate arăta codul. Depinde de dvs. pe care îl vedeți și puteți selecta între cele două opțiuni în orice moment cu un singur clic pe buton.

Sunt acceptate toate etichetele HTML?

Nu. Puteți vedea o listă de etichete HTML care sunt acceptate pe pagina Codul acceptat de WordPress.

Concluzie

Acesta este aspectul nostru asupra blocului HTML personalizat. Acest bloc nu este doar pentru dezvoltatori. Principalul avantaj al utilizării acestui bloc este că nu trebuie să comutați între editorul vizual și editorul de cod pentru a lucra cu HTML. Aceasta înseamnă că puteți lucra cu restul conținutului afișat în mod normal. Apoi puteți lucra cu HTML în bloc și îl puteți previzualiza oricând. Blocul HTML personalizat oferă o modalitate ușoară de a lucra cu HTML în editorul de blocuri.

Vrem sa auzim de la tine. Folosiți blocul HTML personalizat? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin enterlinedesign / shutterstock.com