Πώς να δημιουργήσετε μια προσαρμοσμένη σελίδα διαχείρισης στο WordPress Dashboard

Άρθρο που γράφτηκε από:
  • Προτεινόμενα άρθρα
  • Ενημερώθηκε: Ιουν 30, 2013

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

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

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

Βήμα 1: Δημιουργία και επεξεργασία της συγκεκριμένης λειτουργικής σελίδας Functions.php

Εάν έχετε αναπτύξει το δικό σας θέμα, οι πιθανότητες είναι πολύ λεπτό ότι έχετε κάνει ένα αρχείο functions.php που πρέπει να αντιστοιχιστεί με τα υπάρχοντα αρχεία προτύπων. Πρόκειται για σχετικά προχωρημένες επιλογές και οι περισσότεροι σχεδιαστές απλά το παραλείπουν εντελώς. Σε αυτήν την περίπτωση, είναι απαραίτητο να ανοίξετε τον πελάτη FTP που θέλετε και να τον τοποθετήσετε στην ακόλουθη διεύθυνση URL του διακομιστή όπου βρίσκονται τα αρχεία του θέματος:

/ public_html / wp-content / θέματα / ΤΟ ΘΕΜΑ / ΘΕΜΑ /

Μόλις εισέλθετε σε αυτό το φάκελο, ελέγξτε για να βεβαιωθείτε ότι δεν υπάρχει αρχείο "functions.php" και, στη συνέχεια, χρησιμοποιήστε το πρόγραμμα επεξεργασίας κειμένου για να δημιουργήσετε ένα νέο αρχείο με το όνομα "functions.php". Αυτό το αρχείο μπορεί στη συνέχεια να αποθηκευτεί και να φορτωθεί στο διακομιστή μέσω FTP. Μπορεί να επεξεργαστεί απευθείας στο διακομιστή, εξαλείφοντας την ανάγκη για το πρόγραμμα επεξεργασίας κειμένου.

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

$ longname = "Θέμα ανάπτυξης ομάδας διαχείρισης";
$ shortcode = "apdt";

Αυτές οι μεταβλητές εξυπηρετούν διαφορετικούς σκοπούς. Η μεταβλητή $ longname θα χρησιμοποιηθεί για την εκτύπωση του ονόματος του θέματος στον πίνακα επιλογών πραγματικής διαχείρισης. Για το λόγο αυτό, συνιστάται στους προγραμματιστές να αντιστοιχούν το ακριβές όνομα του θέματος σε αυτήν τη μεταβλητή, προκειμένου να εξαλειφθεί η σύγχυση μεταξύ των χρηστών του θέματος. Η μεταβλητή $ shortcode θα πρέπει να είναι όλα τα πεζά γράμματα χωρίς καμία στίξη, καθώς αυτό θα χρησιμοποιηθεί για τον εντοπισμό στοιχείων φόρμας μέσα στον ίδιο τον κώδικα. Στο παράδειγμα, χρησιμοποιήθηκε ένα απλό ακρωνύμιο βασισμένο στο πλήρες όνομα του θέματος. αυτό μπορεί να προσαρμοστεί στις προτιμήσεις ενός χρήστη.

Βήμα 2: Καθορισμός προσαρμόσιμων προτιμήσεων με τη χρήση πινάκων PHP

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

$ settings = πίνακα (
array ("όνομα" => $ longname) "Ρυθμίσεις εμφάνισης",
"Τύπος" => "τίτλος"),

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

("τύπος" => "ανοιχτό"),

Τώρα είμαστε ελεύθεροι να ξεκινήσουμε να ορίζουμε τις επιλογές εμφάνισης θέματος, με το καθένα από αυτά να δημιουργείται σαν μια νέα συστοιχία. Σε αυτό το παράδειγμα, πρόκειται να ορίσουμε το κείμενο που τοποθετείται στο υποσέλιδο του θέματος. Από προεπιλογή, το θέμα του παραδείγματος περιέχει έναν σύνδεσμο στον ιστότοπο του προγραμματιστή θεμάτων, καθώς και πληροφορίες σχετικά με την έκδοση έκδοσης. Αυτό δεν είναι επιθυμητό από ένα μεγάλο αριθμό χρηστών του WordPress που θα προτιμούσαν να τοποθετήσουν τις δικές τους πληροφορίες στο υποσέλιδο, επιτρέποντας έτσι σε αυτό το προσαρμοσμένο έλεγχο να τους αποθηκεύει τη χειροκίνητη επεξεργασία του αρχείου "footer.php". Δείτε πώς γίνεται αυτό.

