Blogikirjoitusten muotoilu ja perus-HTML

Blogikirjoitusten muotoilu ei vaadi, että osaat paljon HTML:ää, mutta siitä on ehdottomasti apua!

Jos haluat, että blogiisi suhtaudutaan tosissaan, blogikirjoitustesi muotoilun on oltava hallussa.

Tämä tarkoittaa myös HTML:n perustemppujen opettelua, joiden avulla voit tehdä artikkeleistasi mielenkiintoisia ja johdonmukaisesti tyyliteltyjä.

Nyt älä huolehdi, en sano, että sinun tarvitsee ryhtyä ohjelmoijaksi tai mitään muuta luodaksesi viehättäviä ja asiantuntevia blogipostauksia, mutta muutaman olennaisen taidon omaksuminen auttaa paljon.

WordPress on CMS (Content Management System) ja sellaisenaan se ei vaadi, että sinun tarvitsee koodata kaikkea itse.

Se on olemassa työkaluja tätä varten.

Suurin osa koodista on piilotettu, jotta mikään ei menisi rikki, ja sinulla on WYSIWYG-editori (What You See is What You Get) blogiviestien ja -sivujen kirjoittamiseen ja muotoiluun.

Jos olet käyttänyt WordPressiä jonkin aikaa, tiedät, että sisältöeditorin oikeassa yläkulmassa on sekä Visual- että Teksti-välilehti, jonka avulla voit vaihtaa viestisi tyylitellystä versiosta raakahkoon HTML:ään.

Neuille.

Visual = WordPressin visuaalinen editori

Text = WordPressin HTML-editori / Raaka teksti

Monet aloittelijat ovat häkeltyneitä ja pelästyneitä, kun he näkevät raa’an HTML:n teksti-välilehdellä ensimmäistä kertaa, ja palaavat nopeasti takaisin.

Mutta näin ei tarvitse olla, ja sinusta tulee paljon parempi bloggaaja, kun käytät aikaa siihen, että työskentely ja muokkaaminen tässä tilassa sujuu mukavasti.

Hieman harjoittelemalla voit helposti hallita joitakin perusasioita, syntaksi on itse asiassa varsin looginen.

Syntaksi (Tietokoneen määritelmä): Tietokonekielen lausekkeiden rakenne.

Mikä sitten on HTML?

HTML on lyhenne sanoista Hypertext Markup Language, ja se on ohjelmointikieli, jota käytetään verkkosivujen ja -sovellusten luomiseen.

HTML:n avulla voit luoda perustoiminnallisuutta, jota voit sitten tyylitellä CSS:llä (Cascading Style Sheets).

Sen loi vuonna 1990 Tim Berners-Lee, henkilökohtainen sankarini, jonka katsotaan myös keksineen internetin, mutta en aio opettaa sinulle kaikkea HTML:stä ja sen historiasta, mutta jos olet utelias, voit jatkaa lukemista Wikipediasta.

Katsomme tässä vain sitä, miten HTML liittyy WordPress-virkojen ja -sivujen kirjoittamiseen ja muokkaamiseen.

Kun näet WordPress-editorin Teksti-välilehdellä tuntematonta koodia, katsot HTML:ää, ja joissakin tapauksissa se saattaa sisältää joitain CSS:n inline-tyylejä.

HTML-esimerkki

<h2>This is a title</h2>

Punaisella korostetut osat ovat HTML:ää, ja tässä esimerkissä näet alussa avaavan h2-otsikkotunnisteen ja lopussa sulkevan h2-otsikkotunnisteen.

Huomaatko ainoan eron siinä, että sulkevassa otsikkotunnisteessa on käänteisviiva tunnisteen nimen edessä? Näin näet nopeasti, milloin HTML:si on avautunut ja sulkeutunut.

Tämä on loistava vinkki virheiden tai rikkinäisen HTML:n havaitsemiseen.

HTML with Inline CSS Example

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

Yllä olevassa esimerkissä olemme käyttäneet samaa h2-otsikkoa, mutta tällä kertaa olemme käyttäneet HTML:ää kutsuaksemme yhtä CSS:ää värin muuttamiseksi punaiseksi. Huomaa, että ainoa osa, joka on oikeasti CSS, on korostettu punaisella.

Itse asiassa et tule näkemään paljon inline CSS:ää, koska paras tapa on tyylitellä HTML-elementit ulkoisilla CSS-tiedostoilla, tämä on tyypillinen tapa, jolla WordPress-teemat soveltavat tyylejä blogisivullesi automaattisesti.

