Δημιουργία Θέματος για το WordPress Μέρος 1
Σε αυτήν την σειρά βοηθημάτων, θα μάθουμε πως μπορούμε να δημιουργήσουμε το δικό μας θέμα για το WordPress χρησιμοποιόντας όλα τα επαγγελματικά τρίκ, που μπορούμε να βρούμε σε κάποια από τα πιο όμορφα premium θέματα. Σε αυτό το πρώτο μέρος θα μιλήσουμε για την δομή ενός θέματος, τα αναγκαία αρχεία που συμπεριλαμβάνει και τις λειτουργίες του.
Η δημιουργία ενός θέματος για το WordPress είναι αρκετά περίπλοκη διαδικασία, αλλά όχι απαραίτητα δύσκολη. Στους οδηγούς που θα σας παρουσιάσουμε καθ’όλη την διάρκεια του Μήνα WordPress, θα μιλήσουμε αναλυτικά για κάθε μέρος της ανάπτυξης ενός δικού μας θέματος. Σε αυτό το πρώτο βοήθημα θα δούμε την δομή που πρέπει να έχει ένα θέμα, καθώς και τα αρχεία που χρησιμοποιούνται.
Τι Είναι Ένα Θέμα
Το θέμα στο WordPress είναι μια συλλογή από αρχεία PHP, CSS και εικόνες. Αυτά τα αρχεία, ελέγχουν τον τρόπο με τον οποίο θα εμφανίζεται η ιστοσελίδα μας και το περιεχόμενο της στον επισκέπτη.
Πως Λειτουργεί Ένα Θέμα
Το WordPress έχει μια συγκεκριμένη σειρά ελέγχων με την οποία λειτουργεί. Ας πάρουμε για παράδειγμα μια κεντρική σελίδα. Συνήθως αποτελείται από το header.php, το index.php, το sidebar.php και το footer.php. Μέσα σε κάθε από αυτά τα αρχεία, υπάρχει και ο αντίστοιχος κώδικας για να εμφανίστεί το περιεχόμενο της σελίδας μας σωστά. Το header.php αποτελείται από το DOCTYPE, τον τίτλο και τα διάφορα meta tags της σελίδας μας. Στο τέλος του αρχείου, καλούμε το index.php το οποίο αποτελείται από το περιεχόμενο της σελίδας μας. Στο τέλος του index.php καλούμε το sidebar.php όπου περιέχει τον κώδικα για την πλαϊνή μπάρα της σελίδας μας. Τέλος στο τέλος του sidebar.php καλούμε το footer.php που περιέχει τον κώδικα για το υποσέλιδο της σελίδας μας. Μπορεί να φαίνεται λίγο πολύπλοκο αλλά με μια καλύτερη ματιά παρακάτω θα δούμε πως δεν είναι. Όπως καταλαβαίνετε λοιπόν, όλα τα αρχεία συνυπάρχουν. Καλούν το ένα το άλλο, ώστε να μπορέσουμε να παρουσιάσουμε πλήρως την σελίδα μας.
Σειρά Αρχείων
Το WordPress χρειάζεται οπωσδήποτε δυο αρχεία. Το index.php και το styles.css. Αυτά τα δυο αρχεία είναι αρκετά για να δείξουμε το περιεχόμενο μας, αλλά προφανώς δεν θα έχουμε και πολλές επιλογές χρησιμοποιόντας μόνο αυτά. Έτσι χρησιμοποιούμε και άλλα αρχεία όπως το sidebar.php το footer.php το comments.php και header.php. Όλα αυτά τα αρχεία επικοινωνούν μεταξύ τους καλόντας το ένα το άλλο. Η εντολές που χρησιμοποιούμε για να καλέσουμε τα διάφορα αυτά αρχεία είναι οι εξής:
<?php get_sidebar(); ?> <?php get_header(); ?> <?php get_footer(); ?>
Οι παραπάνω εντολές, όταν διαβαστούν από το WordPress, καλούν αυτόματα το αντίστοιχο αρχείο.
Ιεραρχία Ενός Θέματος
Ας δούμε λοιπόν ποιά είναι η ιεραρχία των αρχείων ενός θέματος και η σειρά λειτουργίας.
Κάντε κλικ στην εικόνα για μεγέθυνση
Αρχεία Ενός Θέματος
Ας δούμε λοιπόν ποιά είναι τα αρχεία που περιέχει ένα θέμα. Η λίστα που ακολουθεί, περιέχει αλφαβητικά τα πιθανά αρχεία που θα βρείτε στα περισσότερα θέματα σήμερα, μαζί με επεξήγηση του καθενός. Τα αρχεία με κόκκινο χρώμα είναι τα αναγκαία αρχεία (core files) που πρέπει να υπάρχουν σε κάθε θέμα.
Περιεχόμενα
Ας δούμε λοιπόν επιλεκτικά τι περιέχουν τα βασικά αρχεία μιας σελίδας και πως συνδέονται μεταξύ τους (πως καλεί το ένα το άλλο).
Styles.css
Το styles.css είναι το αρχείο που περιέχει όλα τα CSS, δηλαδή ελέγχει τον τρόπο με τον οποίο θα εμφανίζεται το θέμα μας. Το αρχείο αυτό ξεκινάει με τον εξής κώδικα
/* Theme Name: Theme Name Theme URI: http://your-website.com/cool-theme/ Description: Totally awesome WordPress theme by <a href="http://your-website.com/">Yours Truly</a> Version: 1 (WP2.8.4) Author: Your Name Author URI: http://your-website.com/ Tags: super, awesome, cool, sweet, potato nuggets */
Ο παραπάνω κώδικας, δίνει πληροφορίες για το θέμα όπως το όνομα του, τον δημιουργό του, την έκδοσή του, και τα διάφορα tags που θέλουμε. Μετά από αυτό ακολουθεί κανονικά ο CSS κώδικας
Header.php
Το Header.php είναι ουσιαστικά η αρχή της σελίδας μας. Περιέχει το DOCTYPE, τον τίτλο της σελίδας και τα metatags. Επίσης εδώ είναι που θα κάνουμε include τα styles.css και την jQuery. Ακολουθούν κάποια από τα περιεχόμενα του header.php.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>The Title</title> <link href=”style.css” rel=”stylesheet” type=”text/css” /> <link rel=”shortcut icon” href=”images/favicon.ico” /> </head>
Index.php
To index.php είναι το βασικότερο αρχείο στο θέμα μας. Περιέχει όλο τον κώδικα για το περιεχόμενο μας. Εδώ περιέχεται και ο διάσιμος κώδικας The Loop. Συνήθως σε αυτό θα βρείτε τα εξής
<?php get_header(); ?> <?php // The Loop if (have_posts()) : while (have_posts()) : the_post(); ... endwhile; else: ... endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
Εδώ τελειώνουμε το σημερινό μας βοήθημα. Στο επόμενο μέρος θα ξεκινήσουμε την ανάπτυξη του δικού μας θέματος από την αρχή
