Az Excel egy bonyolult táblázat, amelyet egy az egyben megjeleníteni a honlapunkon nem tudunk, de az adatokat át tudjuk emelni a TablePress nevű bővítmény segítségével. A formázás nem marad meg, azt majd újonnan kell megtennünk, de minden adatot áttehetünk egy honlapon is élő táblázatba. Import helyett magában a bővítményben is készíthetünk újonnan kereshető és szűrhető táblázatokat.

Új táblázat illetve kész táblák szerkesztése:

Új táblázat esetén a Vezérlőpult > TablePress főmenüben az Add New Table gombra kell kattintani. A táblázat nevét és leírását kell megadni, illetve megadhatjuk, hogy hány sort és oszlopot szeretnénk a táblázatunkba (az alapbeállítás 5×5). Az „add table” gombra kattintva az üres táblázatba kell az adatokat betölteni (formázásról, további sorok, oszlopok beszúrásáról lejjebb található leírás).  

A már korábban elkészült táblázatok szerkesztése szintén a honlapunkon a Vezérlőpult > Eszközök > Table Press  menüpontra kattintva tehető meg, válasszuk ki a táblázat számát vagy nevét, és rákattintva a lejjebb leírt szerkesztő felület lesz látható. A honlapon, ha be vagyunk lépve, akkor a weboldal megtekintése közben a táblázat alján is található egy „Szerkesztés” link, erre kattintva szintén a táblázat saját szerkesztőfelületéhez jutunk.

Importálás:

1. Az Excel fájlt alakítsuk úgy, hogy egy cellában egy adat legyen, lehetnek üres cellák, de ne legyenek egyesített cellák. Minden formázást a táblázat elveszít, így azzal nem kell foglalkoznunk. A fájlt elmentjük  „mentés másként” segítségével úgy, hogy a fájlnév alatti lenyitható menüpontból (Fájl típusa) kiválasztjuk a CSV (pontosvesszővel tagolt) formátumot, majd az érthetőség kedvéért fájlnévben is jelezzük, hogy „csv” és mentjük a dokumentumot pl. az asztalra.

2. A honlapunkon a Vezérlőpult > Eszközök > TablePress (korábban WP-Table Reloaded) menüpontra kattintunk és ott az Import a Table linket kell kiválasztanunk. Jelölni kell a lenyíló menüben, hogy a fájl típusa CSV. A számítógépünkről ki kell választani a csv fájlt és kattintani az Import table gombra. A táblázatnak érdemes a későbbiekben is érthető, egyértelmű nevet. Minden táblázat kap egy egyedi azonosító számot (id=).

3. Az elkészült táblázat adatai megjelennek nekünk, amelyeket html kódokkal tudjuk szerkeszteni, formázni (a linkre kattintva alapvető html kódokról olvashatunk), és html kód segítségével tudunk a táblázatba adott esetben képet is illeszteni a kép URL-jével a Médiatárból, vagy egyéb webhelyről.  A cellák látható szerkesztő területe növelhető, ha a cella jobb alsó sarkán lévő átlós apró vonalakra kattintunk, majd az egér gombját lenyomva tartva jobbra és lefelé húzzuk a cella sarkát.

A feltöltött táblázatnak adhatunk részletes leírást (Description). A majd megformázott, elkészült táblázatot egy kód segítségével fogjuk az oldalunkba, vagy bejegyzésünkbe illeszteni, amely kód a táblázat ID számát fogja tartalmazni. Az alábbi képen így: [table id=3 /]. A kód elé  és utána is írhatunk magyarázó, leíró szöveget.

Minden változtatást menteni kell az Update changes gomb segítségével.

tablazat1
1. kép a táblázatokról

 

Használjuk ki a bővítmény saját beépített szerkesztési és formázási lehetőségeit is!

 

tablazat2

További formázási lehetőségek (fordítás a kép alatt):

tablazat3

  • Alternating row colors:  (különböző sor színek) Every second row has an alternating background color. (minden második sor más színű)
  • Row Highlighting: (sor kiemelése) Highlight a row by changing its background color while the mouse cursor hovers above it. (ha az egérrel valamely sorra mutatunk, a sor háttér színe megváltozik)
  • Table head: (a táblázat fejléce) The first row of your table is the table head (HTML tags and). (az első sor a táblázat címsora – így félkövér betűvel lesznek a tartalmak automatikusan)
  • Table footer: (a táblázat lábléce) The last row of your table is the table footer (HTML tags and). (az utolsó sor automatikusan a táblázat lábléce lesz)
  • Table Name: (a táblázat neve) The Table Name shall be written ……………… the table (HTML tag). (a táblázat neve a lenyíló menüből kiválasztott helyen jelenjen meg a táblázathoz képest: above – felett, below – alatt) 
  • Table Description: (a táblázat leírása) The Table Description shall be written ………………. the table. (a táblázat leírása a lenyíló menüből kiválasztott helyen jelenjen meg a táblázathoz képest: above – felett, below – alatt) 
  • Cache Table Output: The resulting HTML output of the table shall be cached in the WordPress database cache for faster page generation. (gyorsabb oldalbetöltést tesz lehetővé a böngészőben)
  • Extra CSS Class: (ez további CSS kódolást tesz lehetővé, kérjük, ne használják)
  • Use JavaScript library:  (JavaScript használat, ha kipipáljuk, az alábbi, további beállításokat tehetjük meg )  Yes, use the „DataTables” JavaScript library with this table. You can change further settings for this library below.

JavaScriptes beállítási lehetőségek (érdemes próbálgatni, ellenőrizni, hogy melyik beállítás tűnik a leglogikusabbnak és legfelhasználó barátabbnak)

  • Sorting: (sorba rendezés) Yes, enable sorting of table data by the visitor. (az olvasó maga rendezheti sorba a táblázatot – kicsi nyilakkal)
  • Pagination: (oldalszámozás)Yes, enable pagination (showing only a certain number of rows) of the table by the visitor. Show rows of the table ………..per page. (ha ezt kipipáljuk, akkor a nagyon hosszú táblázat, oldalakká rendeződik, amelyek között az olvasó lapozhat. A változtatható számmal az egy oldalon megjelenítendő sorok számát adhatjuk meg)
  • Length Change: (a hossz változtatása) Yes, allow the visitor to change the number of rows shown when using pagination. (ha ezt kipipáljuk, akkor az olvasó maga állíthatja be, hogy hány sort akar látni az oldalon, a többi sor oldalakba rendezve, lapozással lesz elérhető)
  • Filtering/Search: (szűrés, keresés) Yes, enable the visitor to filter or search the table. Only rows with the search word in them are shown. (a látogató szűrhet, kereshet szavakra, csak a beírt szót tartalmazó sorok lesznek majd olvashatóak)
  • Info Bar: (információs sor) Yes, show the table information display. This shows information and statistics about the currently visible data, including filtering. (ha ezt kipipáljuk, akkor a táblázatról szóló információk is láthatóvá válnak)

Érdemes próbálgatni, ellenőrizni, hogy melyik beállítás tűnik a leglogikusabbnak és legfelhasználóbarátabbnak.