En henkilökohtaisesti suosittele muotoilemaan HTML:ääsi inline WordPress-editorissa, mutta on tärkeää olla tietoinen siitä siltä varalta, että joudut joskus muokkaamaan tai siivoamaan koodia, joka on löytänyt tiensä sisään muista lähteistä, kuten pluginista tai kopioimalla ja liittämällä toisesta lähteestä.

Väistämättä hyödyt siitä, että pystyt siivoamaan asioita, kun peikot (ei tekninen termi) löytävät tiensä sisältöösi.

Katsotaanpa siis, miten lisätä HTML:ää WordPressin viesteihin, postauksiin ja sivuihin ja mitä sinun täytyy tietää.

WordPressin HTML:n perusasiat

Kun lisäät HTML:ää sisällön tyylittelyyn, sinun on muistettava kietoa sisältösi asianmukaisilla avaavilla ja sulkevilla tunnisteilla.

Esimerkki:

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

On esimerkkejä hyödyllisistä HTML-elementeistä, jotka eivät tarvitse sulkevaa tagia, koska ne ovat itsestään sulkeutuvia.

Yksi esimerkki on rivinvaihto <br>, joka toimii ilman sulkevaa tagia, tämä johtuu siitä, että rivinvaihdot eivät sisällä eivätkä voi sisältää sisältöä.

otsikkotagit & Alaotsikot

WordPress-otsikko HTML

WordPress-otsikko HTML

WordPress-julkaisussa on erilaisia otsikkotyyppejä, ensinnäkin sinulla on postauksen otsikko-otsikko, tämä on <>h1> ja sen jälkeen voit lisätä otsikoiden otsikoita sisällöllesi auttamaan sinua ryhmittelemään ajatuksiasi.

Nämä vaihtelevat h1:stä (Heading 1) aina h6:een (Heading 6) ja teemasi tyypillisesti tyylittelee ne sopivan kokoisiksi.

Koska sivusi tai postauksesi otsikko on automaattisesti h1, haluat välttää sen käyttämistä sisällössäsi, sillä kaikki muut tapaukset kilpailevat pääotsikon kanssa, joka on postauksesi nimi.

Neuvottele sen sijaan semanttisesti oikeaa järjestystä ja siirry ensimmäisellä kerralla, kun joudut käyttämään osio-otsikkoa, h2-otsikon otsikkoon.

Vaikka voit asettaa nämä helposti postieditorin WYSIWYG-editorin vasemmassa yläkulmassa olevan pudotusvalikon avulla, on hyödyllistä tietää, miten ne toimivat HTML-muodossa, jotta voit korjata mahdolliset virheet.

Tässä on muutamia esimerkkejä

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<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>

Toivottavasti alat jo hahmottaa kaavaa HTML-syntaksin suhteen.

Kaikki HTML-elementit alkavat avaavalla <

Ne myös sulkeutuvat sulkevalla >

Avaavat elementit voivat sisältää yksinkertaisesti elementin nimen.

Sulkevat tagit sisältävät etumerkin (forward slash) avaavan <:n perässä ja ennen sen HTML-elementin nimeä, jonka ne sulkevat.

Hieman perehtymällä yllä olevaan pääset harppauksin eteenpäin verrattuna suurimpaan osaan WordPressiä käyttävistä bloggaajista.

Bold tai kursivointi

Kun haluat korostaa jotakin asiaa ja kiinnittää huomiota tiettyihin sanoihin, saatat haluta käyttää lihavointia tai kursivointia, jotta ne erottuvat.

Pidän ehdottomasti tästä lähestymistavasta enemmän kuin ALL CAPS -tekstistä, joka minusta vaikuttaa huutamiselta.

HTML lihavoinnille on <strong> ja kursiiville <em>.

Hauska fakta: Strong on helppo muistaa, kun haluaa tehdä jostain lihavoidun, mutta miksi kursivointi-elementissä käytetään em? Em on korostuksen lyhenne. Se saattaa auttaa sitä jäämään mieleen.

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

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

Lisäksi voit tietysti käyttää WordPressin WYSIWYG-ohjelmaa tai pikanäppäimiä CTRL + B lihavoinnille ja CTRL + I kursivoinnille sen jälkeen, kun olet korostanut tekstin, jota haluat muuttaa.

