Articles

MarkoSaric

acest articol este un ghișeu unic pentru codurile HTML WordPress. Iată lista etichetelor și codurilor HTML WordPress utilizate cel mai frecvent pentru a crea conținut. Salvați lista și utilizați-o ca referință atunci când compuneți postările și paginile blogului WordPress.

WordPress HTML în editorul Gutenberg

WordPress este una dintre cele mai bune platforme de blogging. Milioane de oameni și mărci îl folosesc pentru a crea site-uri cu aspect deosebit.

acest ghid este valabil atât pentru versiunea găzduită de WordPress, cât și pentru cea găzduită. Vedeți diferența dintre WordPress.com sau WordPress.org.

WordPress 5.0 cu noul editor Gutenberg lansat în decembrie 2018 a îmbunătățit dramatic și a facilitat modul în care lucrați cu etichete HTML în postările și paginile blogului dvs.

cum Afișați codul HTML în postările editate de Gutenberg? Pur și simplu adăugați blocul “cod” și introduceți codul. Acesta va afișa codul vizitatorilor dvs.

cum vă editați postările Gutenberg folosind HTML? Pur și simplu faceți clic pe “Editați ca HTML” în meniul de opțiuni al blocului special pe care doriți să îl editați.

de asemenea, puteți adăuga blocul “clasic” sau pluginul “Editor clasic” pentru a avea fostul editor WYSIWYG pe care îl descriu mai jos în acest post.

Editor clasic: care este diferența dintre vizual și Text?

aveți două opțiuni de editare atunci când compuneți o postare sau o pagină de blog în editorul clasic WordPress. Puteți utiliza vizualizarea implicită “vizuală” sau modul “Text”.

în modul vizual, puteți vedea conținutul așa cum este. Modul vizual se numește WYSIWYG, care înseamnă exact ceea ce face modul vizual: ceea ce vedeți este ceea ce obțineți.

vedeți conținutul dvs. așa cum îl vor vedea vizitatorii dvs. în browserele lor și aveți butoane simple pentru a vă ajuta să editați. Majoritatea oamenilor folosesc acest editor de postări” vizuale ” în WordPress atunci când își creează conținutul.

în modul text, vedeți codul și etichetele HTML. Acest mod text vă permite să adăugați orice cod HTML la oricare dintre postările sau paginile dvs. de blog. Editorul de text bazat pe HTML arată mai înfricoșător și nu este atât de popular cu începătorii.

dar dacă știți cum să codificați sau doriți un pic mai mult control asupra aspectului și structurii atunci când creați postările sau paginile? Ar trebui să utilizați editorul “Text”.

cum se editează HTML în editorul clasic WordPress?

deci, cum ajungi la editorul de text HTML? WordPress sau secțiunea de scriere a paginii, faceți clic pe fila” Text”. În editorul de text Adăugați și editați toate etichetele HTML.

cum se adaugă cod HTML la o postare sau pagină WordPress?

puteți pur și simplu să scrieți sau să lipiți orice cod HTML direct în editorul “text” WordPress. Încercați – l cu oricare dintre cele mai frecvent utilizate etichete din lista mea de mai jos.

copiați-l aici pe site, lipiți-l în editorul de text și “previzualizați” postarea sau pagina dvs. pentru a vedea cum o vor vedea vizitatorii dvs.

uneori se întâmplă ca Codul să fie eliminat la trecerea de la text la modurile vizuale.

fii atent și verifică dacă acest lucru nu ți s-a întâmplat. Sau încercați să rămâneți la editorul de text numai dacă intenționați să scrieți cod pentru a nu întâmpina această problemă.

pentru cei confortabili cu codarea, puteți chiar dezactiva editorul “vizual”. Accesați” utilizatori “din meniul de navigare WordPress, faceți clic pe” profilul dvs. “și selectați”Dezactivați editorul vizual când scrieți”.

copiere și lipire între Google Docs, Microsoft Word și WordPress

WordPress 5.0 de presă a făcut-o netedă și ușor de a copia orice conținut de la Google Docs sau Microsoft Word și lipiți-l în mesajele WordPress și pagini.

acest lucru nu a fost întotdeauna ușor. Când lucrați cu HTML în editorul clasic, este posibil să observați uneori unele caractere gibberish.

