TablePress -laajennuksen opetusohjelma WordPress -käyttäjille

Edellisessä artikkelissamme olemme nähneet kuinka lisätä taulukoita WordPress -sivustolle eri menetelmillä. Gutenbergin lohkoeditorissa on sisäänrakennettu taulukkolohko, joka tekee lisälaajennuksen käytön vanhentuneeksi. TablePress on kuitenkin yksi laajennuksista, joiden avulla käyttäjät voivat helposti lisätä houkuttelevan taulukon WordPress -sivustoon. Tässä artikkelissa tarkastellaan TablePress -laajennuksen ominaisuuksia ja käyttöä.

Opi WordPress: Tutustu yli 400 ilmaiseen WordPress -opetusohjelmaan.

Miksi TablePress -laajennus?

Siirry WordPressin hallintapaneelin "Lisäosat> Lisää uusi" -vaihtoehtoon ja etsi avainsana "Taulukko". Löydät tuhansia laajennuksia erityyppisten taulukoiden luomiseen ja "tablepress" etsiminen näyttää TablePress -laajennuksen ensimmäisellä sivulla.

WordPress TablePress -laajennus

• Se on täydellinen ilmainen lisäosa kirjailija Tobias Bäthgeltä. Vaikka laajennuksia tarjotaan erillisinä premium -laajennuksina, ei ole häiritseviä bannereita tai linkkejä, jotka pyytävät sinua päivittämään kojelaudalta.
• 800 000+ aktiivista asennusta ja viiden tähden luokitus lähes 4K -käyttäjiltä ei voi olla väärä tuomio.
• Ihmisarvoinen dokumentaatio ja erittäin hyvä tuki foorumilla.
• Luo yhtenäisen näköisiä taulukoita sivuston kautta ja muokkaa myös minkä tahansa taulukon ulkoasua mukautetun CSS: n avulla.

TablePress -laajennuksen ominaisuudet

Laajennuksessa on seuraavat ominaisuudet, jotka riittävät luomaan taulukoita useimpiin yleisiin tarkoituksiin:

• Taulukoita voidaan luoda ja upottaa mihin tahansa sivustosi sivulle lyhytkoodina.
• Tuo taulukot Microsoft Excelistä XLS-, XLSX- ja CSV -muodossa. Tuonti on mahdollista myös manuaalisesti kopioimalla ja JSON/HTML -muodossa.
• Taulukot voidaan viedä CSV-, JSON- ja HTML -muodossa.
• Taulukon lyhytkoodin lisääminen suoraan visuaaliseen editoriin.
• Yksittäisiä taulukoita voidaan mukauttaa mukautetulla CSS: llä.
• Monimutkaiset tietotaulukot, joissa on hakukenttä, sivutus ja suodatus, voidaan luoda helposti.

Kuinka käyttää TablePress -laajennusta?

Asenna ja aktivoi laajennus nähdäksesi yllä olevan valikon, joka on luotu seuraavasti:

TablePress Plugin Menu -vaihtoehdot

TablePress -valikon sijaintia voidaan muuttaa "Plugin Options” -osiossa.

Laajennuksessa on seuraavat osat:

• Kaikki taulukot – näyttää luettelon kaikista luoduista taulukoista.
• Lisää uusi – mahdollistaa uuden taulukon luomisen.
• Tuo – tarjoaa useita vaihtoehtoja yksittäisten ja useiden taulukoiden tuontiin.
• Vienti – tarjoaa useita vaihtoehtoja yksittäisten ja useiden taulukoiden viemiseen.
• Lisäosavaihtoehto – yksittäisiä taulukoita voidaan mukauttaa CSS: n avulla tässä osiossa.
• Tietoja – näyttää laajennuksen tiedot ja muut tiedot.

WordPress TablePress -laajennuksen asetukset

Taulukon luominen TablePressissä

Siirry "Lisää uusi" -välilehdelle, jossa voit syöttää perustiedot, kuten taulukon nimen, lyhyen kuvauksen ja valita taulukon sarakkeiden ja rivien määrän.

Lisää uusi taulukko TablePressiin

