Język

Napisz do mnie

Wtyczka WordPress · od 2020

TableOn

Pokazuje wpisy WordPress i własne typy wpisów jako sortowalne, filtrowalne tabele budowane w konstruktorze kolumn.

Pierwsze wydanie
Aktywne instalacje
200+
Ocena
4.6 / 5 (15)Czytaj opinie
  • PHP
  • WordPress
  • WP_Query
  • MySQL (własne tabele, dbDelta)
  • JavaScript (klasy ES6)
  • Fetch API
  • AbortController
  • AlaSQL
  • WPML

O mnie

TableOn renderuje wpisy dowolnego typu jako tabelę. Administrator buduje tabele ze zdefiniowanych kolumn (tytuł, miniatura, autor, daty, liczba komentarzy, taksonomie, galeria) oraz z pól post meta, dodaje formularz filtra, predefiniowane podzbiory i skórki, a wynik umieszcza przez shortcode, w oknie popup lub wewnątrz innej strony przez iframe.

Od strony inżynieryjnej to dwie części. Na serwerze jeden publiczny endpoint ajax zamienia definicję tabeli i stan filtra w WP_Query i zwraca wiersze jako JSON. W przeglądarce klasa tabeli bez zależności stronicuje, sortuje i przeszukuje, przez ajax albo na danych już wczytanych, i przełącza się na kompaktowy układ na wąskich ekranach.

Trudne części to zamiana jednej konfigurowalnej definicji tabeli w WP_Query dla dowolnego typu wpisu, typowanie pól meta, które WordPress przechowuje jako ciągi znaków, oraz utrzymanie niezależności kilku tabel z różnymi skórkami i językami na jednej stronie.

TableOn · tabela wpisów

co rozwiązano

AKTYWNYod 2020

Profile kolumn i endpoint zapytań

shipped · 2020

Co to dajePracownicy decydują, które kolumny pokazuje tabela i które wpisy obejmuje, a każdą kolumnę można sortować i filtrować w ten sam sposób.

Problem
Jeden endpoint ajax obsługuje wiersze dla każdej tabeli: dowolny typ wpisu, kolumny meta zdefiniowane przez administratora, filtry, predefiniowane podzbiory i kolejności sortowania. To samo pole musi renderować komórkę, sortować zapytanie i działać jako filtr.
Rozwiązanie

Tabela jest opisana profilem: tablicą kluczy pól, z których każdy ma closures dla wartości komórki, argumentów zapytania i danych widżetu filtra. Żądane kolumny są wyszukiwane w tym profilu po kluczu.

Technologie
  • PHP
  • closures
  • WP_Query
  • filtry WordPress
Zadania · 5
Jedna definicja pola musi sterować komórką, sortowaniem i filtremŻądane pola tylko indeksują profil; każdy klucz przynosi własne closures

TABLEON_Default::action() zwraca profil: dla każdego klucza tytuł, closure 'action' renderujące komórkę, a dla kluczy filtrowalnych get_filter_query_args i get_filter_draw_data. get_table_data() przechodzi po żądanych polach i wywołuje $profile[$field]['action'] tylko wtedy, gdy klucz istnieje, więc nieznana nazwa pola jest ignorowana. Każdy wiersz niesie też pid, z którego korzystają akcje komórek na front-endzie.

Pola meta zdefiniowane przez administratora wymagają typowanego zachowania zapytańWiersze meta typowane jako tekst, liczba lub kalendarz; każdy typ buduje własne meta_query

assemble_meta_for_system() zamienia wiersz tabeli meta we wpis profilu. Tekst używa LIKE i pola tekstowego. Liczba używa BETWEEN z typem numeric z wartości 'min:max', suwaka zakresu i sortowania meta_value_num. Kalendarz porównuje albo jako uniksowy znacznik czasu (numerycznie), albo jako DATETIME, wybierane per pole, ponieważ wtyczki takie jak ACF przechowują daty jako ciągi znaków, a inne przechowują znaczniki czasu.

Niektórych kolejności sortowania nie da się wyrazić argumentami WP_QueryTymczasowe closure posts_orderby dla post_status, usuwane zaraz po zapytaniu

