Jak dodawać tabele dynamiczne w WordPressie bez kodu HTML?

Ostatnim razem, gdy próbowałem dodać tabelę do mojego bloga WordPress, skończyłem na złomowaniu całej rzeczy i zamiast tego używałem listy punktowanej.

Brzmi znajomo?

Tak wiele oszałamiających motywów WordPress ma możliwość tworzenia świetnie wyglądających tabel. I oczywiście, początkowo mogą wyglądać dobrze, ale niewiele można z nimi zrobić.

Chcesz filtrować dane? Nie.

Chcesz, aby stół był responsywny na urządzeniach mobilnych? Nie.

Chcesz zaimportować dane z pliku CSV? Nie ma szansy.

Oto dobra wiadomość:

Dzięki odpowiedniej wtyczce możesz tworzyć wysoce funkcjonalne tabele dynamiczne. To coś, co pozwala wyświetlać dane, które można filtrować.

Wraz z wykresami i wszelkiego rodzaju.

Brzmi dobrze? Przyjrzyjmy się, jak można to zrobić za pomocą wpDataTables.

Notatka: Chociaż ten samouczek koncentruje się na tabelach interaktywnych, nasz samouczek dotyczący tworzenia responsywnych tabel mobilnych za pomocą wpDataTables może okazać się przydatny. Kliknij tutaj, aby to sprawdzić. Ten nowy samouczek uwzględnia zaktualizowany interfejs użytkownika i dodatkowe funkcje wydane niedawno w wpDataTables.

Ta wtyczka pozwala tworzyć piękne tabele bez znajomości HTML

wpDataTables to wysokiej jakości wtyczka WordPress, która sprawia, że ​​proces tworzenia i publikowania tabel w Twojej witrynie jest dziecinnie prosty. Jest lekki, intuicyjny i wykonuje pracę w ciągu kilku minut, dzięki czemu masz mniej kodu do przebrnięcia i więcej czasu na blogowanie.

Jednym z kluczowych punktów tej wtyczki jest to, że nie potrzebujesz żadnej wcześniejszej wiedzy na temat HTML , aby ją uruchomić. Wszystko odbywa się na łatwej w użyciu stronie ustawień. Aby opublikować, wystarczy skopiować i wkleić krótki kod i gotowe.

Dla blogerów i firm to świetna wiadomość, ponieważ pozwala wyświetlać wiele danych w zwięzły i łatwy do przyswojenia sposób.

Możesz go nawet użyć do:

• Katalog produktów
• Tabele porównawcze produktów
• Cennik
• Zbieranie danych od użytkowników
• Wyniki sportowe
• Śledzenie postępów w przypadku wszystkiego, co dotyczy liczb (np. Raport dochodów z bloga)

Możliwości są nieskończone.

Tworzenie tabeli od początku do końca: przewodnik krok po kroku

Korzystanie z wtyczki wpDataTables do tworzenia pięknych, przejrzystych i w pełni funkcjonalnych tabel w witrynie WordPress jest proste.

Oto jak zacząć:

Krok 1 – Przygotuj plik

Poniżej stworzyłem przykładowy dokument Excel dla kilku losowych wydatków. Obejmuje to kilka kolumn, takich jak data, metoda płatności i koszt.

Upewnij się, że Twoje dane są wyświetlane w podobny sposób, w przeciwnym razie wtyczka będzie miała trudności ze zdefiniowaniem kolumn w Twojej tabeli.

Krok 2 – Utwórz nową tabelę

Przejdź do wpDataTables po lewej stronie pulpitu nawigacyjnego WordPress.

Kliknięcie tego linku przeniesie Cię do powyższego ekranu. Tutaj utworzysz i dodasz nową tabelę:

Po kliknięciu przycisku „Dodaj nowy” zobaczysz ten ekran. W tym miejscu zaczniesz ustawiać parametry swojego stołu, aby działał i wyglądał tak, jak chcesz:

Krok 3 – Zdefiniuj funkcje stołu

W pierwszych trzech sekcjach strony konfiguracji stołu możesz wykonać następujące czynności:

• Utwórz tytuł
• Wybierz, czy chcesz wyświetlać tytuł tabeli na stronie
• Wybierz typ źródła wejściowego dla swojej tabeli

To są twoje najbardziej podstawowe ustawienia stołu.

Kliknij „Prześlij plik” i wyszukaj swój dokument. Tabele, które możesz tworzyć, mogą być tak skomplikowane, jak tego potrzebujesz.

Jak widać, nadałem swojej tabeli odpowiedni tytuł, wybrałem typ pliku Excel z listy rozwijanej i przesłałem plik do WordPressa.

W dalszej części strony znajdziesz dalsze ustawienia umożliwiające dostosowanie tabeli:

To są:

• Responsywne – Pozwala na wyświetlanie Twojego stołu w inny sposób na komputerach stacjonarnych, tabletach i telefonach komórkowych
• Przewijalny – umożliwia przewijanie stołu w poziomie
• Ukryj tabelę, dopóki strona nie zostanie całkowicie załadowana – Przydatne w przypadku powolnego ładowania stron
• Zaawansowane filtrowanie – do wyświetlania filtra pod każdą kolumną
• Filtruj w formularzu – dla filtra w samym formularzu
• Narzędzia tabel — w przypadku opcji takich jak kopiowanie, zapisywanie w programie Excel i zapisywanie w pliku CSV osadzonym w formularzu
• Włącz sortowanie – umożliwia sortowanie tabel
• Ogranicz układ tabeli – Ogranicz szerokość tabeli do 100% kontenera nadrzędnego
• Długość wyświetlania — Określ, ile wpisów ma być wyświetlanych na stronie