Kokonaisen luettelon WordPressin näppäimistönäppäimistön pikanäppäimistä ja muista muotoilu-, muotoilu-, metodeista löydät täältä.

On joitakin sääntöjä siihen, miten näitä pitäisi ja ei pitäisi käyttää, mukaan lukien niiden pitäminen toisensa poissulkevina, niiden varaaminen lyhyisiin lauseisiin ja säästeliäs käyttö.

Practical Typography -lehdessä on loistava artikkeli, jossa selitetään näiden sääntöjen merkitys.

Jos kirjoitat kopioita, jotka todella kiinnostavat ihmisiä, kuten myyntikopioita, näitä sääntöjä voidaan taivuttaa, mutta ei rikkoa.

painotus

Muista, että jos kaikkea korostetaan, mitään ei korosteta!

Luettelot – Järjestetyt & Järjestämättömät

HTML:llä voi lisätä kahdenlaisia luetteloita, joita myös WordPressin WYSIWYG tukee.

Nämä ovat:

Järjestetyt luettelot – <ol>

Järjestetyt luettelot näkyvät sarjana numeroituja asioita. Tästä on hyötyä kirjoitettaessa luetteloa, jossa järjestyksellä on merkitystä.

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

Yllä oleva koodi muuttuu muotoon:

1. Kohde 1
2. Kohde 2
3. Kohde 3

Järjestämättömät listat – <ul>

Järjestämättömät listat ovat lähinnä bullet-point-listoja.

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

Ja tämä muuttuu alla olevaksi bullet-listaksi.

• Kohta 1
• Kohta 2
• Kohta 3

Me kaikki tiedämme, kuinka hyödyllisiä luettelot ovat, ja ne auttavat myös rikkomaan sisältöä ja tekemään siitä mielenkiintoisemman näköistä.

Yksi keskeinen ero, jonka huomaat tässä, on se, että on olemassa yksittäisiä listan kohteita <li> ja ne on kääritty kokonaisuudessaan yhdellä <ol> tai <ul> kääreellä.

Tämä on tärkeää huomioida, koska jos kääre <ol> tai <ul> puuttuu, listan kohteet eivät renderöidy.

Kuvat

Toinen tärkeä osa blogikirjoituksen tai minkä tahansa sivun muotoilua WordPressillä on kuvien käyttö, eikä sinulla pitäisi olla vaikeuksia löytää mielenkiintoisia kuvia, joita saat Yahoo imagesista ja muilta tekijänoikeudettomilta kuvasivustoilta. Jotkut näistä vaihtoehdoista ovat maksullisia, mutta monet niistä ovat ilmaisia edellyttäen, että annat krediittiä mainitsemalla lähteen ja linkin.

Pieni hinta siitä, että saat ammattimaista visuaalista materiaalia verkkosivuillesi tai blogiisi.

Kuva kertoo enemmän kuin tuhat sanaa, kuten sanotaan, ja ne tarjoavat lukijallesi myös visuaalisia ärsykkeitä sekä taukoja, jotka auttavat hajottamaan sisältösi sulaviksi paloiksi.

Tämä auttaa pitämään lukijasi mukana, ja vaikka sinun ei tarvitse koodata kuvia itse, syntaksin ymmärtäminen on hyödyllistä.

Tässä on esimerkki kuvakoodista ja siitä, miltä se näyttää, kun katsot editorisi Teksti-välilehteä.

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

Kuva ei vaadi sulkutunnistetta (closing tag), koska kaikki sen tarvitsemat tiedot sisältyvät HTML-elementin avaaviin ja sulkeutuviin sulkeisiin. src yksinkertaisesti kutsuu URL-osoitteen sijainnin.

WordPressin avulla voit kelluttaa kuvat vasemmalle, oikealle tai voit keskittää ne. Jos teet näin ja tarkistat koodin Teksti-välilehdeltä, huomaat, että siihen on lisätty luokkia, joita käytetään kuvien tyylittelyyn vastaavasti.

Tämä on esimerkki siitä, että ulkoista CSS:ää käytetään erilaisten tyylien soveltamiseen eri kuviin. Hyödyllistä tietää!

Tärkeää: Ennen kuin lisäät kuvia viesteihisi ja sivuihisi, varmista, että ne on optimoitu nopeuden ja hakukoneiden kannalta.

Embedit

Väistämättä haluat käyttää upotuskoodeja ulkoisilta verkkosivuilta.

