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

Άρθρο που γράφτηκε από:
  • WordPress
  • Ενημερώθηκε: Feb 09, 2017

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

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

διαδήλωση

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

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

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

Ω, και φυσικά μπορείτε να βρείτε το αρχεία plugin για λήψη εδώ καθώς επίσης μπορείτε να εγκαταστήσετε στον ιστότοπο του WP.

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

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

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

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

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

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

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

Τώρα για το metada, προσθέστε κάτι τέτοιο στην αρχή του αρχείου plugins (αμέσως μετά το <? Php):

meta_01

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

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

Το 01-plugin δημιουργήθηκε

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

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

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

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

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

cpt

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

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

admin-faq

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

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

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

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

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

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

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

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

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

  1. Οι κακές καθαρές ετικέτες <script> / <style> στο wp_head σας
  2. Το ωραίο wp_enqueue

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

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

enqueue_02

Ο κωδικός Shortcode

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

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

  1. [self-enclosing] - Όπως οι ετικέτες <hr /> ή <br /> αυτό το είδος shortcode απλά καλεί μια λειτουργία σε κάποιο σημείο - αυτός είναι ο τύπος μας
  2. [wrapped] Περιεχόμενο [/ wrapped] - Αυτό είναι σαν ετικέτες <p> </ p> ή <div> </ div> και μπορεί πραγματικά να μετατρέψει τα περιεχόμενά του ή να χρησιμοποιήσει το περιεχόμενο ως επιχειρήματα.

Ας δούμε πώς λειτουργεί τότε. Δημιουργήστε μια νέα σελίδα στο 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 για να καλέσουμε τον δικό μας προσαρμοσμένο τύπο θέσης και στη συνέχεια να το μεταβιβάσουμε στην επιστροφή shortcode έτσι WP θα εμφανίσει όλα αυτά ακολουθώντας την επιθυμητή δομή.

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

shortcode-final_02

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

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

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

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

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

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

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

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

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

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

Συνδέω: