Ένας οδηγός για την ανάπτυξη WordPress Παιδικά Θέματα

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

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

Σε αυτόν τον οδηγό θέλω να εισαγάγω τις βασικές έννοιες της οικοδόμησης ενός παιδιού WordPress και γιατί είναι τόσο καλή ιδέα.

Ξεκινώντας

Τα θέματα παιδιών δεν είναι τόσο δύσκολα όσο μπορεί να φαίνονται. Τα οφέλη από την επεξεργασία ενός γονικού θέματος σημαίνει ότι δεν χρειάζεται να γράφετε όλα τα HTML / CSS από την αρχή. Ένα θέμα παιδιού θα χρησιμοποιήσει αυτόματα όλα τα αρχεία προτύπων που συμπεριλαμβάνετε, όπως π.χ. sidebar.php ή footer.php. Αλλά αν λείπουν, τότε το θέμα του παιδιού σας θα τραβήξει τα ίδια αρχεία από τον γονέα του.

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

Τα απαιτούμενα αρχεία σας

Χρειάζεστε μόνο ένα ενιαίο φύλλο στυλ .css για να δημιουργήσετε ένα θέμα παιδιού στο WordPress. Πρέπει επίσης να δημιουργήσετε έναν νέο κατάλογο στον / wp-content / themes φάκελο που θα φιλοξενήσει το θέμα του παιδιού σας. Δώστε προσοχή σε εσάς δεν είναι δημιουργώντας αυτόν τον φάκελο μέσα στο γονικό θέμα, αλλά δίπλα του στον ίδιο κατάλογο θεμάτων.

Οι προγραμματιστές θα περιλαμβάνουν συχνά λειτουργίες.php και screenshot.png στον ίδιο φάκελο με το νέο σας αρχείο CSS. Το στιγμιότυπο οθόνης εμφανίζεται στον πίνακα διαχείρισης του WordPress και το αρχείο θεμάτων των λειτουργιών μπορεί να χρησιμοποιηθεί για τους τόνους των αλλαγών του backend.

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

 / * Θέμα Όνομα: Είκοσι Έντεκα Θέμα Παιδιού URI: http: //example.com/ Περιγραφή: Θέμα παιδιού για το σχέδιο Twenty Eleven Συγγραφέας: Jake Rocheleau Συγγραφέας URI: http: //www.hongkiat.com/blog/ Πρότυπο: twentyeleven Έκδοση: 0.1 * / 

Η τιμή για πρότυπο πρέπει να είναι το όνομα καταλόγου για το συνοδευόμενο γονικό θέμα. Εκτός από ότι όλες οι άλλες ετικέτες πρέπει να είναι εξοικειωμένοι με το πρότυπο WordPress theming.

Αν και όλα τα γονικά πρότυπα PHP θα χρησιμοποιηθούν, το style.css του αρχικού γονέα θα δεν να εισαχθεί αυτόματα. Αν θέλετε να ξεφύγετε από τα αρχικά στυλ, θα πρέπει να το συμπεριλάβετε στην κορυφή του εγγράφου style.css του παιδιού σας. Ακολουθεί ένα παράδειγμα που περιλαμβάνει το θέμα WP Twenty Eleven.

 @import url ("... / twentyeleven/style.css"); 

Ρύθμιση νέων μορφών

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

Θα μπορούσαμε να κάνουμε demo με κάποιες πραγματικά εύκολες αλλαγές στους συνδέσμους και τις παραγράφους. Έχω χρησιμοποιήσει κώδικα από το αρχικό Twenty Eleven θέμα για τη στόχευση των διαφόρων στοιχείων. Κατά καιρούς είναι απαραίτητο να χρησιμοποιήσετε έναν ειδικό επιλογέα για να αντικαταστήσετε τον παλαιότερο σχεδιασμό.

 σώμα padding: 0 1.4em;  #σελίδα περιθώριο: 1.667em auto; μέγιστο πλάτος: 900px.  α χρώμα: # 5281df; κείμενο-διακόσμηση: κανένα? γραμματοσειρά-οικογένεια: Calibri, Tahoma, Arial, sans-serif;  α: εστίαση, α: ενεργή, a: hover text-decoration: underline;  

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