Klikając „Podgląd”, możesz wyświetlić swój stół i zmienić dowolne ustawienia, które uważasz za konieczne, aby wyglądał tak, jak tego potrzebujesz.

Po wybraniu opcji, które najlepiej pasują do typu tabeli, którą chcesz wyświetlić, nadszedł czas, aby kliknąć przycisk „zapisz”.

Jeśli chcesz jeszcze bardziej dostosować swoje kolumny, po kliknięciu „zapisz”, będziesz mógł przewinąć stronę dalej, aby uzyskać więcej opcji. Domyślne ustawienia są generowane automatycznie, jednak dzięki temu możesz zmienić kolor każdej kolumny, kolumnę i typ filtra (taki jak data, godzina i tekst).

Poniżej dodałem trochę kolorów i edytowałem typy kolumn do tekstu, liczby i ciągu.

Krok 4 – Zapisz i skopiuj shortcode

Po zapisaniu tabeli kliknij „Zamknij”, a zostaniesz przekierowany z powrotem na stronę główną wtyczki. Powinieneś teraz zobaczyć swoją tabelę, którą utworzyłeś, tytuł i typ tabeli, skrócony kod do wprowadzenia do posta lub strony oraz opcję jego zduplikowania.

Chcę wyświetlić tę tabelę na stronie, dlatego musiałbym skopiować krótki kod, a następnie przejść do strony, którą chcę edytować.

Krok 5 – Dodaj shortcode do posta lub strony

Aby dodać tabelę do strony, wystarczy wkleić swój krótki kod do edytora stron. Wybierz, gdzie na stronie chcesz wyświetlić tabelę, wklej kod i kontynuuj tworzenie treści:

Krok 6 – Opublikuj

Po kliknięciu przycisku publikowania na stronie Twoja tabela powinna wyglądać mniej więcej tak. Jak widać, jest przejrzysty, spójny, idealnie dopasowany i przechowuje wszystkie moje dane w łatwy w nawigacji sposób:

Opcje u góry tabeli pozwolą użytkownikom eksportować zawartość tabeli w różnych formatach. Możesz także łatwo filtrować wyniki w interfejsie witryny.

Jakie inne stoły możesz stworzyć?

Nie jesteś jednak ograniczony tylko do prostych tabel opartych na CSV. Tabele danych WP mogą wyświetlać szeroki zakres danych w wielu formatach.

Oto przykład w pełni działającej, responsywnej i edytowalnej tabeli z wieloma kolumnami i opcjami.

Ta tabela jest oparta na MySQL z filtrami do sortowania zawartości w zależności od potrzeb użytkownika:

Ta tablica oparta na tablicy PHP jest serializowana i zawiera obrazy – dodaje to zupełnie inną dynamikę i funkcjonalność, które wiele sklepów e-commerce uznałoby za szczególnie przydatne:

Nie jesteś ograniczony tylko do plików CSV. WP Data Tables umożliwia również korzystanie z plików opartych na Excelu, umożliwiając korzystanie z wielu specyficznych funkcji, które są z nim związane:

Inne funkcje wpDataTable, o których warto wspomnieć

• Kreator wpDataChart — umożliwia przekształcenie danych w wykres lub wykres w kilku prostych krokach. Obecnie obsługuje 3 silniki renderujące – Google Charts, Highcharts i Chart.js. Więcej dokumentacji znajdziesz tutaj.
• Formatowanie warunkowe — umożliwia wyróżnianie komórek, wierszy i kolumn na podstawie ich zawartości. Jest to przydatne zwłaszcza, jeśli tabela jest całkowicie numeryczna. Więcej dokumentacji znajdziesz tutaj.
• Kolumny formuł — umożliwia dodanie kolumny, której można użyć do obliczenia liczby na podstawie liczb podanych w innych komórkach. Więcej dokumentacji znajdziesz tutaj.
• Kolumny daty i godziny — używane dla komórek, które zawierają zarówno daty, jak i godziny. Pojawią się automatycznie w formacie ustawionym na stronie ustawień. Więcej dokumentacji znajdziesz tutaj.
• Wiersz Sum/Totals — Używany w przypadku kolumn liczbowych, umożliwia obliczenie sumy wszystkich wartości. Więcej dokumentacji znajdziesz tutaj.
• Report Builder — jest dodatkiem do wpDataTables. Report Builder natychmiast tworzy dokumenty i arkusze kalkulacyjne, wypełniając szablony rzeczywistymi danymi z witryny WordPress. Więcej dokumentacji znajdziesz tutaj.
• Tabele Master-Detail – to dodatek do wpDataTables, który pozwala Tobie i odwiedzającym Twoją witrynę zobaczyć szczegóły dla każdego wiersza za pomocą jednego kliknięcia. Więcej dokumentacji znajdziesz tutaj.

Końcowe przemyślenia

Tabele to świetny sposób na wyświetlanie danych. A kiedy dodasz dynamiczne funkcje, takie jak filtrowanie, znacznie poprawisz sytuację dla odwiedzających Twoją witrynę.

Przeprowadziłem Cię przez proces tworzenia dynamicznej tabeli w WordPressie, przesyłając dane z programu Microsoft Excel (lub używając dowolnego innego narzędzia do arkuszy kalkulacyjnych). Ale jest o wiele więcej możliwości.

Możesz nawet zamienić dowolne tabele w wykresy lub wykresy i nie tylko.

Teraz nadszedł czas, aby zacząć przy własnym stole – ciesz się!

Powiązana lektura: 5 potężnych i responsywnych wtyczek tabel mobilnych dla WordPress.

Ujawnienie: Ten post jest sponsorowany, ale nasze opinie są nasze.