Sortowanie po post_status odbywa się przez closure podpięte do posts_orderby na czas jednego WP_Query i usuwane potem, więc nie wycieka do innych zapytań na stronie. Wartości listy rozwijanej sortowania, takie jak title-desc lub <meta_key>-desc, są mapowane na orderby/order, z meta_value_num dla pól meta typu liczba.

Tabele ograniczone do wybranego podzbioru wpisówReguły predefinicji stają się post__in, post__not_in, author__in i tax_query

Każda tabela może przechowywać reguły: ID wpisów, wykluczone ID, autorów, terminy do włączenia lub wykluczenia. get_table_data() stosuje je przed filtrami odwiedzającego, z ID rzutowanymi na liczby całkowite. Atrybut shortcode'u author=N jest włączany do tych samych reguł (komentarz w kodzie z datą 16-09-2020).

Konfiguracja tabeli słabo pasuje do post metaCztery własne tabele przez dbDelta: tabele, kolumny, pola meta, słownik

Kolumny to wiersze z table_id, field_key, pos_num, is_active, show_on_mobile i opcjami JSON, indeksowane po table_id i is_active, więc aktywne kolumny tabeli to jedno zapytanie po indeksie. Cała konfiguracja eksportuje się jako jeden dokument JSON; import opróżnia każdą tabelę i wstawia wiersze na nowo, za kontrolą roli.

Formularz filtra nad wpisami i meta

shipped · 2020

Co to dajeOdwiedzający zawężają tabele według tekstu, kategorii, zakresów liczb i dat. Limity suwaków wynikają z rzeczywistych danych, więc pracownicy nie muszą ich wpisywać.

Problem
Formularz filtra jest generowany z tego samego profilu dla dowolnego typu wpisu: wyszukiwanie tekstu, drzewa taksonomii, zakresy liczbowe i zakresy dat. Wtyczka nie ma własnego indeksu, więc granice i opcje muszą pochodzić z danych na żywo.
Rozwiązanie

Każdy klucz filtra dostarcza dane rysowania (granice, opcje, etykiety) i konstruktor zapytania. Granice liczbowe pochodzą z zapytań MIN/MAX, chyba że administrator je ustawił. Warunki, których WP_Query nie potrafi wyrazić, przechodzą przez posts_where: wartości tekstowe są escapowane i przygotowywane, daty formatowane przez date(), a liczby rzutowane przez intval().

Technologie
  • PHP
  • WP_Query
  • posts_where
  • MySQL
Zadania · 6
Wyszukiwanie tekstu w wybranych kolumnach, bez rozróżniania wielkości liter, bezpieczneposts_where z LOWER(field) LIKE; pola na białej liście, wartości przygotowane i esc_like

Przeszukiwane kolumny pochodzą z atrybutu shortcode'u tableon_text_search_by, ale są filtrowane do post_title, post_content i post_excerpt, więc nazwa kolumny z zewnątrz nigdy nie trafia do SQL spoza listy. Fraza jest zamieniana na małe litery pomocnikiem obsługującym znaki wielobajtowe, escapowana przez esc_like() i wiązana przez $wpdb->prepare().

Suwaki zakresu potrzebują granic, których administrator nie wpisałDomyślne granice to MIN/MAX z CAST(meta_value AS UNSIGNED) dla klucza meta

get_field_drawing_data() używa zapisanych min/max tabeli, gdy są ustawione; w przeciwnym razie odpytuje wp_postmeta o klucz z rzutowaniem numerycznym, więc liczby zapisane jako tekst są porównywane jako liczby. Granice liczby komentarzy to MIN/MAX z wp_posts dla typu wpisu tabeli.

Jedno pole daty potrzebuje dwóch wejść: od i doRysujemy bliźniaczy klucz z sufiksem ---to; provider kieruje go z flagą kierunku

draw_filter_form_data() powiela pole kalendarza jako <key>---to z etykietami 'From:' i 'To:'. Klucz nie istnieje w profilu, więc provider() rozpoznaje sufiks, obcina go i wywołuje konstruktor zapytania oryginalnego pola z is_calendar_dir_to = true, co zamienia >= na <=.

