Articles

MarkoSaric

tämä artikkeli on yhden luukun WordPress HTML koodit. Tässä on luettelo WordPress HTML tunnisteet ja koodit yleisimmin käytetty luoda sisältöä. Tallenna lista ja käyttää sitä referenssinä, kun kirjoitat WordPress blogitekstejä ja sivuja.

WordPress HTML Gutenbergin muokkaimessa

WordPress on yksi parhaista bloggausalustoista. Miljoonat ihmiset ja brändit käyttävät sitä luomaan upeita sivustoja.

tämä opas on voimassa sekä itse isännöidylle että isännöidylle WordPressin versiolle. Katso ero WordPress.com tai WordPress.org.

WordPress 5.0 uudella Gutenberg-editorilla, joka julkaistiin joulukuussa 2018, on merkittävästi parannettu ja helpotettu tapaa, jolla työskentelet HTML-tagien kanssa blogikirjoituksissasi ja sivuillasi.

miten HTML-koodi näytetään Gutenbergin muokkaamissa viesteissä? Voit yksinkertaisesti lisätä “koodi” lohko ja kirjoita koodi. Se näyttää koodin kävijöille.

miten muokkaat Gutenbergin viestejä HTML: n avulla? Klikkaa “Muokkaa HTML” in Asetukset-valikosta tietyn lohkon haluat muokata.

voit myös lisätä “Classic” – lohkon tai “Classic Editor” – lisäosan, jolla on entinen WYSIWYG-editori, jota kuvailen alempana tässä viestissä.

Klassikkoeditori: Mitä eroa on visuaalisella ja tekstillä?

sinulla on kaksi muokkausvaihtoehtoa, kun kirjoitat blogikirjoituksen tai sivun klassisessa WordPress-editorissa. Voit käyttää oletuksena “visuaalinen” näkymä tai” teksti ” tilassa.

visuaalisessa tilassa voit nähdä sisältösi sellaisena kuin se on. Visuaalinen tila on nimeltään WYSIWYG, joka tarkoittaa mitä visuaalinen tila tekee: mitä näet on mitä saat.

näet sisältösi samalla tavalla kuin kävijät näkevät sen selaimissaan, ja sinulla on yksinkertaiset painikkeet, joiden avulla voit muokata sisältöä. Useimmat ihmiset käyttävät tätä” visuaalinen ” Post editor WordPress luotaessa niiden sisältöä.

tekstitilassa näkyy koodi ja HTML-tagit. Tämä teksti tilassa voit lisätä HTML-koodia tahansa blogikirjoituksia tai sivuja. HTML-pohjainen tekstieditori näyttää pelottavammalta eikä ole niin suosittu aloittelijoille.

mutta mitä jos osaat koodata tai haluat hieman enemmän hallita ulkoasua ja rakennetta luodessasi viestejäsi tai sivujasi? Sinun pitäisi käyttää “teksti” editori.

miten muokata HTML WordPress Classic Editor?

Joten miten pääset HTML – tekstieditoriin? WordPress admin post tai sivun kirjoittaminen osio, klikkaa “Teksti” välilehti. Se on tekstieditorissa, että lisäät ja muokkaat kaikkia HTML-tageja.

miten lisätä HTML-koodia WordPress viesti tai sivu?

voit kirjoittaa tai liittää minkä tahansa HTML-koodin suoraan WordPress “Text” – muokkaimeesi. Kokeile sitä jollakin yleisimmin käytetyistä tageista alla olevasta listastani.

kopioi se täällä sivustolla, liitä se tekstieditoriin ja” esikatsele ” viestiäsi tai sivuasi nähdäksesi, miten kävijät näkevät sen.

joskus käy niin, että koodi riisutaan pois, kun siirrytään tekstistä visuaalisiin tiloihin.

ole varovainen ja tarkista, ettei sinulle ole käynyt näin. Tai yritä pysyä tekstieditori vain, jos aiot kirjoittaa koodia ei kohdata tätä ongelmaa.

niille, jotka ovat tyytyväisiä koodaukseen, voi jopa poistaa “visuaalisen” editorin käytöstä. Mene” käyttäjät “WordPress navigointivalikko, klikkaa” profiili “ja valitse”Poista visuaalinen editori kirjoitettaessa”.

kopioi ja liitä Google Docs -, Microsoft Word-ja WordPress-dokumenttien välillä

WordPress 5.0-julkaisu on tehnyt Google Docs-tai Microsoft Word-dokumenttien sisällön kopioimisesta sujuvaa ja helppoa ja liitä se WordPress-julkaisuihin ja-sivuihin.

tämä ei ollut aina helppoa. Kun työskentelet HTML Classic Editor saatat huomata joitakin siansaksaa merkkejä Joskus.

näin voi käydä, jos kopioi/liittää Microsoft Wordista WordPressiin. Yksi hyödyllinen lähde, kun liittämällä HTML-koodia Word osaksi WordPress editor on Postable.

kopioi / liitä HTML Wordista (tai muusta lähteestä) työkaluun saadaksesi WordPress-ystävällisen ja puhtaan version koodista, jonka voit sitten lisätä sisältöön.

miten näytän HTML-koodit blogikirjoituksissani normaalina tekstinä?

entä jos haluaisit lisätä ja näyttää HTML-tageja ja muita koodeja viestiisi, jotta kävijäsi näkisivät ne normaalin tekstin tavoin?

vähän niin kuin teen tässä jutussani? Käytät yhä tekstieditoria, mutta paketoit koodin näin:

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

WordPress HTML syntaksi plugins mukavampi näyttö koodi

on joitakin WordPress plugins, jotka voivat auttaa sinua tässä prosessissa ja voit myös muokata ulkoasua ja miten koodi on esitetty blogissasi kävijöitä.

suosittelen seuraavia kahta. SyntaxHighlighter Evolved on suositumpi vaihtoehto, kun taas Pastacode on se, joka toimii parhaiten niille, jotka käyttävät sivun rakentajia suunnitellessaan blogia.

yleisimmin käytetty WordPress HTML-koodeja ja tageja

Aseta kuva

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

Laita kuva klikattavaksi uuteen kohteeseen

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

Lisää linkki

huomaa, että ankkuriteksti on linkkisi näkyvä osa. Se on sana tai lause, että kävijät klikkaa päästä sivulle olet linkittää.

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

tee linkki nofollow

SEO-tarkoituksiin saatat joutua tekemään osan linkistäsi nofollow. Näin:

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

tee linkki auki uudessa selainikkunassa

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

linkki tiettyyn osioon pitkällä sivulla

näitä kutsutaan sivuhypyiksi. Kävijät voivat klikata linkkiä ja saada siirretään jonnekin alemmaksi tai ylös artikkeli.

tämä on erityisen hyödyllinen niille pidemmille oppaille, jotka haluat jakaa eri lukuihin sisällysluettelon avulla.

sivuhypyn luomisen ensimmäinen osa on määrittää osio (tai kohde), johon haluat linkittää.

Aseta tämä koodi siihen sivun osaan,johon haluat linkittää. Toinen osa on todella linkittää että määritetty osio intro tai sisällysluettelo.

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

tämä toimii myös, jos haluat linkittää tiettyyn osioon sivusi toisesta blogisi artikkelista. Voit lisätä linkin tähän kohteeseen: https://yourblog.com/yourpost/#Specific-section.

näin toimivat myös “takaisin huipulle” – linkit. Määritä osan nimi alkuun viestisi ja sisällytä” Siirry alkuun ” – painiketta alareunassa viestisi linkittää alkuun osassa.

luo nimimerkit ja alaotsikot

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

Aseta rivimurto

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

Luo uusi kappale

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

tee pisteluettelo

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

tee numeroitu luettelo

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

korosta teksti viestissä, jonka tausta on keltainen (tai mikä tahansa muu väri)

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

anna numeroluettelosi numeron numero

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

tee kirjainluettelo

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

tee roomalainen numeroluettelo

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

keskitä tekstisi

<center>to be centered</center>

lihavoi tekstisi

<strong>to be bold</strong>

tee tekstisi kursivoitu

<em>to be italic</em>

Muuta tekstin väriä

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

lisää lohkokakkonen

<blockquote>Your quote</blockquote>

Luo taulukko

Vastaa

Sähköpostiosoitettasi ei julkaista.