Πώς να δημιουργήσετε ένα απλό συμπληρωματικό FAQ για WordPress

Άρθρο που γράφτηκε από: Rochester Oliveira
  • WordPress
  • Ενημερώθηκε: Jan 20, 2020

Έχουμε δει πριν από πολλά συμβουλές blogging και εργαλεία. Λοιπόν, σήμερα θα μάθουμε πώς να δημιουργούμε ένα καλό εργαλείο για το ιστολόγιό σας - μια προσθήκη σελίδας FAQ. Αλλά το πιο σημαντικό πράγμα δεν είναι μόνο το ίδιο το πρόσθετο, αλλά τι μπορείτε να κάνετε με αυτήν την αρχή. Θα μάθετε πώς να αποθηκεύετε οποιονδήποτε τύπο δεδομένων στον ιστότοπό σας WP και πώς να το ενσωματώνετε σε εξωτερικές βιβλιοθήκες (όπως το jQuery UI) δημιουργώντας προσαρμοσμένα στοιχεία για τον ιστότοπό σας. Ας αρχίσουμε!

Η ιδέα, η επίδειξη & η λήψη

διαδήλωση

Ο στόχος μας εδώ είναι να δημιουργήσουμε ένα plugin που μπορεί να χρησιμοποιηθεί για πολλά πράγματα, αλλά ταιριάζει πολύ καλά στις σελίδες των Συχνών Ερωτήσεων.

Αλλά εκτός από αυτό το κύριο επίτευγμα μας θα είναι το κατανόηση του WordPress προσαρμοσμένους τύπους δημοσιεύσεων, σύντομα κείμενα, αλληλεπιδράσεις με εξωτερικό πρόσθετο JS / jQuery. Με αυτήν την ιδέα θα μπορούσατε να δημιουργήσετε πολλά πράγματα με βάση άλλα τρελά πρόσθετα που μπορείτε να βρείτε εκεί, αυτό είναι μόνο το σημείο εκκίνησης για σας, αγαπητό Padawan.

So εδώ μπορείτε να βρείτε jQuery API demo για το στοιχείο που θα χρησιμοποιούμε - αλλά το πολύ ωραίο υλικό είναι ο κώδικας που χρησιμοποιείται για τη δημιουργία αυτού του στοιχείου (PHP).

Ζεσταίνω - Αρχείο πρόσθετου και Προσαρμοσμένο είδος ταχυδρομείου

Πρώτα απ 'όλα πρέπει να δημιουργήσουμε έναν προσαρμοσμένο τύπο θέσης για την αποθήκευση των δεδομένων μας.

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

Για να έχουμε αυτό, χρειαζόμαστε ένα plugin, αλλά ίσως είστε εξοικειωμένοι με αυτήν την ιδέα ήδη. Οι προσθήκες είναι σαν τα μπλοκ Lego για το WordPress, προσθέτουν ή μετασχηματίζουν την τρέχουσα λειτουργικότητα χρησιμοποιώντας κάποιο κώδικα που μπορεί εύκολα να συνδεθεί (duh!) Ή επίσης να αποσυνδεθεί εάν θέλετε.

Για να δημιουργήσετε μια προσθήκη με τρόπο που το αναγνωρίζει το WP χρειάζεστε πράγματα 2:

  1. Δημιουργήστε ένα αρχείο μέσα από το wp-content / plugins /
  2. Προσθέστε μεταδεδομένα στην αρχή αυτού του αρχείου, ώστε το WP να καταλάβει τι είναι αυτό

Λάβετε υπόψη ότι το όνομα του αρχείου πρέπει να είναι μοναδικό, οπότε όταν κάποιος εγκαθιστά το πρόσθετο (ακόμα και εσύ), δεν θα υπάρξουν διενέξεις με τα τρέχοντα πρόσθετα. Στην περίπτωσή μας για μια καλύτερη οργάνωση θα προσθέσουμε ένα νέο φάκελο με το όνομα faq-whsr, και μέσα του ένα αρχείο που ονομάζεται faq-whsr.php.

