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

Ενημερώθηκε: 30 Ιουνίου 2013 / Άρθρο από: Jerry Low

Όταν το WordPress αποκάλυψε αυτό που ήταν το τυπικό του θέμα, ο Kubrick, πριν από αρκετά χρόνια, πήρε επίσης τα νέα του ένα συναρπαστικό νέο χαρακτηριστικό. Αυτή η δυνατότητα ήταν ο προσαρμοσμένος πίνακας διαχείρισης θέματος, ο οποίος ενεργοποιήθηκε καθορίζοντας λειτουργίες και προτιμήσεις στο συγκεκριμένο θέμα "functions.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 ("name" => $ longname. "Ρυθμίσεις εμφάνισης",
"Type" => "τίτλος"),

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

πίνακας ("type" => "open"),

Τώρα είμαστε ελεύθεροι να αρχίσουμε να ορίζουμε επιλογές εμφάνισης θέματος, με καθεμία από αυτές να δημιουργείται ως νέος πίνακας. Σε αυτό το παράδειγμα, θα καθορίσουμε το κείμενο που τοποθετείται στο υποσέλιδο του θέματος. Από προεπιλογή, το παράδειγμα παραδείγματος περιέχει έναν σύνδεσμο προς τον ιστότοπο του προγραμματιστή θεμάτων, καθώς και πληροφορίες εκδόσεων teem. Αυτό δεν είναι επιθυμητό από μεγάλο αριθμό χρηστών του 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. Αυτό συμβαίνει επειδή η σελίδα επιλογών του θέματος πρέπει να προσδιοριστεί στη σελίδα συναρτήσεων και να πει πού να πάει (είτε ως ανεξάρτητο στοιχείο πλευρικής γραμμής είτε εντός της ομαδοποίησης "Ρυθμίσεις"). Αυτό γίνεται χρησιμοποιώντας μια σχετικά απλή συνάρτηση που προστίθεται στο αρχείο "functions.php" κάτω από τις συστοιχίες πιθανών προσαρμογών:

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

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

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

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

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

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

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

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

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

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

<? php διάλειμμα; υπόθεση «κείμενο»:; >

<tr>
<td width = "20%" rowspan = "2 ″ valign =" middle "> <strong> <? php echo $ value ['name']; ; > </ strong> </ td>
<td width = "80%"> <input style = "πλάτος: 100%;" name = "<? php echo $ value ['id']; ; > "Id =" <? Php echo $ value ['id']; ; > "Type =" <? Php echo $ value ['type']; ; > "Τιμή =" <? Php if (get_settings ($ value ['id'])! = "") {Echo get_settings ($ value ['id']); } αλλιώς {echo $ value ['std']; }; > "/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ; > </ small> </ td>
</ tr> <tr> <td colspan = "2 ″> </ td>
</ tr>

<? php break;}; >

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

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

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

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

<? php echo $ apdt_custom_footer; ; >

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

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

<? php παγκόσμιες ρυθμίσεις $;
foreach ($ ρυθμίσεις ως τιμή $) {
if (get_settings ($ value ['id']) === FALSE) {$$ τιμή ['id'] = $ τιμή ['std']; } αλλιώς {$$ value ['id'] = get_settings ($ value ['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 και πολλά άλλα.