array (
"Name" => "Προσαρμοσμένο κείμενο υποσέλιδου θέμα",
"Desc" => "Αυτό είναι το κείμενο που εμφανίζεται στο τέλος κάθε σελίδας που περιέχεται σε αυτό το θέμα.",
"Id" => $ shortcode. "_ Custom_footer",
"Type" => "κείμενο",
"Std" => "Πειραματικό θέμα v1.0. Αναπτύχθηκε από τον John Doe. Περισσότερα θέματα εδώ »),

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

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

Desc: Αυτή είναι μια σύντομη περιγραφή που συνοδεύει την προσαρμοσμένη ρύθμιση και αυτή εμφανίζεται στους χρήστες.

ID: Χρησιμοποιείται ο σύντομος κώδικας μαζί με μια εξατομικευμένη αναγνώριση του ονόματος της φόρμας, προκειμένου να παρουσιαστεί και να στυλισθεί το πλαίσιο κειμένου.

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

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

Βήμα 3: Λήψη του WordPress για να ενεργοποιήσετε την πρόσβαση στη νέα σελίδα επιλογών

Παρόλο που η σελίδα επιλογών έδωσε ένα σκοπό χρησιμοποιώντας το αρχείο "functions.php" μέσα στο αρχικό φάκελο ενός θέματος, δεν έχει ακόμη αναγνωριστεί από το WordPress ή περιλαμβάνεται μεταξύ των πολλών άλλων σελίδων ρυθμίσεων μέσα στο WordPress Dashboard. Αυτό οφείλεται στο γεγονός ότι η σελίδα επιλογής του θέματος πρέπει να εντοπιστεί στη σελίδα λειτουργιών και να πει πού να πάει (είτε ως ανεξάρτητο στοιχείο πλευρικής γραμμής είτε μέσα στην ομάδα "Ρυθμίσεις"). Αυτό γίνεται χρησιμοποιώντας μια σχετικά απλή λειτουργία η οποία προστίθεται στο αρχείο "functions.php" κάτω από τις συστοιχίες πιθανών προσαρμογών:

συνάρτηση experimental_theme_save_values ​​() {
παγκόσμια $ longname, $ shortcode, $ settings;
αν ($ _GET ['σελίδα'] == βασική τιμή (__ FILE__)) {
αν ('αποθήκευση' == $ _REQUEST ['action']) {
foreach ($ ρυθμίσεις ως τιμή $) {
update_option ($ αξία ['id'], $ _REQUEST [$ αξία ['id']]); }}
foreach ($ ρυθμίσεις ως τιμή $) {
εάν (isset ($ _REQUEST [$ value ['id']])) {update_option ($ αξία ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']). }}
κεφαλίδα ("Θέση: themes.php? page = functions.php & saved = true");
πεθαίνουν?
} else αν ('επαναφορά' == $ _REQUEST ['action']) {
foreach ($ ρυθμίσεις ως τιμή $) {
delete_option ($ αξία ['id']); }}
κεφαλίδα ("Θέση: themes.php? page = functions.php & reset = true");
πεθαίνουν?
}
}
add_menu_page ($ longname "Ρυθμίσεις εμφάνισης", "". $ longname. "Ρυθμίσεις εμφάνισης", "edit_themes", βασική (__ FILE__), 'experimental_theme_save_values').

Αυτό το κομμάτι κώδικα κάνει δύο πράγματα. Πρώτον, επιτρέπει την αποθήκευση των ρυθμίσεων του θέματος μέσω του πλαισίου επιλογών διαχείρισης. Δεύτερον, τοποθετεί ένα ανεξάρτητο κουμπί στην πλευρική γραμμή του WordPress Dashboard, που επιτρέπει σε έναν χρήστη να κάνει κλικ και να μεταβεί απευθείας στον πίνακα επιλογών θέματος. Έχει την ένδειξη "Ρυθμίσεις εμφάνισης" ακριβώς όπως η ίδια η ίδια η σελίδα. Η συνέπεια είναι το κλειδί για την εξάλειψη της σύγχυσης και την κατεύθυνση των χρηστών στη σελίδα χωρίς να τους λέει συγκεκριμένα να φτάσουν στον πίνακα επιλογών για να προσαρμόσουν την εμφάνιση του θέματος.

Βήμα 4: Προσθήκη μηνυμάτων σφάλματος και κλείσιμο αρχείου PHP

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

συνάρτηση experimental_theme_save_values ​​() {
παγκόσμια $ longname, $ shortcode, $ settings;
αν ($ _REQUEST ['αποθηκευμένο']) echo '
'$ το όνομα.' οι προσαρμογές εμφάνισης αποθηκεύτηκαν με επιτυχία.
»?
αν ($ _REQUEST ['επαναφορά']) echo '
'$ το όνομα.' οι προσαρμογές εμφάνισης έχουν επαναφερθεί με επιτυχία.
»?

Κάτω από αυτές τις δύο γραμμές κώδικα, η ενότητα PHP του αρχείου functions.php μπορεί να κλείσει χρησιμοποιώντας την ετικέτα "end". Κάτω από αυτό, ο κώδικας XHTML θα τοποθετηθεί για να στυλιστούν τα στοιχεία χρησιμοποιώντας το πρότυπο φύλλο στυλ του WordPress Dashboard.

Βήμα 5: Δίνοντας στη σελίδα επιλογών κάποιο στυλ

Επί του παρόντος, οι χρήστες του WordPress Dashboard μπορούν να δουν τη νέα σελίδα σφάλματος, αλλά δεν μπορούν να κάνουν πολλά γι 'αυτό. Αυτό συμβαίνει επειδή τα στοιχεία φόρμας και το φύλλο στυλ δεν έχουν ακόμη τοποθετηθεί στο αρχείο functions.php για χρήση μέσα στη διεπαφή διαχείρισης. Αυτό πρόκειται να αλλάξει, καθώς συμπεριλαμβάνουμε το φύλλο στυλ και τα στοιχεία της φόρμας για χρήση από το νέο πίνακα:

<div class = "wrap">
<h2> <? php echo $ longname; ; > Ρυθμίσεις </ h2>

<form method = "post" action = "options.php">

<? php break; περίπτωση «κείμενο»:? >

<tr>
<td width = "20%" rowspan = "2" valign = "μέση"> <strong> <? php echo $ value ['όνομα']; ; > </ strong> </ td>
<td width = "80%"> <input style = "width: 100%;" όνομα = "<? php echo $ value ['id']; ; > "Id =" <? Php echo $ αξία ['id']; ; > "Type =" <? Php echo $ value ['τύπος']; ; > "Value =" <? Php αν (get_settings ($ value ['id'])! = "") {Echo get_settings ($ value ['id']); } else {echo $ value ['std']; }}; > "/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ αξία ['desc']; ; > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}; >

<input type = "submit" τιμή = "<? php _e ('Αποθήκευση ρυθμίσεων θεμάτων'); > "/>

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

Βήμα 9: Ενεργοποίηση της Προσαρμοσμένης επιλογής για το πραγματικό θέμα

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

<? php echo $ apdt_custom_footer; ; >

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

Στην κεφαλίδα, το θέμα πρέπει να είναι εντολή να αναζητήσει τις επιλογές που ορίζονται από τον χρήστη στο WordPress Dashboard και πρέπει να γνωρίζει τις μεταβλητές που ορίζονται στο προσαρμοσμένο αρχείο "functions.php" ώστε να μπορεί να εκτυπώσει το περιεχόμενό τους στην ιστοσελίδα. Αυτό γίνεται τοποθετώντας την ακόλουθη μεταβλητή PHP στην κεφαλίδα του ιστότοπου (συνήθως το αρχείο "header.php"):

<? php global $ settings;
foreach ($ ρυθμίσεις ως τιμή $) {
εάν (get_settings ($ value ['id']) === FALSE) {τιμή $$ ['id'] = $ αξία ['std']; } else {$$ τιμή ['id'] = get_settings ($ αξία ['id']); }}
}
; >

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

Βήμα 10: Δοκιμάστε τις νέες ρυθμίσεις και τη σελίδα επιλογών

Καμία προσπάθεια ανάπτυξης του WordPress δεν έχει ολοκληρωθεί μέχρι να ελεγχθεί προσεκτικά για σφάλματα, σφάλματα και τυχαία σφάλματα στον κώδικα PHP που έχει τοποθετηθεί στο αρχείο "functions.php". Τούτου λεχθέντος, ήρθε η ώρα να δοκιμάσετε! Συνδεθείτε στον πίνακα εργαλείων του WordPress και εάν το θέμα που έχετε επεξεργαστεί δεν είναι επιλεγμένο, βεβαιωθείτε ότι έχετε μεταβεί στην κατηγορία "Εμφάνιση" στην πλευρική γραμμή και ενεργοποιήστε το σχετικό θέμα.

Από εκεί, ελέγξτε μερικά πράγματα:

  1. Βεβαιωθείτε ότι ο σύνδεσμος ρυθμίσεων του θέματος εμφανίζεται ως δική του οντότητα στην πλαϊνή γραμμή κάτω από την επικεφαλίδα της κατηγορίας πλευρικής γραμμής "Ρυθμίσεις".
  2. Βεβαιωθείτε ότι η καθορισμένη επιλογή προσαρμογής κειμένου υποσημείωσης μπορεί να προσπελαστεί στον πίνακα ελέγχου προσαρμοσμένων επιλογών. να τροποποιήσετε το προεπιλεγμένο περιεχόμενο του υποσέλιδου και να αποθηκεύσετε την προτίμησή σας. Βεβαιωθείτε ότι εξοικονομείται χωρίς σφάλμα.
  3. Επισκεφθείτε τον πραγματικό σας δημόσιο ιστότοπο και βεβαιωθείτε ότι εμφανίζονται οι αλλαγές που έγιναν στον Πίνακα ελέγχου σχετικά με το περιεχόμενο του υποσέλιδου.
  4. Εάν όλα λειτουργούν σωστά, αναπνεύστε ανακούφιση και απολαύστε την πρώτη σελίδα του κουμπιού ελέγχου WordPress.

Σχετικά με τον Jerry Low

Ιδρυτής του WebHostingSecretRevealed.net (WHSR) - ένα σχόλιο φιλοξενίας που εμπιστεύτηκε και χρησιμοποιήθηκε από τους χρήστες του 100,000. Περισσότερο από 15 χρόνια εμπειρίας στο web hosting, μάρκετινγκ θυγατρικών, και SEO. Συνεργάτης στο ProBlogger.net, Business.com, SocialMediaToday.com και πολλά άλλα.