autorii WordPress au opțiunea de a crea pagini și postări într-un Editor vizual sau într-un Editor de Text. În timp ce editorul vizual face o treabă destul de bună cu opțiunile barei de instrumente și mediul de editare ușor, utilizarea editorului de Text permite o flexibilitate maximă cu privire la modul de organizare a conținutului.

permiteți-mi să explic nu doar de ce doriți să utilizați editorul de Text (în locul editorului vizual), ci cât de ușor poate fi de utilizat.

de ce ați prefera editorul de Text?

• conținutul dvs. va avea mai mult sens pentru cititorii și motoarele de căutare.
• trebuie doar să cunoașteți câteva etichete HTML pentru a face editorul de Text foarte util.
• puteți aplica proprietăți De stil CSS direct la codul HTML.

Ce Se Întâmplă Când Utilizați Editorul Vizual?

când adăugați copie, mass-media sau link-uri la editorul vizual sunteți într-adevăr adăugarea HTML la pagina sau post. Totul are loc sub capotă.

nu sunteți sigur ce vreau să spun? Încearcă asta.

adăugați o copie în editorul vizual. Apoi selectați fila Text. Ceea ce veți fi uitat la este HTML. La fel ca în cazul editorului vizual, puteți edita codul HTML direct cu editorul de Text.

de fapt, puteți face mult mai mult cu editorul de Text decât puteți cu editorul vizual. Acest lucru face ca lucrul în modul text să nu fie doar mai productiv, ci și mai satisfăcător. Veți putea marca mai precis conținutul dvs., ceea ce va aduce beneficii cititorilor dvs. și vă va stimula eforturile SEO.

HTML este la fel de simplu ca acesta devine. Fiecare pagină web, inclusiv cele generate de WordPress, o utilizează.

învățarea HTML va avea beneficii mult dincolo de utilizarea acestuia cu WordPress!

ce este HTML?

cunoscut sub numele de lingua franca a web-ului, HyperText Markup Language (HTML) este un sistem care permite autorilor să atribuie sens conținutului. Folosind elemente HTML (mai bine cunoscute sub numele de etichete) puteți defini conținutul ca fiind paragrafe, titluri, liste, linkuri și alte structuri.

HTML este la fel ca gramatica.

nu are nimic de-a face cu modul în care arată o pagină web sau cu modul în care este stilată. Problema designului paginii web – aspect, tipografie și culoare – este preluată de CSS (Cascading Style Sheets), limbajul stilului de design web.

HTML este dezvoltat de World Wide Web Consortium (W3C). Cea mai recentă versiune este HTML5.

etichetele pe care este cel mai probabil să le utilizați

HTML este un sistem de marcare containerizat. Pentru fiecare etichetă deschisă există o etichetă de închidere potrivită.

de exemplu, pentru cel mai important conținut dintr-o pagină sau dintr-o secțiune a unei pagini, utilizați o etichetă Antet 1 ca aceasta.

< h1 >totul despre HTML</h1>
tag-ul deschis este<h1>și containerul este închis cu< /h1>

în mod similar, iată cum este marcat un paragraf:

<p > acum câțiva ani, un client și un bun prieten mi-a sugerat să învăț WordPress. În acel moment am fost împotriva oricărui tip de CMS. Nu știam că voi ajunge să-l iubesc și să-l învăț multor oameni din sălile de clasă din New York și prin webinar.< / p>

tot ce trebuie să faceți este să scrieți conținutul în Editorul de Text, adăugând etichetele fie în timp ce mergeți, fie după ce ați introdus copia.

Iată o explicație a celor mai comune etichete pe care le veți folosi atunci când scrieți HTML. Sunt titlul, Lista, link-ul, gruparea și câteva etichete diverse.

etichete titlu

<h1></h1>

<h2></h2>

<h3></h3>

• există, de asemenea, etichete de titlu h4, h5 și h6 care în practică sunt rareori utilizate.
• nu utilizați niciodată o etichetă de titlu în scopul modificării dimensiunii fontului.

etichete listă

puteți crea 3 tipuri de liste cu HTML. Cele mai populare 2 sunt listele ordonate și neordonate.

o listă neordonată este utilizată atunci când ordinea elementelor nu este importantă.

< ul>

<li> flori< / li>

<li> legume< / li>

<li>copaci < / li>

</ul>

