Sivun sisältö:

• Yleistä
• Graafinen editori
• Tekstieditori
• Erikoismerkit

Yleistä

Yksittäisessä säikeessä kommentin yhteydessä on tunnuskuva eli avatar. Sen voi haluttaessa vaihtaa. 

Ennen editorin toimintojen tarkempaa läpikäymistä on huomattava, että jokaisen kommentin kohdalle tulee kommenttiin luotava linkki. Alla olevassa kuvassa se näkyy ”#17021”. 

Kun tietokoneella klikkaa hiiren oikeanpuoleista painiketta voi kopioida linkin osoitteen, minkä jälkeen linkkiä voi käyttää toisessa kommentissa luomaan sisäisen viittauksen tähän kommenttiin. Kosketusnäytöllä kopiointi onnistuu pitämällä sormi/kynä jonkin aikaa linkin päällä. (Rekisteröityneet käyttäjät voivat ottaa aimmin samassa säikeessä olevasta kommentista sitaatin).

Jos ei ole kirjautunut, pitää antaa nimimerkki.

Nykyisin on kaksi editorityyppiä, ns. Graafinen ja Teksti. Alla kuva editorityyppien vaihtopainikkeista:

Editori muuttaa http(s)-alkuisen kirjoitetun linkin automaattisesti klikattavaksi linkiksi. Tässä on kuitenkin kolme toimintamoodia. 