Seuraavassa näytössä näkyy paljon vaihtoehtoja useissa osioissa. Voit helposti tutustua näihin vaihtoehtoihin luomalla yhden tai kaksi esimerkkitaulukkoa.

SEO -tarjous: Optimoi sivustosi Semrush Pro -sovelluksen 14 päivän ilmaisella kokeilujaksolla.

Taulukon tiedot -osa

Täällä voit tarkastella perustietoja, jotka kirjoitit luontinäytölle, sekä taulukon lyhytkoodin.

Taulukon tiedot -osa

Taulukon sisältö

Tässä sinun on syötettävä taulukon todellinen sisältö riveihin ja sarakkeisiin. ensimmäistä riviä pidetään oletuksena taulukon otsikkona, jota voit muuttaa taulukon vaihtoehdot -osiossa.

Taulukon sisältö -osa

Taulukon manipulointi

Tämä osio tarjoaa seuraavat ominaisuudet:

• Lisää taulukkoon rivejä ja sarakkeita.
• Piilota, näytä, poista, monista ja lisää rivejä ja sarakkeita.

Taulukon manipulointiosa

• Napsauta "Lisää linkki" -painiketta ja valitse taulukon solu, jos haluat avata oletusarvoisen WordPress -lisälinkin ponnahdusikkunan. Voit myös lisätä linkkejä suoraan käyttämällä HTML -ankkuritunnisteita.
• Napsauta linkkien tapaan "Lisää kuva" ja napsauta solua lisätäksesi kuvia WordPress -mediakirjastosta. Voit myös lisätä kuvia suoraan HTML -img -tunnisteella.
• Edistyneen editorin avulla voit lisätä muotoiltua sisältöä yksinkertaisella editorilla.

TablePress Advanced Editor

• Yhdistä rivin ja sarakkeiden solut rivirivin ja palstan asetuksilla.

Rowspan- ja Colspan -määritteitä ei voi käyttää edistyneissä tietotaulukoissa, joissa käytetään JavaScript -kirjastoa lajitteluun.

Taulukkoasetukset

Tässä voit määrittää ylätunnisteen, alatunnisteen, eri värit vaihtoehtoisille riveille ja korostaa rivin hiiren kohdalla. Voit myös näyttää taulukon nimen ja kuvauksen taulukon ylä- tai alapuolella.

Taulukko Paina Taulukon asetukset

Jos haluat muokata taulukon ulkoasua lisäämällä ylimääräisiä CSS -luokkia, sinun on käytettävä näitä CSS -luokkia teematasolla ja määritettävä tyylejä.

DataTables JavaScript -kirjaston ominaisuudet

Kun olet ottanut taulukon ensimmäisen rivin otsikoksi Taulukkoasetukset -osiossa, taulukko voidaan muuntaa tietotaulukkoksi ottamalla käyttöön tämän osan ominaisuudet.

Tietotaulukoiden luominen TablePressin avulla

• Lajittelu minkä tahansa sarakkeen perusteella vain napsauttamalla saraketta.
• Haku / suodatus – mahdollistaa hakukentän näyttämisen taulukon oikeassa yläkulmassa ja käyttäjät voivat suodattaa tulokset kirjoittamalla avainsanan. Tämä on erittäin hyödyllinen ominaisuus erityisesti silloin, kun sinulla on monia rivejä ja sisältö ei ole näkyvissä sivutuksen vuoksi.
• Sivutus – voit ottaa sivunumeron näyttämään taulukon oikeassa alakulmassa vain tietyt rivit, joissa on "edellinen / seuraava" sivulinkki. Voit myös antaa käyttäjän suodattaa ja tarkastella tiettyjä rivejä.
• Ota käyttöön vaakasuuntainen vieritys, jos taulukossa on monia sarakkeita, ja lisää mukautettuja komentoja, jos tiedät kuinka käyttää kehittyneitä tietotaulukoita.

Kun olet suorittanut asetukset, esikatsele taulukkoa ja tallenna muutokset. Voit myös poistaa, kopioida ja viedä taulukon samasta näytöstä.

Taulukon lisääminen viestiin tai sivulle