Yksi esimerkki on, kun haluat lisätä videon YouTubesta tai Vimeosta, menet jakoon ja se antaa sinulle pitkän koodin, jonka voit kopioida.

Tärkeintä on muistaa, että et voi liittää HTML:ää tai muuta koodia sisällönmuokkauksen visuaaliseen välilehteen. Se sekoittaa koodin ja tekee siitä käyttökelvottoman, kun painat tallenna.

Varmista, että menet teksti-välilehdelle ja liität sen sitten sinne, missä haluat sen näkyvän.

Alhaalla on esimerkki upotuskoodista YouTubesta.

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

Vaikkakin WordPressin avulla voit yksinkertaisesti liittää YouTuben URL-osoitteen postaukseesi näyttääksesi videon videon, tämä ei välttämättä anna sinulle täyttä määräysvaltaa videon dimensioihin ja muihin upotusasetuksiin.

Tästä syystä ja koska olen vanhanaikainen, käytän edelleen iframe- upotuskoodia.

Monet sivustot, jotka tarjoavat upotuskoodeja, eivät ole natiivisti WordPressin tukemia, joten sinun on silti oltava tietoinen upotuskoodeista, iframeista ja niiden toiminnasta voidaksesi lisätä multimediaa viesteihisi.

Lyhytkoodit

Lyhytkoodit eivät ole HTML. Itse asiassa ne eivät ole edes ohjelmointikieli, vaan ne ovat WordPressin natiivi toiminto, jonka avulla lisäosien ja teemojen kehittäjät voivat luoda yksinkertaisia tapoja, joilla sinä ja minä voimme lisätä elementtejä verkkosivuillemme ja viesteihimme.

Yksinkertaisin esimerkki, joka löytyy lähes jokaisesta blogista, on yhteydenottolomakkeen lyhytkoodi, mutta lyhytkoodeille on satoja ellei tuhansia potentiaalisia käyttötarkoituksia, jotka sisältävät mahdollisuuden lisätä:

• Taulukot
• Galleriat
• Hinnoittelupaketit
• Videot
• Lead Magneetit / Sähköposti-Opt-in-lomakkeet
• Podcast-episodit

Tässä on oikokoodi yhteydenottolomakkeelle, joka luodaan Contact Form 7 -lisäosalla, joka on yksi suosittelemistamme lisäosista, jonka asennamme 90 %:iin sivustoistamme ja blogeistamme.

Huomaa: Jouduin lisäämään välilyöntejä alkusulkeiden jälkeen ja ennen loppusulkeita estääkseni sitä näyttämästä yhteydenottolomaketta todellisuudessa, joten kuvittele se ilman välilyöntejä.

Huomaa, että lyhytkoodin syntaksi on erilainen. Ne alkavat avaavalla sulkeella <:n ja >:n sijasta.

Lyhytkoodin kehittäjä muotoilee ne siten, että sinun on helppo säätää ja muuttaa olennaisia asetuksia.

Kun verkkosivu latautuu, tämä yhteydenottolomake lataa itse asiassa noin 20 riviä sotkuista HTML-koodia, joten sinun on paljon helpompaa, kun pääset käyttämään lyhytkoodia.

Ainut varoitus on se, että lyhytkoodien liiallista käyttöä ei kannata harrastaa, sillä ne hidastavat verkkosivuja.

Neistä on hyödyllistä tietää, ja ne voivat tehdä postauksen muokkaamisesta paljon vähemmän hankalaa, kun sinun ei tarvitse käyttää suuria määriä HTML:ää, jota et ymmärrä ja jonka ympärillä joudut työskentelemään varovaisesti.

Muut muotoiluvinkit

On useita muitakin vinkkejä, jotka kehotan uusia WordPress-opiskelijoita pitämään mielessä ja joita käsittelen lyhyesti.

Näihin kuuluvat:

• Älä lisää tarpeettomia rivinvaihtoja. Tämä tarkoittaa sitä, että yritä olla käyttämättä <br> HTML-tunnistetta ja vältä painamasta enteriä kahdesti kappaleiden ja osioiden välissä, ellei se ole aivan välttämätöntä. Se saa artikkelisi näyttämään sotkuiselta ja luot väistämättä epäjohdonmukaisuuksia.
• Älä lisää sivukohtaisia kirjasinperheitä, -kokoja ja -värejä – Jälleen kerran tämä saa postauksesi näyttämään kauhealta ja siltä kuin ne olisi luotu vuonna 1995. Saatat ajatella, että mukautetun kokoinen vihreä otsikko ainutlaatuisella fontilla kiinnittää huomiota, kun itse asiassa se erottuu epäjohdonmukaisena ja epäammattimaisena. Teemasi pitäisi sanella nämä tyylit.
• Älä koskaan lisää HTML- tai upotuskoodia Visual-välilehteen – Tämä voi johtaa odottamattomiin tuloksiin, edellyttää paljon siivoamista tai rikkoa sivusi kokonaan.
• Älä koskaan lataa videoita WordPressiin – Verkkosivustosi isännöintiä ei ole rakennettu videosisällön toimittamista varten. Onneksi YouTube ja Vimeo tarjoavat joka tapauksessa supernopeaa ja 100 % ilmaista videohostingia. Siksi on parasta upottaa videoita YouTubesta, vaikka ne olisivat omia.

Ei mitään liian monimutkaista, mutta näen usein ihmisten tekevän näitä virheitä ja vaikeuttavan elämäänsä.

Mutta pian asiat voivat olla toisin, itse asiassa hyvin toisin!

Gutenberg, bloggaamisen tulevaisuus?

Gutenberg on WordPressin alusta asti rakentama uusi sisältöeditori, joka on tulossa lähiaikoina asennukseen lähellesi.

Onko se bloggaamisen tulevaisuus? Kuka tietää? Mutta se on ehdottomasti WordPressin tulevaisuus, joten on aika lähteä mukaan.

Gutenberg on erilainen peto.

Jos olet joskus käyttänyt Medium.com-sivustoa bloggaamiseen, niin kokeillessasi ensimmäistä kertaa Gutenbergiä se tuntuu pelottavan samankaltaiselta.

Minusta tämä on hyvä asia, Mediumin häiriötön sisältöeditori on kauniin helppokäyttöinen, ja sen näkeminen, että WP ottaa tämän huomioon, on positiivinen asia kaikille WP:llä toimivien blogien ja verkkosivustojen pyörittämiseen osallistuville.

Gutenberg-editori on myös modulaarinen, ja sen avulla voit raahata sisältösi sisälle palikoita (lohkoja), jotka ovat kukin eri tarkoitukseen.

Tämä on samankaltaista kuin se, miten page builder -pluginit ja tietyt teemat tarjoavat tällä hetkellä tämänkaltaisen raahaus- ja pudotusratkaisun, mutta nyt nämä ominaisuudet ovat tulossa WordPressiin oletusarvoisesti.

Jos on yksi WordPressin osa-alue, joka ei ole kehittynyt paljon vuosien varrella, se on ollut TinyMCE-editori, joten toivotan tämän innovaation tervetulleeksi avosylin.

Jos kamppailet blogikirjoitusten muotoilun kanssa nykyisellä editorilla, voit jo nyt kokeilla Gutenbergiä lataamalla ja asentamalla sen menemällä kojelaudan lisäosiin ja etsimällä ”Gutenberg”.

Blogipostauksen muotoilu & Perus HTML Final Word

Jos vietät hieman aikaa harjoittelemalla edellä mainittuja asioita, saat paljon paremman hallinnan sisällöstäsi ja sen esitystavasta.

Toivottavasti tunnet olosi nyt hieman mukavammaksi blogipostauksen muotoilun ja HTML:n peruskäytön kanssa.

Tämä taito voi säästää paljon aikaa, rahaa ja päänsärkyä, kun sisällön muotoilu menee pieleen tai se ei renderöidy oikein.

Vaikka edellä mainitut perusteet riittävät useimmille bloggaajille ja WordPress-sivustojen omistajille, jos olet utelias oppimaan lisää, on olemassa joitakin loistavia ilmaisia verkkosivustoja, joilla voit oppia HTML:ää, kuten CodeAcademy ja w3Schools.

Nyt mene ja tee sisällöstäsi nättiä! 🙂

Jos löysit tämän artikkelin hyödylliseksi, harkitse myös muiden hyödyllisten bloggausoppaidemme, kuten esimerkiksi Blogipostin tarkistuslistan, lukemista: Essentials Guide tai How to Repurpose Content, ja jos pidät tällaisista oppaista, tilaa uutiskirjeeni, niin jaan parhaan sisältöni ja löytöni kanssasi sähköpostitse.