Το απόλυτο Cheatsheet WordPress

Το WordPress γίνεται γρήγορα οικιακό όνομα εάν δεν είναι ήδη. Είναι παντού, αυτή η καλοήθης ομορφιά, τροφοδοτεί μερικές από τις καλύτερες ιστοσελίδες και εφαρμογές ιστού που έχει δει ποτέ ο κόσμος. Είναι μια πρεμιέρα πλατφόρμα CMS και blogging που δεν είναι απλώς απίστευτα ευπροσάρμοστη, αλλά και εκπληκτικά εύκολη στη μάθηση και τη χρήση. Γιατί αλλιώς το WordPress θα αυξανόταν σε δημοτικότητα κάθε μέρα?


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

Άλλες τεχνολογίες που διαδραματίζουν ρόλο περιλαμβάνουν το JavaScript, είναι το ξάδελφο jQuery, CSS και HTML. Τα θέματα του WordPress (και ακόμη και τα πρόσθετα) γράφονται κυρίως σε PHP και βασίζονται σε βάσεις δεδομένων MySQL για εκτέλεση. Εξαρτώνται επίσης από τις προαναφερθείσες τεχνολογίες Ιστού. Όλες αυτές οι τεχνολογίες πρέπει να συνεργαστούν.

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

Θέμα Ανατομία

anatonmy-of-a-wordpress-θέμα

Ένα θέμα WordPress δεν είναι τίποτα περισσότερο από πολλά αρχεία PHP που συνδέονται μεταξύ τους. Έρχεται με ένα αρχείο φύλλου στυλ CSS που είναι υπεύθυνο για την εμφάνιση του θέματος (και του ιστότοπού σας). Πίσω στα βασικά όμως, ένα θέμα WordPress είναι μόνο μερικά αρχεία PHP. Πάνω είναι ένα στιγμιότυπο του υπέροχου μαθήματα + cheatsheet για την ανατομία ενός θέματος WordPress. Για να δημιουργήσετε ένα θέμα WordPress, θα χρειαστείτε τα ακόλουθα αρχεία:

  • header.php– Αυτό το αρχείο προτύπου περιέχει τις πληροφορίες κεφαλίδας, οι οποίες εμφανίζονται στο και πριν από το άνοιγμα ετικέτα. Εδώ προσθέτετε μεταδεδομένα, τίτλο ιστότοπου και σύνδεσμο στο φύλλο στυλ CSS μεταξύ άλλων.
  • index.php – Αυτό είναι το κύριο πρότυπο σώματος για το θέμα WordPress (ή τον ιστότοπό σας). Ο μοναδικός σκοπός του είναι να συγκεντρώσει τα άλλα αρχεία συμπεριλαμβάνοντας τα χρησιμοποιώντας ετικέτες προτύπων (περισσότερα για τις ετικέτες προτύπων σε μια στιγμή).
  • sidebar.php – Αυτό είναι το τμήμα πλευρικής γραμμής σας. Μπορείτε να τοποθετήσετε widget, κατηγορίες, επιπλέον μενού, φόρμα αναζήτησης και οτιδήποτε άλλο σας αρέσει
  • footer.php – Αυτό είναι το τμήμα υποσέλιδου. Προσθέστε τις πληροφορίες πνευματικών δικαιωμάτων, τους συνδέσμους RSS, τα widget, τους συνδέσμους, τα κοινωνικά εικονίδια κ.λπ.
  • σελίδα.php – Κάθε φορά που δημιουργείτε μια σελίδα στον ιστότοπό σας που βασίζεται στο WordPress, αυτό είναι το υπεύθυνο πρότυπο
  • single.php – Αυτό το αρχείο προτύπου φέρει μία μόνο ανάρτηση ιστολογίου
  • σχόλια.php – Το πρότυπο που είναι υπεύθυνο γι ‘αυτούς σχολιάζει
  • 404.php – Το πρότυπο που εμφανίζεται όταν ο αναγνώστης σας συναντά το περίφημο σφάλμα 404 που δεν βρέθηκε
  • search.php –  Προσφέρει στους αναγνώστες σας την ευκαιρία να βρουν περιεχόμενο στον ιστότοπό σας στο WordPress
  • searchform.php – Θα χρειαστείτε μια φόρμα αναζήτησης για να προσφέρετε την προαναφερθείσα λειτουργικότητα, τώρα δεν θα σας?
  • archive.php – Επειδή η εύρεση περιεχομένου που δημοσιεύσατε το 2008 δεν πρέπει να είναι ταλαιπωρία
  • functions.php – Τοποθετήστε εδώ όλες τις ειδικές λειτουργίες, ακόμη και προσαρμοσμένες προσθήκες. Ωστόσο, για συμβατότητα μεταξύ θεμάτων, συνιστάται να προσθέσετε προσαρμοσμένο κώδικα ως αυτόνομες προσθήκες. Μπορείτε να προσθέσετε επιπλέον μενού, να ενεργοποιήσετε widget και πολλά άλλα. Αυτό το αρχείο σας δίνει τόση δύναμη να μετατρέψετε τον ιστότοπο / θέμα του WordPress με όποιον τρόπο θέλετε.
  • style.css – Αυτό δεν είναι αρχείο προτύπου PHP ως έχει. Αλλά είναι το αρχείο όπου προσθέτετε τα στυλ CSS για τον έλεγχο της αισθητικής. Έρχεται επίσης με την κεφαλίδα πληροφοριών για το θέμα του WordPress.