Wielokrotny wybór taksonomii potrzebuje IN, NOT IN lub AND per tabelaOperator zapisany per tabela, sprawdzany względem białej listy przed tax_query

Opcja mselect-logic jest odczytywana z opcji filtra tabeli i zastępowana przez IN, jeśli nie jest jednym z IN, NOT IN, AND. ID terminów trafiają do tax_query po term_id.

Hierarchiczne listy terminów ze zbiorami include i excludeRekurencyjne drzewo per rodzic z prefiksem głębokości, filtrowane listami ID

build_taxonomy_tree() przechodzi po terminach rodzic po rodzicu, pomija wykluczone ID, zachowuje tylko włączone ID, gdy ta lista jest ustawiona, i poprzedza tytuły jedną kreską na poziom, by płaski select pokazywał hierarchię. Wykonuje jedno wywołanie get_terms() na rodzica z hide_empty.

Inne wtyczki filtrujące muszą móc sterować tą samą tabeląHook providera tableon_filter_provider_{name} przepisuje argumenty WP_Query

Żądanie nazywa providera filtra; get_table_data() przekazuje argumenty zapytania, dane filtra i argumenty shortcode'u przez pasujący filtr. Wbudowany formularz jest providerem 'default'. Taxonomy Chain Menu korzysta ze strony klienckiej tego mechanizmu, zapisując filter_data w tabeli i prosząc ją o przerysowanie.

Silnik tabeli po stronie klienta

shipped · 2020

Co to dajeStronicowanie, sortowanie i wyszukiwanie wydają się szybkie, bo dane już wczytane są używane ponownie, a szerokie tabele przełączają się na kompaktowy układ na telefonach.

Problem
Tabele działają na stronach, w popupach i w iframe i muszą stronicować, sortować i przeszukiwać bez czekania na serwer przy każdym kliknięciu. Szybkie klikanie powoduje, że odpowiedzi przychodzą w złej kolejności, a szerokie tabele nie mieszczą się na telefonach.
Rozwiązanie

Klasa JavaScript bez zależności z trzema trybami danych, silnikiem SQL w przeglądarce dla wczytanych wierszy, cache per żądanie, anulowaniem żądań i kompaktowym układem poniżej konfigurowalnej szerokości.

Technologie
  • JavaScript (klasy ES6)
  • Fetch API
  • AbortController
  • AlaSQL
Zadania · 5
Wolna wcześniejsza odpowiedź nie może nadpisać nowszej stronyAbortController anuluje poprzedni fetch, zanim ruszy nowe żądanie

Każde żądanie ajax zapisuje swój AbortController; nowe żądanie najpierw przerywa oczekujące, więc rysowany jest tylko najnowszy stan strony, sortowania lub filtra.

Sortowanie i stronicowanie danych, które już są w przeglądarceTryb json uruchamia AlaSQL SELECT, ORDER BY i LIMIT na wczytanych wierszach

W trybie json wiersze są osadzone na stronie. Wyszukiwanie po tytule, liczność, ORDER BY i LIMIT/OFFSET są budowane jako ciągi SQL i wykonywane przez AlaSQL na tablicy w pamięci, więc stronicowanie i sortowanie nie wymagają żądań.

Jednorazowe wczytanie przez ajax, a potem koniec wycieczek do serweraTryb to_json: pierwsza odpowiedź ajax staje się danymi lokalnymi, a tryb przełącza się na json

to_json startuje jako ajax z flagą przełączenia. Po pierwszej odpowiedzi wiersze są trzymane jako table_data, a tryb staje się json. Na serwerze tryby json żądają wszystkich pasujących wpisów (posts_per_page = -1), co kod oznacza jako ryzyko pamięciowe, więc tryb nadaje się do małych i średnich zbiorów.

Powtarzane żądania o strony już widzianeCache odpowiedzi pod 32-bitowym hashem obiektu żądania JSON

set_cache() i get_cache() kluczują odpowiedzi przez __hash_object(request_data), hash ciągu z JSON.stringify całego żądania (strona, kolejność, filtry). Powrót do już widzianej strony jest obsługiwany z pamięci. Cache jest wyłączony w trybach json, to_json i load-more, gdzie dane i tak są lokalne.

Szerokie tabele na telefonachWidok kompaktowy poniżej ustawionej szerokości, ukrywanie kolumn per mobile, resize z throttlingiem

Poniżej compact_view_width wiersze są rysowane jako ułożone komórki, a nagłówki są ukryte. Handler resize przerysowuje tylko wtedy, gdy stan kompaktowy faktycznie się zmienia, i blokuje się na 999 ms między uruchomieniami. Kolumny można pominąć na mobile (hide_on_mobile) lub ukryć poniżej szerokości w pikselach wygenerowanymi regułami @media. Wiersze są budowane w DocumentFragment i wstawiane raz.

Osadzanie, izolacja i dostęp administracyjny

w produkcie

Co to dajeKilka różnie stylizowanych tabel może dzielić stronę, tabele można pokazywać na innych witrynach, etykiety podążają za językiem strony, a wybrane role pracowników mogą nimi zarządzać.

Problem
Kilka tabel z różnymi skórkami może dzielić jedną stronę, tabelę można osadzić w innej witrynie, etykiety muszą podążać za językiem strony, a zarządzanie tabelami nie jest ograniczone do administratorów.
Rozwiązanie

CSS jest ograniczony do HTML id każdej tabeli w czasie renderowania, zdalne osadzanie idzie przez generowany skrypt ładujący, etykiety przechodzą przez tabelę tłumaczeń, a ekrany administracyjne są bramkowane ustawieniem roli.

Technologie
  • PHP
  • CSS
  • JavaScript
  • iframe
Zadania · 5
Kilka tabel z różnymi skórkami na jednej stronieCSS skórki używa symbolu zastępczego 'tid' zastępowanego przez HTML id tabeli, a potem jest minifikowany

get_theme_css() wczytuje skórkę najpierw z folderu tableon-skins motywu, potem z wtyczki, zastępuje tid przez HTML id tabeli, usuwa komentarze i białe znaki. Style per kolumna i własny CSS tabeli są również poprzedzane #<table id>, więc reguły jednej tabeli nie dotykają innej.

Pokazanie tabeli na stronie, która nie jest WordPressemSkrypt ładujący buduje leniwy iframe do strony używającej pustego szablonu wtyczki

Żądanie z tableon-remote-page i anchor zwraca JavaScript zamiast strony: ustawienia jako zmienne plus remote.js, który tworzy leniwie ładowany iframe w podanym kontenerze. Strona wewnątrz używa pustego szablonu rejestrowanego przez wtyczkę, więc oprawa motywu nie jest pokazywana.

Wbudowana konfiguracja JSON nie może wyjść poza swój kontener HTMLjson_encode z JSON_HEX_TAG, JSON_HEX_QUOT i JSON_HEX_AMP w ukrytym div

Ustawienia tabeli i, w trybie json, wszystkie wiersze są drukowane na stronie. Kodowanie <, >, cudzysłowów i & jako sekwencji unicode sprawia, że tytuły wpisów lub wartości meta nie mogą zamknąć elementu ani wstrzyknąć znaczników.

Teksty interfejsu w kilku językach bez plików .poTabela słownika mapuje ciąg na wartości per język, wczytywana raz na żądanie

TABLEON_Vocabulary wczytuje całą tabelę raz do statycznej tablicy; get() zwraca wartość dla bieżącej lokalizacji lub oryginalny ciąg. Bieżący język przechodzi przez filtr tableon_current_lang, który przełącza też WPML, więc żądania ajax renderują się w języku odwiedzającego.

Tabelami zarządzają redaktorzy inni niż administratorzycan_manage_data(): administrator lub role z ustawień, plus nonce przy każdym zapisie

Ekrany administracyjne rejestrują się tylko dla użytkowników, którzy przechodzą can_manage_data(), co akceptuje administratorów i role wymienione w ustawieniu user_roles_can. Handlery zapisu, tworzenia i usuwania weryfikują nonce 'tableon'.

Liczby

wordpress.org
  • Aktywne instalacje 200+ licznik wordpress.org.
  • Opinie 15 Średnia ocena: 4.6 na 5.
  • Lat wsparcia 6 Od 2 listopada 2020, ostatnia aktualizacja 12 czerwca 2026.