Formatting Blog Posts and Basic HTML

Formatting blog posts don’t require you know much HTML but it definitely helps!

Dacă vrei ca blogul tău să fie luat în serios, atunci trebuie să stăpânești formatul postului de blog.

Acest lucru înseamnă, de asemenea, să înveți câteva trucuri HTML de bază pentru a te ajuta să-ți faci articolele interesante și să ai un stil consistent.

Acum nu-ți face griji, nu spun că trebuie să devii programator sau ceva de genul ăsta pentru a crea articole de blog atractive și neinformate, dar preluarea câtorva abilități esențiale te va ajuta foarte mult.

WordPress este un CMS (Content Management System) și, ca atare, nu necesită să codifici totul singur.

Există instrumente pentru asta.

Majoritatea codului este ascunsă pentru a evita ca ceva să se strice și aveți un editor WYSIWYG (What You See is What You Get) pentru a scrie și formata postările și paginile de blog.

Dacă folosiți WordPress de ceva timp, atunci veți ști că există atât o filă Visual, cât și una Text în dreapta sus a editorului de conținut, care vă permite să treceți de la versiunea stilizată a postării dvs. și la HTML brut.

Pentru începători.

Visual = WordPress Visual Editor

Text = WordPress HTML Editor / Raw Text

Majoritatea începătorilor sunt copleșiți și speriați atunci când văd pentru prima dată HTML-ul brut pe fila text și se întorc rapid înapoi.

Dar acest lucru nu trebuie să fie cazul și veți deveni un blogger mult mai bun dacă vă faceți timp să vă simțiți confortabil să lucrați și să editați în acest mod.

Cu puțină practică, puteți stăpâni cu ușurință unele dintre elementele de bază, sintaxa este de fapt destul de logică.

Sintaxa (definiție de calculator): Structura declarațiilor într-un limbaj de calculator.

Ce este HTML?

HTML înseamnă Hypertext Markup Language (limbaj de marcare a hipertextului) și este limbajul de programare utilizat pentru crearea de pagini web și aplicații.

HTML vă permite să creați funcționalități de bază pe care le puteți apoi stiliza cu CSS (Cascading Style Sheets).

A fost creat în 1990 de Tim Berners-Lee, un erou personal al meu, căruia i se atribuie și inventarea internetului, dar nu am de gând să vă învăț totul despre HTML și istorie, dar dacă sunteți curioși, puteți continua lectura pe Wikipedia.

Suntem aici doar pentru a ne uita la modul în care HTML se referă la scrierea și editarea postărilor și paginilor WordPress.

Când vedeți un cod necunoscut în fila Text a editorului WordPress, vă uitați la HTML și, în unele cazuri, acesta poate include unele stiluri CSS inline.

Exemplu HTML

<h2>This is a title</h2>

Părțile care sunt evidențiate cu roșu sunt HTML și, în acest exemplu, vedeți o etichetă de deschidere h2 title la început și o etichetă de închidere h2 title la sfârșit.

Observați că singura diferență este că eticheta de închidere are o backslash înainte de numele etichetei? Acesta este modul în care puteți vedea rapid când HTML-ul dvs. a fost deschis și închis.

Acesta este un sfat grozav pentru depistarea greșelilor sau a HTML-ului stricat.

Exemplu de HTML cu CSS în linie

<h2 style="color:red;">This is a title</h2>

În exemplul de mai sus, am folosit același h2, însă, de data aceasta, am folosit HTML pentru a apela o bucată de CSS pentru a schimba culoarea în roșu. Observați că singura parte care este de fapt CSS este evidențiată cu roșu.

În mod normal, nu veți vedea prea mult CSS inline, deoarece cea mai bună metodă este să stilizați elementele HTML cu fișiere CSS externe, acesta este modul tipic prin care Temele WordPress aplică automat stilurile pe pagina blogului dumneavoastră.

Personal, nu vă sfătuiesc să vă stilizați HTML-ul inline în editorul WordPress, dar este important să fiți conștienți de acest lucru în cazul în care aveți nevoie să editați sau să curățați codul care a intrat din alte surse, cum ar fi un plugin sau din copierea și lipirea dintr-o altă sursă.

În mod inevitabil, veți beneficia de posibilitatea de a curăța lucrurile atunci când gremlinii (nu este un termen tehnic) își găsesc drumul în conținutul dumneavoastră.

Așa că haideți să ne uităm la cum să adăugăm HTML la postările și postările și paginile WordPress și ce trebuie să știți.

WordPress Basic HTML Essentials

Când adăugați HTML pentru a vă stiliza conținutul, trebuie să vă amintiți să vă înfășurați conținutul cu etichetele de deschidere și închidere relevante.

Exemplu:

<p>Paragraphs should be wrapped with p tags</p>

Există exemple de elemente HTML utile care nu necesită o etichetă de închidere pentru că se închid singure.