Τώρα για το metada, απλώς προσθέστε κάτι τέτοιο στην αρχή του αρχείου προσθηκών σας (αμέσως μετά

meta_01

Που σημαίνει:

  • Όνομα προσθήκης: Το ωραίο όνομα που θα εμφανίζεται στη διεπαφή wp-admin> plugins
  • Plugin URI: Αν θέλετε να προσθέσετε έναν σύνδεσμο στη σελίδα του plugin σας (έγγραφα, παραδείγματα, σελίδα πωλήσεων)
  • Περιγραφή: Αυτή είναι η μικρή παράγραφος που εμφανίζεται στη διεπαφή wp-admin> plugins. Κρατήστε το απλό, ώστε οι χρήστες να θυμούνται τι χρησιμεύει
  • Συγγραφέας / Συγγραφέας URI: Το άτομο / εταιρεία που δημιούργησε το plugin και σύνδεσμο για πιστώσεις
  • Άδεια: Έτσι οι χρήστες θα γνωρίζουν τι μπορούν / δεν μπορούν να κάνουν με το plugin σας

Εντάξει, τώρα έχουμε δημιουργήσει το plugin μας, προσθέσαμε μερικά σχετικά μεταδεδομένα. Μόλις αποθηκεύσετε το αρχείο του plugin σας θα πρέπει να μπορείτε να το δείτε στη διασύνδεση wp-admin

Ας την ενεργοποιήσουμε και να δούμε τι θα συμβεί.

Περιμένετε, τίποτα; Λοιπόν, αυτό είναι ένα καλό πράγμα, αν κάτι δεν πήγαινε σωστά, θα δείτε λάθος. Ας προχωρήσουμε τώρα στη δημιουργία προσαρμοσμένου τύπου post.

Στην περίπτωσή μας το CPT είναι το στοιχείο Συχνές ερωτήσεις, αλλά μπορείτε να δημιουργήσετε βιβλία, βίντεο, μαρτυρίες κλπ. Το σημαντικό πράγμα που πρέπει να θυμάστε εδώ είναι: τα ονόματα λειτουργιών πρέπει να είναι μοναδικά. Επαναλάβετε τώρα μαζί μου: τα ονόματα των λειτουργιών θα πρέπει να είναι μοναδικά, τα ονόματα των λειτουργιών θα πρέπει να είναι μοναδικά. Το κατάλαβα? Καλά αυτό θα σας εξοικονομήσει πολλά προβλήματα μέχρι να μπορέσουμε να χρησιμοποιήσουμε OOP (ίσως στο επόμενο σεμινάριο).

Η μάθηση γίνεται με αυτόν τον κώδικα:

cpt

Και αυτό σημαίνουν τα σχετικά μέρη:

  • $ labels - είναι ένας πίνακας με τις ετικέτες και το κείμενο για διαφορετικές ενότητες της περιοχής wp-admin. Έτσι, η WP θα γνωρίζει τον σωστό τρόπο κλήσης των αντικειμένων μας
  • υποστηρίζει - αυτό λέει τι μπορείτε να δείτε στην ενότητα wp-admin> FAQ> νέα οθόνη. Στην περίπτωσή μας θα έχουμε τον τίτλο, τον επεξεργαστή (το κύριο πλαίσιο περιεχομένου), τον συγγραφέα, τις αναθεωρήσεις και τα προσαρμοσμένα πεδία (σε περίπτωση που τα θέλετε).
  • ταξινομίες - εδώ λέτε στο WP ποιες ταξινομίες επιτρέπονται (κατηγορίες, ετικέτες ή προσαρμοσμένες ταξινομίες)
  • register_post_type ('faq_whsr', $ args) - αυτό λέει στο WP "Γεια, δημιουργήστε έναν νέο προσαρμοσμένο τύπο ανάρτησης με το αναγνωριστικό ως faq_whsr χρησιμοποιώντας τα ορίσματα από το $ args".

Αποθηκεύστε το και κρατήστε την αναπνοή σας. Θα πρέπει να δείτε τώρα μια νέα ενότητα στο κύριο μενού wp-admin

Περιμένετε, αυτό είναι; Ναι. Αυτό το απόσπασμα δημιουργεί ολόκληρη τη λειτουργικότητα του CPT. Αν δεν βρείτε αυτό το δροσερό, περιμένετε ότι θα πάρει πιο δροσερό στην επόμενη ενότητα.

Πριν φύγουμε από το wp-admin, προσθέστε κάποια ψεύτικα δεδομένα (μερικά ερωτήματα με τουλάχιστον κατηγορίες 2).

Front-End - αλληλεπίδραση WP x jQuery

Τώρα είναι τελικά η ώρα να δούμε κάποια δράση και θα χρησιμοποιήσουμε jQuery Στοιχείο Ακορντεόν για αυτό.

Το jQuery UI έχει σχεδόν τα ίδια πλεονεκτήματα με το ίδιο το jQuery:

  • Πολλοί προγραμματιστές που εργάζονται σε αυτό
  • Κωδικοποιητής με δυνατότητα πλοήγησης και κινητού ετοιμότητας
  • Καλά τεκμηριωμένες
  • Παίζει ωραία με το WP (το ίδιο το WP τα χρησιμοποιεί)

Το ερώτημα τώρα είναι: Πώς το αποκαλούμε;

Υπάρχουν προσεγγίσεις 2 σε αυτό:

  1. Το κακό καθαρό / tags in your wp_head
  2. Το ωραίο wp_enqueue

Δεν θα χάσουμε πάρα πολύ χρόνο με την λανθασμένη προσέγγιση σήμερα, αλλά η καλή είναι ουσιαστικά λέει WP "Hey buddy, θα χρειαστούμε jQuery UI σε κάποιο σημείο του κώδικα μας, παρακαλούμε να το συμπεριλάβετε στη σελίδα". Με αυτόν τον τρόπο το WP μπορεί να ελέγξει αν κάποιος άλλος έχει ήδη συμπεριλάβει ή συμπεριέλαβε μια διαφορετική έκδοση του και να αποφύγει πολλά προβλήματα με διπλές βιβλιοθήκες. Εντάξει, πώς να μεταφράσετε την όμορφη συνομιλία σε κώδικα;

Χρησιμοποιώντας τη λειτουργία κλίσης:

enqueue_02

Ο κωδικός Shortcode

Και τώρα είμαστε πίσω στο wp-admin. Έχουμε τα στοιχεία των Συχνών Ερωτήσεων και έχουμε τη βιβλιοθήκη να σχεδιάζει τα αντικείμενα όπως θέλουμε, τι άλλο λείπει; Λοιπόν, πρέπει να καλέσουμε τα στοιχεία!

Έχουμε πολλές επιλογές για αυτό, αλλά το πιο εύκολο για αυτήν την περίπτωση είναι να δημιουργήσετε ένα shortcode. Το Shortcode είναι κάτι που προσθέτετε στο πεδίο περιεχομένου (για σελίδες, αναρτήσεις, CPTs ...) και το WP θα αναζητήσει πραγματικά μια λειτουργία που θα εκτελεστεί σε αυτό. Υπάρχουν τύποι σύντομων κωδικών 2:

  1. [self-enclosing] - Όπως ετικέτες ή αυτό το είδος σύντομου κωδικού καλεί μια λειτουργία σε κάποιο σημείο - αυτός είναι ο τύπος μας
  2. [τυλιγμένο] Περιεχόμενο [/ τυλιγμένο] - Αυτό είναι σαν ετικέτες ή και μπορεί πραγματικά να μεταμορφώσει το περιεχόμενό του ή να χρησιμοποιήσει το περιεχόμενο ως επιχειρήματα.

Ας δούμε πώς λειτουργεί τότε. Δημιουργήστε μια νέα σελίδα στο wp-admin σας και προσθέστε αυτόν τον κώδικα:

[faq-whsr]

Αποθηκεύστε και επισκεφθείτε τη σελίδα και δείτε τι θα συμβεί ...

Απλά να γελάσω, δεν θα κάνει τίποτα σωστό; Λοιπόν, αυτό γιατί δεν έχουμε δημιουργήσει ακόμα μια λειτουργία γι 'αυτό.

Προσθέστε αυτό στο αρχείο του plugin σας:

shortcode_02

Τώρα ανανεώστε τη σελίδα σας και σας υπόσχομαι ότι κάτι πολύ δροσερό θα συμβεί.

Cool, ε; Τώρα μπορείτε να δείτε ότι τρέχει και ο ουρανός είναι το όριο για σας τώρα. Αυτό που κάνει αυτός ο κώδικας είναι να πείτε απλά στο WP ότι υπάρχει ένα shortcode που ονομάζεται [faq-whsr] και αν το βρει το WP, το WP πρέπει να εκτελέσει μια λειτουργία σε αυτό το σημείο της σελίδας.

Στην περίπτωσή μας, θα χρειαστεί να επιτύχουμε αυτή τη δομή για τον πίνακα jQuery UI που θα δημιουργηθεί:

api_02

Και γι 'αυτό θα δημιουργήσουμε ένα WP Query, φορτώστε τα στοιχεία των Συχνών Ερωτήσεων και το περιεχόμενό τους Αντικαταστήστε τη λειτουργία σύντομου κώδικα με αυτήν:

shortcode-basic_02

Εντάξει, τώρα θα σας καλούνται τα στοιχεία των Συχνών Ερωτήσεων. Αυτό που κάναμε είναι να καλέσουμε το wp_query για να καλέσουμε τον προσαρμοσμένο τύπο post και στη συνέχεια να το μεταβιβάσουμε στην επιστροφή shortcode έτσι WP θα εμφανίσει όλα αυτά ακολουθώντας την επιθυμητή δομή.

Είναι καλό, αλλά λείπει κάτι, έτσι; Τι γίνεται με κάποιες επιλογές εκεί; Λοιπόν, μπορούμε να προσθέσουμε επιλογές για ένα shortcode, ας δούμε πώς να δημιουργήσουμε μερικά από τα επιχειρήματα WP_Query στο shortcode μας:

shortcode-final_02

Με αυτόν τον τρόπο μπορείτε να καλέσετε αντικείμενα χρησιμοποιώντας τα παρακάτω επιχειρήματα (μπορείτε να συνδυάσετε όσα θέλετε):

  • cat - αναγνωριστικό κατηγορίας (πολλαπλά προστέθηκαν ως πίνακας) [faq-whsr cat = 1]
  • category_name - όνομα κατηγορίας [faq-whsr category_name = "food"]
  • παραγγελία - ASC ή DESC (το DESC είναι προεπιλεγμένο) [faq-whsr order = "ASC"]
  • παραγγελία - αλλάξτε τα κριτήρια παραγγελίας αντικειμένων [faq-whsr orderby = "title"]
  • posts_per_page - αλλάξτε τον αριθμό των αντικειμένων που φορτώθηκαν [faq-whsr posts_per_page = 5]

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

  • Συγγραφέας
  • Κατηγορία (προσθήκη επιλογών εξαιρέσεων με not_in)
  • Αναζήτηση (δροσερό εάν θέλετε να δώσετε στους χρήστες τη δυνατότητα να ψάξουν μέσω αυτών)
  • Προσαρμοσμένο πεδίο (δεδομένου ότι από τα στοιχεία των Συχνών Ερωτήσεων υπάρχουν αυτά, μπορείτε να τα χρησιμοποιήσετε για να φορτώσετε αντικείμενα με συγκεκριμένα προσαρμοσμένα πεδία και τιμές)

Τωρα ειναι η σειρα σου

Αυτό είναι μόνο ένα σημείο εκκίνησης για σας, όπως μπορείτε να δείτε. Όλοι μπορούμε να μάθουμε πολλά άλλα δροσερά πράγματα για να βελτιώσουμε αυτό το απλό plugin, εδώ είναι μερικές προτάσεις για να σκάψετε βαθύτερα:

  • Κατανοητή design
  • Δημιουργία γραφικού στοιχείου
  • Plugin ενεργοποιήστε / απενεργοποιήστε τους γάντζους
  • Διεθνοποίηση
  • OOP
  • Ενσωμάτωση μόνο εάν απαιτείται (για ορισμένες σελίδες)

Μην ξεχάσετε να αφήσετε τις σκέψεις σας στα σχόλια! Και εδώ είναι η πρόκλησή μας για εσάς: Είναι δυνατόν να εφαρμόσετε μια επιλογή "προεπιλεγμένου αντικειμένου" για τον σύντομο κωδικό (οπότε όταν φορτώνεται η σελίδα ένα άλλο στοιχείο θα είναι ανοιχτό, αυτό δεν είναι το πρώτο); Πώς θα το κάνατε;

Σχετικά με την Rochester Oliveira

Είμαι σχεδιαστής ιστοσελίδων και επιχειρηματίας από την Itajubá (MG), τη Βραζιλία. Μου αρέσει να γράφω για τα σκοτεινά θέματα και να κάνω μερικά δροσερά πράγματα.