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

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

Εάν ξεκινήσατε με έναν ιστότοπο HTML (+ CSS), δεν χρειάζεται να το πετάξετε όλα όταν μεταβαίνετε στο WordPress. Μπορείτε να μετατρέψετε τον HTML σε WordPress και να εκτελέσετε τον (τώρα πιο ισχυρό) ιστότοπό σας στη δυναμική πλατφόρμα WordPress.


Ή ίσως αυτό δεν ισχύει. Ίσως απλώς αναρωτιέστε πώς να μετατρέψετε τη σχεδίαση HTML ενός πελάτη σε ένα πλήρες θέμα WordPress. Ή ίσως θα θέλατε να μάθετε βασικό προγραμματισμό WordPress (+ PHP) από την πιο γνωστή πλευρά HTML.

Όποιος και αν είναι ο λόγος που βρίσκεστε εδώ σήμερα, αυτό το σεμινάριο WordPress θα σας παρουσιάσει τα βασικά στοιχεία της δημιουργίας ενός θέματος WordPress από HTML. Μπορείτε να ακολουθήσετε αυτόν τον οδηγό για να δημιουργήσετε το θέμα σας από το μηδέν ή μπορείτε να κατευθυνθείτε στο Github και να κατεβάσετε το θέμα εκκίνησης WPExplorer που παρέχει έναν “κενό καμβά” για να δημιουργήσετε το θέμα σας με όλα τα απαραίτητα αρχεία προτύπων και τον κωδικό για να ξεκινήσετε. Αν λοιπόν είστε ένα από αυτά τα άτομα που μάλλον μαθαίνουν διαβάζοντας τον κώδικα, κατεβάστε το θέμα εκκίνησης, παραλείψτε τον οδηγό και δείτε πώς λειτουργούν τα πράγματα… Διαφορετικά, λάβετε έναν επεξεργαστή κώδικα (χρησιμοποιώ και προτείνω Μπλοκ ΣΗΜΕΙΩΣΕΩΝ++, ή SublimeText) και ένα πρόγραμμα περιήγησης έτοιμο και, στη συνέχεια, ακολουθήστε αυτόν τον απλό οδηγό μέχρι το τέλος.

Ονομασία του θέματος WordPress

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

Γενικές υποθέσεις σε αυτό το σημείο:

  • Έχετε έτοιμο το φύλλο στυλ index.html και CSS.
  • Έχετε μια λειτουργική εγκατάσταση WordPress με τουλάχιστον ένα θέμα π.χ. Είκοσι δεκατέσσερα
  • Έχετε ήδη δημιουργήσει ένα φάκελο θεμάτων όπου θα αποθηκεύετε το νέο σας θέμα WordPress ��

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

/ *
Όνομα θέματος: Το όνομα του θέματος
URI θέματος: Η διεύθυνση URL του θέματος σας
Περιγραφή: Μια σύντομη περιγραφή του θέματος
Έκδοση: 1.0 ή οποιαδήποτε άλλη έκδοση θέλετε
Συγγραφέας: Το όνομά σας ή το όνομα χρήστη του WordPress.org
Συγγραφέας URI: Η διεύθυνση ιστού σας
Ετικέτες: Ετικέτες για να εντοπίσετε το θέμα σας στο αποθετήριο θεμάτων WordPress
* /

Μην αφήνετε τις ετικέτες σχολίων (/ *… * /). Αποθηκεύστε τις αλλαγές. Αυτές οι πληροφορίες λένε στο WordPress το όνομα του θέματος σας, τον συγγραφέα και δωρεάν τέτοια πράγματα. Το σημαντικό μέρος είναι το όνομα του θέματος, το οποίο σας επιτρέπει να επιλέξετε και να ενεργοποιήσετε το θέμα σας μέσω του πίνακα ελέγχου WP.

Διαίρεση του προτύπου HTML σε αρχεία PHP

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

Το επόμενο βήμα περιλαμβάνει τη δημιουργία τεσσάρων αρχείων PHP. Χρησιμοποιώντας τον επεξεργαστή κώδικα, δημιουργήστε index.php, header.php, sidebar.php και footer.php και αποθηκεύστε τα στο φάκελο θέματος. Όλα τα αρχεία είναι κενά σε αυτό το σημείο, οπότε μην περιμένετε να κάνουν τίποτα. Για λόγους απεικόνισης, χρησιμοποιώ τα ακόλουθα αρχεία index.html και CSS στιλ φύλλου:

INDEX.HTML




Πώς να μετατρέψετε το πρότυπο HTML σε θέμα WordPress - WPExplorer



Αυτή είναι η ενότητα κεφαλίδας. Βάλτε το λογότυπό σας και άλλες λεπτομέρειες εδώ.

Αυτή είναι η κύρια περιοχή περιεχομένου.

Και αυτό είναι το υποσέλιδο.

ΦΥΛΛΟ CSS

#wrap {margin: 0 auto; πλάτος: 95%; margin-top: -10 εικονοστοιχεία; ύψος: 100%;}
.κεφαλίδα {πλάτος: 99,8%; περίγραμμα: 1px στερεό # 999; ύψος: 135px;}
.περιεχόμενο {πλάτος: 70%; περίγραμμα: 1px στερεό # 999; margin-top: 5px;}
.πλευρική γραμμή {float: right; margin-top: -54px; πλάτος: 29%; περίγραμμα: 1px στερεό # 999;}
.υποσέλιδο {πλάτος: 99,8%; περιθώριο: 1 εικονοστοιχείο στερεό # 999; περιθώριο κορυφής: 10 εικονοστοιχεία;}

Μπορείτε να πάρετε και τους δύο κωδικούς εάν δεν έχετε τίποτα να εργαστείτε. Απλώς αντιγράψτε-επικολλήστε τα στον επεξεργαστή κώδικα, αποθηκεύστε τα, δημιουργήστε τα τέσσερα αρχεία PHP που μόλις αναφέραμε και ετοιμαστείτε για το επόμενο μέρος. Ανοίξτε το πρόσφατα δημιουργημένο σας (και κενό) header.php. Συνδεθείτε στην υπάρχουσα εγκατάσταση του WordPress, μεταβείτε στο Εμφάνιση – >> Πρόγραμμα επεξεργασίας και ανοίξτε header.php. Αντιγράψτε όλο τον κωδικό μεταξύ του ετικέτες και επικολλήστε το στο αρχείο header.php. Το παρακάτω είναι ο κώδικας που πήρα από το αρχείο header.php στο θέμα Twenty Fourteen:




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




Στη συνέχεια ανοίξτε το index.html αρχείο και αντιγράψτε τον κωδικό κεφαλίδας (δηλ. τον κωδικό στο

ενότητα) στο header.php ακριβώς κάτω από το ετικέτες όπως φαίνεται παρακάτω:




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







Αυτή είναι η ενότητα κεφαλίδας. Βάλτε το λογότυπό σας και άλλες λεπτομέρειες εδώ.

Στη συνέχεια προσθέστε…

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

Αντιγράψτε τη δεύτερη ενότητα (δηλ.

από index.html στο πρόσφατα δημιουργημένο index.php , και προσθέστε…

… Στην κορυφή και…


… Στο απόλυτο κάτω μέρος. Αυτές οι τρεις γραμμές ανακτούν το header.php, το sidebar.php και το footer.php (με αυτήν τη σειρά) και τις εμφανίζουν στο index.php, το οποίο επαναφέρει τον κώδικα σας. Αποθηκεύστε όλες τις αλλαγές. Σε αυτό το σημείο, το αρχείο index.php θα πρέπει να μοιάζει με:



Στη συνέχεια, αντιγράψτε το περιεχόμενο από την ενότητα πλευρικής γραμμής και υποσέλιδου στο index.html στο sidebar.php και footer.php αντίστοιχα.

Προσθήκη δημοσιεύσεων

Το πρότυπο HTML σας πρόκειται να μεταμορφωθεί σε ένα θέμα WordPress. Πρέπει απλώς να προσθέσουμε τις δημοσιεύσεις σας. Εάν έχετε αναρτήσεις στο ιστολόγιό σας, πώς θα τις εμφανίζατε στο προσαρμοσμένο θέμα “HTML-to-WordPress”; Χρησιμοποιείτε έναν ειδικό τύπο λειτουργίας PHP που είναι γνωστός ως Βρόχος. Το Loop είναι απλώς ένα εξειδικευμένο κομμάτι κώδικα που εμφανίζει τις αναρτήσεις και τα σχόλιά σας όπου κι αν το τοποθετήσετε.

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

και

ετικέτες όπως φαίνεται παρακάτω:

>

Αυτό θα φροντίσει για τις δημοσιεύσεις σας. Εύκολο όπως το ABC. Σε αυτό το σημείο (και χρησιμοποιώντας τα δείγματα αρχείων που παρέχονται σε αυτό το σεμινάριο), το header.php θα πρέπει να μοιάζει με αυτό:




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




Το sidebar.php θα πρέπει να έχει την εξής μορφή:

Το footer.php θα πρέπει να έχει την εξής μορφή:

Και αυτό είναι το υποσέλιδο

Παρατηρήσατε το κλείσιμο και ετικέτες στο υποσέλιδο; Μην ξεχάσετε να συμπεριλάβετε και αυτές.

Το style.css θα πρέπει να μοιάζει με αυτό:

/ *
Όνομα θέματος: Δημιουργία θέματος WordPress από HTML
URI θέματος: http://wpexplorer.com
Περιγραφή: Αυτό το θέμα σας δείχνει πώς να δημιουργήσετε θέματα WordPress από HTML
Έκδοση: 1.0
Συγγραφέας: Freddy για @WPExplorer
Συγγραφέας URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Ετικέτες: wpexplorer, προσαρμοσμένο θέμα, HTML σε WordPress, δημιουργία θέματος WordPress
* /
σώμα {
font-family: arial, helvetica, verdana;
μέγεθος γραμματοσειράς: 0,8em;
πλάτος: 100%;
ύψος: 100%;
}

.κεφαλίδα {
χρώμα φόντου: # 1be;
περιθώριο αριστερά: 14%;
κορυφή: 0;
πλάτος περιγράμματος: 0.1em;
χρώμα περιγράμματος: # 999;
στυλ περιγράμματος: συμπαγές?
πλάτος: 72%;
ύψος: 250 εικονοστοιχεία;
}

.περιεχόμενο {
χρώμα φόντου: # 999;
περιθώριο αριστερά: 14%;
margin-top: 5px;
float: αριστερά
πλάτος: 46%;
πλάτος περιγράμματος: 0.1em;
χρώμα περιγράμματος: # 999;
στυλ περιγράμματος: συμπαγές?
}

.πλευρική γραμμή {
χρώμα φόντου: # 1d5;
margin-right: 14%;
margin-top: 5px;
επιπλέουν: δεξιά;
πλάτος περιγράμματος: 0.1em;
χρώμα περιγράμματος: # 999;
στυλ περιγράμματος: συμπαγές?
κορυφή: 180 εικονοστοιχεία;
πλάτος: 23%;
}

.υποσέλιδο {
χρώμα φόντου: κόκκινο;
περιθώριο αριστερά: 14%;
float: αριστερά
margin-top: 5px;
πλάτος: 72%;
ύψος: 50px;
πλάτος περιγράμματος: 0.1em;
χρώμα περιγράμματος: # 999;
στυλ περιγράμματος: συμπαγές?
}

Και το index.php θα πρέπει να μοιάζει με:





Και πάλι – αυτό βασίζεται σε έναν ιστότοπο από αριστερά προς τα δεξιά με διάταξη κεφαλίδας, περιεχομένου, πλευρικής γραμμής, υποσέλιδου. Παρακολουθείτε; Και τα πέντε αρχεία πρέπει να αποθηκευτούν στον φάκελο θέματος. Ονομάστε το φάκελο ό, τι θέλετε και συμπιέστε τον σε ένα αρχείο ZIP χρησιμοποιώντας το WinRar ή ένα αντίστοιχο πρόγραμμα. Ανεβάστε το νέο σας θέμα στην εγκατάσταση του WordPress, ενεργοποιήστε το και δείτε το θέμα που μετατράπηκε σε δράση!

Αυτό ήταν εύκολο, σωστά; Μπορείτε να διαμορφώσετε το θέμα σας όπως θέλετε, αλλά οι περισσότερες από τις δυνατότητες που αγαπάμε στο WordPress εξακολουθούν να είναι ανενεργές, καθώς… αυτό το σεμινάριο καλύπτει τα βασικά στοιχεία της μετατροπής προτύπων HTML σε WordPress και θα πρέπει να έχει μεγάλη αξία για εσάς ως αρχάριος. Στο επόμενο σεμινάριο, θα πάρουμε τα πράγματα πολύ πιο ψηλά και θα παίξουμε με άλλες πτυχές του προγραμματισμού WordPress (όπως Αρχεία προτύπων και Πρότυπο Ετικέτες) που θα σας επιτρέψουν να γυρίσετε τα πρότυπα HTML σας με όποιον τρόπο θέλετε. Μείνετε συντονισμένοι!

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