TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda reagoivia taulukoita WordPressiin?

5

Uudessa Gutenberg -editorissa on kaunis taulukkolohko taulukoiden lisäämiseksi WordPress -sivustoosi. Taulukko näyttää kauniilta sivustollasi. Voit myös tarjota vaihtoehtoisia värejä (raitoja) riveille ja muuttaa asetuksia kutistamaan sarakkeet sopivaksi. Suurin ongelma on kuitenkin se, että taulukot eivät reagoi mobiililaitteisiin. Mobiililaitteen leveys mahtuu enintään kolmeen tai neljään sarakkeeseen taulukon sisällöstä riippuen. Kun sarakkeita on enemmän, selain katkaisee näytön säiliön leveyteen. Se johtaa tilanteeseen, jossa käyttäjät eivät voi mitenkään tarkastella taulukoidesi piilotettua sisältöä. Siksi Gutenbergin pöytälohko on hyödytön, kun haluat responsiivisia taulukoita sivustollesi.

Responsiivisten taulukoiden luomiseen WordPress -sivustolla on monia ilmaisia ​​ja maksullisia laajennuksia. Suosikkilaajennuksemme on TablePress ja selitämme kuinka luoda reagoivia taulukoita WordPressissä TablePress -laajennuksella.

Miksi TablePress?

  • TablesPress on yksi suosituimmista laajennuksista taulukoiden luomiseen WordPressissä.
  • Kehittäjä tarjoaa käyttäjäystävällisen käyttöliittymän ja ylläpitää taulukkoa jatkuvasti.
  • Löydät hyvän dokumentaation laajennuksen käytöstä.
  • Tärkeintä on, että laajennus on ilmainen. Voit jopa ladata laajennuksia ilmaiseksi, vaikka kehittäjä pyytää lahjoitusta. Tämä on ristiriidassa monien ahneiden kehittäjien kanssa, jotka tekevät ilmaiset ominaisuudet maksulliseen versioon, kun laajennuksesta tulee suosittu.

TablePressin ja lisäosien asentaminen

Voit asentaa ja aktivoida TablePress -laajennuksen WordPress -järjestelmänvalvojan koontinäytöltä muiden laajennusten tapaan. TablePress -oletustaulukot eivät kuitenkaan ole responsiivisia kuin Gutenberg -taulukot. Sinun on asennettava laajennus responsiivisten taulukoiden luomiseksi.

  • Siirry TablePress -responsiivisen laajennuksen sivulle.
  • Lataa Responsiivisten taulukoiden laajennuksen zip -tiedosto
  • Kuten mainittiin, kehittäjä pyytää lahjoitukseksi 9 dollaria tästä laajennuksesta. Suosittelemme vahvasti lahjoittamaan 9 dollaria, jos aiot käyttää laajennusta ensisijaisena resurssina sivustossasi.
  • Palaa WordPress -hallintapaneeliin ja siirry kohtaan "Lisäosat> Lisää uusi".
  • Napsauta "Lataa laajennus" -painiketta. Napsauta "Valitse tiedosto" -painiketta ja valitse aiemmin lataamasi "tablepress-responsive-tables.zip" -tiedosto.
  • Napsauta lopuksi Asenna nyt -painiketta aloittaaksesi laajennuksen asentamisen sivustollesi.
  • Aktivoi laajennus onnistuneen asennuksen jälkeen.

Kuinka luoda reagoivia taulukoita WordPressiin?

Muista ensin asentaa ja aktivoida TablesPress -laajennus ennen kuin yrität asentaa responsiivisten taulukoiden laajennuksen.

Taulukon luominen

TablePress tarjoaa erilaisia ​​tapoja luoda taulukko; Voit viitata aiemman artikkelin laajennusominaisuuteen taulukon luomisesta TablePressillä. Alla on yhteenveto taulukon luomiseen TablePressissä:

  • Siirry "Työkalut> Taulukon painallus> Lisää uusi" -valikkoon ja aloita taulukon luominen ja mukauta asetuksia.
  • Vaihtoehtoisesti voit siirtyä "Tuo" -välilehdelle ja tuoda taulukon ulkoisesta tietolähteestä. Voit esimerkiksi ladata taulukon luomalla Excel -taulukon tiedot.

Kuinka luoda reagoivia taulukoita WordPressiin?

Tallenna muutokset taulukon luomisen jälkeen ja merkitse muistiin taulukon tunnuksen lyhytkoodi.

Taulukon lyhytkoodin lisääminen

Klassisessa editorin käyttöliittymässä oli TablePress -kuvake, jonka avulla voit valita taulukon viestieditorissa. Sinulla ei kuitenkaan ole TablePress -lohkoa Gutenberg -editorissa. Siksi sinun on upotettava taulukon lyhytkoodi manuaalisesti viestiisi tai sivullesi käyttämällä lyhytkoodilohkoa.

TablePress taulukot on taulukon id shortcode muodossa taulukossa id = xxx / sisällä hakasulkeissa. Lisää lyhytkoodilohko ja lisää taulukon tunnuksen lyhytkoodi, kuten olet aiemmin kirjoittanut.

