WordPress kirjoittajat on mahdollisuus luoda sivuja ja viestejä visuaalinen editori tai tekstieditori. Vaikka visuaalinen editori tekee kohtuullisen hyvää työtä työkalupalkin vaihtoehtojen ja helpon muokkausympäristön kanssa, tekstieditorin käyttö mahdollistaa maksimaalisen joustavuuden sisällön järjestämisessä.

haluan selittää, miksi haluat käyttää tekstieditoria (visuaalisen Editorin sijasta), mutta kuinka helppoa sen käyttäminen voi olla.

miksi haluat tekstieditorin?

• sisältösi tulee olemaan järkevämpää lukijoiden ja hakukoneiden kannalta.
• sinun tarvitsee tietää vain muutama HTML-tunniste, jotta tekstieditori olisi erittäin hyödyllinen.
• voit soveltaa CSS-tyyliominaisuuksia suoraan HTML-koodiisi.

Mitä Tapahtuu, Kun Käytät Visuaalista Editoria?

kun lisäät kopion, median tai linkit visuaaliseen editoriin, lisäät todella HTML: n sivullesi tai postaukseesi. Kaikki tapahtuu konepellin alla.

Etkö ole varma, mitä tarkoitan? Kokeile tätä.

lisää kopio visuaaliseen muokkaimeen. Valitse sitten Teksti-välilehti. Mitä katsot on HTML. Aivan kuten visuaalinen editori, voit muokata HTML-koodia suoraan tekstieditorilla.

tekstieditorilla voi itse asiassa tehdä paljon enemmän kuin visuaalisella editorilla. Tämä tekee tekstitilassa työskentelystä paitsi tuottavampaa myös tyydyttävämpää. Voit tarkemmin merkitä sisältöä, joka hyödyttää lukijoita ja lisätä SEO ponnisteluja.

HTML on suunnilleen niin suoraviivainen kuin se saakin. Jokainen web-sivu, mukaan lukien luomat WordPress, käyttää sitä.

HTML: n oppimisesta on paljon muutakin hyötyä kuin sen käyttäminen WordPressissä!

mikä on HTML?

Webin lingua francana tunnettu HyperText Markup Language (HTML) on järjestelmä, jonka avulla kirjoittajat voivat antaa sisällölle merkityksen. Käyttämällä HTML-elementtejä (tunnetaan paremmin nimellä tagit) voit määritellä sisällön olevan kappaleita, otsikoita, luetteloita, linkkejä ja muita rakenteita.

HTML muistuttaa paljon kielioppia.

sillä ei ole mitään tekemistä sen kanssa, miltä verkkosivu näyttää tai miten se on muotoiltu. Web page design – layout, typografia, ja väri – on otettu CSS (Cascading Style Sheets), kieli web design tyyli.

HTML: ää kehittää World Wide Web Consortium (W3C). Uusin versio on HTML5.

tagit, joita todennäköisimmin käytät

HTML on konttimerkintäjärjestelmä. Jokaiselle avoimelle tagille on täsmäävä loppulappu.

esimerkiksi sivun tai sivun osan tärkeimmälle sisällölle käyttäisit tällaista otsake 1-tunnistetta.

<h1> All About HTML< / h1>
avoin tunniste on<h1>ja säiliö on suljettu< / h1>

vastaavasti näin kappale merkitään ylös:

<p>muutama vuosi sitten eräs asiakas ja hyvä ystävä ehdotti, että opettelisin WordPressiä. Siihen aikaan vastustin kaikenlaista CMS: ää. En tiennyt, että olisin tullut rakastamaan sitä ja opettaa sitä monille ihmisille New Yorkissa luokkahuoneissa ja webinarin kautta.</p>

sinun tarvitsee vain kirjoittaa sisältösi tekstieditoriin ja lisätä tagisi joko mennessäsi tai sen jälkeen, kun olet kirjoittanut kopion.

tässä on selitys yleisimmistä HTML: ää kirjoitettaessa käytettävistä tageista. Ne ovat otsikko, lista, linkki, ryhmittely ja muutama sekalainen tunniste.

otsakkeet

<h1></h1>

<h2></h2>

<h3></h3>

• on myös H4 -, h5-ja h6-suuntamerkkiä, joita käytännössä käytetään harvoin.
• älä koskaan käytä otsikkomerkkiä kirjasinkoon muuttamiseksi.

LUETTELOTUNNISTEET

HTML: llä voi luoda 3 erilaista luetteloa. 2 suosituinta ovat tilattuja ja järjestämättömiä listoja.

järjestyksetöntä listaa käytetään silloin, kun kappaleiden järjestys ei ole tärkeä.

< ul>

<li>Kukat< / li>

<li> kasvikset< / li>

