Περιεχόμενο
- 01. Εγκαταστήστε ένα νέο αντίγραφο του WordPress
- 02. Κατάργηση προεπιλεγμένων προσθηκών
- 03. Προσθέστε έναν προσαρμοσμένο τύπο ανάρτησης
- 04. Η διεπαφή προσθήκης / επεξεργασίας προσαρμοσμένου τύπου ανάρτησης
- 05. Δημιουργήστε ένα προσαρμοσμένο γυμνοσάλιαγκας επανεγγραφής
- 06. Προσθέστε υποστήριξη για προσαρμοσμένα πεδία
- 07. Προσθήκη προσαρμοσμένων πεδίων
- 08. Ρυθμίστε τα πεδία
- 09. Δημιουργήστε το αρχείο προτύπου WordPress
- 10. Δημιουργήστε μια διάταξη μίας ανάρτησης πλήρους πλάτους
- 11. Ξεκινήστε το βρόχο και δημιουργήστε το περιεχόμενο
- 12. Χρησιμοποιήστε PHP για κλήση σε δυναμικές τιμές
- 13. Κάντε έναν δοκιμαστικό πελάτη με κάποια εικονικά δεδομένα
- 14. Αντιμετωπίστε σφάλματα για τυχόν δεδομένα που λείπουν
- 15. Τακτοποιήστε τη διεπαφή
- 16. Εξαιρέστε τον από το χάρτη ιστότοπου
Έχουμε μια περιοχή που επιτρέπει στους χρήστες να εισέρχονται και να κατεβάζουν ή να βλέπουν έγγραφα, αναμένεται από τους καταναλωτές, από τηλεφωνικές συμβάσεις έως επιχειρήσεις κοινής ωφέλειας.
Όταν οι σχεδιαστές συνεργάζονται με τους πελάτες τους, ωστόσο, τα πάντα μπορούν γρήγορα να καταστραφούν σε μηνύματα ηλεκτρονικού ταχυδρομείου, συνδέσμους σε mockup και συνημμένα.
Αυτό το σεμινάριο WordPress θα δείξει πώς να επεκτείνετε το WordPress (είναι διαθέσιμες άλλες υπηρεσίες φιλοξενίας ιστοσελίδων) σε μια πύλη πελατών ικανή να αποθηκεύει έγγραφα, βίντεο και σχέδια, έτσι ώστε ένας πελάτης να μπορεί να έχει πρόσβαση σε όλα σε ένα μέρος. Η πύλη θα εξυπηρετεί κάθε πελάτη με έναν μοναδικό και προστατευμένο με κωδικό πρόσβασης σύνδεσμο που δεν εμφανίζεται στην κανονική πλοήγηση.
Οι προσαρμοσμένοι τύποι δημοσιεύσεων και τα πεδία θα χρησιμοποιηθούν για την αποθήκευση των δεδομένων και αυτά θα προστεθούν μέσω προσθηκών, για να αποφευχθεί η απώλεια δεδομένων σε περίπτωση αλλαγής του θέματος. Το θέμα θα τροποποιηθεί ελαφρώς.
Έχοντας μια πύλη πελατών δίνει στους πελάτες την ευκολία πρόσβασης στα αρχεία τους όλα στο ίδιο μέρος, όποτε τα χρειάζονται, όπως όταν χρησιμοποιούν αποθήκευση cloud. Έχει μια σειρά από επιχειρηματικά πλεονεκτήματα, όπως η εμφάνιση διαθέσιμων πωλήσεων, ή μπορεί να χρησιμοποιηθεί για να δώσει μια επισκόπηση της διαδικασίας εργασίας από την αρχή, περιγράφοντας οπτικά τα παραδοτέα.
Πραγματοποιήστε λήψη των αρχείων για αυτό το σεμινάριο.
- Πώς να μετατρέψετε το WordPress σε οπτικό εργαλείο
01. Εγκαταστήστε ένα νέο αντίγραφο του WordPress
Ένα νέο αντίγραφο του WordPress είναι εγκατεστημένο στον διακομιστή ανάπτυξης και το θέμα "understrap" έχει επιλεγεί για να δώσει ένα θεμέλιο για να ξεκινήσει γρήγορα η εργασία. Το πρόσθετο UI Custom Post Type θα χρησιμοποιηθεί, ώστε οι προσαρμοσμένοι τύποι δημοσιεύσεων να είναι ανεξάρτητοι από το θέμα.
02. Κατάργηση προεπιλεγμένων προσθηκών
Εάν τυχόν προεπιλεγμένα πρόσθετα συνοδεύονταν από το αντίγραφο του WordPress, διαγράψτε τα. Τα πρόσθετα που απαιτούνται για αυτό το σεμινάριο είναι "Advanced Custom Fields" και "Custom Post Type UI". Έχει εγκατασταθεί επίσης το "Classic Editor".
03. Προσθέστε έναν προσαρμοσμένο τύπο ανάρτησης
Χρησιμοποιώντας τη διεπαφή UI προσαρμοσμένου τύπου, προσθέστε έναν νέο τύπο ανάρτησης που ονομάζεται "πελάτης". Όταν εισέρχεστε στο "Post type slug", χρησιμοποιήστε κάτω παύλες αντί για κενά και γράψτε με τη μοναδική φόρμα, καθώς αυτό θα διευκολύνει τη δημιουργία προτύπων αργότερα. Το πρόθεμα tu_ έχει προστεθεί για να μειώσει την πιθανότητα σύγκρουσης.
04. Η διεπαφή προσθήκης / επεξεργασίας προσαρμοσμένου τύπου ανάρτησης
Προσθέστε έναν πληθυντικό με την ένδειξη "πελάτες" και έναν μοναδικό "πελάτη", καθώς αυτό θα εμφανιστεί στο μενού διαχειριστή του WordPress. Η χρήση κεφαλαίων γίνεται αποδεκτή σε αυτά τα πεδία, γεγονός που θα κάνει το μενού WordPress πιο τακτοποιημένο.
05. Δημιουργήστε ένα προσαρμοσμένο γυμνοσάλιαγκας επανεγγραφής
Η χρήση προθέματος για το slug τύπου post σημαίνει ότι οι πελάτες που προστίθενται στην πύλη θα δημιουργηθούν με έναν σύνδεσμο που μοιάζει με "/ tu_customer / example-company". Αυτό δεν φαίνεται τακτοποιημένο και ο προσαρμοσμένος γυμνοσάλιαγκας επανεγγραφής χρησιμοποιείται για να το βελτιώσει αυτό. Η ρύθμιση του slug επανεγγραφής σε "πελάτες" επιτρέπει στον προσαρμοσμένο τύπο ανάρτησης να εμφανίζεται ως / customers / example-company.
06. Προσθέστε υποστήριξη για προσαρμοσμένα πεδία
Η τελευταία επιλογή που είναι ενεργοποιημένη για τον προσαρμοσμένο τύπο ανάρτησης είναι "Υποστήριξη> Προσαρμοσμένο πεδίο" που βρίσκεται κοντά στο κάτω μέρος της σελίδας. Επιλέξτε αυτό και, στη συνέχεια, "προσθήκη τύπου ανάρτησης" στο κάτω μέρος της σελίδας. Αυτό υποβάλλει τις αλλαγές και καταχωρεί τον τύπο δημοσίευσης.
07. Προσθήκη προσαρμοσμένων πεδίων
Τα προσαρμοσμένα πεδία πρέπει τώρα να προστεθούν και να αντιστοιχιστούν στον τύπο ανάρτησης που μόλις δημιουργήθηκε. Η προσθήκη μιας ομάδας πεδίων με το όνομα "πύλη πελατών" είναι το πρώτο βήμα, ακολουθούμενο από την προσθήκη προσαρμοσμένων πεδίων σε αυτό με το κουμπί προσθήκης πεδίου. Το πρώτο πεδίο "σύντομο" θα οριστεί ως τύπος πεδίου "αρχείο", το οποίο επιτρέπει στον διαχειριστή να ανεβάσει ένα αρχείο σε αυτήν την τοποθεσία. Ορίστε την τιμή επιστροφής σε "url αρχείου".
08. Ρυθμίστε τα πεδία
Το επόμενο πεδίο που θα προστεθεί είναι "ερωτηματολόγιο επωνυμίας". Αυτό θα αποτελείται από έναν σύνδεσμο προς μια φόρμα google που πρέπει να συμπληρώσει ο πελάτης. Ο πιο κατάλληλος τύπος πεδίου για αυτό είναι το "URL". Αυτή η ίδια μέθοδος μπορεί να χρησιμοποιηθεί για όλα τα πεδία που θα συνδέονται με μια εξωτερική υπηρεσία. Όταν τελειώσετε, μετακινηθείτε προς τα κάτω στο πλαίσιο "location" και χρησιμοποιήστε τη λογική "Show if Post Type" = "Customer". Στη συνέχεια, δημοσιεύστε την ομάδα πεδίων.
09. Δημιουργήστε το αρχείο προτύπου WordPress
Το WordPress πρέπει να γνωρίζει πώς να εμφανίζει έναν πίνακα ελέγχου πελατών. Για αυτό, ακολουθείται η ιεραρχία προτύπων WordPress για τη δημιουργία ενός αρχείου προτύπου για αυτόν τον συγκεκριμένο τύπο δημοσίευσης. Δημιουργήστε ένα αρχείο που ονομάζεται single-tu_customer.php στον ριζικό κατάλογο θέματος.
10. Δημιουργήστε μια διάταξη μίας ανάρτησης πλήρους πλάτους
Ανοίξτε το αρχείο single-tu_customer.php και προσθέστε τις λειτουργίες get_header και get_footer WordPress. Μεταξύ αυτών των λειτουργιών, δημιουργήστε μια διάταξη πλήρους πλάτους για να διατηρήσετε το περιεχόμενο που λειτουργεί με το θέμα σας.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primer"> main id = "main"> -! Περιεχόμενο -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Ξεκινήστε το βρόχο και δημιουργήστε το περιεχόμενο
Στο κύριο στοιχείο>, καλέστε το_post και δημιουργήστε τα στοιχεία κοντέινερ για να κρατήσετε πληροφορίες. Χρησιμοποιήστε τις πληροφορίες κράτησης θέσης για να πάρετε μια ιδέα για τη διάταξη και να αρχίσετε να σχεδιάζετε τα στοιχεία. Τα στοιχεία της κάρτας θα είναι κάρτες εκκίνησης με κεφαλίδα, περιγραφή και σύνδεσμο.
main id = "main">? php ενώ (has_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php εν τω μεταξύ; // τέλος του βρόχου. ?> var13 -> / main>! - #main ->
12. Χρησιμοποιήστε PHP για κλήση σε δυναμικές τιμές
Χρησιμοποιώντας τη συνάρτηση "the_field", μια συνάρτηση που συνοδεύει το προηγμένο πρόσθετο προσαρμοσμένων πεδίων, το δυναμικό περιεχόμενο από τα προσαρμοσμένα πεδία εισάγεται στο πρότυπο πελάτη. Το «πεδίο_ όνομα» είναι η τιμή που καταχωρίστηκε στο βήμα 3.
div> div> h5> Brief / h5> p> Αυτό είναι το αρχικό σας σύντομο έγγραφο / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Άνοιγμα / a > / div> / div>
13. Κάντε έναν δοκιμαστικό πελάτη με κάποια εικονικά δεδομένα
Πρόσβαση στον πίνακα ελέγχου του WordPress, ένας νέος πελάτης μπορεί να προστεθεί από την αριστερή γραμμή. Πελάτες> Προσθήκη νέου πελάτη. Η προβολή ανάρτησης θα είναι γνωστή, αλλά η κύλιση προς τα κάτω θα αποκαλύψει όλα τα νέα προσαρμοσμένα πεδία. Εισαγάγετε ορισμένα δεδομένα δοκιμής για να βεβαιωθείτε ότι όλα λειτουργούν σωστά.
14. Αντιμετωπίστε σφάλματα για τυχόν δεδομένα που λείπουν
Εάν ένα έγγραφο ξεχάσει ή είναι πολύ νωρίς στη διαδικασία για να είναι διαθέσιμο αυτό το έγγραφο, θα μπορούσε να προκαλέσει σύγχυση για έναν πελάτη όταν το κουμπί δεν λειτουργεί. Προσθέτοντας μια επιταγή ότι υπάρχει μια τιμή προτού την δείξει δίνει την ευκαιρία να δείξει μια παραλλαγή "λείπει πεδίο" της κάρτας. Η προσθήκη τάξης "απενεργοποιημένη" στην κάρτα όταν λείπει η τιμή θα μας επιτρέψει να διαμορφώσουμε κάρτες που δεν είναι διαθέσιμες.
? php if (get_field ('field_name')):?> var13 -> εμφανίζεται όταν το field_name έχει τιμή? php else: // field_name return false?> var13 -> εμφανίζεται όταν το πεδίο δεν υπάρχει? php endif ; // τέλος της λογικής if_ field_name?> var13 ->
15. Τακτοποιήστε τη διεπαφή
Τώρα που έχει ολοκληρωθεί η δομή της διεπαφής, μπορεί να διαμορφωθεί σωστά. Χρησιμοποιώντας CSS, η εμφάνιση των καρτών και των χρωμάτων στη σελίδα μπορεί να βελτιωθεί. Το χρώμα της πλοήγησης έχει αλλάξει σε ανοιχτό μπλε και η κατεύθυνση του χρήστη έχει βελτιωθεί με την προσθήκη κειμένου εισαγωγής.
16. Εξαιρέστε τον από το χάρτη ιστότοπου
Οι προσαρμοσμένοι τύποι δημοσιεύσεων δεν πρέπει να βρίσκονται στα αποτελέσματα των μηχανών αναζήτησης. Ο τύπος ανάρτησης πρέπει να εξαιρείται από τον χάρτη ιστότοπου του ιστότοπου, είτε μέσω προσθήκης SEO είτε με μη αυτόματη χρήση μιας μετα-ετικέτας και του robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Απαγόρευση: / customers /
Θέλετε να σχεδιάσετε έναν νέο ιστότοπο; Χρησιμοποιήστε ένα εξαιρετικό εργαλείο δημιουργίας ιστότοπων για να κάνετε τη διαδικασία εξαιρετικά απλή.
