Πώς να προσθέσετε δυναμικούς πίνακες στο WordPress χωρίς καμία HTML

 Πώς να προσθέσετε δυναμικούς πίνακες στο WordPress χωρίς καμία HTML

Patrick Harvey

Την τελευταία φορά που δοκίμασα να προσθέσω έναν πίνακα στο WordPress blog μου, κατέληξα να το απορρίψω όλο αυτό και να χρησιμοποιήσω μια λίστα με κουκκίδες.

Σας θυμίζει κάτι;

Τόσα πολλά εντυπωσιακά θέματα WordPress έρχονται με τη δυνατότητα να δημιουργήσουν πίνακες που φαίνονται υπέροχα. Και βέβαια, μπορεί αρχικά να φαίνονται ωραία, αλλά δεν μπορείτε να κάνετε πολλά με αυτά.

Θέλετε δεδομένα με δυνατότητα φιλτραρίσματος; Όχι.

Θέλετε ο πίνακας να ανταποκρίνεται στα κινητά; Όχι.

Θέλετε να εισαγάγετε δεδομένα από ένα CSV; Αποκλείεται.

Εδώ είναι τα καλά νέα:

Με το κατάλληλο πρόσθετο, μπορείτε να δημιουργήσετε εξαιρετικά λειτουργικούς δυναμικούς πίνακες. Κάτι που σας επιτρέπει να εμφανίζετε δεδομένα που μπορούν να φιλτραριστούν.

Μαζί με γραφήματα και όλα τα είδη.

Ακούγεται καλό; Ας δούμε πώς μπορεί να γίνει αυτό με το wpDataTables.

Σημείωση: Αν και αυτό το σεμινάριο επικεντρώνεται στους διαδραστικούς πίνακες, μπορεί να βρείτε χρήσιμο το σεμινάριό μας για τη δημιουργία πινάκων που ανταποκρίνονται σε κινητά με το wpDataTables. Κάντε κλικ εδώ για να το δείτε. Αυτό το νέο σεμινάριο λαμβάνει υπόψη το ενημερωμένο περιβάλλον εργασίας χρήστη και τις επιπλέον δυνατότητες που κυκλοφόρησαν πρόσφατα στο wpDataTables.

Αυτό το πρόσθετο σας επιτρέπει να δημιουργήσετε όμορφους πίνακες χωρίς καμία γνώση HTML

Το wpDataTables είναι ένα premium WordPress plugin που κάνει τη διαδικασία δημιουργίας και δημοσίευσης πινάκων στον ιστότοπό σας παιχνιδάκι. Είναι ελαφρύ, διαισθητικό και κάνει τη δουλειά μέσα σε λίγα λεπτά, αφήνοντάς σας με λιγότερο κώδικα για να περιπλανηθείτε και περισσότερο χρόνο για το blog.

Λήψη wpDataTables

Ένα από τα βασικά σημεία αυτού του πρόσθετου είναι ότι μπορείτε να δεν χρειάζονται προηγούμενες γνώσεις HTML Τα πάντα γίνονται μέσα από μια εύχρηστη σελίδα ρυθμίσεων. Για τη δημοσίευση χρειάζεται απλώς να αντιγράψετε και να επικολλήσετε έναν σύντομο κωδικό και είστε έτοιμοι να ξεκινήσετε.

Για τους bloggers και τις επιχειρήσεις, αυτό είναι ένα σπουδαίο νέο, διότι σας επιτρέπει να εμφανίζετε πολλά δεδομένα με συνοπτικό και εύπεπτο τρόπο.

Θα μπορούσατε να το χρησιμοποιήσετε ακόμη και για:

  • Ένας κατάλογος προϊόντων
  • Διαγράμματα σύγκρισης προϊόντων
  • Τιμοκατάλογοι
  • Συλλογή δεδομένων από τους χρήστες
  • Αθλητικά αποτελέσματα
  • Παρακολούθηση της προόδου σας για οτιδήποτε περιλαμβάνει αριθμούς (π.χ. μια έκθεση εσόδων από το ιστολόγιο)

Οι δυνατότητες είναι ατελείωτες.

Δημιουργία ενός πίνακα από την αρχή έως το τέλος: ένας οδηγός βήμα προς βήμα

Η χρήση του πρόσθετου wpDataTables για τη δημιουργία όμορφων, ξεκάθαρων και πλήρως λειτουργικών πινάκων στον ιστότοπό σας στο WordPress είναι απλή.

Δείτε πώς θα ξεκινήσετε:

Βήμα 1 - Έχετε έτοιμο το αρχείο σας