1. Jos linkki on samassa kappaleessa kuin muu teksti, linkki vain muuttuu klikattavaksi, mutta edelleen on esillä linkin www-osoite.
2. Jos foorumiosion linkki laitetaan omaan kappaleeseen, jossa sekä linkin edellä että sen jälkeen on tyhjä rivi, linkki muutetaan käyttämään sivun otsikkotietoa (title) ja se sijoitetaan lohkositaattiin. Linkin mahdollinen ankkuri (#jotain) poistetaan. (Koskee myös muita bbPress-foorumeita.)
3. Jos tämän sivuston muu sivu laitetaan omaan kappaleeseen, bbPress muokkaa siitää mainoksen. (Myös jokin muu bbPress-sivu saattaa muotoutua mainokseksi.)

Lisäsin mahdollisuuden käyttää spoiler-nimistä koodia, jolla voi piilottaa sisältöä. Alla kuvana  esimerkki.

 Yllä oleva koodi toimii alla olevalla tavalla.

Näytä/piilota toiminnassa loppuosan tekstin voi vaihtaa, esim. [+SPOILER=ratkaisusana+] (plussat on lisätty, jotta editori ei luule kirjoitettua tekstiä aloitusmerkkaukseksi; plusmerkkejä ei koodeissa pidä olla).

Muutokset editorityyppiin ”Teksti”

Muutin tekstieditoria niin, että SPOILER-tägit on suoraan käytettävissä.

Käsittelen edempänä koodien käyttämistä.

Muutokset visuaaliseen editoriin (Graafinen)

Muutin visuaalista editoria niin, että yliviivaus (<del>…</del>) muuntuu SPOILER-tägiksi ja näkyy seuraavalla tavalla graafisessa editorissa ei-kirjautuneille henkilöille (selaimen välimuisti saattaa olla tarpeen tyhjentää):

Kirjautuneilla käyttäjillä painike näkyy hieman eri paikassa. Se on alarivillä kuvan osoittamassa paikassa.

Kirjautuneilla käyttäjillä ikoni löytyy myös valikosta.

Koska SPOILER-koodi korvaa ulkoasumerkkauksen, se toimii samaan tapaan kuin ulkoasumuutokset, kuten esim. lihavointi (sille on painike B). Kun piilotettavaksi tarkoitettua teksti on luotu, pitää toimintopainiketta klikata tekstieditorin tavoin toisen kerran, että pystyy jatkamaan muuta kirjoittamista.

Erillisenä painikkeena silmäikoni saa aloitettaessa kehykset, joka osoittaa, että luodaan merkkauksen sisään tekstiä. Valikossa käytettäessä merkkauksen aloitus ei kehystä toimintoa. Sitä pitää siitä huolimatta painaa toistamiseen, jos haluaa jatkaa kirjoittamista.

Molemmissa editorimoodeissa voi ensin valita tekstin ja sen jälkeen painaa toimintopainiketta vain kerran. Jotta jatko olisi luontevaa, kannattaa jatkotekstiä luoda valmiiksi.

Editorin painiketta käytettäessä ei voi muuttaa www-sivuilla painikkeen testiä, sillä koodi muutetaan vasta LÄHETÄ-napin painamisen jälkeen (editorin moodissa Teksti koodi näkyy edelleen <del>….</del>). Lähetetyssä kommentissa www-sivuilla näkyy aina teksti NÄYTÄ/PIILOTA APUSISÄLTÖ. Ennen koodia on tarvittaessa hyvä kertoa, mitä halutaan paljastaa. Se on tarpeen ainakin silloin kun paljastetaan ratkaisusanoja.

SPOILER-tägien käyttö lisäkoodeilla

Lisäsin lomakkeen loppuun painikkeen ”Lisäkoodit”, josta SPOILER-koodit on myös saatavilla niin graafiseen kuin tekstieditoriinkin.  Laitoin oletustekstin, jonka voi vaihtaa. Lisäkoodien käyttö on välttämätöntä graafista editoria käytettäessä tilanteissa, joissa on tarpeen olla muu kuin oletusteksti.

Kun koodin merkkaa, sen voi joko kopioida + liittää tai raahata tekstikenttään. Ks. alla merkattu teksti.

Mobiililaitteissa merkkauksen yläpuolelle tulee automaattisesti kopiointimahdollisuus. Tietokoneella kopiointi täytyy erikseen valita. Windows-tietokoneella kopioinnin saa hiiren oikeanpuoleisella painikkeella.

Laajensin spoilereihin liittyviä lisäkoodeja siten, että voi valita valmiiksi määriteltyjä vaihtoehtoja (samalla muut lisäkoodit siirtyivät alemmaksi).

Tein harjoittelusivun koodien käytön opetteluun. Siinä on myös lisää esimerkkejä.

Piilotettavaksi tarkoitettu teksti pitää kirjoittaa aloitus- ja lopetusmerkkausten väliin.

Muut lisätyt koodit

Lisäsin kaikille myös sellaisia koodeja, joita editorista ei saa, kuten yläindeksi (^SUP). Suurin osa lisäyksistä on ns. BBCode-koodia.

Alla on lista lisätyistä BBCode-tägeistä esimerkkeineen (kaikki koodit eivät esillä lisävalikossa vaan osa täytyy kirjoittaa):

• UNDERLINE – alleviivaa tekstin.
• STRIKE – yliviivaa tekstin.
• ^{SUP – yläindeksi}.
• _{SUB – alaindeksi}.
• Muu väri vaatii lisämäärityksen, esimerkiksi [+COLOR=green+].
• KBD – luo harmaapohjaisen tekstin.
• PRE – [PRE]esimuotoiltu teksti.[/PRE]
• CODE – koodin esittämiseen. Huom. koodi pitää liittää tyhjien tägien väliin tilassa Graafinen eikä sitä saa muotoilla editorissa, jotta editori ei rikkoisi aluetta kappaleilla. WordPress saattaa silti rikkoa alueen ja koodi pitää tarkistaa tilassa Teksti. Jos on tullut kappalemerkkejä (<p>…</p>) väliin, ne pitää tekstitilassa poistaa! P-tägien tilalle voi tarvittaessa laittaa <br /> tägejä.
• REVERSE – REVERSE kääntää tekstin lukusuunnan (voisi olla hyödyllinen piilisten ratkonnassa, jos kirjoittaa vihjeen tekstin tägin sisään tilanteessa, jossa piilovihjeessä pitää etsiä oikealta vasemmalle luettava kätkö).
• NOTE – piiloteksti (hyödyllinen vain, jos haluaa editoida tekstiään, jolloin voi tehdä itselleen kommenttiin muille näkymättömiä muistiinpanoja).

Koodi toimii tekstieditorin kanssa vielä paljon ongelmallisemmin, joten poistin koodipainikkeen käytön tekstieditorista. Koodin näyttäminen on WordPressissä aina hankalaa ja erittäin virhealtista.

Muokkasin asentamaani lisäosaa siten, että poistin käytöstä koodeja, jotka löytyvät editorin käyttöliittymästä tai haluttu ulkoasu on mahdollista siinä luoda. Myös muita foorumissani tarpeettomaksi katsomiani koodeja poistin käytöstä. Vain tässä edellä listatut BBCode-merkkaukset toimivat tällä sivustolla.

Lisäsin BBCode-merkkauksia muistuttavia lisäkoodeja (näissäkään kaikki koodit eivät esillä lisävalikossa vaan osa täytyy kirjoittaa; tässä listassa esillä olevat koodit voi kirjoittaa myös pienillä kirjaimilla):

• BR – lisäsin siksi, että graafisen editorin kanssa ei saa pakotettua rivinvaihtoa. Pakotettua rivinvaihtoa tarvitaan joissakin tilanteissa, esim. kirjoitettaessa SPOILER-tägien sisään teksti, johon haluaa rivivälejä.
• SPACER avulla saa isomman tilan rivikatkon jälkeen (lisäsin myös lyhemmän SP-tägin käytön). Voi kirjoittaa myös pienillä kirjaimilla.
• HR – merkkauksen lisäsin siksi, että ei-kirjautuneilla käyttäjillä ei ole mahdollista laittaa HR-tägiä editorin avulla.
• B-QUOTE – tämä lisäys on tarkoitettu SPOILER-koodien sisään, jotta lohkositaatin lisäys ei toisi ongelmia.
• ISPOILER – piilotuskoodi, jonka voi laittaa SPOILER-tägien sisään.
• IISPOILER – piilotuskoodi, jonka voi laittaa ISPOILER-tägien sisään.
• IIISPOILER – piilotuskoodi, jonka voi laittaa IISPOILER-tägien sisään.
• IIISPOILER – piilotuskoodi, jonka voi laittaa IISPOILER-tägien sisään.

Alla SPOILER-koodit ja lisäkoodit upotettuna niin, että ne voi kopioida muualle:

 Niillä voi luo useampitasoisia piilotuksia. Tältä kolmitasoinen auttamistapa näyttää:

Aivan loppuun laitoin emoji-valikoiman, jossa on mm. seuraavat emojit: 😀 😂 🤨 . Ne on helppo ottaa tietokoneeltakin käyttöön. Pyydettäessä voin täydentää emoji-listaa.

Graafinen editori

Graafisessa editorissa  on perustoiminnot. Vasemmalta oikealle lueteltuna toiminnot ovat:

• Lihavointi
• Kursivointi
• Lohkositaatti
• SPOILER eli Näytä/piilota -toiminto (korvaa yliviivauksen)
• Numeroimaton lista
• Numeroitu lista
• Tasaa vasemmalle
• Keskitä
• Tasaa oikealle
• Kumoa muutos
• Tee uudestaan
• Tee linkki
• Hae kuva

Kirjautuneille käyttäjille on editori, jossa on enemmän toimintoja (mukana on muutama lisävalikkokin):

Siitä löytyy mm. erikoismerkit ja taulukon luonti. Lisätyylejä löytyy kohdasta ”Oma tyyli”. Osa siitä löytyvistä lisätyyleistä löytyy editorin alle lisäämästäni valikosta.

Muutin lohkositaatin näyttämisen editorin moodissa Graafinen saman tapaiseksi kuin SPOILER-tägin. Foorumiosiolla siteeraus näyttää seuraavalta.

Näin ne erottuvat siinäkin selvemmin muusta tekstistä. Yllä siteeraustoiminnon luoma lohkositaatti, jossa sitaatin jälkeen tulee automaattisesti tavallinen kappale. 

Näin siteeraukset erottuvat selvemmin muusta tekstistä. 

Tavallisten lohkositaattien kanssa on yleisenä ongelmana on nimitäin se, että niistä ei pääse helpolla pois. Pitää olla kursori aivan sitaatin lopussa. Sen jälkeen pitää kerran painaa ENTER-painiketta ja sen jälkeen vielä sitaattipainiketta (lohkositaattipainike on alla olevassa kuvassa vasemmalla).

Oma teksti ei saa olla pisteviivoituksen sisällä.

Lohkositaatin ohella listojen päättäminen on lähes yhtä ongelmallista (listapainikkeet on edellä olleessa lohkositaatin jälkeen).

1. Listakohta 1
2. Listakohta 2

Tätä en enää halua listaan. Ensin kohta pitää kirjoittaa teksti. Sitten pitää painaa ensin ENTER-painiketta ja sitten listatoimintoon liittyvää painiketta. Vaihtoehtoisesti kaksi nopeaa perättäistä painallusta päättää listan. 

Jos nopeat painallukset rytmittää oikein, lohkositaatin voi päättää kahdella ENTER-painalluksella. Jos rytmi on väärä, lohkositaattien luonti ei pääty. Varmemmin ne voi päättää aiemmin esitetyllä tavalla. Kieltämättä hieman hankalaa, mutta asialle en voi mitään.

Jotta listat erottuisivat tekstä luodessa muusta sisällöstä, laitoin niillekin pisteviivat ja aputekstin. Sivun Ristikoissa auttaminen (10/2023) näyttää editorissa alla olevan kuvan näköiseltä.

Tekstieditori

Painikkeiden ulkoasu on nykyisin hieman erilainen kuin osassa esittelykuvissa, mutta toiminnot ovat pääosin samat. Kuten jo aiemmin toin esille, poistin käytöstä CODE-tägin sekä muutin koodieditoria siten, että poistin käytöstä DEL-painikkeen ja korvasin sen SPOILER-painikkeella.

Editorissa muuttamattomat tyylit tulevat näkyviin ns. HTML-tägeinä ns. lähdekoodina, esim ”i” näyttää editorissa kursivoitua. Koodit tulevat automaattisesti, mikäli ensin maalaa hiirellä/sormella/kynällä alueen, jolle haluaa kursivoinnin. Mikäli kursivointia ei heti määrittele, pitää päättää kursivointi. Toimintopalkkiin tulee painikkeen ”i” sijaan päättämispainike, jossa lukee ”/ i”.

Kun kursivoinnin on päättänyt, painike vaihtuu takaisin muotoon ”i”.

Jos ei käytä päättämispainiketta loppuun tulee kirjoittaa kursivoinnin päättävä merkintä. Jotta painike on varmasti oikeassa tilassa, suosittelen painikkeiden käyttöä.

Vastaavanlainen päättämispainike tulee muillekin korostuksille. b, i, b-quote (kyse on tägin nimen lyhennyt, tägin nimi on ”blockquote”).

SPOILER-tägi toimii myös samalla periaatteella kuin editorin alkuperäiset tägit. SPOILER-tägin käyttö on helppoa. Välittömästi vihjeen perään ja ennen vinkin antamista vain napin painallus. Painikkeen eteen tulee /-merkki sen merkiksi, että pitää laittaa sille jossakin vaiheessa myös lopetus.

Kun lopettaa vihjeen, painaa toisen kerran. Tällöin myös /-merkki painikkeen edestä häviää.

Tai ensin valitsee piilotettavan tekstin ja sitten painaa SPOILER-painiketta vain kerran. Muutin vielä sen verran toimintoa, että lisäsin oletustekstin, jolloin tekstiä on tarvittaessa helppo muuttaa. Valmiiksi laitettu teksti antaa esimerkin, miten teksti tulee laittaa.

Listat ”ul” (ei-järjestetty lista) ja ”ol” (numeroitu lista) sisälle tulee aina laittaa vähintään yksi listakohta, joka merkitää li-tägeillä (ne näkyvät allaolevassa kuvassa sanojen ”listakohta yksi” ympärillä). Myös listoihin liittyviin HTML-tägeihin tulee päätösmerkkauspainike.

Painikkeen ”Sulje tagit” avulla editori luo päätöstägit sekä yksittäisille listaelementeille että itse listalle.

Listoja voisi luoda monikerroksellisesti, mutta en suosittele monikerroksellisten listojen luomista, sillä päätöstägit voivat mennä sekaisin.

Koodieditorin avulla tekstiin voi lisätä myös muuta HTML-koodia kuin mitä on painikkeissa esillä.

HTML-koodia ei tarkisteta, joten pitää olla huolellinen.  (Virheellinen koodi saattaa aiheuttaa sen, että sivu näkyy väärin.)

Erikoismerkit

Tällä sivustolla kaikki erikoismerkit ovat sallittuja. Erikoismerkit saa seuraavasti:

1. Kopioimalla erikoismerkin jostakin toiselta sivustolta.
2. Kirjoittamalla koodin moodissa TEKSTI. Esim. jos kirjoittaa kooditilassa ”&Delta;”, tilaan GRAAFINEN siirryttäessä koodi muuntuu Δ-kirjaimeksi.

Kirjautuneilla käyttäjillä on toiminto erityismerkeille. Se näyttää alla olevan kuvan näyttämät merkit:

Kirjoitettujen hymiöiden (esim. ”:)” tai ”:-)”) suhteen on niin, että ne eivät muutu automaattisesti graafisiksi hymiöiksi. Emoji-kuvia tuetaan, mutta en ole testannut niitä laajasti.

Paluu pääohjesivulle.

Jos tämän sivun sisällöstä on kommentoitavaa, sivusta on kommentointisivu moderaattoriosastolla.