Un exemplu este întreruperea de linie <br> care va funcționa fără o etichetă de închidere, acest lucru se datorează faptului că întreruperile de linie nu conțin și nu pot conține conținut în interior.

Etichete de antet & Subtitluri

Există diferite tipuri de titluri pe o postare WordPress, în primul rând, aveți titlul postului, acesta este un <h1> și apoi aveți posibilitatea de a adăuga titluri de titlu la conținutul dvs. pentru a vă ajuta să vă grupați gândurile.

Acestea variază de la h1 (Heading 1) până la h6 (Heading 6), iar tema dvs. le va stiliza de obicei pentru a fi de dimensiuni adecvate.

Din moment ce titlul paginii sau al postării este automat un h1, doriți să evitați utilizarea acestuia în conținutul dvs., deoarece orice alte cazuri vor concura cu titlul principal, care este numele postării dvs.

În schimb, urmați procesul de ordonare corectă din punct de vedere semantic și prima dată când trebuie să folosiți un titlu de secțiune treceți la titlul de titlu h2.

În timp ce le puteți seta cu ușurință folosind lista derulantă din stânga sus a editorului WYSIWYG al postării, este util să știți cum funcționează în format HTML pentru a putea corecta orice greșeală.

Iată câteva exemple

<h1>This is a heading 1, you won't need to use me in your content</h1>

<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Sperăm că începeți să vedeți un model aici cu sintaxa HTML.

Toate elementele HTML încep cu o deschidere <

Ele se închid, de asemenea, cu o închidere >

Elementele de deschidere pot conține pur și simplu numele elementului.

Etichetele de închidere conțin o bară oblică înainte după deschiderea lor < și înainte de numele elementului HTML pe care îl închid.

Doar dacă vă veți familiariza puțin mai mult cu cele de mai sus, veți fi cu mult peste majoritatea bloggerilor care folosesc WordPress.

Bold sau Italic

Când doriți să subliniați un punct și să atrageți atenția asupra anumitor cuvinte, ați putea dori să folosiți bold sau italic pentru a le scoate în evidență.

Prefer cu siguranță această abordare la ALL CAPS, care pentru mine pare a fi o strigare.

Legenda HTML pentru bold este <strong>, iar pentru italic este <em>.

Fapt amuzant: Strong este ușor de reținut pentru a face ceva bold, dar de ce elementul italic folosește em? Em este o abreviere a accentului. Asta ar putea ajuta să se lipească.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

În plus, puteți folosi WordPress WYSIWYG, desigur, sau prescurtările de la tastatură CTRL + B pentru Bold și CTRL + I pentru italic, după ce ați evidențiat textul pe care doriți să îl modificați.

Pentru o listă completă de prescurtări de la tastatură WordPress și alte metode de formatare, mergeți aici.

Există câteva reguli pentru modul în care ar trebui și nu ar trebui să le folosiți, inclusiv păstrarea lor reciproc exclusive, rezervarea lor pentru propoziții scurte și utilizarea cu moderație.

Practical Typography are un articol excelent care explică importanța acestor reguli.

Dacă scrieți un text care să implice cu adevărat oamenii, cum ar fi un text de vânzare, atunci aceste reguli pot fi îndoite, dar nu încălcate.

accentuarea

Amintiți-vă, dacă totul este accentuat, atunci nimic nu este accentuat!

Liste – Ordonate & Neordonate

Există două tipuri de liste pe care le puteți adăuga folosind HTML și care sunt, de asemenea, acceptate de WYSIWYG-ul WordPress.

Acestea sunt:

Liste ordonate – <ol>

Listele ordonate se afișează ca o serie de elemente numerotate. Acest lucru este util atunci când se scrie o listă în care ordinea contează.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Codul de mai sus se transformă în:

1. Articolul 1
2. Articolul 2
3. Articolul 3

Liste neordonate – <ul>

Listele neordonate sunt, în esență, liste cu puncte.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Și aceasta se transformă în lista cu puncte de mai jos.

• Item 1
• Item 2
• Item 3

Cunoaștem cu toții cât de utile sunt listele și, de asemenea, ele ajută la fragmentarea conținutului și îl fac să pară mai interesant.

O diferență cheie pe care o veți observa aici este că există elemente de listă individuale <li> și acestea sunt înfășurate în întregime cu un <ol> sau <ul> wrapper.

Este important să fiți conștienți de acest lucru, deoarece dacă <ol> sau <ul> de înfășurare lipsesc, elementele de listă nu vor fi redate.

Imagini

Un alt aspect important al formatării unui articol de blog sau a oricărei pagini cu WordPress este utilizarea imaginilor și nu ar trebui să aveți probleme în a găsi câteva fotografii interesante pe care le puteți obține de pe Yahoo images și de pe alte site-uri de imagini libere de drepturi de autor. Unele dintre aceste opțiuni sunt plătite, dar multe dintre ele sunt gratuite, cu condiția să acordați credit cu o mențiune a sursei și un link.