• flori
• legume
• copaci

o listă ordonată este utilizată atunci când ordinea articolelor este relevantă.

< ol>

<li>California < / li>

<li>Texas < / li>

<li>Florida < / li>

</ol>

1. California
2. Texas
3. Florida

(în acest exemplu, ordinea este relevantă și determinată de cele mai mari populații din Statele Unite.)

notă: listele pot fi, de asemenea, imbricate pentru a crea o ierarhie de elemente de listă. Acest lucru este dificil de făcut atunci când utilizați editorul vizual.

etichetă legătură

puteți transforma textul sau o imagine într-o legătură prin înfășurarea textului sau a imaginii în interiorul oricărei etichete ancoră (legătură). În timp ce sintaxa pentru crearea unui link este întotdeauna aceeași (<a href=”url”>link text</a>), există 2 moduri foarte comune de a face acest lucru.

pentru un link către o pagină WordPress, utilizați:

<a href=”http://domain.com/this-is-the-page-title”>link către o pagină WordPress < / a>

pentru un link către orice pagină sau resursă, nu doar o pagină WordPress, utilizați:

<a href= ” http://domain.com/about.html”>link către o pagină HTML</a>

notă: există de fapt o a treia cale. Puteți utiliza modul special WordPress creează legături cu următoarea sintaxă:

<a href= ” index.php?page_id = 356 ” >link către o pagină din site-ul dvs.</a

în acest caz, va trebui să cunoașteți ID-ul paginii sau postării paginii la care vă conectați pe site. (Fiecare pagină sau postare are un număr de identificare unic).

gruparea tag-uri

punct de vedere tehnic, nu există nici un astfel de lucru ca „gruparea tag-uri”, dar este cel mai bun mod de a descrie un set de tag-uri HTML care conțin alte elemente. Scopul acestor etichete este de a descrie mai exact semnificația conținutului dvs.

de exemplu, eticheta< header > poate fi utilizată pentru a defini partea din pagina dvs. care conține informații de vârf ca aceasta:

<antet>

<h1> o linie de conducere</h1>

<img src= „url-ul fișierului imagine”>

<p > un paragraf de informații după titlul și imaginea care Logic deține împreună ca un grup de informații.< / p>

</antet>

iată câteva etichete de grupare foarte frecvente

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

alte etichete
pe lângă etichetă, veți găsi aceste etichete foarte utile atunci când lucrați cu editorul de Text.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

în timp ce aceste etichete vă vor oferi un drum lung, iată câteva resurse care vă vor ajuta.

XV ai nevoie doar de 10 Tag-uri HTML (tutorial)
referință element HTML în ordine Alfa
referință element HTML

Regulile

frumusețea HTML este că există doar câteva reguli de urmat și sunt ușor de reținut.

* HTML Este caz insensibil

majuscule, minuscule sau mixte caz – scrie HTML orice mod doriți. Practica obișnuită este minusculă.

* pentru fiecare etichetă deschisă trebuie să existe o etichetă de închidere

există excepții de la acest lucru, dar pentru a face mai ușor, obțineți obiceiul de a închide toate etichetele deschise.

* etichetele sunt închise în ordinea inversă în care sunt deschise într-un bloc

acest lucru poate fi puțin dificil de înțeles, deci iată un exemplu.

<p>aici este un <strong>paragraf cu <a href=”url aici”>un link</a></strong> interior și o parte din text este subliniat.</p>

observați ordinea: < p > < strong ><a>….< / a> < / puternic > < / p>

* unele elemente nu au o etichetă de închidere

etichete precum <br> și <img> nu au etichetă de închidere, deoarece nu există niciun motiv pentru una.

* utilizați HTML corect și nu pentru a Stil pagina

de exemplu, nu utilizați < br> tag-uri atunci când aveți o listă. Sau nu utilizați< tabel > tag-uri pentru a crea o grilă pentru aspect.

bara de instrumente a editorului de Text

deoarece mi se pare eficient să scriu cod în Editorul de Text, în general nu folosesc bara de instrumente. Cu toate acestea, dacă începeți cu HTML, este posibil să găsiți unele dintre instrumentele utile ca o modalitate de a vă învăța unele HTML. În cele din urmă, vă veți da seama că există mai multe etichete pe care le puteți utiliza pentru a marca corect conținutul decât ceea ce permite bara de instrumente.