Taulukoiden mukauttaminen

TablePress tarjoaa kolme eri tapaa luoda responsiivisia taulukoita.

  • Vieritä
  • Voltti
  • Romahdus

Koska käytämme TablePress -laajennusta, keskustelemme jokaisesta vaihtoehdosta esimerkkitaulukon avulla.

Responsiivinen vieritystaulukko

Tämä on paras vaihtoehto tehdä taulukosta responsiivinen, kun taulukossa on monia sarakkeita. Se lisää vain vaakasuoran vierityspalkin, jotta käyttäjät voivat pyyhkäistä ja tarkastella sisältöä näytön ulkopuolella. Tässä on esimerkki siitä, miltä responsiivinen vieritystaulukko näyttää.

Responsiivinen kutistustaulukko

Toinen vaihtoehto on reagoiva tiivistystaulukko. Kuten nimi osoittaa, se lisää + -kuvakkeen riveille, jotta käyttäjät voivat napauttaa/napsauttaa nähdäkseen lisätietoja. Laajennuslaajennus siirtää piilotetun taulukon sisällön Näytä / piilota -kuvakkeen alle. Tämä on erittäin hyödyllistä näyttää muutamia tärkeitä sarakkeita ja piilottaa jäljellä olevat tiedot + -painikkeen alle.

Responsiivinen kääntöpöytä

Viimeinen vaihtoehto on kääntö, samanlainen kuin transponointi Microsoft Excelissä. Tämä muuttaa rivin sarakkeiksi ja sarakkeet riveiksi. Voit käyttää kääntöpöytää, jos se sopii taulukon sisältöön. Alla on esimerkki TablePress -laajennuksella luodusta responsiivisesta kääntötaulukosta.

NimiAihe 1Kohde 2Aihe 3Kohde 4Kohde 5Kohde 6Kohde 7Aihe 8Kohde 9Kohde 10Kohde 11Kohde 12Aihe 13
John50607045689878542123437687
Paul8965451232567889neljätoista56985645
David98846589124598653212454375
Ralf65562345785465213564907834
Krauss15564898654578235645875698
Peter45899851656567432376453487
Bing67548976905676809856987654

Aiheeseen liittyviä: Responsiivinen flipbook WordPress -laajennuksen tarkistus.

Responsiivisten taulukoiden kääntäminen tietyillä laitteilla

Normaalisti voit käyttää responsiivista taulukkoa, joka on kohdistettu mobiilikäyttäjille. Tässä tapauksessa riittää, että taulukon lyhytkoodi muutetaan reagoivaksi tilaksi. Taulukoiden testaamiseksi sinun on tarkasteltava taulukoita mobiililaitteella tai käytettävä laitteen vaihtamisvaihtoehtoa Chrome / Firefox / Edge-selaimesi kehittäjätyökalut- osiossa. Jos käytät Safaria Macissa, ota kehitysvalikko käyttöön reagoivaan tilaan.

Jos sinulla on kuitenkin suurempia taulukoita, joissa on monia sarakkeita, saatat joutua käyttämään responsiivista taulukkoa myös työpöydällä tai tablet -laitteilla. Laajennuslaajennus tekee tästä tehtävästä yksinkertaisen lisäämällä katkaisupisteen reagoivaan taulukkoon. Vieritys- ja kutistustilat toimivat kaikilla laitteilla lisäämättä katkaisukohtaa. Käännä tilaa vaihtamalla alla olevaa lyhytkoodia, jotta taulukko mukautuu eri laitteisiin. (muista liittää lyhyet koodit hakasulkeisiin []).

  • table id = 123 responisve = flip responsive_breakpoint = työpöytä /
  • table id = 123 responisve = flip responsive_breakpoint = tablet /
  • table id = 123 responisve = flip responsive_breakpoint = mobile /
  • table id = 123 responisve = käännä responsiivinen_taukopiste = kaikki /

Tässä ovat tarkat mitat katkaisupisteille:

  • Työpöytä – laitteet, joiden leveys on alle 1200 kuvapistettä
  • Tabletti – laitteet, joiden leveys on pienempi kuin 980 kuvapistettä
  • Puhelin – laitteet, joiden leveys on pienempi kuin 768 kuvapistettä
  • Kaikki – lisää reagointikykyä kaikissa laitteissa laitteen koosta riippumatta.

Varoitus sivun nopeudesta

Kuten näette, erityyppisiä responsiivisia taulukoita on helppo lisätä kaikkiin laitteisiin. Ongelma, jonka olemme huomanneet laajennuksen kanssa, on se, että se lisää ylimääräisen CSS -tiedoston kääntötilaan. Suurin osa välimuistilaajennuksista sulkee tämän tyylitaulukon ilman, että niitä yhdistetään muihin CSS -tiedostoihin, ja luo näin varoituksen Google PageSpeed ​​Insightsissa. Lisäksi laajennus lataa tyylit ja komentosarjat kaikille sivustosi sivuille riippumatta siitä, onko sivulla taulukko vai ei. Jos sinulla on vain muutama taulukko, emme suosittele TablePress -laajennuksen käyttöä sivusi nopeuden parantamiseen.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja