Tutorial WordPress: Πώς να δημιουργήσετε ένα θέμα WordPress από HTML (Μέρος 2)

  1. 1. Tutorial WordPress: Πώς να δημιουργήσετε ένα θέμα WordPress από HTML (Μέρος 1)
  2. 2. Αυτή τη στιγμή διαβάζει: Tutorial WordPress: Πώς να δημιουργήσετε ένα θέμα WordPress από HTML (Μέρος 2)
  3. 3. Εισαγωγή στην Ανατομία ενός Θέματος WordPress

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


Διαμόρφωση εικόνων και αρχείων JavaScript

Εάν είχατε εικόνες στο αρχικό πρότυπο HTML (index.html), πιθανότατα παρατηρήσατε ότι σταμάτησαν να εμφανίζονται αφού κόβουν το πρότυπο σε αρχεία PHP. Μην ανησυχείτε καθόλου, όπως ακριβώς είναι η PHP. Για παράδειγμα, αν είχατε ένα λογότυπο στην ενότητα κεφαλίδας σας έτσι …

το_logo_alt_text σας

… θα χρειαστεί να παίξετε λίγο με τον κωδικό. Ο κωδικός που θα αποκαλύψω αμέσως θα βοηθήσει τα προγράμματα περιήγησης να βρουν το λογότυπό σας (ή οποιαδήποτε άλλη εικόνα) στο δικό σας εικόνες φάκελο, που είναι (ή θα έπρεπε) να είναι ένας υποφάκελος του κύριου καταλόγου του θέματος σας. Έτσι, για να εμφανίσετε το λογότυπό σας στην ενότητα κεφαλίδας, ανοίξτε το αρχείο header.php και αντικαταστήστε τον παραπάνω κώδικα με τα εξής:

το_logo_alt_text σας

Η συνάρτηση get_template_directory_uri () επιστρέφει τη διεύθυνση url για τον κατάλογο θεμάτων σας. Έτσι, αν προσθέσετε το λογότυπό σας σε ένα φάκελο εικόνων, τότε ο κωδικός θα αρπάξει αυτό το λογότυπο.

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

Ας προχωρήσουμε στο JavaScript. Εάν ο ιστότοπός σας HTML χρησιμοποίησε JavaScript, δημιουργήστε ένα φάκελο με το όνομα js και τοποθετήστε τα σενάριά σας εκεί. Μπορείτε να τους καλέσετε στο αρχείο header.php χρησιμοποιώντας τον ακόλουθο κωδικό:

Ο παραπάνω κώδικας χρησιμοποιεί example.js ως απεικόνιση. Μην ξεχάσετε να αντικαταστήσετε αυτό το τμήμα με το όνομα του αρχείου JavaScript.

Φυσικά εάν δημιουργείτε ένα θέμα για κάποιον άλλο, τότε θα πρέπει πραγματικά να φορτώσετε τα αρχεία js σας με wp_enqueue_scripts. Δείτε τις αναρτήσεις του AJ σχετικά με την προσθήκη JavaScript σε θέματα WordPress για περισσότερες πληροφορίες και συμβουλές.

Αρχεία προτύπων

Στο πρώτο μέρος αυτού του σεμιναρίου, αναφέραμε τέσσερα βασικά αρχεία προτύπων, συγκεκριμένα index.php, header.php, sidebar.php και footer.php. Τα αρχεία προτύπων ελέγχουν τον τρόπο εμφάνισης του ιστότοπού σας στον Ιστό. Τα πρότυπα λαμβάνουν πληροφορίες από τη βάση δεδομένων MySQL του WordPress και μεταφράζουν το ίδιο σε κώδικα HTML που εμφανίζεται στα προγράμματα περιήγησης ιστού. Με άλλα λόγια, τα αρχεία προτύπων είναι τα δομικά στοιχεία των θεμάτων WordPress. Για να κατανοήσουμε καλύτερα τα πρότυπα, ας εξετάσουμε μια ιδέα γνωστή ως ιεραρχία προτύπων.

Θα χρησιμοποιήσουμε μια αναλογία. Εάν ένας επισκέπτης κάνει κλικ σε έναν σύνδεσμο κατηγορίας (π.χ. σύνδεσμο προς μια κατηγορία) όπως http://www.yoursite.com/blog/category/your-category/, το WordPress χρησιμοποιεί την ιεραρχία προτύπων για να δημιουργήσει το σωστό αρχείο (και περιεχόμενο) ως εξηγείται παρακάτω:

  • Πρώτον, το WordPress θα αναζητήσει ένα αρχείο προτύπου που ταιριάζει με το αναγνωριστικό κατηγορίας
  • Εάν το αναγνωριστικό της κατηγορίας είναι, για παράδειγμα 2, το WordPress θα αναζητήσει ένα αρχείο προτύπου με την ονομασία category-2.php
  • Εάν η κατηγορία-2.php δεν είναι διαθέσιμη, το WordPress θα αναζητήσει ένα αρχείο προτύπου γενικής κατηγορίας όπως το kategori.php
  • Εάν αυτό το αρχείο προτύπου δεν είναι επίσης διαθέσιμο, το WordPress θα αναζητήσει ένα γενικό πρότυπο αρχειοθέτησης όπως το archive.php
  • Εάν δεν υπάρχει το γενικό πρότυπο αρχειοθέτησης, το WordPress θα επιστρέψει στο κύριο αρχείο προτύπου, index.php

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

