Δημιουργώντας το πρώτο θέμα παιδιού WordPress
Είτε θέλετε να δημιουργήσετε ένα ελαφρώς προσαρμοσμένο θέμα είτε κάτι εντελώς μοναδικό, δημιουργώντας ένα παιδικό θέμα WordPress μπορεί να επιταχύνει σημαντικά τη διαδικασία ανάπτυξης.
Τα θέματα παιδιών σάς επιτρέπουν να ξεκινήσετε με τα βασικά στοιχεία ενός υπάρχοντος θέματος, οπότε δεν χρειάζεται να επανεφεύρετε τον τροχό. Μπορείτε να επιλέξετε ένα θέμα που έχει τη λειτουργικότητα και τη βασική διάταξη που χρειάζεστε, αλλά στη συνέχεια προσαρμόστε τα πάντα γι 'αυτό όπως θα σχεδιάζετε ένα θέμα από την αρχή.
Για αυτό το σεμινάριο, θα δημιουργήσουμε ένα παιδικό θέμα βασισμένο στο πιο πρόσφατο προεπιλεγμένο θέμα WordPress, Twenty Eleven. Θα χρησιμοποιήσουμε επίσης μερικές εύχρηστες προσθήκες και άλλα κόλπα για να διευκολύνουμε ακόμα περισσότερο τη δημιουργία ενός παιδιού.
Θα χρειαστεί κάποιες πολύ βασικές γνώσεις HTML και CSS, αλλά τα καλά νέα είναι ότι για ένα βασικό παιδικό θέμα, δεν χρειάζεται να γνωρίζετε οποιαδήποτε PHP! Το θέμα που δημιουργήθηκε είναι πολύ βασικό, αλλά θα σας δώσει τα δομικά στοιχεία που χρειάζεστε για να ξεκινήσετε τη δημιουργία των δικών σας θεμάτων, ακόμα κι αν δεν έχετε δημιουργήσει ποτέ ένα θέμα WordPress πριν!
Το θέμα που θα δημιουργήσουμε
Ακολουθεί μια σύντομη ματιά στο τελικό θέμα που θα δημιουργήσουμε:
Μια λέξη για τα γονικά θέματα
Πιθανώς το πιο σημαντικό βήμα για τη δημιουργία ενός παιδιού είναι η επιλογή του γονικού σας θέματος. Για αυτό το σεμινάριο, όπως ήδη αναφέρθηκε, θα χρησιμοποιήσουμε Twenty Eleven. Οι λόγοι για αυτό περιλαμβάνουν το γεγονός ότι είναι εύκολα προσβάσιμο, δωρεάν, είναι πιθανώς ήδη εγκατεστημένο σε οποιαδήποτε ενημερωμένη εγκατάσταση WP, και είναι καλά κωδικοποιημένο.
Αυτό το τελευταίο είναι το πιο σημαντικό πράγμα που πρέπει να λάβετε υπόψη κατά την επιλογή του γονικού σας θέματος: βεβαιωθείτε ότι είναι καλά κωδικοποιημένο. Ο κύριος λόγος για αυτό είναι ότι εάν το γονικό σας θέμα είναι καλά κωδικοποιημένο, θα είναι απείρως ευκολότερο να δημιουργήσετε ένα παιδικό θέμα που να είναι καλώς κωδικοποιημένο, επειδή δεν θα χρειαστεί να χρησιμοποιήσετε hacks για να κάνετε τα πράγματα να λειτουργούν.
Οποτεδήποτε θέλετε να κάνετε προσαρμογές σε ένα θέμα, προτιμάτε να χρησιμοποιήσετε ένα θέμα παιδιού αντί να επεξεργαστείτε άμεσα το γονικό θέμα. Με αυτόν τον τρόπο, εάν εκδοθεί μια ενημερωμένη έκδοση για το αρχικό θέμα, το θέμα σας δεν θα σπάσει. Και αν και το γονικό θέμα και το θέμα σας κωδικοποιούνται καλά, πιθανότατα δεν θα παρατηρήσετε τυχόν διαφορές στο ενημερωμένο θέμα στο front-end του ιστότοπού σας.
Θέμα παιδιού με ένα κλικ
Ο γρηγορότερος και ευκολότερος τρόπος να ξεκινήσετε με ένα παιδικό θέμα είναι να χρησιμοποιήσετε το Θέμα παιδιού με ένα κλικ συνδέω. Απλά το εγκαταστήστε, ενεργοποιήστε το γονικό θέμα στο οποίο θέλετε να βασιστεί το θέμα του παιδιού σας (εάν δεν είναι ήδη ενεργό) και κάντε κλικ στο "Θέμα παιδιού" κάτω από την εμφάνιση στον πίνακα εργαλείων του WP.
Από εκεί, πληκτρολογήστε ένα όνομα για το νέο θέμα παιδιού σας, μια σύντομη περιγραφή και το όνομά σας και κάντε κλικ στο "Δημιουργία παιδιού". Αυτό είναι το μόνο που υπάρχει σε αυτό. Μία λέξη ή μια προειδοποίηση: Έλαβα ένα μήνυμα σφάλματος μετά από κλικ στο "Δημιουργία παιδιού", αλλά το παιδικό θέμα δημιουργήθηκε χωρίς να χτυπήσει.
Εναλλακτικά, μπορείτε να δημιουργήσετε ένα θέμα παιδιού από την αρχή. Για να το κάνετε αυτό, ανοίξτε τον κειμενογράφο ή τον επεξεργαστή κειμένου που επιθυμείτε και εισαγάγετε τις ακόλουθες πληροφορίες (αυτό συνεπάγεται ότι θα χρησιμοποιήσετε το θέμα γονέα Twenty Eleven):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");Το τμήμα "Πρότυπο" είναι αυτό που κάνει αυτό ένα θέμα παιδιού και όχι ένα κανονικό θέμα, οπότε βεβαιωθείτε ότι έχετε εντοπίσει σωστά τον γονέα του θέματος.
Ρύθμιση επιλογών θεμάτων
Προτού ξεκινήσετε να προσαρμόζετε το CSS του νέου παιδιού σας, βεβαιωθείτε ότι έχετε ελέγξει τις επιλογές του θέματος και κάνετε κάποιες προσαρμογές εκεί. Είναι καλύτερο να κάνετε αλλαγές στο υπάρχον πλαίσιο του θέματος εάν αυτή είναι μια επιλογή, καθώς διευκολύνει τη διαχείριση του κώδικα του θέματος.
Για αυτήν την προσαρμογή, έχω επιλέξει μια διάταξη σχεδίασης προς τα αριστερά με μία μόνο πλευρική γραμμή και άφησα το χρώμα και το χρώμα προεπιλεγμένης σύνδεσης (για τώρα). Έχω επίσης αφήσει το φόντο λευκό, την κεφαλίδα με μία από τις προεπιλεγμένες εικόνες και το χρώμα κειμένου κεφαλίδας μαύρο.
Σημείωση: Εάν θέλετε να απενεργοποιήσετε την επιλογή χρώματος στις επιλογές θεμάτων, προσθέστε !important με τις προδιαγραφές χρωμάτων στο CSS.
Βασικά στοιχεία της επεξεργασίας του θέματος
Εάν μεταβείτε στο πρόγραμμα επεξεργασίας κειμένου WordPress, θα δείτε μια σχεδόν κενή σελίδα στυλ για το νέο παιδικό σας θέμα. Η πρώτη γραμμή του νέου σας αρχείου CSS (μετά τις πληροφορίες θεμάτων παιδιού) εισάγει το φύλλο στυλ από το γονικό θέμα. Αυτό είναι ζωτικής σημασίας και πρέπει να παραμείνει στην κορυφή του φύλλου σας ή το γονικό φύλλο στυλ θα ακυρωθεί και δεν θα εισαχθεί.
Ένα πράγμα που μπορεί να θέλετε να κάνετε σε αυτό το σημείο είναι να εγκαταστήσετε ένα καλύτερο plugin editor κώδικα για την επεξεργασία των θεμάτων. Η σύνταξη με έγχρωμη κωδικοποίηση καθιστά πολύ πιο εύκολη την κωδικοποίηση απευθείας στο WP και θα είναι ιδιαίτερα χρήσιμη για όσους χρησιμοποιούνται για έγχρωμη σύνταξη με εξωτερικούς συντάκτες. Η προσωπική μου επιλογή είναι Σύνθετος κωδικοποιητής .
Θα θελήσετε επίσης κάποιο είδος επεξεργαστή κειμένου για τη δημιουργία του αρχείου functions.php, κατά προτίμηση ενός με επισήμανση σύνταξης.
Βρίσκοντας τον κώδικα για αλλαγή
Αυτό μπορεί να είναι ένα από τα πιο απογοητευτικά μέρη της ανάπτυξης θεμάτων παιδιών: να βρεθούν ποια μέρη του κώδικα πρέπει να επεξεργαστούν και τα οποία μπορούν να μείνουν μόνοι. Το όλο θέμα ενός παιδιού είναι να διευκολύνει τη δημιουργία και τη συντήρηση του θέματος. Για το σκοπό αυτό, θέλουμε να δημιουργήσουμε όσο το δυνατόν μικρότερο νέο κωδικό.
Για να γίνει αυτό πολύ πιο εύκολο, θα θελήσετε να κάνετε είναι να εγκαταστήσετε ένα plugin όπως Firebug . Αυτό θα σας επιτρέψει να κάνετε κλικ σε ένα μέρος του σχεδιασμού της σελίδας σας και να δείτε τα σχετικά div και CSS. Μπορείτε επίσης να δοκιμάσετε τον κώδικα για να δείτε τι λειτουργεί και, στη συνέχεια, να τον αντιγράψετε και να τον επικολλήσετε στο CSS του θέματος. Έχω διαπιστώσει ότι η διατήρηση του θέματος του front-end σε μια καρτέλα μαζί με μια άλλη καρτέλα με τον πίνακα εργαλείων του WP όπου επεξεργάζεστε τα αρχεία είναι ο αποτελεσματικότερος τρόπος για να επεξεργαστείτε τον κώδικα σας.
Τα βασικά
Ας αρχίσουμε να ορίζουμε πράγματα όπως το χρώμα φόντου του σώματος, η τυπογραφία και άλλα βασικά στοιχεία που θα μας δώσουν τη βάση για το θέμα του παιδιού μας. Αυτός ο κώδικας ρυθμίζει τα πάντα στην κεφαλίδα, με εξαίρεση τη μετακίνηση του μενού πλοήγησης. Ας το χωρίσουμε σε μερικά διαφορετικά βήματα.
Αυτό το πρώτο μπλοκ κώδικα μας δίνει όλη τη βασική τυπογραφία (θα τραβήξουμε το "Droid Sans" και το "Dancing Script" από τις γραμματοσειρές Google Web, περισσότερα σχετικά με αυτό στο τμήμα functions.php ):
body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}Αυτή η επόμενη ενότητα ορίζει το κύριο φόντο περιεχομένου και σκίαση .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}Στη συνέχεια, θα κάνουμε κάποιες προσαρμογές στον τίτλο και την περιγραφή του ιστολογίου μας, αλλάζοντας το επάνω όριο της κεφαλίδας και την αφαίρεση της φόρμας αναζήτησης (η οποία θα αντικατασταθεί από το μενού πλοήγησης στο επόμενο βήμα).
#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}Αυτό μας δίνει μια κεφαλίδα που μοιάζει με αυτό:
Μετακινήστε το κύριο μενού πλοήγησης
Η επόμενη αλλαγή που θέλουμε να κάνουμε είναι να μετακινήσουμε το μενού πλοήγησης από την προεπιλεγμένη θέση κάτω από την εικόνα κεφαλίδας προς τα επάνω δεξιά, απέναντι από τον τίτλο του ιστολογίου ή το λογότυπο.
Αυτή η μορφή λειτουργεί καλύτερα για ιστότοπους που έχουν μόνο μικρό αριθμό σελίδων. Οι μεγαλύτερες τοποθεσίες ή οι τοποθεσίες με δευτερεύουσες σελίδες θα χρειαστούν επιπλέον εξέταση και πιθανότατα δεν θα λειτουργήσουν καλά με αυτό το είδος διάταξης.
Εδώ είναι ο κώδικας που θα χρειαστείτε:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Το μενού πλοήγησης θα πρέπει τώρα να βρίσκεται πάνω από την εικόνα κεφαλίδας, δίπλα στο λογότυπό σας. Στη συνέχεια θα προσθέσουμε κάποια στυλ στην πλοήγησή μας και θα τα μετατρέψουμε σε κουμπιά αντί για ένα συμπαγές μπάρ. Εδώ είναι ο κώδικας για το βασικό styling γραμματοσειράς:
#access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}Εδώ είναι η βασική μορφοποίηση για το κουμπί πίσω από το κείμενο, συμπεριλαμβανομένης μιας ωραίας εσωτερικής σκιάς:
#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}Και εδώ είναι ο κώδικας για την προσθήκη μιας σκιάς σταγόνας πίσω από τα κουμπιά όταν μετακινούνται πάνω (πράγμα που δίνει την εντύπωση ενός εφέ κίνησης σε χρήση):
#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}Τώρα η κεφαλίδα σας θα μοιάζει με αυτό:
Βασικό στυλ για την πλαϊνή σας μπάρα
Ας προσθέσουμε μερικά πολύ βασικά στυλ για την πλαϊνή σας μπάρα. Οι αλλαγές που κάνουμε εδώ είναι κυρίως να κάνουμε τις πλευρικές ράβες να ταιριάζουν με το σχέδιο του υπόλοιπου χώρου. Εδώ είναι ο κώδικας:
.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;} ο .widget-title είναι ήδη σε μια ετικέτα H3, οπότε παίρνει τη γραμματοσειρά που έχει ήδη καθοριστεί εκεί.
Και πώς φαίνεται αυτό:
Αλλαγές στη μορφή ανάρτησης
Πρώτα θέλουμε να αλλάξουμε την επένδυση για την κορυφή των στύλων, έτσι ώστε η πρώτη θέση να ευθυγραμμιστεί με την κορυφή της πλαϊνής γραμμής.
.entry-title {padding-top: 0px;}Στη συνέχεια, θα αλλάξουμε το εικονίδιο σχόλιου που εμφανίζεται δίπλα στον τίτλο της ανάρτησης στην αρχική σελίδα. Αυτό είναι απλό: απλά δημιουργήστε το νέο σας εικονίδιο (έχω δημιουργήσει εκδόσεις για ενεργές και ανενεργές εκδόσεις) και στη συνέχεια μεταφορτώστε τις χρησιμοποιώντας το πρόγραμμα μεταφόρτωσης πολυμέσων της WP. Πάρτε τη διεύθυνση URL για κάθε μία και εισάγετε τα παρακάτω:
.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;} Θα χρειαστεί να προσθέσετε το !important στο background-color χαρακτηριστικό για την κατάσταση του hover, για να παρακάμψετε το στυλ που έχει γίνει σε συνδέσμους που βρίσκονται αλλού στο θέμα. Η εικόνα του δείκτη είναι μια γεμάτη φούσκα κειμένου, ενώ η κανονική κατάσταση είναι απλά μια περίληψη. Εδώ είναι το αποτέλεσμα:
Στη συνέχεια θα δουλέψουμε για το styling των σχολίων. Αυτό είναι απλό, καθώς το μόνο που κάνουμε είναι η αλλαγή του συνδυασμού χρωμάτων. Εδώ είναι ο κώδικας:
#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}Και εδώ είναι το τελικό αποτέλεσμα:
Εισαγωγή κώδικα στο κεφάλι σας ή αλλού στο θέμα σας
Αυτό είναι ίσως το πιο τεχνικό μέρος της δημιουργίας ενός παιδικού θέματος και είναι απαραίτητο μόνο αν θέλετε να κάνετε κάτι σαν να προσθέσετε τις γραμματοσειρές Google στον ιστότοπό σας. Αυτό ακριβώς θα κάνουμε εδώ. Αυτή είναι η μόνη φορά που δημιουργείτε το θέμα του παιδιού σας ότι θα πρέπει να εργαστείτε με την PHP και αν δεν χρειάζεται να εισάγετε τίποτα στην κεφαλίδα του θέματος ή αλλού, δεν θα χρειαστεί να εργαστείτε καθόλου με την PHP.
Αρχικά, δημιουργήστε ένα αρχείο functions.php στο κειμενογράφο ή τον επεξεργαστή κειμένων που επιθυμείτε. Ο βασικός κώδικας που θα χρησιμοποιήσετε θα μοιάζει με αυτό:
Για το θέμα παιδιού παραπάνω, χρειαζόμασταν να εισαγάγουμε κώδικα στην κεφαλίδα μας για να συνδέσουμε τις κατάλληλες γραμματοσειρές Google Web, ώστε να μπορούμε να τις καλούμε στο CSS. Εδώ είναι πώς το κάνουμε αυτό (μπορείτε να πάρετε το link απευθείας από την Google με τις τυχόν γραμματοσειρές που θέλετε να χρησιμοποιήσετε):
Τώρα οι γραμματοσειρές σας πρέπει να λειτουργούν σωστά! Και όλες οι λειτουργίες που συμπεριλήφθηκαν στο αρχικό γονικό θέμα θα εξακολουθούν να λειτουργούν επίσης.
Κάντε λήψη των αρχείων θεμάτων
Αν θέλετε να δείτε όλο τον κώδικα τόσο για το CSS όσο και για το αρχείο functions.php, μπορείτε να τα κατεβάσετε εδώ . Περιλαμβάνονται επίσης τα εικονίδια φούσκα σχολίων.
συμπέρασμα
Η δημιουργία ενός παιδιού είναι απίστευτα απλή σε σχέση με το σχεδιασμό και την κωδικοποίηση ενός θέματος από την αρχή. Με κάποιες βασικές γνώσεις CSS και λίγο PHP, μπορείτε να δημιουργήσετε βασικά οποιοδήποτε θέμα θέλετε. Τα θέματα παιδιών μπορούν σε πολλές περιπτώσεις να χρησιμοποιηθούν και για εμπορικούς σκοπούς (εφόσον το γονικό θέμα επιτρέπει τέτοια χρήση) ή πωλούνται ως θέματα αποθεμάτων (απλά θυμηθείτε να ενημερώσετε τους αγοραστές σας ότι το θέμα απαιτεί ένα γονικό θέμα).
Βεβαιωθείτε ότι ο κώδικας είναι σωστά γραμμένος, σχολιασμένος και οργανωμένος. Με αυτόν τον τρόπο, εάν το γονικό θέμα σας ενημερωθεί, το θέμα του παιδιού σας είναι απίθανο να σπάσει.
Το παιδικό θέμα που δημιουργήσαμε σε αυτό το σεμινάριο είναι πολύ, πολύ βασικό. Αλλά σας δίνει τις πληροφορίες που χρειάζεστε για να αρχίσετε να σχεδιάζετε τα δικά σας θέματα. Ξεκινήστε με βασική επαναφορά για να πάρετε τα πόδια σας βρεγμένα και στη συνέχεια ξεκινήστε να εξερευνείτε τα πράγματα που μπορείτε να κάνετε με την PHP στο αρχείο functions.php. Τα θέματα για παιδιά, όταν είναι χτισμένα σε ένα μεγάλο γονικό θέμα, μπορούν να είναι τόσο ισχυρά όσο και οποιοδήποτε άλλο διαθέσιμο θέμα. Για περισσότερες πληροφορίες σχετικά με θέματα παιδιού, ελέγξτε το WordPress Codex .
Έχετε περισσότερες συμβουλές για τη δημιουργία μεγάλων παιδικών θεμάτων; Ενημερώστε μας στα σχόλια!