<li> puut< / li>

</ul>

• Kukat
• vihannekset
• puut

järjestettyä luetteloa käytetään silloin, kun niiden järjestys on merkityksellinen.

< ol>

<li>Kalifornia< / li>

<li>Texas< / li>

<li>Florida< / li>

</ei>

1. Kalifornia
2. Texas
3. Florida

(tässä esimerkissä järjestys on relevantti ja sen määräävät Yhdysvaltain osavaltioiden suurimmat väestöt.)

huomautus: luetteloita voidaan myös sisäkkäin luoda luettelokohtien hierarkia. Tämä on vaikea tehdä, kun käytetään visuaalista editoria.

LINK-tagi

voit muuttaa tekstin tai kuvan linkiksi käärimällä tekstin tai kuvan minkä tahansa ankkuri-tagin sisään. Vaikka syntaksi linkin luomiseksi on aina sama (<a href=”url”>linkkiteksti</a>), on olemassa 2 hyvin yleistä tapaa tehdä se.

käytä linkkiä WordPress-sivulle:

<a href= ”http://domain.com/this-is-the-page-title”>link WordPress-sivulle< / a>

käytä linkkiä mille tahansa sivulle tai resurssille, ei vain WordPress-sivulle:

<a href= ” http://domain.com/about.html”>link HTML-sivulle< / a>

huomaa: on oikeastaan kolmas tie. Voit käyttää erityisellä tavalla WordPress luo linkkejä seuraavan syntaksin:

<a href= ” indeksi.php?page_id=356 ” >linkki sivustosi sivulle</a

tässä tapauksessa sinun on tiedettävä sivu tai postinumero, jolle linkität sivustossasi. (Jokaisella sivulla tai viestissä on yksilöllinen tunnistenumero).

ryhmittely tagit

teknisesti ei ole olemassa sellaista asiaa kuin” ryhmittely tagit”, mutta se on paras tapa kuvata joukko HTML tageja, jotka sisältävät muita elementtejä. Näiden tägien tarkoituksena on kuvata tarkemmin sisältösi merkitystä.

esimerkiksi <header> tagilla voidaan määritellä se osa sivusta, joka sisältää johtavaa tietoa, kuten tämä:

<otsake>

<h1>Johtosuuntaviiva< / h1>

<img src= ”kuvatiedoston url”>

<p>otsikkoa ja kuvaa seuraava informaatiokappale, joka loogisesti pysyy yhdessä informaatioryhmänä.< / p>

</header>

Tässä muutamia hyvin yleisiä ryhmittelytunnisteita

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

muut tagit
tagin lisäksi huomaat näiden tägien olevan erittäin hyödyllisiä tekstieditorin kanssa työskenneltäessä.

<img src="url of image file">

<br>

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

<blockquote> or <q>

vaikka nämä tunnisteet pääset pitkälle, tässä on muutamia resursseja auttaa sinua.

● You only Need 10 HTML Tages (tutorial)
● HTML Element Reference in Alpha Order
● HTML Element Reference

the Rules

the beauty of HTML is just a few rules to follow and they ’ re easy to remember.

* HTML on kirjainlyhenne

isot, pienet tai sekamuotoiset kirjaimet – Kirjoita HTML miten haluat. Yleinen käytäntö on pieni.

* jokaiselle avoimelle tagille täytyy olla suljettu tagi

tästä on poikkeuksia, mutta jotta se olisi todella helppoa, ota tavaksesi sulkea kaikki avoimet tagit.

* tagit suljetaan käänteisessä järjestyksessä, jossa ne avataan lohkon sisällä

tätä voi olla hieman vaikea ymmärtää, joten tässä esimerkki.

<p> tässä on <vahva> kappale, jossa <a href=”url täällä” >linkki< / a>< / vahva> sisällä ja osa tekstistä korostuu.< / p>

Notice the order: <p><strong><a>….< / a>< / strong> < / p>

* joillakin alkuaineilla ei ole Loppulappua

, kuten <br> ja <img>, ei loppulappua, koska sellaiseen ei ole syytä.

* käytä HTML-koodia oikein ja älä Muotoile sivuasi

esimerkiksi, älä käytä < br> tageja, kun sinulla on lista. Tai älä käytä <taulukkoa> tageja luodaksesi ruudukon layoutia varten.

Tekstieditorityökalurivi

koska minusta on tehokasta kirjoittaa koodia tekstieditoriin, en yleensä käytä työkaluriviä. Kuitenkin, jos olet aloittamassa HTML, saatat löytää joitakin työkaluja hyödyllinen tapa opettaa itsellesi joitakin HTML. Lopulta tulet huomaamaan, että on olemassa enemmän tägejä, joita voit käyttää sisällön merkitsemiseen oikein kuin mitä työkalupalkki sallii.

