Δημιουργήστε μια πύλη πελάτη με το WordPress

Sep 11, 2025

πως να

(Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

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

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

Αυτό Wordpress tutorial θα δείξει πώς να επεκτείνετε το WordPress (Άλλο web hosting Οι υπηρεσίες είναι διαθέσιμες) σε μια πύλη πελάτη ικανή να αποθηκεύει έγγραφα, βίντεο και σχέδια, οπότε ένας πελάτης μπορεί να έχει πρόσβαση σε όλα αυτά σε ένα μέρος. Η πύλη θα εξυπηρετήσει κάθε πελάτη με μοναδικό και προστατευμένο σύνδεσμο με κωδικό πρόσβασης που δεν εμφανίζεται στην τακτική πλοήγηση.

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

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

Κατεβάστε τα αρχεία για αυτό το σεμινάριο.

Πώς να μετατρέψετε το WordPress σε έναν οπτικό οικοδόμο

01. Εγκαταστήστε ένα νέο αντίγραφο του WordPress

Ένα νέο αντίγραφο του WordPress είναι εγκατεστημένο στον διακομιστή ανάπτυξης και το θέμα "UnderTrap" έχει επιλεγεί για να δώσει ένα ίδρυμα λέβητα για να ξεκινήσει γρήγορα την εργασία. Το Custom Post Type UI Plugin θα χρησιμοποιηθεί έτσι ώστε οι προσαρμοσμένοι τύποι δημοσιεύσεων είναι ανεξάρτητοι από το θέμα.

02. Αφαιρέστε τα προεπιλεγμένα plugins

Εάν τα προεπιλεγμένα plugins ήρθαν με το αντίγραφο του WordPress, διαγράψτε αυτά. Τα plugins που χρειάζονται για αυτό το σεμινάριο είναι "προχωρημένα προσαρμοσμένα πεδία" και "προσαρμοσμένο UI τύπου". Έχει επίσης εγκατασταθεί "Classic Editor".

03. Προσθέστε έναν προσαρμοσμένο τύπο μετά

Χρησιμοποιώντας την προσαρμοσμένη διεπαφή UI τύπου Post, προσθέστε έναν νέο τύπο ταχυδρομείου που ονομάζεται "πελάτης". Κατά την είσοδο στο "Τύπος", χρησιμοποιήστε υπογράμμιση αντί για κενά και γράψτε στην μοναδική μορφή, καθώς αυτό θα διευκολύνει τη δημιουργία προτύπων αργότερα. Το πρόθεμα TU_ έχει προστεθεί για να μειώσει την πιθανότητα μιας σύγκρουσης.

04. Η διεπαφή προσαρμοσμένου τύπου προσθήκης / επεξεργασίας

Build a client portal with WordPress: The add/edit custom post type interface — Προσθέστε τόσο τις μοναδικές όσο και τις πληθυντικές ετικέτες (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Προσθέστε έναν πληθυντικό σημασμένο "πελάτες" και μοναδικό "πελάτη", καθώς αυτό θα εμφανιστεί στο μενού του WordPress admin. Η κεφαλαιοποίηση γίνεται αποδεκτή σε αυτούς τους τομείς, οι οποίοι θα κάνουν το μενού του WordPress.

05. Δημιουργήστε μια προσαρμοσμένη ξυλεία ξαναγράψιμων

Build a client portal with WordPress: Create a custom rewrite slug — Χρησιμοποιήστε το προσαρμοσμένο Rewrite Slug για μια καλύτερη εμπειρία χρηστών (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Η χρήση ενός προθέματος για το SLUG POST τύπου θα σημαίνει ότι οι πελάτες που προστίθενται στην πύλη θα δημιουργηθούν με έναν σύνδεσμο που μοιάζει με "/ tu_customer / παράδειγμα-εταιρεία". Αυτό δεν φαίνεται τακτοποιημένο, και η προσαρμοσμένη επιστροφή ξυρίσματος χρησιμοποιείται για να βελτιωθεί αυτό. Ο καθορισμός του Slug Rewrite Slug σε "πελάτες" επιτρέπει στον προσαρμοσμένο τύπο δημοσίευσης να εμφανίζεται ως / πελάτες / παράδειγμα-εταιρεία.

06. Προσθέστε υποστήριξη για προσαρμοσμένα πεδία

Build a client portal with WordPress: Add support for custom fields — Επιλέξτε την επιλογή "Προσαρμοσμένη πεδίο" και υποβάλετε τις αλλαγές (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Η τελευταία επιλογή που είναι ενεργοποιημένη για τον προσαρμοσμένο ταχυδρομικό τύπο είναι το "Supports & GT; Custom Field" το οποίο βρίσκεται κοντά στο κάτω μέρος της σελίδας. Σημειώστε αυτό, και στη συνέχεια "Προσθήκη τύπου POST" στο κάτω μέρος της σελίδας. Αυτό υποβάλλει τις αλλαγές και τα καταχωρητά τον τύπο μετά την τοποθέτηση.

07. Προσθέστε προσαρμοσμένα πεδία

Build a client portal with WordPress: Add custom fields — Τώρα πρέπει να προσθέσετε προσαρμοσμένα πεδία στο νέο σας τύπο μετά (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Τα προσαρμοσμένα πεδία πρέπει τώρα να προστεθούν και να ανατεθούν στον τύπο μετά τη δημιουργία. Η προσθήκη ομάδας πεδίου που ονομάζεται "πύλη πελατών" είναι το πρώτο βήμα, ακολουθούμενο από την προσθήκη προσαρμοσμένων πεδίων σε αυτό με το κουμπί Προσθήκη πεδίου. Το πρώτο πεδίο "Σύντομη" θα οριστεί ως αρχείο τύπου πεδίου ", το οποίο επιτρέπει στο admin να μεταφορτώσει ένα αρχείο σε αυτή τη θέση. Ορίστε την τιμή επιστροφής στη "Αρχείο URL".

08. Ρυθμίστε τα πεδία

Το επόμενο πεδίο που θα προστεθεί είναι "Ερωτηματολόγιο σήματος". Αυτό θα αποτελείται από έναν σύνδεσμο σε μια μορφή Google που πρέπει να συμπληρώσει ο πελάτης. Ο καταλληλότερος τύπος πεδίου για αυτό είναι "URL". Αυτή η ίδια μέθοδος μπορεί να χρησιμοποιηθεί για όλα τα πεδία που θα συνδέονται με μια εξωτερική υπηρεσία. Όταν τελειώσετε, μετακινηθείτε προς τα κάτω στο πλαίσιο "Τοποθεσία" και χρησιμοποιήστε τη λογική "Εμφάνιση αν πληκτρολογήστε" = "Πελάτης". Στη συνέχεια, δημοσιεύστε την ομάδα πεδίου.

Generate CSS — Κάντε κράτηση τα εισιτήριά σας για να δημιουργήσετε το CSS τώρα για να εξοικονομήσετε £ 50 (Πιστωτική πίστωση: Getty / Future)

09. Δημιουργήστε το αρχείο Template WordPress

Το Wordpress πρέπει να ξέρει πώς να εμφανίσει έναν πίνακα ελέγχου πελατών. Για αυτό, ακολουθείται η ιεραρχία Template WordPress για τη δημιουργία ενός αρχείου προτύπου για αυτόν τον συγκεκριμένο τύπο μετά. Δημιουργήστε ένα αρχείο που ονομάζεται single-tu_customer.php στον κατάλογο θέματος ρίζας.

10. Δημιουργήστε μια ενιαία διάταξη πλήρους πλάτους

Build a client portal with WordPress: Create a full-width single post layout — Κάντε μια διάταξη πλήρους πλάτους για το περιεχόμενό σας (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Ανοίξτε το αρχείο Single-tu_customer.php και προσθέστε τις λειτουργίες του WordPress Get_header και Get_Footer Wordpress. Μεταξύ αυτών των λειτουργιών, δημιουργήστε μια διάταξη πλήρους πλάτους για να κρατήσετε το περιεχόμενο που λειτουργεί με το θέμα σας.

 & lt;? Php get_header ();?? Gt;
& lt; div class = "wrapper" id = "single-wrapper" & gt;
& lt; div class = "container" id = "περιεχόμενο" tabindex = "- 1" & gt;
& lt; div class = "σειρά" & gt;
& lt; div class = "col-md περιεχόμενο-περιοχή" id = "πρωτεύουσα" & gt;
& lt; κύρια τάξη = "site-main" id = "main" & gt; & lt; -! Περιεχόμενο - & GT; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt; -. low - & gt;
& lt; / div & gt; & lt; - # #content - & gt;
& lt; / div & gt; & lt; - # ενιαία περιτύλιξη - & gt;
& lt;? php get_footer ();;

11. Ξεκινήστε το βρόχο και δημιουργήστε το περιεχόμενο

Build a client portal with WordPress: Start the loop and create the content — Χρησιμοποιήστε τους κάτοχους κράτησης για να κάνετε το περιεχόμενό σας (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Μέσα στο & lt; main & gt; Στοιχείο, καλέστε το_post και δημιουργήστε τα στοιχεία του δοχείου για να κρατήσετε πληροφορίες. Χρησιμοποιήστε πληροφορίες θέσης θέσης για να πάρετε μια ιδέα της διάταξης και να αρχίσετε να στυλ τα στοιχεία. Τα στοιχεία της κάρτας θα είναι κάρτες bootstrap με κεφαλίδα, περιγραφή και σύνδεσμο.

 & lt; κύρια τάξη = "site-main" id = "main" & gt;
& lt; php ενώ (have_posts ()): the_post (); & gt;
& lt; div class = "container" & gt;
& lt; div class = "σειρά" & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; php άκρη? // τέλος του βρόχου. & gt;
& lt; / main & gt; & lt; - #main - & gt;

12. Χρησιμοποιήστε το PHP για να καλέσετε σε δυναμικές τιμές

Χρησιμοποιώντας τη λειτουργία "The_field", μια συνάρτηση που συνοδεύεται από τα προηγμένα προσαρμοσμένα πεδία plugin, το δυναμικό περιεχόμενο από τα προσαρμοσμένα πεδία εισάγεται στο πρότυπο πελάτη. Το "field_name" είναι η τιμή που εισήχθη στο βήμα 3.

 & lt; div class = "Κέντρο κειμένου-Κέντρο" & GT;
& lt; div class = "card-body" & gt;
& lt; h5 class = "card-title" & gt; brief & lt; / h5 & gt;
& l; p τάξη = "card-text" & gt; αυτό είναι το αρχικό σας σύντομο έγγραφο & lt; / p & gt;
& lt; ένα href = "& lt; php the_field ('σύντομη');?" " Target = "NONE" CLASS = "BTN BTN-PRIVETE" & GT; / A & GT;
& lt; / div & gt;
& lt; / div & gt;

13. Κάντε έναν δοκιμαστικό πελάτη με μερικά dummy δεδομένα

Build a client portal with WordPress: Make a test customer with some dummy data — Πηγαίνετε στο ταμπλό του WordPress για να κάνετε έναν ανδρείκελο πελάτη (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

Πρόσβαση στο ταμπλό του WordPress, ένας νέος πελάτης μπορεί να προστεθεί από το αριστερό μπαρ. Πελάτες & gt; Προσθέστε νέο πελάτη. Η ανάρτηση θα είναι εξοικειωμένη, αλλά η κύλιση προς τα κάτω θα αποκαλύψει όλα τα νέα προσαρμοσμένα πεδία. Εισαγάγετε ορισμένα δεδομένα δοκιμής για να βεβαιωθείτε ότι όλα λειτουργούν σωστά.

14. Λάβετε σφάλματα για τυχόν ελλείποντα δεδομένα

Build a client portal with WordPress: Handle errors for any missing data — Βεβαιωθείτε ότι είναι σαφές όταν τα έγγραφα δεν είναι διαθέσιμα (Πίστωση εικόνας: Σχεδιαστής ιστοσελίδων)

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

 & lt; php εάν (get_field ('field_name')):? & Gt;
εμφανίζεται όταν το πεδίο_Name έχει μια τιμή
& lt;? php else: // field_name επέστρεψε ψευδές; & gt;
εμφανίζεται όταν το πεδίο δεν υπάρχει
& lt;? endif php; // τέλος της λογικής field_name; "

15. Τακτοποιήστε τη διεπαφή

Τώρα που ολοκληρώνεται η δομή της διασύνδεσης, μπορεί να στραφεί σωστά. Χρησιμοποιώντας το CSS, η εμφάνιση των καρτών και των χρωμάτων στη σελίδα μπορεί να βελτιωθεί. Το χρώμα για την πλοήγηση έχει αλλάξει σε ένα ελαφρύτερο μπλε και η κατεύθυνση του χρήστη έχει βελτιωθεί με την προσθήκη κειμένου εισαγωγής.

16. Αποκλείστε το από το sitemap

Οι προσαρμοσμένοι τύποι δημοσιεύσεων δεν πρέπει να βρίσκονται στις οδηγίες των μηχανών αναζήτησης. Το είδος ταχυδρομείου πρέπει να αποκλειστεί από το sitemap του ιστότοπου, είτε μέσω ενός plugin SEO είτε με χειροκίνητα χρησιμοποιώντας μια ετικέτα meta και robots.txt.

 & lt; meta όνομα = "ρομπότ" περιεχόμενο = "noindex, nofollow" / & gt;
Αντιπρόσωπος χρήστη: *
Απαλλαγή: / Πελάτες /

Θέλετε να σχεδιάσετε μια νέα ιστοσελίδα; Χρησιμοποιήστε ένα λαμπρό οικοδόμος ιστότοπου για να κάνετε τη διαδικασία εξαιρετικά απλή.

Σχετικά Άρθρα:

Τις καλύτερες υπηρεσίες φιλοξενίας WordPress το 2019
13 εξαιρετικά εργαλεία για το Pitching σε πελάτες
Wordpress ιστοσελίδες: 14 φοβερά παραδείγματα

Δημιουργήστε μια πύλη πελάτη με το WordPress

01. Εγκαταστήστε ένα νέο αντίγραφο του WordPress

02. Αφαιρέστε τα προεπιλεγμένα plugins

03. Προσθέστε έναν προσαρμοσμένο τύπο μετά

04. Η διεπαφή προσαρμοσμένου τύπου προσθήκης / επεξεργασίας

05. Δημιουργήστε μια προσαρμοσμένη ξυλεία ξαναγράψιμων

06. Προσθέστε υποστήριξη για προσαρμοσμένα πεδία

07. Προσθέστε προσαρμοσμένα πεδία

08. Ρυθμίστε τα πεδία

09. Δημιουργήστε το αρχείο Template WordPress

10. Δημιουργήστε μια ενιαία διάταξη πλήρους πλάτους

11. Ξεκινήστε το βρόχο και δημιουργήστε το περιεχόμενο

12. Χρησιμοποιήστε το PHP για να καλέσετε σε δυναμικές τιμές

13. Κάντε έναν δοκιμαστικό πελάτη με μερικά dummy δεδομένα

14. Λάβετε σφάλματα για τυχόν ελλείποντα δεδομένα

15. Τακτοποιήστε τη διεπαφή

16. Αποκλείστε το από το sitemap

πως να - Τα πιο δημοφιλή άρθρα

Σχεδιάστε τη δύναμη της αντίθεσης στο άρθρο

21 βήματα για το Super Speedy JavaScript

4 Βήματα για τη χρήση μεταβλητών γραμματοσειρών

Πώς να προσθέσετε κινούμενα σχέδια στο SVG με CSS

Πώς να σχεδιάσετε πιο ρεαλιστικά στοιχεία

8 Βασικά μυστικά ασφαλείας Wordpress

Πώς να σχεδιάσετε μια εμπειρία Chatbot

Πώς να γλυπτεί στον κινηματογράφο 4D

Κατηγορίες