Jak tworzyć zaawansowane tabele HTML w WordPress bez kodowania?

WordPress pozostaje najpopularniejszą platformą CMS na świecie z 43% udziałem w całej sieci. Chociaż bez wątpienia jest to jedna z najbardziej atrakcyjnych funkcji, WordPress niekoniecznie jest najlepszą platformą, jeśli chodzi o tworzenie tabel HTML bez kodowania.

Chociaż wiele osób uważa, że ​​tabele HTML są przestarzałe, nadal oferują one doskonałą wartość dla odbiorców. W rezultacie większość użytkowników musiała zatrudnić ekspertów do konkretnego zadania „tylko dla programistów”. Biorąc pod uwagę cel, było to wtedy duże rozczarowanie dla użytkowników WordPressa.

Gutenberg: domyślny edytor WordPressa z blokiem tabeli

Podczas Europe WordCamp, które odbyły się w lipcu 2017 r., założyciel WordPressa Matt Mullenweg ogłosił, że edytor bloków Gutenberga będzie przyszłym edytorem WordPressa. Ku uciesze wielu użytkowników WordPressa, nowy edytor obiecał zawierać wbudowany blok tabeli.

Jednak kiedy Gutenberg pojawił się z WordPress 5.0, edytor został skrytykowany za powodowanie problemów z reakcją i optymalizacją na różnych urządzeniach. Niemniej jednak, zgodnie z obietnicą, edytor miał wbudowany blok tabeli, umożliwiający użytkownikom tworzenie tabel na swojej stronie internetowej bez konieczności kodowania.

Chociaż blok tabeli Gutenberga jest całkiem przydatną opcją do tworzenia tabel HTML na WordPressie, był daleko od stania się skutecznym rozwiązaniem do tworzenia tabel. Nie oferuje najatrakcyjniejszego wyglądu, nie nadaje się do wielokrotnego użytku i nie radzi sobie z ogromnymi bazami danych.

Gutenberg to tylko zwykły budowniczy stołów. Nie można używać Gutenberga do zaawansowanych funkcji tabel HTML, takich jak sortowanie tabel, filtrowanie lub stylizowanie. Podsumowując, edytor bloków Gutenberga jest daleki od stania się jakimkolwiek zaawansowanym konstruktorem tabel.

Dlatego też programiści korzystający z darmowego WordPressa, tacy jak my, WPManageNinja, musieli stworzyć wtyczkę, która dodaje zaawansowane funkcje tabel do pulpitu nawigacyjnego.

Ninja Tables: zaawansowana wtyczka WordPress do tabeli HTML

Jeszcze przed ogłoszeniem Gutenberga nasi programiści z WPManageNinja pracowali bez wytchnienia, aby wymyślić niezawodną wtyczkę do tabel WordPress, która pozwoliłaby użytkownikom tworzyć tabele bez żadnych kłopotów.

27 lutego 2018 r. udostępniliśmy tabele Ninja w sklepie z wtyczkami do WordPressa i zajęło to zaledwie kilka miesięcy, aby Ninja Tabes trafiły do ​​ponad 30000 aktywnych instalacji! Niesamowite wsparcie i uznanie naszych użytkowników zmotywowało nas również do wydania ponad 45 aktualizacji wtyczek w mniej niż 2,5 roku od pierwszego wydania, dzięki czemu Ninja Tables jest wtyczką stołową WordPress numer jeden w tym procesie!

Dzięki dynamicznym funkcjom i przyjaznemu interfejsowi, Ninja Tables jest teraz używane przez ponad 70 000 stron internetowych i firm.

Ninja Tables to wtyczka do wizualizacji danych, która umożliwia tworzenie szerokiej gamy tabel do prezentacji w witrynie. Szybkość reakcji, funkcje, funkcja dostosowywania i integracje z innymi firmami sprawiają, że jest to najlepszy wybór, jeśli chodzi o przeniesienie tych trudnych do wyciągnięcia zaawansowanych tabel HTML do witryny WordPress.