home.php ή index.phpΧρησιμοποιείται για την απόδοση του ευρετηρίου αναρτήσεων ιστολογίου
μπροστινή σελίδα.phpΧρησιμοποιείται για την απόδοση στατικών σελίδων ή των πιο πρόσφατων δημοσιεύσεων όπως ορίζεται στις προβολές της πρώτης σελίδας
single.phpΧρησιμοποιείται για την απόδοση μίας μεμονωμένης σελίδας
single- {post-type} .phpΧρησιμοποιείται για την απόδοση προσαρμοσμένων τύπων δημοσιεύσεων π.χ. αν ο post-type ήταν προϊόν, το WordPress θα χρησιμοποιούσε το single-product.php
σελίδα.phpΧρησιμοποιείται για την απόδοση στατικών σελίδων
category.php ή archive.phpΧρησιμοποιείται για την απόδοση ευρετηρίου Κατηγορίας Αρχείο
συγγραφέας.phpΧρησιμοποιήθηκε για την απόδοση του συγγραφέα
date.phpΧρησιμοποιείται για την απόδοση ημερομηνίας
search.phpΧρησιμοποιείται για την απόδοση αποτελεσμάτων αναζήτησης
404.phpΧρησιμοποιείται για την απόδοση σελίδας σφάλματος διακομιστή 404

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

Ετικέτες προτύπου

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

Στο προηγούμενο σεμινάριό μας, συναντήσατε μερικές ετικέτες προτύπων όπως get_header, get_sidebar, get_footer και bloginfo. Στην ακόλουθη ενότητα, θα προσθέσουμε μερικές ετικέτες προτύπων στο νέο WordPress θέμα. Υποθέτω ότι έχετε ήδη συμπεριλάβει τη δήλωση DOCTYPE στο αρχείο header.php. Εάν δεν το έχετε κάνει, εδώ είναι ο κωδικός:

Η δήλωση DOCTYPE δίνει νόημα στον κώδικα HTML σας. Με αυτόν τον τρόπο, ας τροποποιήσουμε την αρχική ετικέτα HTML. Θα συμπεριλάβουμε ένα χαρακτηριστικό lang χρησιμοποιώντας το ετικέτα language_attributes έτσι:

Ο παραπάνω κώδικας θα δημιουργήσει τα εξής:

Με τη δήλωση DOCTYPE και την ετικέτα language_attribute, η δομή του θέματος σας είναι νόμιμη και τα προγράμματα περιήγησης θα κατανοήσουν τον κώδικά σας. Εάν δημιουργείτε ένα θέμα για ένα ιστολόγιο, είναι σημαντικό να τοποθετείτε συνδέσμους στο URL pingback και στη ροή RSS. Στο header.php, προσθέστε τον ακόλουθο κώδικα:

Παρατηρήσατε πώς χρησιμοποιήσαμε το ετικέτα bloginfo να συμπεριλάβετε τη ροή RSS (‘rss2_url’) και το pingback (‘pingback_url’); Πριν αποθηκεύσετε το αρχείο header.php, προσθέστε επίσης τον ακόλουθο κώδικα:

Η παραπάνω ετικέτα wp_head θα τραβήξει φύλλα στυλ και αρχεία JavaScript που απαιτούνται από τις προσθήκες σας. Εάν αφήσετε αυτό το μικροσκοπικό κομμάτι κώδικα, οι προσθήκες σας ενδέχεται να μην λειτουργούν όπως επιθυμείτε. Με αυτόν τον τρόπο, ας προσθέσουμε τίτλους σελίδων στο θέμα WordPress χρησιμοποιώντας – για άλλη μια φορά – την ετικέτα bloginfo. Στο αρχείο header.php, προσθέστε τον ακόλουθο κώδικα:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

Η πρώτη ετικέτα wp_title θα προσθέσει τον τίτλο της σελίδας ή της ανάρτησής σας και η δεύτερη ετικέτα bloginfo («όνομα») θα προσθέσει το όνομα του ιστολογίου σας. Τώρα που το θέμα του WordPress έχει τίτλους σελίδων, τι γίνεται με το πώς δημιουργούμε ένα στιγμιότυπο οθόνης για το θέμα μας, επανασυσκευάζουμε το θέμα και ξεκουραζόμαστε?

Δημιουργία στιγμιότυπου οθόνης για το θέμα σας

Όταν ανεβάσατε το δοκιμαστικό θέμα για πρώτη φορά, θα πρέπει να έχετε παρατηρήσει ότι δεν είχε ένα στιγμιότυπο οθόνης στο WordPress Theme Panel. Φαινόταν άθλια, ειδικά αν είχατε άλλα θέματα με πολύχρωμα στιγμιότυπα οθόνης. Αλλά μην ανησυχείτε, η δημιουργία ενός στιγμιότυπου οθόνης για το θέμα σας είναι πολύ εύκολη. Απλώς δημιουργήστε μια εικόνα χρησιμοποιώντας το αγαπημένο σας πρόγραμμα επεξεργασίας εικόνων (π.χ. Adobe Photoshop) ή τραβήξτε μια οθόνη από το θέμα σας. Βεβαιωθείτε ότι η εικόνα σας έχει πλάτος 600 εικονοστοιχεία και ύψος 450 εικονοστοιχεία. Αποθηκεύστε την εικόνα ως screenshot.png στο φάκελο θέματος. Αποθηκεύστε όλες τις αλλαγές, συμπιέστε το φάκελο θέματος σε αρχείο ZIP. Ανεβάστε το θέμα και ενεργοποιήστε το για να δείτε τις νέες σας αλλαγές ��

συμπέρασμα

Θέλω να πιστέψω ότι αυτό το δεύτερο σεμινάριο σας προσέφερε βαθύτερη εικόνα για τη δημιουργία ενός θέματος WordPress από στατικό HTML. Στο εγγύς μέλλον, θα σας παρουσιάσω άλλες πτυχές του WordPress, αλλά εν τω μεταξύ, έχω ετοιμάσει τους ακόλουθους πόρους μόνο για εσάς:

Καλή δημιουργία!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map