Χωρίς αμφιβολία, μπορείτε να δημιουργήσετε ένα θέμα με λιγότερα πρότυπα, αλλά δεν θα συνιστούσαμε να κάνετε μια συνήθεια από αυτό. Μετά από όλα, χρειάζεστε μόνο τα παραπάνω 10 περίπου αρχεία για να δημιουργήσετε ένα τυπικό θέμα WP. Τα δεκατρία δεν είναι μεγάλη φιγούρα, τώρα είναι; Με λίγα λόγια, το index.php μπορεί να μοιάζει με:



// Εισαγάγετε το κύριο περιεχόμενο εδώ, συμπεριλάβετε το βρόχο



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

Ο βρόχος

Σε μερικές από τις προηγούμενες σειρές δημοσιεύσεων, όπως το δημοφιλές WordPress Tutorial: Πώς να δημιουργήσετε ένα WordPress θέμα από HTML, αναφέραμε το βρόχο, αν και στο παρελθόν. Λοιπόν, τι κάνει το βρόχο το δημοφιλές απόσπασμα είναι; Λοιπόν, χωρίς αυτό το ειδικό κομμάτι κώδικα, θα πρέπει να κωδικοποιήσετε με το χέρι κάθε ανάρτηση, μαζί με τα αποσπάσματα, στο θέμα του WordPress. Αυτό θα το κάνατε κάθε φορά που δημοσιεύσατε ένα νέο άρθρο.

Η προσπάθεια και ο χρόνος που θα σπαταλήσατε θα σας έκανε μπλε και άκαμπτο. Το αποτύπωμα άνθρακα που θα αφήνατε πίσω – αφού εργαστείτε για τον θλιβερό εαυτό σας – θα έσκισε μια τρύπα στο μέγεθος των δώδεκα σταδίων του Γιάνκι από το στρώμα του όζοντος. Λοιπόν, υπερβάλλω τα γεγονότα (ή την έλλειψή τους), αλλά θα πήγαινε μπόνους αν κωδικοποιούσες κάθε ανάρτηση στον ιστότοπό σου στο WordPress με μη αυτόματο τρόπο.

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

Συνήθως χρησιμοποιούμε το βρόχο στο index.php για να εμφανίσουμε μια λίστα με αναρτήσεις, αλλά μη διστάσετε να πειραματιστείτε. προσθέστε το όπου θέλετε να αναφέρετε τις αναρτήσεις σας. Επιπλέον, προσθέστε προσαρμοσμένες ετικέτες HTML και PHP εντός του βρόχου για να προσαρμόσετε τις αναρτήσεις σας όπως κρίνετε κατάλληλο. Μιλώντας για ετικέτες, τι είναι διαθέσιμο στο WordPress?

Συμπερίληψη ετικετών

wordpress-ετικέτες

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

  • – Χρησιμοποιήστε το στο index.php για να καλέσετε (ή να συμπεριλάβετε) το αρχείο header.php. Θα ανακτήσει το header.php και θα εμφανίσει το περιεχόμενό του στο index.php – αυτό περιλαμβάνει το αρχείο.
  • – Περιλαμβάνει sidebar.php
  • – Περιλαμβάνει το αρχείο προτύπου footer.php
  • – Γρήγορο κουίζ: Τι πιστεύετε ότι περιλαμβάνει αυτή η ετικέτα?

Πρότυπο Ετικέτες Bloginfo

Υπάρχει μια άλλη κατηγορία ετικετών προτύπων που θα ονομάζουμε απλώς ετικέτες bloginfo. Παίζουν έναν ρόλο, δηλαδή να συλλέγουν πληροφορίες σχετικά με τον ιστότοπό σας στο WordPress από τη βάση δεδομένων. Αυτό είναι κυρίως οι πληροφορίες που τροφοδοτείτε στον ιστότοπό σας WordPress στην περιοχή διαχειριστή μέσω του Προφίλ χρήστη και Ρυθμίσεις -> Γενικά. Μόλις ανακτηθούν οι πληροφορίες από τις βάσεις δεδομένων σας, αυτές οι ετικέτες θα εμφανιστούν στη συνέχεια στον ιστότοπό σας όπως τις τοποθετείτε.