acest lucru se poate întâmpla dacă copiați/lipiți din Microsoft Word în WordPress. O sursă utilă la lipirea codului HTML din Word în editorul WordPress este Postabilă.

copiați/inserați codul HTML din Word (sau altă sursă) în instrument pentru a obține o versiune WordPress prietenoasă și curată a codului pe care îl puteți introduce apoi în conținutul dvs.

Cum pot afișa coduri HTML pe postările mele de pe blog ca text normal?

Ce zici dacă ați vrut să inserați și să afișați etichete HTML și alte coduri în postarea dvs. pentru ca vizitatorii dvs. să le vizualizeze ca text normal?

cam așa cum fac aici în articolul meu? Utilizați în continuare editorul de text, dar vă înfășurați codul astfel:

<code><div class="header"></code> 

plugin-uri de sintaxă HTML WordPress pentru o afișare mai frumoasă a codului

există câteva pluginuri WordPress care vă pot ajuta în acest proces și vă permit, de asemenea, să editați aspectul și modul în care codul este prezentat pe blogul dvs. pentru vizitatorii dvs.

recomand următoarele două. SyntaxHighlighter Evolved este opțiunea mai populară, în timp ce Pastacode este cea care funcționează cel mai bine pentru cei care folosesc constructorii de pagini atunci când proiectează un blog.

cele mai frecvent utilizate coduri HTML WordPress și etichete

inserarea unei imagini

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

faceți ca imaginea să poată face clic pe o nouă destinație

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

inserarea unei legături

rețineți că textul ancoră este partea vizibilă a legăturii. Este cuvântul sau fraza pe care vizitatorii dvs. vor face clic pentru a ajunge la pagina la care vă conectați.

<a href="Destination-URL">Anchor text</a>

Faceți linkul nofollow

în scopuri SEO, poate fi necesar să faceți o parte din linkul dvs. nofollow. Iată cum:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

faceți legătura deschisă într-o nouă fereastră de browser

<a href="Destination-URL" target="_blank">Anchor text</a>

Link către o anumită secțiune de pe o pagină lungă

acestea se numesc salturi de pagină. Vizitatorii dvs. pot face clic pe un link și se pot muta undeva mai jos sau în sus articolul.

acest lucru este util în special pentru acele ghiduri mai lungi pe care doriți să le împărțiți în diferite capitole folosind cuprinsul.

prima parte a creării unui salt de pagină este de a atribui o secțiune (sau țintă) la care doriți să faceți legătura.

plasați acest cod în oricare secțiune a paginii la care doriți să vă conectați. A doua parte este de a face legătura cu acea secțiune atribuită din intro sau din cuprinsul dvs.

<a></a><a href="#Specific-section">Anchor text</a>

acest lucru funcționează și dacă doriți să vă conectați la o anumită secțiune a paginii dvs. dintr-un alt articol de pe blogul dvs. Puteți insera un link către această țintă: https://yourblog.com/yourpost/#Specific-section.

acesta este și modul în care funcționează acele legături “înapoi la început”. Atribuiți un nume de secțiune în partea de sus a postării dvs. și includeți un buton “mergeți în partea de sus” din partea de jos a postării care leagă secțiunea de sus.

creați titluri și subpoziții proeminente

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

introduceți o întrerupere de linie

<p>This is<br>a paragraph</br> with a line break</p>

creați un nou paragraf

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

faceți o listă cu puncte glonț

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

faceți o listă numerotată

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

evidențiați textul dintr-o postare cu fundal galben (sau orice altă culoare)

<span style="background-color:yellow;">Your text</span>

alocați numărul pentru un articol din lista numerotată

<ol start="7"><li>List item number 7</li></ol>

faceți o listă de Litere

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

faceți o listă de numere romane

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

centrați textul

<center>to be centered</center>

faceți textul cu caractere aldine

<strong>to be bold</strong>

faceți textul italic

<em>to be italic</em>

schimbați culoarea textului

<span style="color: #000000;">Your text</span>

introduceți un blockquote

<blockquote>Your quote</blockquote>

creați un tabel

Lasă un răspuns

Adresa ta de email nu va fi publicată.