Kaukaa katsottuna näyttää siltä, että sinun on leikittävä lukuisilla numeerisilla tiedoilla ja tehtävä monimutkaisia teknisiä asioita luodaksesi soluja taulukon lämpökartalle.

Se on kuitenkin kaukana todellisuudesta, jos sinulla on oikea työkalu.

Tässä artikkelissa käsittelen lämpökarttataulukon luomista wpDataTablesilla, joka on WordPressin suosituin laajennus taulukoiden ja kaavioiden luomiseen.

Millaisen lämpökarttataulukon voimme luoda? No, jotain tämän esimerkin kaltaista alla:

Kyllä, se on todella pitkä kuvakaappaus. Voit tarkastella dynaamista lämpökarttataulukkoa täältä.

Lämpökarttataulukon luominen sinulle tai vierailijoille on helpompaa data-arvojen vertailua varten, kun sinulla on muutamia vaihtoehtoja lähdetiedoistasi riippuen.

Mutta ennen kuin siirryt opetusohjelmaan, halusin kertoa sinulle, että tässä artikkelissa on kaksi osaa, joihin voit siirtyä suoraan:

Lämpökarttataulukon luominen wpDataTablesilla

1 Taulukon luominen nollasta

Jos sinulla ei ole tietolähdettä, voit luoda lämpökarttataulukon tyhjästä vaihtoehdolla "Luo taulukoita manuaalisesti", johon syötät tietoarvot manuaalisesti.

Aloita tietotaulukon luominen manuaalisesti avaamalla WordPressin hallintapaneeli, siirtymällä kohtaan wpDataTables -> Luo taulukko, valitsemalla kolmas vaihtoehto "Luo taulukko manuaalisesti" ja napsauttamalla "Seuraava".

Sinulle näytetään ohjatun toiminnon vaihe, joka auttaa sinua luomaan taulukkorakenteen, jossa luot 14 saraketta: Jakso, Vuosi ja kaikki muut ovat kuukausien nimiä (tam, helmikuu…). Jakso-sarakkeille jätät saraketyypiksi "Yksirivinen merkkijono" ja kaikille muille saraketyypiksi "Integer" .

Kun olet määrittänyt taulukon, napsauta "Luo taulukko". Avautuu pudotusvalikko, jossa on vaihtoehdot "Avaa tavallisessa editorissa" tai "Avaa Excelin kaltaisessa editorissa", ja siinä kaikki. Taulukkorakenne luodaan. Nyt lisäät numeeriset tietosi vakioeditorin tai Excelin kaltaisen editorin päälle .

2 Taulukon lämpökartan luominen tietolähteestä

Jos sinulla on tietoja jossakin tietolähteessä, kuten Excel, CSV, JSON, Google-laskentataulukko, XML, PHP Serialized array, tai tietokannan taulukossa (SQL-lähde), käytät ohjatun taulukon toiminnon toista vaihtoehtoa.

Aloita olemassa olevaan tietolähteeseen linkitetyn tietotaulukon luominen avaamalla WordPressin hallintapaneeli, valitsemalla wpDataTables -> Luo taulukko ja valitsemalla toinen vaihtoehto "Luo olemassa olevaan tietolähteeseen linkitetty tietotaulukko". ja napsauta "Seuraava".

Riippuen lähteestäsi, noudatat ohjeita:

Käytämme tässä taulukossa CSV-tiedostoa tietolähteenä, jonka voit ladata täältä. Valitset CSV:n "Syötetietolähteen tyypiksi" ja etsit sitten Selaa-painikkeen yli, että olet aiemmin ladannut ja lähettänyt palvelimellesi. Napsauta Tallenna muutokset, jotta wpDataTables lukee lataamasi CSV-tiedoston ja taulukko luodaan.

Kun olet luonut taulukon, voit mukauttaa ja määrittää WordPress-taulukkosi haluamallasi tavalla millä tahansa kahdesta vaihtoehdosta.

Meidän tapauksessamme otamme ensin käyttöön vaihtoehdon "Näytä suodattimet taulukon yläpuolella olevassa lomakkeessa " taulukon asetusten Lajittelu ja suodatus -välilehdellä ja määritämme sitten lisäsuodattimet kullekin sarakkeelle. Asetamme Kausi-sarakkeelle "Valitse laatikkosuodatin" ja "Numerosuodatin" kaikille muille sarakkeille.

Sitten otamme käyttöön "Responsiivisuus" -vaihtoehdon "Näyttö" -välilehdellä taulukon asetuksissa ja piilotamme arvot, kuten "Kuukausi"-sarakkeet tableteille ja mobiililaitteille kussakin sarakeasetuksissa tai nopeammin taulukon yläpuolella olevasta Sarakeluettelo-painikkeesta .

Taulukon tietojen väripaletin mukauttamiseen helposti ja intuitiivisesti käytämme ehdollista muotoilua. Ensimmäiselle sarakkeelle asetimme ehdon, että jos solussa on 2, niin "Aseta solun CSS-luokka " -asetukseksi "sinivalkoinen teksti", jotta meillä on valkoinen fontin väri sinisen taustan päällä.

Sitten luomme nämä luokat Mukautettu CSS -kenttään Mukauta – välilehdellä taulukkoasetuksissa seuraavasti:


.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Kuten tämä:

Kun numero 1 .wpDataTable-1:ssä on taulukosi tunnus, joten sinun on vaihdettava se taulukkoasi varten

Kaikille muille sarakkeille asetamme samat ehdot eri värien asettamiseksi Max Temperature -taulukon arvon perusteella.

Toisessa taulukossa “Low Temperature" käytämme samaa lähestymistapaa kuin taulukossa “Temperature Maximus”, paitsi ehdollisen muotoilun ehtoja. Koska se on alhaisempi lämpötila-arvo, käytämme näitä ehtoja.

Sitten luomme nämä luokat Mukautettu CSS -kenttään Mukauta – välilehdellä taulukkoasetuksissa seuraavasti:


.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}

Jossa numero 2 .wpDataTable2:ssa on taulukosi tunnus, joten sinun on vaihdettava se taulukkoasi varten.

Se siitä!

Sinulla on nyt taulukon lämpökartta, jossa voit verrata data-arvoja helposti näyttämättä siltä, että luet sopimusta pienellä tekstillä.

Jos se oli helppo ja intuitiivinen tapa luoda lämpökarttoja taulukkoon, katso seuraava osa.

Nyt sinun on näytettävä sivusi käyttöliittymässä. Kuten kaikki muutkin lisäosat, käytämme lyhytkoodeja taulukoiden näyttämiseen käyttäjien sivuilla tai viesteissä. Lyhytkoodien lisääminen on erittäin helppoa, varsinkin jos käytät suosittuja sivujen rakentajia, kuten Elementor, WP Bakery tai Gutenberg.

Taulukon lämpökarttaesimerkkejä

Jos pidit tämän artikkelin lukemisesta lämpökarttataulukon luomisesta wpDataTablesilla, sinun kannattaa tutustua tähän artikkeliin taulukon suunnittelusta.

Kirjoitimme myös muutamista aiheeseen liittyvistä aiheista, kuten DataTables-vaihtoehdoista, JavaScript-taulukkokirjastoista, taulukon luomisesta kyselytaulukosta ja WordPressin hinnoittelutaulukkolaajennuksista.

: wpdatatables.com