pluginuri HTML

mai devreme sau mai târziu veți observa că, dacă creați un paragraf în editorul vizual, nu veți vedea o etichetă< p > înfășurată în jurul copiei dvs. atunci când o vedeți în Editorul de Text. Nu lăsa asta să te deranjeze. WordPress va genera în continuare o etichetă <p> atunci când copia apare pe pagina dvs.

dacă aveți această problemă sau alte probleme cu codul dvs., ați putea dori să utilizați aceste pluginuri.

Editați întotdeauna în HTML

acest lucru garantează că atunci când accesați Crearea sau editarea paginii sau postarea conținutului, editorul dvs. se va deschide întotdeauna ca Editor de Text și nu ca Editor vizual. Acest lucru poate fi foarte util, deoarece WordPress vă poate elimina etichetele în anumite circumstanțe în care este utilizat editorul vizual.

păstrați HTML Editor Markup Plus

dacă aveți probleme cu având tag-uri dezbrăcat, acest lucru ar putea fi soluția.

HTML Editor sintaxă Highlighter

acesta este un plugin minunat care transformă editorul de Text bland într-un corn al abundenței codificate în culori. Se poate schimba, de asemenea, la un fundal negru și fonturi mai mari. Cel mai bine este să utilizați acest plugin cu opțiunea Ecran complet.

notă: nu am testat două sau mai multe dintre aceste plugin-uri în același timp, astfel încât incompatibilitățile ar putea exista.

cum Scurtăturile se încadrează în imagine

Scurtăturile sunt ceea ce multe plugin-uri folosesc pentru a adăuga un formular, înființat coloane sau adăuga o altă caracteristică la o pagină sau post. Este o modalitate ușoară de a adăuga cod precum HTML, javascript, CSS și PHP fără a fi nevoie să știți nimic despre aceste limbi.

utilizați scurtăturile în Editorul de Text la fel cum ați face în editorul vizual.

pentru cei neinițiați, scurtăturile pot arăta ca HTML, dar nu sunt.

puteți fie să inserați un cod scurt în acest mod dacă adăugați un formular de contact, de exemplu, cu popularul plugin formular de Contact 7,

sau îl puteți folosi astfel pentru un plugin,

conținut pentru partea stângă a coloanei

conținut pentru partea dreaptă a coloanei

care creează două coloane pe o pagină.

acest cod scurt arată ca HTML cu o etichetă deschisă și închisă, dar nu este

adăugarea stilului CSS folosind editorul de Text

puteți oferi proprietăți De stil CSS conținutului pe care îl adăugați în Editorul de Text. Acest lucru nu se poate face cu editorul vizual implicit.

cu editorul de Text se poate face în 2 moduri.

o modalitate este de a adăuga un ID sau un atribut de clasă la un element HTML ca în acest exemplu:

<P id = „plumb” >acesta este paragraful principal din postarea mea.< / p >

apoi, în stilul tău.fișier css ați adăuga proprietățile stilului pentru # plumb. Poate ceva de genul:

#plumb

{font-greutate:bold;

text-align:center;

culoare:#f00;}

a doua modalitate este de a adăuga stil inline. (Cu toate acestea, cea mai bună abordare este de a păstra HTML și CSS separat ca în scenariul de mai sus.) Puteți adăuga stil inline astfel:

<P style = „font-family:Arial,helvetica,sans-serif” >fontul pentru acest paragraf este Arial.< / p>

Notă: Aceasta ar înlocui orice regulă de stil font-family pentru acest paragraf care poate fi prezentă într-un fișier extern sau în containerul< head > al paginii.

concluzie

editorul de Text vă va oferi control total asupra modului în care doriți să formatați pagina sau să postați conținut. Puteți utiliza orice etichetă HTML, nu doar cele din bara de instrumente a editorului de Text. Rezultatul va fi conținut mai ușor de citit și de înțeles de către oameni și păianjenii motoarelor de căutare. Poate dura puțin timp pentru a vă obișnui să scrieți HTML, dar în cele din urmă, veți găsi că este foarte satisfăcător.

autor Bio

Bud Kraus [email protected] este un Instructor veteran WordPress în New York City și predă WordPress pentru persoane fizice și grupuri prin webinar. De asemenea, lucrează pe site-uri pentru întreprinderi mici. http://joyofwp.com