Τα σημαντικά πράγματα

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

 α χρώμα: # 5281df! κείμενο-διακόσμηση: κανένα? γραμματοσειρά-οικογένεια: Calibri, Tahoma, Arial, sans-serif;  

Πάνω έχω αντιγράψει τις αρχικές αλλαγές μου και έχω επεξεργαστεί το χρώμα κειμένου αγκίστρου με μια σημαντική ρήτρα. Αυτό θα έχει προτεραιότητα σε σχέση με όλα τα άλλα στυλ του ίδιου βάθους επιλογέα. Περισσότερα καθορισμένα στοιχεία (όπως #access li: hover> α) θα διατηρούν συνήθως τα δικά τους στυλ εκτός αν το χρώμα εξακολουθούσε να κληρονομείται από τον αρχικό επιλογέα μας. Σε αυτή την περίπτωση το γονικό μας θέμα δεν ρυθμίζει μια ιδιοκτησία οικογένειας γραμματοσειράς σε συνδέσμους αγκυροβόλησης, έτσι ώστε να μην έχουμε προβλήματα κληρονομιάς.

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

Κλωνοποίηση functions.php

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

Για παράδειγμα, έχω δημιουργήσει μια συνάρτηση που αναλύει μερικά αρχεία JavaScript όταν ξεκινά το πρότυπο. Αυτό θα αφαιρέσει τυχόν παλαιότερες εκδόσεις jQuery και SWFObject scripts, προσθέτοντας ταυτόχρονα τις πιο πρόσφατες εκδόσεις στο wp_head περιοχή.

 // queue js αρχεία για τη λειτουργία φόρτωσης mytheme_js () if (is_admin ()) επιστροφή; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'). wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'). wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js). 

Θα πρέπει να επισημάνω ότι αν εισάγετε κώδικα από το γονικό functions.php τότε θα πρέπει να χρησιμοποιήσετε ένα διαφορετικό όνομα λειτουργίας. Διαφορετικά, η PHP θα δώσει ένα θανατηφόρο λάθος και θα πρέπει να FTP στο διακομιστή για να διορθώσετε το λάθος.

Εργασία με Αρχεία Θέματος

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

Για παράδειγμα archive.php και index.php χρησιμοποιούνται για την εμφάνιση του μηνύματος αρχειοθέτησης και της αρχικής οθόνης, αντίστοιχα. Αν υπάρχουν αλλαγές που θέλετε να κάνετε, οι οποίες απαιτούν επεξεργασίες στο HTML τότε θα είστε πιο ασφαλείς να κλωνοποιήσετε τα γονικά αρχεία και να τα επεξεργαστείτε στον κατάλογο θεμάτων του παιδιού.

Προσαρμοσμένα πρότυπα σελίδας

Ενώ μιλάμε για αρχεία προτύπων, θέλω επίσης να εισαγάγω ένα κομμάτι της λειτουργικότητας του WordPress, το οποίο πολλοί δεν γνωρίζουν. Μπορείτε να δημιουργήσετε πρότυπα σελίδων και δημοσιεύσεων τα οποία θα είναι επιλεγμένα από τον πίνακα διαχειριστή κατά τη δημιουργία νέου περιεχομένου. Ακόμα κι αν το γονικό θέμα δεν έχει το νέο προσαρμοσμένο αρχείο προτύπου, το WordPress θα χρησιμοποιεί το παιδί στη θέση του page.php ή single.php.

Αρχικά δημιουργήστε ένα νέο αρχείο με το όνομα page-offer.php. Αυτό θα είναι α “ειδική προσφορά” προωθητική σελίδα που είναι διαφορετική από ό, τι όλα τα άλλα. Εδώ μπορείτε να αντιγράψετε τον αρχικό κώδικα σελίδας ή ακόμα και να δημιουργήσετε το θέμα εξ ολοκλήρου από την αρχή. Ο μόνος κώδικας που πρέπει να αφήσουμε το WordPress να γνωρίζει για αυτό το νέο πρότυπο είναι μια ρύθμιση σχολίων στην PHP.

Μια άλλη εναλλακτική λύση σε αυτή τη μέθοδο είναι η δημιουργία προσαρμοσμένων σελίδων που ονομάζονται με τον μοναδικό αριθμό ταυτότητας. Έτσι, αντί να φορτώσετε την προεπιλογή archive.php για σελίδες δημιουργών θα μπορούσατε να δημιουργήσετε ένα αρχείο όπως author-ID.php όπου ID είναι ο μοναδικός αριθμός αναγνωριστικού WordPress του χρήστη. Παρόλο που το σύστημα αυτό φορολογείται περισσότερο, θα χρειαστεί να δημιουργήσετε ένα νέο αρχείο προτύπου για κάθε συγγραφέα στον ιστότοπό σας.

Γίνεται πιο χρήσιμο εάν μπορείτε να συνδυάσετε αυτές τις δύο τεχνικές με άλλα αρχεία προτύπων. Συγκεκριμένα οι κατηγορίες και οι ετικέτες λειτουργούν καλά χρησιμοποιώντας τα δικά τους αρχεία θεμάτων. Επίσης, εάν συνδέετε με συνημμένα στο περιεχόμενό σας, τότε θα θέλετε να εξετάσετε τις διάφορες πιθανές διατάξεις προτύπων για κάθε τύπο mime. Συμπεριέλαβα την παρακάτω ιεραρχία προτύπου για ένα απλό συνημμένο είδωλο JPEG:

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Χρήσιμα εργαλεία WordPress

Το ίδιο το WordPress έχει ένα ευέλικτο σύστημα plugins που μπορεί να διαχειριστεί πολλές προσαρμογές. Δεδομένου ότι τα παιδικά θέματα είναι τόσο καινούργια, δεν υπάρχει μια ολόκληρη επίθεση από τις εκδόσεις τρίτων (ακόμη). Ωστόσο, υπάρχουν μερικά εργαλεία που μπορείτε να ελέγξετε έξω για να κάνετε τον αναπτυξιακό σας χρόνο λίγο πιο σύντομο.

Μια προφανής αναφορά είναι το plugin Theme Child Theme που δημιουργήθηκε και δοκιμάστηκε για την τελευταία έκδοση του WordPress 3.x. Προσθέτει ένα σύνδεσμο μενού στον διαχειριστή σας “Θέματα” για να δημιουργήσετε αυτόματα ένα παιδί χρησιμοποιώντας το τρέχον ενεργό θέμα σας. Αυτό είναι φανταστικό αν δεν θέλετε να χάσετε με το FTP και θέλετε να παίξετε με μερικές νέες ιδέες.

Εάν σχεδιάζετε να επεξεργαστείτε αυτά τα αρχεία στο πλαίσιο διαχείρισης, θα απολαύσετε επίσης πιο σαφή επισήμανση σύνταξης. Αυτό δεν προσφέρεται στο WordPress από προεπιλογή, αλλά μπορείτε να εγκαταστήσετε τον Advanced Code Editor για κάποια πολύ βελτιωμένη λειτουργικότητα. Αυτό κάνει τα μπλοκ κώδικα PHP και το HTML / CSS πολύ πιο εύχρηστο.

Επιπρόσθετοι πόροι

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

• 8 Δωρεάν είκοσι εννέα θέματα για παιδιά
• WordPress Online Codex »Παιδικά Θέματα
• Πώς να οικοδομήσουμε ένα WordPress Παιδικό Θέμα χρησιμοποιώντας Αγκίστρια και Φίλτρα
• Λίγα λόγια για θέματα παιδιών
• Πώς να δημιουργήσετε, να τροποποιήσετε και να χρησιμοποιήσετε τα θέματα παιδιών στο WordPress

συμπέρασμα

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

.