Un preț mic de plătit pentru a avea imagini profesionale pe site-ul sau blogul dumneavoastră.

O imagine valorează cât o mie de cuvinte, după cum se spune, ele oferă, de asemenea, cititorilor dumneavoastră stimuli vizuali, precum și pauze pentru a vă ajuta să împărțiți conținutul în bucăți digerabile.

Aceasta vă ajută să vă mențineți cititorii implicați și, deși nu este nevoie să codificați singuri imaginile, înțelegerea sintaxei este utilă.

Iată un exemplu de cod de imagine și cum va arăta când vă uitați la fila Text a editorului dumneavoastră.

<img src="https://mazepress.com/image.png">

O imagine nu are nevoie de o etichetă de închidere, deoarece toate informațiile de care are nevoie sunt conținute în parantezele de deschidere și închidere ale elementului HTML. src cheamă pur și simplu locația URL-ului.

WordPress vă permite să vă plutiți imaginile la stânga, la dreapta sau le puteți centra. Dacă faceți acest lucru și verificați codul din fila Text, veți vedea că au fost adăugate clase care sunt folosite pentru a stiliza imaginile în mod corespunzător.

Acesta este un exemplu în care CSS extern este folosit pentru a aplica stiluri diferite la imagini diferite. Util de știut!

Important: Înainte de a adăuga imagini la postările și paginile dvs. asigurați-vă că sunt optimizate pentru viteză și pentru motoarele de căutare.

Embed

Inevitabil veți dori să folosiți coduri embed de pe site-uri externe.

Un exemplu este atunci când doriți să adăugați un videoclip de pe YouTube sau Vimeo, mergeți la share și vă oferă un cod lung pe care îl puteți copia.

Principalul lucru pe care trebuie să-l rețineți este că nu puteți lipi HTML sau orice alt cod pe fila vizuală a editorului de conținut. Dacă faceți acest lucru, codul va fi amestecat și îl va face inutil atunci când apăsați Salvare.

Asigurați-vă că mergeți la fila text și apoi îl lipiți acolo unde doriți să apară.

Mai jos este un exemplu de cod de încorporare de pe YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

În timp ce WordPress vă permite să lipiți pur și simplu o adresă URL YouTube în postarea dvs. pentru a o afișa ca un videoclip, este posibil ca acest lucru să nu vă ofere un control complet asupra dimensiunilor videoclipului și a altor setări de încorporare.

Din acest motiv, și pentru că sunt de modă veche, încă folosesc codul de încorporare iframe.

Majoritatea site-urilor care oferă coduri de încorporare nu sunt suportate nativ de WordPress și, prin urmare, va trebui să fiți în continuare conștient de codurile de încorporare, iframe și de modul în care acestea funcționează pentru a putea adăuga conținut multimedia la postările dumneavoastră.

Shortcodes

Shortcodes nu sunt HTML. De fapt, nu sunt nici măcar un limbaj de programare, ci sunt o funcție nativă a WordPress care permite dezvoltatorilor de pluginuri și teme să creeze modalități simple pentru ca tu și cu mine să adăugăm elemente la paginile și postările noastre web.

Cel mai simplu exemplu care apare pe aproape fiecare blog este un shortcode pentru formularul de contact, dar există sute, dacă nu mii de utilizări potențiale pentru shortcodes care includ posibilitatea de a adăuga:

• Tabele
• Galerii
• Pachete de prețuri
• VIDEO-uri
• Lead Magnets / Formulare de înscriere prin e-mail
• Episoade de podcast

Iată un shortcode pentru un formular de contact generat de plugin-ul Contact Form 7, unul dintre pluginurile noastre recomandate pe care îl instalăm pe 90% dintre site-urile și blogurile noastre.

Nota: a trebuit să adaug spații după parantezele de deschidere și înainte de cele de închidere pentru a nu mai afișa efectiv formularul de contact, așa că imaginați-vă-l fără spații.

Rețineți că sintaxa pentru un shortcode este diferită. Acestea încep cu o paranteză de deschidere în loc de < și >.

Ele sunt apoi formatate de către dezvoltatorul de coduri scurte pentru a vă facilita ajustarea și modificarea setărilor esențiale.

Când se încarcă pagina web, acest formular de contact încarcă de fapt aproximativ 20 de linii de HTML dezordonat, așa că este mult mai ușor pentru dvs. atunci când puteți accesa un cod scurt.

Singurul avertisment este că nu doriți să folosiți prea mult codurile scurte, deoarece acestea vă vor încetini paginile web.