Przyjrzyjmy się teraz najbardziej zaawansowanym funkcjom tworzenia i dostosowywania tabel HTML w tabelach Ninja.

• Interfejs użytkownika
• Edytor tabeli
• Integracje

Interfejs użytkownika

Po aktywacji Tabele Ninja można znaleźć na pasku bocznym pulpitu WordPress. Podobnie jak większość wtyczek WordPress, Ninja Table oferuje interfejs użytkownika z kilkoma funkcjami. Dowiedzmy się o tym więcej!

• Wszystkie karty
• Narzędzia i ustawienia
• Pomoc i dokumentacja

Strona główna/Wszystkie stoły

Ninja Tables Home ma atrakcyjny interfejs ze świeżymi ofertami. Zapewnia dwa przyciski, jeden do tworzenia i jeden do importowania.

Przycisk Utwórz swoją pierwszą tabelę przeniesie Cię do ręcznego kreatora tabel WordPress, podczas gdy możesz również zaimportować z CSV.

Jeśli zdecydujesz się utworzyć tabelę od podstaw, zostaniesz poproszony o podanie tytułu i opisu w wyskakującym okienku. Możesz również zauważyć kilka innych zakładek, oferujących różne funkcje importu i integracji. Jednak darmowa wersja Ninja Tables pozwala tylko na importowanie przez CSV lub JSON i integrację z WP Fluent Forms.

Po podaniu tytułu i opisu kliknij przycisk Dodaj , aby uzyskać dostęp do konstruktora tabel. Jeśli go nie potrzebujesz, możesz pominąć pole opisu.

Funkcja importu również działa w ten sam sposób. Pozwala wybrać plik Excela lub dowolny inny plik CSV, który utworzyłeś na swoim komputerze, aby przesłać go do swojej witryny.

Tak czy inaczej, trafisz do edytora tabel. Zwróć uwagę, że Twoje utworzone tabele są wielokrotnego użytku i pojawią się w oknie głównym. Tabele Ninja identyfikują tabele za pomocą skrótów. Aby użyć tabeli w poście lub na stronie swojej witryny, wystarczy skopiować i wkleić krótki kod tabeli na swojej stronie lub poście.

Narzędzia i ustawienia

Oprócz karty Strona główna , Tabela Ninja zawiera również kartę Narzędzia i ustawienia , która umożliwia użytkownikom importowanie, modyfikowanie wyglądu globalnego , ustawianie uprawnień użytkownika i zmianę ustawień globalnych.

Narzędzie do importowania jest odpowiednie, jeśli korzystasz już z innej popularnej wtyczki tabeli i przełączyłeś się na tabelę Ninja. Ninja Table ma funkcję importowania tabel jednym kliknięciem dla TablePress, Ultimate Tables i Data Tables Generator firmy Supsystic. Na tej karcie możesz również importować pliki CSV.

Następnie zakładka Global Appearance umożliwia zmianę stylów tabeli. Stoły Ninja mogą improwizować Twoje stoły przy użyciu trzech różnych stylów interfejsu użytkownika. Możesz także dostosować każdy styl zgodnie ze swoimi preferencjami i zdecydować, czy zezwolić odwiedzającym na wyszukiwanie i filtrowanie Twoich tabel. Jednak reguły wyglądu można również modyfikować osobno dla każdej tabeli.

Niestety, nie możesz ustawić uprawnień dla różnych użytkowników zaplecza, chyba że masz wersję Ninja Tables pro. Pozostała karta pozwala wybrać sposób obsługi błędów JavaScript i wyczyścić pamięć podręczną tabeli .

Pomoc i dokumentacja

Szeroka gama funkcji Stolików Ninja wymaga rzetelnej dokumentacji, a nasz zespół przygotował wszystko, co musisz wiedzieć o Stołach Ninja.

Nasz interfejs pomocy i dokumentacji oferuje dobrze udokumentowany podręcznik użytkownika , który pozwala dogłębnie zrozumieć, co potrafią Tabele Ninja. A jeśli nadal napotykasz jakiekolwiek problemy, zawsze możesz skontaktować się z nami, przesyłając zgłoszenie do pomocy technicznej!

