Δημιουργία Θέματος για το WordPress Μέρος 2
Προχωράμε στο δεύτερο μέρος έχοντας εξηγήσει ήδη τι είναι ένα θέμα και πως λειτουργέι. Στο δεύτερο μέρος αυτής της σειράς βοηθημάτων λοιπόν, θα δούμε πως ξεκινάμε να δημιουργήσουμε το δικό μας θέμα για το WordPress. Θα ξεκινήσουμε δημιουργώντας τα απαραίτητα αρχεία για το θέμα μας και θα δούμε αναλυτικά τι κάνει το κάθε μέρος του κώδικα μας.
Ας ξεκινήσουμε λοιπόν δημιουργώντας τα αρχεία μας. Ακολουθεί μια εικόνα με τα αρχεία που θα χρειαστούμε καθ΄όλη την διάρκεια αυτής της σειράς βοηθημάτων, για να δημιουργήσουμε το θέμα μας. Στο σημερινό βοήθημα θα καλύψουμε τα βασικά που πρέπει να έχει το index.php και το style.css, τα δυο πιο απαραίτητα αρχεία του θέματος μας
Τα αρχεία και οι φάκελοι μας έχουμε ήδη εξηγήσει τι κάνουν το καθένα από αυτά. Να προσθέσουμε τους φακέλους styles και js όπου θα περιέχουν επιπλέον αρχεία στύλ καθώς και αρχεία jQuery για να κάνουμε την σελίδα μας ακόμα πιο όμορφη.
Ξεκινάμε λοιπόν δημιουργώντας τα αρχεία index.php και style.css. Αυτά τα δυο είναι απόλυτως βασικά και απαραίτητα για το θέμα μας. Ανοίγουμε το index.php για να γράψουμε τον πρώτο μας κώδικα. Η πρώτη και βασική εντολή που θα γράψουμε είναι το:
<?php get_header(); ?>
Η παραπάνω εντολή λέει στο WordPress να “φέρει” το αρχείο header.php. Μην ανχώνεστε θα το δημιουργήσουμε σε λίγο. Μετά θα γράψουμε το διάσημο Loop του WordPress, το οποίο θα μας εμφανίσει τα άρθρα μας άν αυτά υπάρχουν. Έτσι αμέσως μετά γράφουμε:
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Σύνδεσμος στο <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p class="meta"><span class="date"><?php the_time('F jS, Y') ?></span><span class="posted">Από τον/την <?php the_author() ?></span></p>
<div>
<?php the_excerpt(); ?>
<p class="links">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Σύνδεσμος στο <?php the_title(); ?>">Περισσότερα...</a>
<b> | </b>
<?php comments_popup_link('Κανένα σχόλιο', '1 Σχόλιο', '% Σχόλια', 'σχόλια'); ?>
</p>
</div>
</div>
<?php endwhile; ?>
O παραπάνω κώδικας κάνει τα εξής. Ελέγχει αν υπάρχουν άρθρα, και όσο υπάρχουν άρθρα μας τα εμφανίζει (The Loop). Μετά εμφανίζει τις λεπτομέριες για τον συγγραφέα, την ώρα και την κατηγορία στην οποία ανήκει το άρθρο. Τέλος προσθέτουμε τους σύνδεσμους για την προβολή του άρθρου και τον αριθμό των σχόλιων που έχει.
Συνεχίζουμε προσθέτοντας τα παρακάτω:
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Παλαιότερα Άρθρα') ?></div>
<div class="alignright"><?php previous_posts_link('Νεότερα Άρθρα »') ?></div>
</div>
<?php else : ?>
Ας εξηγήσουμε λίγο τον κώδικα μας. Ο παραπάνω κώδικας, μας εμφανίζει το μενού που θα χρησιμοποιήσουμε για να περιηγηθούμε στα προηγούμενα και επόμενα άρθρα.
Αμεσώς μετά γράφουμε για να κλείσουμε το index.php τον εξής κώδικα:
<h2 class="center">Δεν βρέθηκε</h2> <p class="center">Λυπούμαστε αλλά αυτό που ψάχνετε δεν βρέθηκε.</p> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
Ο παραπάνω κώδικας, θα μας εμφανίσει το μήνυμα αυτό σε περίπτωση που δεν βρεθούν άρθρα. Επίσης κλείνουμε τις επαναλήψεις μας, και καλούμε τα αρχεία sidebar.php και footer.php.
Αφού τελειώσαμε με το index.php θα ανοίξουμε το style.css και θα δώσουμε τα στοιχεία του θέματος μας. Γράφουμε λοιπόν μέσα στο style.css τον εξής κώδικα:
/* Theme Name: GreekTutsie Theme URI: http://www.greektuts.net Version: 1.0 Description: A theme created for the WordPress month in GreekTuts.net Author: Pantso Author URI: http://www.pantso.gr */
Αυτό ήταν. Το WordPress πλέον αναγνωρίζει ότι υπάρχει ένα θέμα με όνομα GreekTutsie. Βέβαια αν το εγκαταστήσετε τώρα δεν θα δείτε και πολλά αφού ακόμα μας λείπουν μερικά αρχεία για να ολοκληρώσουμε την αρχική μορφή της σελίδας μας. Έτσι λοιπόν δημιουργούμε 3 νέα αρχεία. Τα header.php, sidebar.php και footer.php. Όπως καταλαβαίνετε, αυτά τα αρχεία χειρίζονται τις αντιστοιχες με το όνομα τους, περιοχές της σελίδας μας.
Ανούγουμε το header.php και γράφουμε:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /><!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</div>
</div>
<!-- end header -->
<div id="menu">
<ul>
<liclass="current_page_item<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/" class="current_page_item">Homepage</a></li>
<?php wp_list_pages('title_li=' ); ?>
</ul>
</div>
<!-- end menu -->
<div id="wrapper">
<div id="page">
<div id="page-bgtop">
Ανοίγουμε το sidebar.php και γράφουμε τον κώδικα:
<div id="sidebar">
<ul>
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()): ?>
<li>
<h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_categories('show_count=1&title_li=<h2>Κατηγορίες</h2>'); ?>
<?php wp_list_bookmarks(); ?>
<li>
<h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
Ανοίγουμε τέλος το footer.php και γράφουμε τον κώδικα:
<div style="clear: both; height: 20px;"> </div> </div></div> <!-- end page --> </div> <div id="footer"> <div id="footer-wrap"> <p id="legal">Σχεδιασμός από τον <a href="http://www.pantso.gr/">Pantso</a> για το <a href="http://www.greektuts.net/">GreekTuts</a>. Με την δύναμη του <a href="http://wordpress.org/">WordPress</a>.<br /></p> </div> </div> <?php wp_footer(); ?> </body> </html>
Τώρα οι αρχική σελίδα και οι βασικές λειτουργίες της ιστοσελίδας μας είναι ολοκληρωμένες. Προσπαθήστε να κάνετε εγκατάσταση του συγκεκριμένου θέματος ώστε να δείτε τι ακριβώς φτιάξαμε. Μπορείτε να κατεβάσετε τα αρχεία αυτού του βοηθήματος εδώ
Στο επόμενο βοήθημα της σειράς θα δημιουργήσουμε τα υπόλοιπα αρχεία του θέματος μας, και θα κάνουμε κάποιες οπτικές αλλαγές
Ωραία ευχαριστώ πολύ! Θα περιμένω τότε να δω!!