Jokaisella TablePressin taulukolla on yksilöllinen tunnus, joka näkyy taulukon tiedot -osiossa. Voit käyttää tätä lyhytkoodina Gutenberg -editorissa tai lisätä taulukon koodin Classic -editoriin käyttämällä TablePress -kuvaketta.

Kaikkien taulukoiden tarkasteleminen

Kaikki TablePressillä luodut taulukot näkyvät kohdassa "TablePress> Kaikki taulukot". Voit suorittaa toimintoja, kuten kopioida, viedä ja poistaa yksittäisiä taulukoita sekä joukko -osia.

Kaikki taulukot -välilehden asetukset

Taulukoiden tuominen

Vaikka pöydän luominen on helppoa näytöllä, se on työläs tehtävä suurille pöydille. Tällaisissa tilanteissa voit luoda taulukoita Excel -laskentataulukolla XLS-, XLSX- tai CSV -muodossa ja tuoda sen WordPress -sivustollesi TablePress -laajennuksen "Tuo" -välilehdellä. Siirry "Tuo" -välilehteen nähdäksesi seuraavat vaihtoehdot:

Tuo taulukkoasetukset TablePressiin

• Tuo lähde voi olla paikallisen tietokoneen tiedostosta, URL -osoitteesta, palvelimessa olevasta tiedostosta tai manuaalisesta syötteestä.
• Lähteen mukaan joko lähetä tiedosto paikallisesta tietokoneestasi tai anna tarvittavat tiedot.
• Valitse tiedostomuoto, jos käytät XLSX: tä, valitse sitten "XLSX -" -vaihtoehto avattavasta valikosta. Vaikka XLSX on edelleen beetavaihtoehto, se toimii täydellisesti kuten testasimme.
• Valitse, haluatko luoda uuden taulukon vai muokata tai liittää olemassa olevan taulukon. Korvaus- ja liittämisvaihtoehtojen valitseminen näyttää avattavan luettelon kaikista olemassa olevista taulukoista, joista voit valita taulukon.
• Napsauta "Tuo" -painiketta ja aloita taulukon tuonti.

Laajennus mahdollistaa useiden taulukoiden tuomisen zip -tiedostona. Jos sinulla on esimerkiksi viisi XLSX -laskentataulukkoa, laita kaikki tiedostot yhteen kansioon ja pakkaa se zip -muodossa. Luo vain viisi taulukkoa lataamalla zip -tiedosto.

Taulukoiden vieminen

Kuten tuonti, kaikki olemassa olevat taulukot voidaan viedä CSV-, JSON- tai HTML -muotoon paikalliseen tietokoneeseen. Lisäksi laajennus mahdollistaa useiden taulukoiden valitsemisen ja viemisen zip -tiedostona.

Taulukoiden vieminen TablePressissä

CSV- ja HTML -tiedostomuodot vievät vain taulukon sisällön, ja JSON -muoto sisältää myös taulukkoasetukset.

Taulukoiden mukauttaminen TablePressissä

Tähän asti olemme nähneet oletusvaihtoehtoja ja "Plugin Options" -välilehdellä voit syöttää mukautetun CSS: n hallitaksesi kaikkia taulukoita tasaisesti tai yksittäisten taulukoiden näyttöä.

Mukautetun CSS: n lisääminen TablePressiin

Alla on tyyliä määrittävät valitsimet:

• .tablepress – kaikissa TablePress -taulukoissa on oltava tämä luokka.
• .tablepress-id-käytetään tietyn taulukon muotoiluun.
• .column-id-käytetään taulukon sarakkeen muotoiluun.
• .row-id-käytetään taulukon rivin muotoiluun.

Alla on esimerkki taulukosta, joka on luotu TablePressilla, oletetaan, että tunnus on 3 ja jotkut mukautustyylit on annettu tämän esimerkin perusteella:

Alla oleva CSS -koodi on lisättävä tekstikenttään kohtaan "Plugin Options> Custom CSS" ja varmista, että valitset vaihtoehdon "Lataa nämä" Custom CSS "-komennot vaikuttaaksesi taulukon muotoiluun".