Teraz, gdy dowiedziałeś się o interfejsie użytkownika, na pewno będziesz chciał stworzyć stół! Więc wróć do domu i zacznij go tworzyć!

Edytor tabeli

Edytor tabel to jedna z najbardziej ekscytujących rzeczy w Ninja Tables. Zwiększa się dzięki niektórym z najbardziej zaawansowanych funkcji konstruktora tabel HTML, a także dostosowywaniu. Po kliknięciu przycisku Dodaj lub Importuj zostaniesz przeniesiony do dobrze zaokrąglonego edytora tabel Ninja Tables.

Interfejs konstruktora tabel Ninja Tables składa się z sekcji wyświetlonych powyżej. Każda sekcja kreatora tabel ma wiele funkcji dostosowywania do tworzenia i projektowania pięknych tabel HTML WordPress.

Możesz zmienić tytuł i opis tabeli oraz ustawić tytuł tabeli , klikając przycisk Edytuj na górze. Ponadto interfejs konstruktora tabel Ninja Tables umożliwia również podgląd tabeli w dowolnym momencie.

• Wiersze tabeli
• Konfiguracja
• Projekt
• Edycja frontendu
• niestandardowe CSS
• Import Eksport

Omówmy kolejno funkcje konstruktora tabel.

Wiersze tabeli

Wiersze tabel to jeden z podstawowych aspektów każdego kreatora tabel HTML na WordPress. Jak mówi, możesz zacząć, klikając przycisk Dodaj kolumnę !

Przycisk otworzy okno tworzenia kolumny, które zapewnia niektóre z najbardziej zaawansowanych funkcji tabel HTML w WordPress. Ninja Tables to nie tylko podstawowy kreator tabel z przeciętnymi możliwościami tworzenia kolumn; to o wiele więcej.

Możesz więc napisać tytuł kolumny, ale możesz także ustawić typ danych i elastyczne punkty przerwania (responsywny punkt przerwania pozwala wybrać, czy chcesz wyświetlać kolumnę na określonych urządzeniach) .

Jednak darmowa wersja ogranicza pole Wybierz, obraz i przesyłanie plików i nie pozwala na tworzenie przycisków. Mimo to wtyczka jest wzbogacona o niesamowite funkcje dodawania danych, takie jak pole HTML , wartość liczbowa i pole daty .

A jeśli nadal szukasz większej kontroli nad kolumnami tabeli, możesz odblokować Ustawienia zaawansowane , Ustawienia warunkowe i Wartość przekształcenia dostępne na innych kartach dostosowywania kolumn. Zapoznaj się z dokumentacją Ninja Tables, aby uzyskać więcej informacji na temat ich działania.

Po dodaniu kolumn tabeli w edytorze pojawi się przycisk Dodaj dane . Umożliwia bezproblemowe dodawanie danych do Twojej witryny. Możesz dostosować kolumny osobno, klikając ikonę koła zębatego obok nagłówka kolumny i edytować, duplikować lub usuwać dane w dowolnym momencie!

Wreszcie, sekcja wierszy tabeli pozwoli Ci również na wykonywanie działań zbiorczych lub ustawienie widoku kompaktowego , jeśli Twoja tabela składa się z wielu danych.

Konfiguracja stołu

Karta Konfiguracja tabeli umożliwia organizację kolumn metodą „przeciągnij i upuść”. Ogólnie rzecz biorąc, tabel HTML nie można organizować w WordPress po ich utworzeniu.

W związku z tym Ninja Tables nie ograniczają organizacji stołów. Wiersze tabeli można organizować przez przeciąganie i upuszczanie, a także można tworzyć nowe kolumny lub edytować istniejące.

Kolejna zakładka na zakładce konfiguracji tabeli pozwala wybrać Ustawienia renderowania , tj. w jaki sposób chcesz, aby Twoje tabele były renderowane przez przeglądarki. Domyślnie twoje tabele będą renderowane z ustawieniami Ajax Table . Ta funkcja umożliwia włączanie ogromnych baz danych bez szkody dla szybkości witryny.