Este util să le cunoașteți și pot face ca procesul de editare a postării dvs. să fie mult mai puțin greoi atunci când nu trebuie să folosiți cantități mari de HTML pe care nu le înțelegeți și pe care trebuie să lucrați cu prudență.

Consilii diverse de formatare

Există alte câteva sfaturi pe care îi sfătuiesc pe noii cursanți WordPress să le țină minte și pe care le voi acoperi pe scurt.

Acestea includ:

• Nu adăugați întreruperi de linie inutile. Acest lucru înseamnă că încercați să nu folosiți tag-ul HTML <br> și evitați să apăsați enter de două ori între paragrafe și secțiuni, cu excepția cazului în care trebuie neapărat să o faceți. Acest lucru face ca articolele dvs. să arate dezordonat și este inevitabil să creați inconsecvențe.
• Nu adăugați familii de fonturi, dimensiuni și culori specifice paginii – Din nou, acest lucru face ca articolele dvs. să arate îngrozitor și ca și cum ar fi fost create în 1995. S-ar putea să credeți că acel titlu verde de dimensiuni personalizate cu un font unic atrage atenția, când de fapt iese în evidență ca fiind inconsistent, și neprofesionist. Tema dvs. ar trebui să dicteze aceste stiluri.
• Nu adăugați niciodată cod HTML sau cod embed în Visual Tab – Acest lucru poate duce la rezultate neașteptate, poate implica multă curățare sau vă poate strica pagina în întregime.
• Nu încărcați niciodată videoclipuri pe WordPress – Găzduirea site-ului dvs. nu este construită pentru a livra conținut video. Din fericire, YouTube și Vimeo oferă oricum găzduire video super rapidă și 100% gratuită. Acesta este motivul pentru care este mai bine să încorporați videoclipuri de pe YouTube, chiar și atunci când sunt ale dumneavoastră.

Nimic prea complicat, dar văd adesea oameni care fac aceste greșeli și își fac viața mai grea.

Dar în curând, lucrurile ar putea fi diferite, foarte diferite de fapt!

Gutenberg, viitorul blogurilor?

Gutenberg este un nou editor de conținut construit de la zero de către WordPress și va ajunge foarte curând într-o instalare aproape de tine.

Este acesta viitorul blogging-ului? Cine știe? Dar cu siguranță este viitorul WordPress, așa că este timpul să ne punem cu el.

Gutenberg este o bestie diferită.

Dacă ați folosit vreodată Medium.com pentru blogging, atunci când veți încerca pentru prima dată Gutenberg se va simți straniu de asemănător.

În opinia mea, acesta este un lucru bun, editorul de conținut fără distragere a atenției de la Medium este minunat de ușor de utilizat și să vezi că WP ia notă de acest lucru este un lucru pozitiv pentru toți cei implicați în gestionarea blogurilor și a site-urilor care rulează pe WP.

Editorul Gutenberg este, de asemenea, modular și vă permite să trageți și să plasați blocuri în conținutul dvs. care au fiecare un scop diferit.

Acest lucru este similar cu modul în care plugin-urile page builder și anumite teme oferă în prezent acest tip de soluție drag and drop, dar acum aceste caracteristici vin în WordPress în mod implicit.

Dacă există un aspect al WordPress care nu a evoluat prea mult de-a lungul anilor, acesta a fost editorul TinyMCE, așa că salut această inovație cu brațele deschise.

Dacă aveți probleme cu formatarea postărilor de blog cu editorul actual, puteți încerca deja Gutenberg descărcându-l și instalându-l prin accesarea pluginurilor din tabloul de bord și căutând „Gutenberg”.

Formatul postărilor de blog & Basic HTML Final Word

Dacă petreceți puțin timp exersând cele de mai sus, veți obține un control mult mai mare asupra conținutului dvs. și a modului în care este prezentat.

Sperăm că acum vă simțiți un pic mai confortabil cu formatarea postărilor de blog și utilizarea HTML de bază.

Aceste abilități vă pot economisi mult timp, bani și bătăi de cap atunci când formatarea conținutului dvs. nu merge bine sau nu se redă corect.

În timp ce elementele de bază de mai sus sunt suficiente pentru majoritatea bloggerilor și proprietarilor de site-uri WordPress, dacă sunteți curioși să învățați mai mult, există câteva site-uri web gratuite excelente unde puteți învăța HTML, inclusiv CodeAcademy și w3Schools.

Acum, mergeți și faceți conținutul dvs. drăguț! 🙂

Dacă ați găsit acest articol util, luați în considerare verificarea unora dintre celelalte ghiduri utile pentru blogging, cum ar fi Lista de verificare a postării pe blog: Essentials Guide sau How to Repurpose Content și, dacă sunteți un fan al acestor tipuri de ghiduri, abonați-vă la newsletter-ul meu și vă voi împărtăși cel mai bun conținut și cele mai bune descoperiri ale mele prin e-mail.

.