HTML-liitännäiset

ennemmin tai myöhemmin huomaat, että jos luot kappaleen visuaalisessa Editorissa, et näe <p> tagia käärittynä kappaleesi ympärille, kun näet sen tekstieditorissa. Älä anna sen häiritä. WordPress luo edelleen <P> tagin, kun kopio ilmestyy sivullesi.

jos sinulla on tämä tai muita ongelmia koodisi kanssa, haluat ehkä käyttää näitä liitännäisiä.

muokkaa aina HTML: ssä

tämä takaa sen, että kun siirryt luomaan tai muokkaamaan sivua tai julkaisemaan sisältöä, editorisi avautuu aina Tekstieditorina eikä visuaalisena editorina. Tämä voi olla erittäin hyödyllistä, koska WordPress voi riisua tunnisteet joissakin olosuhteissa, joissa visuaalinen editori käytetään.

säilytä HTML-editori Markup Plus

jos sinulla on ongelmia tunnisteiden poiston kanssa, tämä voi olla ratkaisusi.

HTML Editor Syntax Highlighter

tämä on ihana lisäosa, joka muuttaa mitäänsanomattoman tekstieditorin värikoodatuksi runsaudensarveksi. Se voi myös vaihtaa mustaan taustaan ja suurempiin fontteihin. On parasta käyttää tätä plugin kanssa koko näytön vaihtoehto.

huomaa: en ole testannut kahta tai useampaa näistä liitännäisistä samanaikaisesti, joten yhteensopimattomuuksia voi olla olemassa.

miten lyhytnumerot sopivat kuvaan

lyhytnumerot ovat mitä monet lisäosat käyttävät lomakkeen lisäämiseen, sarakkeiden perustamiseen tai jonkin muun ominaisuuden lisäämiseen sivulle tai postaukseen. Se on helppo tapa lisätä koodia, kuten HTML, javascript, CSS, ja PHP ilman tietää mitään näistä kielistä.

käytä lyhytnumeroita tekstieditorissa aivan kuten visuaalisessa Editorissa.

asiattomille lyhytnumerot voivat näyttää HTML: ltä, mutta eivät ole.

voit joko liittää lyhytnumeroon tällä tavalla, jos lisäät yhteydenottolomakkeen esimerkiksi suositulla yhteydenottolomakkeella 7,

tai voit käyttää sitä näin liitännäiselle,

sisältöä sarakkeen vasemmalle puolelle

sisältöä sarakkeen oikealle puolelle

joka luo kaksi saraketta sivulle.

kyseinen lyhytnumero näyttää HTML: ltä avoimella ja suljettavalla tagilla, mutta se ei ole

lisäämällä tekstieditorilla

voit antaa tekstieditoriin lisäämällesi sisällölle CSS-tyylisiä ominaisuuksia. Tätä ei voi tehdä Oletusmuokkaimella.

tekstieditorilla se voidaan tehdä kahdella tavalla.

yksi tapa on lisätä HTML-elementtiin id tai luokkaattribuutti kuten tässä esimerkissä:

<p id= ”lead” >tämä on minun postaukseni johdantokappale.< / p>

sitten omaan tyyliin.CSS-tiedosto voit lisätä tyyliominaisuudet #lead. Ehkä jotain tällaista:

#lead

{font-weight:bold;

text-align: center;

color:#f00;}

toinen tapa on lisätä inline stailaus. (Kuitenkin, paras lähestymistapa on pitää HTML ja CSS erillään kuten edellä skenaariossa.) Voit lisätä inline styling näin:

<p style= ”font-family:arial,helvetica,sans-serif”>tämän kappaleen fontti on Arial.</p>

HUOM: Tämä kumoaisi tämän kappaleen kirjasinperheen tyylisäännön, joka voi olla ulkoisessa tiedostossa tai sivun <head>-kontissa.

johtopäätös

tekstieditori antaa sinulle täydellisen kontrollin siitä, miten haluat muotoilla sivusi tai julkaista sisältöä. Voit käyttää mitä tahansa HTML-tunnistetta, ei vain tekstieditorin työkalurivillä olevia. Tuloksena on sisältöä, jota on helpompi lukea ja ymmärtää ihmisten ja hakukonehämähäkkien toimesta. HTML: n kirjoittamiseen tottuminen voi viedä hieman aikaa, mutta lopulta löydät sen erittäin tyydyttäväksi.

Tekijäbio

Bud Kraus [email protected] on veteraani WordPress ohjaaja New Yorkissa ja opettaa WordPress yksilöille ja ryhmille kautta webinar. Hän työskentelee myös pienyritysten työmailla. http://joyofwp.com