Chociaż istnieją dwie opcje renderowania, nie możesz wybrać zaawansowanych ustawień tabeli , chyba że masz wersję pro. Zaawansowana tabela może zawierać niektóre z najbardziej zaawansowanych pól tabeli, w tym marginesy komórek i skróty, i jest odpowiednia do optymalizacji SEO.

Filtry niestandardowe to przydatna funkcja, jeśli chcesz umieścić w tabeli przycisk opcji, pole wyboru, selektor daty lub różne inne wyspecjalizowane interfejsy użytkownika. Mogą one zapewnić doskonałe funkcje optymalizacji konwersji, jeśli wyświetlasz produkty lub dodajesz więcej danych w komórkach tabeli. Jednak niestandardowy filtr jest również funkcją pro.

Konfiguracja przycisków umożliwia dołączenie przycisku Drukuj lub importu CSV (funkcja Pro). Ustawienia języka są przydatne, jeśli chcesz użyć innego języka paska wyszukiwania tabeli, symbolu zastępczego wyszukiwania lub nagłówka listy rozwijanej wyszukiwania.

Projekt stołu

Projekt stołu Ninja Tables jest niesamowitym dostosowaniem wizualnym. Zawiera trzy biblioteki stylów z maksymalnie dziewięcioma funkcjami dostosowywania stylu, co zapewnia maksymalną kontrolę wizualną nad tabelami HTML w WordPress.

Oprócz stylu możesz również wybrać, czy chcesz wyświetlać tytuł tabeli, opis, pasek wyszukiwania, filtr kolumn, wiersz nagłówka, obramowanie itp. Co więcej, możesz ustawić urządzenia docelowe, włączając opcję Stackable Table Configuration , aby się nie zepsuły na dowolnym urządzeniu.

Styl odgrywa znaczącą rolę w atrakcyjności wizualnej stołu. Jednak najbardziej liczy się kolor. Stoły Ninja oferują pełną personalizację kolorów w zakładce kolorów stołu. Możesz dostosować wszystko, od koloru nagłówka tabeli po obramowanie tabeli, i nie ma ograniczeń dotyczących dozwolonych kolorów.

A jeśli nie możesz zdecydować się na dostosowanie kolorów, Ninja Table zawiera trzynaście predefiniowanych schematów kolorów dla twoich stołów! Ta niesamowita funkcja wymaga jednak wersji premium.

Pozostała karta projektu tabeli zawiera różne funkcje dostosowywania, takie jak paginacja, pozycja paska wyszukiwania, metoda sortowania, a także możesz dodać dodatkową klasę CSS do projektu tabeli.

Edycja frontendu

Edycja frontendu to kolejny przykładowy powód, dla którego Ninja Tables to coś więcej niż wtyczka do tabel. Pozwala na włączenie edycji dla użytkownika front-end. Na przykład, jeśli chcesz, aby użytkownicy wypełnili dane tabeli, możesz ułatwić edycję frontendu. Jednak funkcja edycji frontendu jest dostępna tylko w wersji premium.

Niestandardowy CSS/JS

Niestandardowy CSS pozwala kontrolować wygląd HTML na WordPress, a w przypadku wtyczki daje kontrolę nad tabelami. Chociaż artykuł jest przeznaczony dla osób niebędących programistami, znajomość CSS i Javascript może zapewnić kompleksową kontrolę nad wyglądem tabel Ninja.

Import Eksport

Ponownie, funkcja Importuj pozwala zaimportować plik CSV lub zastąpić istniejącą tabelę za pomocą CSV. Z drugiej strony funkcja eksportu pozwoli Ci zapisać tabelę w pliku CSV.

Integracje

Ninja Tables zawiera wszystkie niezbędne narzędzia i funkcje do bezproblemowego tworzenia tabel HTML na WordPress. Ale uprawnienia nie ograniczają się do budowania stołu. To coś więcej niż wtyczka do tabel i zawiera kilka niesamowitych integracji. Z których wszystkie oferują wspaniałe udogodnienia!