Μπορείτε να τροποποιήσετε ελαφρώς τη δομή του bloginfo, έτσι ώστε αντί να εμφανίζετε απλώς τις πληροφορίες που ανακτήθηκαν, μπορείτε να τις χρησιμοποιήσετε (τις πληροφορίες) αλλού στον κώδικα PHP σας. Πόσο βολικό? Περισσότερα για αυτό σε μια στιγμή. Ακολουθούν οι πιο συνηθισμένες ετικέτες bloginfo:

  •  – Εμφανίζει τον τίτλο του ιστολογίου / ιστοτόπου WordPress
  • – Αυτή η ετικέτα προτύπου εμφανίζει τη διεύθυνση URL του ιστολογίου σας
  •  – Εμφανίζει την περιγραφή, ή μάλλον την ετικέτα, του ιστολογίου σας.
  •  – Εμφανίζει το σύνολο χαρακτήρων που χρησιμοποιείται για την κωδικοποίηση του ιστότοπού σας. Η προεπιλογή είναι UTF-8
  •  – Εμφανίζει διεύθυνση URL στο φύλλο στυλ CSS του ενεργού σας θέματος
  •  – Εμφανίζει την έκδοση WordPress που χρησιμοποιείτε
  •  – Εμφανίζει τη γλώσσα του WordPress
  •  – Εμφανίζει τη διεύθυνση URL για τη ροή RSS 0,92
  • – Εμφανίζει τη διεύθυνση URL για τη ροή RSS 2.0

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

  • $ show  Αυτή είναι η λέξη-κλειδί που χρησιμοποιείτε για να ονομάσετε τις πληροφορίες που θέλετε να ανακτήσετε από τη βάση δεδομένων. Τα παραδείγματα περιλαμβάνουν «όνομα», «url», «περιγραφή», «admin_email» κ.λπ.
  • φίλτρο $ – Αυτό σας επιτρέπει απλά να φιλτράρετε τις πληροφορίες που ανακτήθηκαν. Από προεπιλογή, ορίζεται σε “raw”, που σημαίνει απλώς ότι η τιμή του $ show επιστρέφεται ως έχει. Εάν ορίσετε αυτήν την επιλογή σε «οθόνη», η τιμή του $ show θα περάσει πρώτα από τη συνάρτηση wptexturize (). Ωστόσο, μην ιδρώνετε για αυτό.

Ακολουθεί ένα παράδειγμα: Ας υποθέσουμε ότι θέλουμε να ανακτήσουμε και να εμφανίσουμε τον τίτλο σας (περιγραφή ιστότοπου) που μοιάζει με το “Best Premium WordPress Themes”, θα ανακτήσαμε πρώτα αυτές τις πληροφορίες χρησιμοποιώντας αυτήν την ετικέτα…

… Το οποίο φορτώνει την περιγραφή του ιστότοπου $ site_description. Για να εμφανίσετε την περιγραφή του ιστότοπού σας στον ιστότοπό σας, χρησιμοποιήστε αυτό:

Αυτό σας δίνει: Το tagline σας είναι: Best Premium WordPress Themes

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

Φύλλο στυλ θέματος

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

/ *
Όνομα θέματος: Το όνομα του θέματος
URI θέματος: https://www.yoursite.com/yourtheme
Συγγραφέας: Το όνομά σας
Συγγραφέας URI: https://www.yoursite.com/
Περιγραφή: Αυτό το θέμα WordPress είναι 100% ευαίσθητο μπλα μπλα...
Έκδοση: 1.0
Άδεια: GNU General Public License V2 ή μεταγενέστερη έκδοση
URI άδειας: http://www.gnu.org/licenses/gpl-2.0.html
Ετικέτες: χρυσός, μία στήλη, αριστερή πλευρική γραμμή, πλέγμα απόκρισης κ.λπ.
Τομέας κειμένου: το όνομά σας
* /

Αυτές οι πληροφορίες έρχονται πρώτες (ή στην κορυφή) στο style.css. Εκτός από αυτό, βεβαιωθείτε ότι:

  • Ακολουθηστε Πρότυπα κωδικοποίησης CSS
  • Χρησιμοποιήστε έγκυρο CSS
  • Ελαχιστοποιήστε το CSS
  • Προσθέστε στυλ φιλικά προς την εκτύπωση
  • Στυλ όλων των στοιχείων HTML

Τελικές σκέψεις

Αυτό το cheat sheet είναι απλώς ένας γρήγορος πόρος που θα σας βοηθήσει να ξεκινήσετε καθώς μαθαίνετε την ανάπτυξη θεμάτων WordPress. Χρησιμοποιώντας τις ετικέτες και τα αποσπάσματα που έχουμε μοιραστεί εδώ, μπορείτε να αναπτύξετε γρήγορα ένα τυπικό θέμα και να το βελτιώσετε χωρίς να ξεσπάσετε. Φυσικά, πρέπει να συνεχίσετε να μαθαίνετε την ανάπτυξη θεμάτων WordPress, και για αυτό προτείνουμε το WordPress Codex, μαθήματα+, Threehouse, και Θεματικός σχεδιαστής μεταξύ άλλων αξιόπιστων πόρων.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me