Παρακάτω, έχω δημιουργήσει ένα παράδειγμα εγγράφου Excel για μια σειρά τυχαίων δαπανών. Αυτό περιλαμβάνει διάφορες στήλες, όπως ημερομηνία, τρόπο πληρωμής και κόστος.

Βεβαιωθείτε ότι τα δεδομένα σας εμφανίζονται με παρόμοιο τρόπο, διαφορετικά το πρόσθετο θα δυσκολευτεί να ορίσει τις στήλες του πίνακα σας.

Βήμα 2 - Δημιουργία νέου πίνακα

Πλοηγηθείτε στο wpDataTables στην αριστερή πλευρά του ταμπλό του WordPress σας.

Κάνοντας κλικ σε αυτόν τον σύνδεσμο θα μεταφερθείτε στην παραπάνω οθόνη. Εδώ θα δημιουργήσετε και θα προσθέσετε τον νέο σας πίνακα:

Αφού κάνετε κλικ στο κουμπί "Προσθήκη νέου", θα εμφανιστεί αυτή η οθόνη. Εδώ θα αρχίσετε να ρυθμίζετε τις παραμέτρους του πίνακα σας, ώστε να λειτουργεί και να φαίνεται όπως τον θέλετε:

Βήμα 3 - Καθορίστε τα χαρακτηριστικά του τραπεζιού σας

Στις τρεις πρώτες ενότητες της σελίδας ρύθμισης πίνακα, μπορείτε να κάνετε τα εξής:

  • Δημιουργήστε έναν τίτλο
  • Επιλέξτε αν θέλετε να εμφανίζεται ο τίτλος του πίνακα στη σελίδα.
  • Επιλέξτε έναν τύπο πηγής εισόδου για το τραπέζι σας

Αυτές είναι οι πιο βασικές ρυθμίσεις του τραπεζιού σας.

Δείτε επίσης: 29 Τελευταία στατιστικά στοιχεία παραγωγής μολύβδου για το 2023

Κάντε κλικ στην επιλογή "Ανέβασμα αρχείου" και αναζητήστε το έγγραφό σας. Οι πίνακες που μπορείτε να δημιουργήσετε μπορούν να είναι τόσο περίπλοκοι όσο τους χρειάζεστε.

Όπως μπορείτε να δείτε, έδωσα στον πίνακα μου έναν σχετικό τίτλο, επέλεξα τον τύπο αρχείου Excel από το αναπτυσσόμενο πλαίσιο και ανέβασα το αρχείο μου στο WordPress.

Λίγο πιο κάτω στη σελίδα, θα συναντήσετε περαιτέρω ρυθμίσεις για να προσαρμόσετε τον πίνακα σας:

Αυτά είναι:

  • Responsive - Επιτρέπει στον πίνακά σας να εμφανίζεται διαφορετικά σε επιτραπέζιους υπολογιστές, tablet και κινητά τηλέφωνα.
  • Αναδιπλούμενο - Σας επιτρέπει να μετακινείτε τον πίνακα σας οριζόντια
  • Απόκρυψη πίνακα μέχρι να φορτωθεί πλήρως η σελίδα - Χρήσιμο για σελίδες που φορτώνουν αργά
  • Προηγμένο φιλτράρισμα - Για την εμφάνιση ενός φίλτρου κάτω από κάθε στήλη
  • Φίλτρο σε μορφή - Για ένα φίλτρο μέσα στην ίδια τη φόρμα
  • Επιτραπέζια εργαλεία - Για επιλογές όπως αντιγραφή, αποθήκευση στο Excel και αποθήκευση σε CSV ενσωματωμένες στη φόρμα σας
  • Ενεργοποίηση ταξινόμησης - Αυτό σας επιτρέπει να ταξινομείτε τους πίνακές σας
  • Περιορισμός της διάταξης των πινάκων - Περιορίστε το πλάτος του πίνακα στο 100% του μητρικού περιέκτη
  • Μήκος οθόνης - Καθορίστε πόσες καταχωρήσεις εμφανίζονται σε μια σελίδα

Κάνοντας κλικ στην επιλογή "Προεπισκόπηση" μπορείτε να δείτε τον πίνακά σας και να αλλάξετε οποιεσδήποτε ρυθμίσεις θεωρείτε απαραίτητες για να τον κάνετε να φαίνεται όπως τον θέλετε.

Δείτε επίσης: Πώς να διορθώσετε το Spam παραπομπών στο Google Analytics

Αφού επιλέξετε τις επιλογές που ταιριάζουν καλύτερα στον τύπο του πίνακα που θέλετε να εμφανίσετε, ήρθε η ώρα να κάνετε κλικ στο κουμπί "αποθήκευση".

Αν θέλετε να προσαρμόσετε περαιτέρω τις στήλες σας, μόλις κάνετε κλικ στο "αποθήκευση", θα μπορείτε να μετακινηθείτε περαιτέρω προς τα κάτω στη σελίδα για περισσότερες επιλογές. Οι προεπιλεγμένες ρυθμίσεις δημιουργούνται αυτόματα, ωστόσο με αυτές μπορείτε να αλλάξετε κάθε χρώμα στήλης, στήλη και τύπο φίλτρου (όπως ημερομηνία, ώρα και κείμενο).

Παρακάτω, πρόσθεσα μερικά χρώματα και επεξεργάστηκα τους τύπους των στηλών σε κείμενο, αριθμό και συμβολοσειρά.

Βήμα 4 - Αποθήκευση και αντιγραφή του σύντομου κώδικα

Μόλις αποθηκεύσετε τον πίνακα σας, κάντε κλικ στο "Κλείσιμο" και θα σας οδηγήσει πίσω στην αρχική σελίδα του πρόσθετου. Θα πρέπει τώρα να δείτε τον πίνακα που δημιουργήσατε, τον τίτλο και τον τύπο του πίνακα σας, τον σύντομο κωδικό για εισαγωγή στην ανάρτηση ή τη σελίδα σας και την επιλογή να τον αντιγράψετε.

Θέλω να εμφανίσω αυτόν τον πίνακα σε μια σελίδα, επομένως θα πρέπει να αντιγράψω τον σύντομο κώδικα και στη συνέχεια να πλοηγηθώ στη σελίδα που θέλω να επεξεργαστώ.

Βήμα 5 - Προσθήκη σύντομου κωδικού σε δημοσίευση ή σελίδα

Για να προσθέσετε τον πίνακά σας σε μια σελίδα, είναι πραγματικά τόσο απλό όσο η επικόλληση του σύντομου κωδικού σας στον επεξεργαστή σελίδας. Επιλέξτε το σημείο της σελίδας που θα θέλατε να εμφανίσετε τον πίνακα, επικολλήστε τον κωδικό σας και συνεχίστε τη διαμόρφωση του περιεχομένου σας:

Βήμα 6 - Δημοσίευση

Μόλις πατήσετε το κουμπί δημοσίευσης στη Σελίδα σας, ο πίνακάς σας θα πρέπει να μοιάζει κάπως έτσι. Όπως μπορείτε να δείτε, είναι σαφής, συνεπής, τέλεια ευθυγραμμισμένος και περιέχει όλα τα δεδομένα μου με τρόπο εύκολο στην πλοήγηση:

Οι επιλογές στην κορυφή του πίνακα θα επιτρέπουν στους χρήστες να εξάγουν τα περιεχόμενα του πίνακα σε διάφορες μορφές. Μπορείτε επίσης να φιλτράρετε τα αποτελέσματα εύκολα στο μπροστινό μέρος του ιστότοπού σας.

Λήψη wpDataTables

Τι άλλους πίνακες μπορείτε να δημιουργήσετε;

Ωστόσο, δεν περιορίζεστε μόνο σε απλούς πίνακες με βάση το CSV. Οι πίνακες δεδομένων WP μπορούν να εμφανίζουν ένα ευρύ φάσμα δεδομένων σε πολλαπλές μορφές.

Ακολουθεί ένα παράδειγμα ενός πλήρως λειτουργικού, ευέλικτου και επεξεργάσιμου πίνακα με πολλαπλές στήλες και επιλογές.

Αυτός ο πίνακας βασίζεται στη MySQL με φίλτρα για την ταξινόμηση του περιεχομένου ανάλογα με τις ανάγκες του χρήστη:

Αυτός ο πίνακας που βασίζεται σε πίνακες PHP είναι σειριοποιημένος και περιλαμβάνει εικόνες - αυτό προσθέτει μια εντελώς διαφορετική δυναμική και λειτουργικότητα που πολλά καταστήματα ηλεκτρονικού εμπορίου θα έβρισκαν ιδιαίτερα χρήσιμα:

Επίσης, δεν περιορίζεστε μόνο σε αρχεία CSV. Το WP Data Tables επιτρέπει επίσης τη χρήση αρχείων που βασίζονται στο Excel, επιτρέποντάς σας να αξιοποιήσετε τις πολλές ειδικές λειτουργίες που το συνοδεύουν:

Άλλα χαρακτηριστικά του wpDataTable που αξίζει να αναφερθούν

  • Οδηγός wpDataChart - Σας επιτρέπει να μετατρέψετε τα δεδομένα σας σε γράφημα ή διάγραμμα σε λίγα εύκολα βήματα. Προς το παρόν υποστηρίζει 3 μηχανές απόδοσης - Google Charts, Highcharts και Chart.js. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Μορφοποίηση υπό όρους - Σας επιτρέπει να επισημάνετε κελιά, γραμμές και στήλες με βάση το περιεχόμενό τους. Είναι χρήσιμο ειδικά αν ο πίνακας είναι εντελώς αριθμητικός. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Στήλες τύπου - Σας επιτρέπει να προσθέσετε μια στήλη η οποία μπορεί να χρησιμοποιηθεί για τον υπολογισμό ενός αριθμού με βάση τους αριθμούς που ορίζονται σε άλλα κελιά. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Στήλες Datetime - Χρησιμοποιείται για κελιά που περιέχουν ημερομηνίες και ώρες. Θα εμφανίζονται αυτόματα με τη μορφή που έχετε ορίσει στη σελίδα ρυθμίσεων. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Σειρά αθροίσματος/αθροισμάτων - Χρησιμοποιείται για αριθμητικές στήλες και σας επιτρέπει να υπολογίσετε το άθροισμα όλων των τιμών. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Δημιουργός αναφορών - Είναι ένα πρόσθετο για το wpDataTables. Το Report Builder δημιουργεί άμεσα έγγραφα και λογιστικά φύλλα γεμίζοντας τα πρότυπα σας με πραγματικά δεδομένα από την τοποθεσία σας στο WordPress. Βρείτε περισσότερη τεκμηρίωση εδώ.
  • Πίνακες Master-Detail - Είναι ένα πρόσθετο για το wpDataTables που επιτρέπει σε εσάς και τους επισκέπτες του ιστότοπού σας να βλέπετε λεπτομέρειες για κάθε γραμμή με ένα απλό κλικ. Βρείτε περισσότερη τεκμηρίωση εδώ.
Λήψη wpDataTables

Τελικές σκέψεις

Οι πίνακες είναι ένας πολύ καλός τρόπος για την προβολή δεδομένων. Και όταν προσθέτετε δυναμικά χαρακτηριστικά, όπως το φιλτράρισμα, κάνετε τα πράγματα πολύ καλύτερα για τους επισκέπτες του ιστότοπού σας.

Σας έδειξα πώς να δημιουργήσετε έναν δυναμικό πίνακα στο WordPress, μεταφορτώνοντας δεδομένα από το Microsoft Excel (ή χρησιμοποιώντας οποιοδήποτε άλλο εργαλείο υπολογιστικών φύλλων). Αλλά, υπάρχουν πολλά περισσότερα που είναι δυνατά.

Μπορείτε ακόμη να μετατρέψετε οποιονδήποτε από τους πίνακές σας σε διαγράμματα ή γραφήματα και πολλά άλλα.

Τώρα, ήρθε η ώρα να ξεκινήσετε να φτιάχνετε το δικό σας τραπέζι - καλή σας όρεξη!

Σχετική ανάγνωση: 5 ισχυρά και κινητά Responsive Table Plugins για το WordPress.

Αποκάλυψη: Αυτή η ανάρτηση είναι χορηγία, αλλά οι απόψεις μας είναι δικές μας.

Patrick Harvey

Ο Patrick Harvey είναι έμπειρος συγγραφέας και digital marketer με πάνω από 10 χρόνια εμπειρίας στον κλάδο. Έχει τεράστια γνώση διαφόρων θεμάτων όπως το blogging, τα μέσα κοινωνικής δικτύωσης, το ηλεκτρονικό εμπόριο και το WordPress. Το πάθος του να γράφει και να βοηθά τους ανθρώπους να επιτύχουν στο διαδίκτυο τον ώθησε να δημιουργήσει διορατικές και ελκυστικές αναρτήσεις που προσφέρουν αξία στο κοινό του. Ως ικανός χρήστης του WordPress, ο Πάτρικ είναι εξοικειωμένος με τις λεπτομέρειες της δημιουργίας επιτυχημένων ιστότοπων και χρησιμοποιεί αυτή τη γνώση για να βοηθήσει τις επιχειρήσεις και τα άτομα να δημιουργήσουν την παρουσία τους στο διαδίκτυο. Με έντονο μάτι στη λεπτομέρεια και ακλόνητη δέσμευση για την αριστεία, ο Patrick είναι αφοσιωμένος στο να παρέχει στους αναγνώστες του τις τελευταίες τάσεις και συμβουλές στον κλάδο του ψηφιακού μάρκετινγκ. Όταν δεν ασχολείται με το blog, ο Πάτρικ μπορεί να βρεθεί να εξερευνά νέα μέρη, να διαβάζει βιβλία ή να παίζει μπάσκετ.