• Integracja z Fluent Forms
• Posty WP
• WooCommerce
• Arkusze Google
• Tabele ninja

Płynna integracja formularzy

Jako właściciel witryny prawdopodobnie używasz wtyczki formularza w swojej witrynie. Co by było, gdybyś chciał przenieść wpisy formularza do tabeli? Tabele Ninja umożliwiają tworzenie i wyświetlanie tabeli wpisów formularzy bez konieczności robienia czegokolwiek poza konfiguracją tabeli.

WP Fluent Forms jest obecnie najlepszą na świecie wtyczką do formularzy kontaktowych, a jeśli korzystasz z wtyczki do zbierania danych od swoich odbiorców, możesz umieścić ją w swoich tabelach WordPress bez konieczności robienia wielu rzeczy.

Integracja WP Posts

Ninja Tables nie tylko przenosi wpisy formularza kontaktowego do tabel. Za pomocą kilku kliknięć może również uporządkować wszystkie Twoje posty, produkty, strony i wiele innych w tabeli. Jeśli chcesz kategoryzować swoje posty lub produkty, integracja tabel Ninja WP Posts może znacznie zminimalizować Twoją pracę.

Integracja z WooCommerce

WooCommerce to najpopularniejsza wtyczka sklepu WordPress. Jednak ogromna liczba osób korzystających z WooCommerce oznacza również, że wiele z nich oferuje takie same wrażenia użytkownika. Ninja Tables z integracją WooCommerce to legendarna wtyczka, która może oferować różnorodność w Twojej witrynie i skuteczność na Twoim zapleczu. Zwiększa współczynniki konwersji, jednocześnie umożliwiając najprostsze zarządzanie sklepem WooCommerce! Stoły Ninja to tylko to, czego potrzebujesz do zarządzania sklepem WooCommerce.

Integracja Arkuszy Google

To niesamowite, co Ninja Tables skrywa pod swoimi rękawami! Tak myślisz, prawda?

Być może Arkusze Google są jedną z najlepszych opcji integracji, jakie może zaoferować każda wtyczka WordPress. Arkusz Google to najpopularniejszy arkusz kalkulacyjny online z najprostszymi funkcjami. Aplikacja internetowa ma absolutnie światowej klasy funkcje, a co ważniejsze, jest dostępna z każdego urządzenia!

Tabele Ninja mogą łączyć się z dowolnymi arkuszami Google i wyświetlać ich dane w Twojej witrynie podczas aktualizacji arkusza. Więc jeśli potrzebujesz aktualizować swoje tabele w podróży, integracja arkuszy Google Ninja Tables to absolutna klasa mistrzowska!

Integracja z Ninja Charts

Tabele pracują z danymi. Zależymy od tabel WordPress, ponieważ pokazują nam dane statystyczne. Czasami jednak musimy wykazać się kreatywnością i odkryć graficzne sposoby ich pokazania. Integracja Ninja Charts to idealne rozwiązanie do tworzenia wizualnej prezentacji danych tabeli. Chcesz zobaczyć, co możesz z tym zrobić? Sprawdź wideo!

Zawijanie

Dzięki tabelom Ninja, trudności związane z tworzeniem zaawansowanych tabel HTML na WordPressie wreszcie dobiegły końca! Jest to kompleksowe rozwiązanie dla wszystkich użytkowników WordPressa, którzy muszą wyświetlać piękne tabele danych, jednocześnie porzucając kody HTML.

Tak więc twórz stoły, zwiększ zaangażowanie, popraw konwersję i rób więcej niż budowanie stołów za pomocą tabel Ninja.

To wszystko na dzisiaj. Życzę Ci wszystkiego najlepszego.

Współautor: Nusrat Fariha

Nusrat jest kreatywnym autorem treści w WPManageNinja, który uwielbia pracować nad różnymi tematami. A kiedy nie pisze, prawdopodobnie czyta swoje ulubione książki!