Muuta toisen sarakkeen leveydeksi 200 pikseliä:

.tablepress-id-3 .column-2 {
width: 200px;
}

Vaihda rivin 2 taustaväri punaiseksi:

.tablepress-id-3 .row-2 td {
Background-color: red;
}

Vaihda vaihtoehtoisten rivien väri:

.tablepress-id-3 .odd td {
background-color: red;
}

.tablepress-id-3 .even td {
background-color: blue;
}

Rivin värin muuttaminen hiirellä:

.tablepress-id-3 .row-hover tr:hover td {
background-color lightgrey;
}

Yleiset ongelmat

TablePressiä käytettäessä havaitsimme muutamia perusongelmia:

• Taulukot reagoivat mobiililaitteilla, jotka voidaan ratkaista asentamalla laajennuslaajennus.
• Taulukoiden lisääminen sivuston alatunnisteeseen tai sivupalkkiin – tämä voidaan ratkaista käyttämällä mallitunnisteita, joiden merkkijono tai taulukko on "$ query". Esimerkiksi alla on esimerkki taulukon tietojen saamiseksi taulukon id = 1:

<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Jos kohtaat muita erityisiä ongelmia sivustossasi, katso foorumilta, onko asia käsitelty, ja tarkista asiakirjat ennen tukikyselyn esittämistä. Huomasimme, että suurin osa ongelmista on käsitelty yhdessä näistä paikoista.

Huomautus: HTML -tunnisteiden lisäämistä taulukon soluihin ei tueta, mutta linkkien lisäämiseen voi käyttää kuvatunnistetta, linkkitunnistetta, edistynyttä editoria ja laajennusta.

TablePress -laajennukset

Vaikka perustarpeet voidaan tyydyttää laajennuksen ilmaisella versiolla, voit ladata lisälaajennuksia TablePress -laajennussivulta taulukoiden ominaisuuksien parantamiseksi. Jälleen panoksena yhteisölle kirjoittaja tarjoaa kaikki laajennukset ilmaiseksi ja nimetä muutamia palkkioina lahjoituspyynnön avulla. Löysimme kaikista laajennuksista Responsiiviset taulukot, joita saatat tarvita, jotta taulukko voidaan näyttää mobiililaitteilla. Jokainen laajennus voidaan ladata ja asentaa lataamalla zip -tiedosto WordPress -hallintapaneelin kautta kohtaan "Lisäosat> Lisää uusi> Lataa laajennus". Voit myös ladata FTP: llä ladatun laajennuskansion "/wp-content/plugins/" -kansioon.

Alla on esimerkki taulukosta, joka on luotu kääntämällä tyylillä responsiivisten taulukoiden laajennuksella.

Responsiivinen kääntöpöytä

TablePress SEO

Tärkein näkökohta taulukoiden luomisessa TablePress -laajennuksella on SEO – taulukot ovat hakukoneystävällisempiä erityisesti Googlessa. Alla on esimerkki Googlen hakutuloksesta, joka näyttää taulukon sisällön houkuttelevammalla tavalla kohteiden kokonaismäärän kanssa:

Taulukko Paina taulukkoa Google -hakutuloksissa

Google näyttää tuloksen taulukon kanssa, jos sivusi saa tarpeeksi liikennettä taulukon sisällön avainsanoille. Vaikka sivun metakuvausta ei näytetä, huomasimme, että taulukkonäkymä houkuttelee enemmän käyttäjiä kuin yksinkertainen teksti.

Yhteenveto

TablePress on ilmainen WordPress -laajennus, jolla voit luoda taulukoita sivustollesi. Voit lisätä taulukot mihin tahansa sivustolle käyttämällä lyhytkoodia. Taulukoista on mahdollista tehdä reagoivia lisäosien avulla.

Plussat

• Ilmaiset ja säännölliset päivitykset
• Yksinkertainen käyttöliittymä
• Kehittyneet tietotaulukot
• Reagoiva matkapuhelimiin

Haittoja

• Taulukon lataaminen vaatii paljon resursseja
• Ei suorituskyvyn optimointia ladata CSS / JS vain sivuille, joissa on taulukoita
• Ei malleja