Wordpress Themes - How to

WordPress Themes

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Basilakis » 28 Δεκ 2009 04:17

Σε αυτό το βοήθημα ( βοήθημα; ) θα προσπαθήσω να καλύψω το μεγαλύτερο μέρος, όσο αναφορά τη δημιουργία ενός Template από το μηδέν. Παρόλα αυτά, δεν θα ασχοληθώ καθόλου με το Slicing ενός template και τη συγγραφή του CSS / XHTML, αλλά με τη δομή, της loops και το πόσο καλύτερο μπορεί να γίνει ένα Template με τη χρήση αρκετών Tips and Tricks!

Let’s talk about Themes
Τα Themes του Wordpress είναι κατά την ταπεινή γνώμη, αρκετών Designers ότι ποίο εύκολο ως προς επεξεργασία αλλά και δημιουργία ενός Template.

Ο λόγος είναι απλώς. Το template system του Wordpress, λειτουργεί με απλά php template tags τα οποία προσθέτονται εύκολα στο Header, το content Area, το Sidebar (εάν το χρειαζόμαστε) και το Footer μας.

Εικόνα

Ας το δούμε πάνω σε μια εικόνα, για να γίνει λίγο ποίο κατανοητό
Στην παραπάνω εικόνα λοιπόν έχουμε, στο ένα (1) Header της σελίδας μας
στο δεύτερο (2) κομμάτι, την sidebar στην οποία έχουμε περάσει το menu μας , στο τρίτο (3) έχουμε το περιεχόμενο μας, το content area και στο τελευταίο κομμάτι το τέταρτο (4) έχουμε το Footer μας.

Αν δούμε το αρχείο μας από άποψη κώδικα, έχουμε ένα index.php αρχείο, μέσα στο οποίο έχουμε, στην αρχή την κλήση του Header, μετά την κλίση του sidebar της σελίδας μας, το content area στο οποίο, προσθέτουμε την Wordpress Loop, η οποία καλεί τα κείμενά μας, είτε αυτά είναι Blog posts είτε Pages. Στο τέλος του αρχείου υπάρχει η κλήση προς το footer.php

Ακριβώς με τον ίδιο τρόπο, δεν σχεδιάζετε και την σελίδα σας για τη χρήση με απλή XHTML, ακολουθώντας τα Web Standards, και έχοντας μια σωστή δομή;
Φυσικά, καμία από αυτές τις περιοχές δεν είναι υποχρεωτική για τη σωστή λειτουργεία του Template.

Ας προχωρήσουμε λίγο παρακάτω…

Theme FrameWorks
Ίσως όταν σχεδιάζετε, να έχετε δεί τη χρήση κάποιων Frameworks. Τέτοια είναι για παράδειγμα το 960gs το οποίο αυτό που κάνει είναι να μας δίνει ένα αρχείο με έτοιμες κάποιες κάθετες γραμμές, τις οποίες εάν τις ακολουθήσετε στα μεγέθη του, θα μπορέσετε να έχετε έτοιμο το CSS το οποίο χρειάζεστε μετά για να τοποθετήσετε το photoshop mockup σας, μέσα στη σελίδα.

Τα ίδια ακριβώς framework μπορείτε να χρησιμοποιήσετε μέσα στη σελίδα σας. Παρόλα αυτά όμως, για να γίνει ακόμη ποίο εύκολη η ζωή των front end designers του Wordpress, υπάρχεου και Wordpress Theme Frameworks. Αυτά, έχουν έτοιμα όλα τα αρχεία τα οποία χρεάζεστε για τη δημιουργία ενός Wordpress Theme το οποίο θα παίζει χωρίς να χρειαστεί να γράψετε εσείς κώδικα! Απλώς θα δημιουργήσετε το δικό σας child theme με απλά CSS αρχεία.

Child Themes; Τι είναι αυτά;
Τα frameworks όπως είναι φυσικό, θέλουν να κρατιούνται ανανεωμένα σε όλα τα νέα χαρακτηριστικά που προσθέτονται στο Wordpress. Έτσι, αντί να επεξεργάζεστε το styles.css το βασικό αρχείο επεξεργασίας των θεμάτων, σας δίνουν τη δυνατότητα να έχετε ένα έξτρα αρχείο CSS, μέσα στο οποίο μπορείτε να προσθέσετε το CSS κώδικα σας που αντιστοιχεί σε συγκεκριμένα elements του design και διαβάζετε πριν από το style.css.
Αρκετές φορές παρόλα αυτά και για designs τα οποία ξεφεύγουν από την δομή που μπορεί να έχει το framework, χρειάζεται να ασχοληθείτε και με τα βασικά αρχεία το framework. Δυστυχώς οι αλλαγές που μπορούν να γίνουν με τα περισσότερα από αυτά αυτόματα, δεν είναι τόσο flexible.

flexible, τί είναι αυτό;
Τα theme frameworks έρχονται με ένα Option page, μέσα από το οποίο μπορείτε να επεξεργαστείτε τις ρυθμίσεις αλλά και την εμφάνιση του Theme σας. Παραδείγματα είναι η μεριά του sidebar ( αριστερά η δεξιά) να είναι η όχι Fluid το design, να είναι fluid το header ή το footer, Search Engine Options και πολλά ακόμη.
Και δεν γράφω php κώδικα;
Τα theme frameworks, δίνουν μια έξτα βοήθεια για αυτούς που θέλουν να γράψουν και κώδικα. Περιέχουν ειδικές Hooks μέσα στα Template τους, και έτσι όταν θέλετε να εμφανίσετε κάτι μέσα στο template, σε ένα συγκεκριμένο σημείο το μόνο που έχετε να κάνετε είναι να προσθέσετε μια πολύ μικρή function, μέσα στο αρχείο functions.php η οποία θα εκτυπώνει μέσα στο hook που επιθυμείτε.

Έχεις να προτίνεις κάποια framework;
Φυσικά. Μπορείτε να ρίξετε μια ματιά στα παρακάτω

HeadWay framework
Ένα από τα αγαπημένα μου και η χρήση του κάθε φορά με εντυπωσιάζει. Εάν δείτε τα demo videos το όλο design μπορείτε να το καθορίσετε πολύ εύκολα με drag n drop επιλογές. Μπορείτε να δείτε μερικά ενδιαφέροντα tutorials εδώ http://headwayhq.com/

Thesis
Αν και η έκδοση 1.6 που είναι τώρα είναι ακρετά δυνατή για εμένα προσωπικά, χρειάζεται αρκετές βελτιώσεις. Παρόλα αυτά είναι σίγουρα ένα υπέροχο εργαλείο για κάποιους ποιο εξιδικευμένους με το CSS και την php (φυσικά και με το Wordpress)http://diythemes.com/thesis/

Hybrid
και αυτό ένα από τα αγαπημένα. Το documentation και το support του είναι αυτά που θα σας εντυπωσιάσουν και θα σας κάνουν να το αγαπήσετε. Για τους λάτρεις του web typography, είναι σίγουρα το ποίο αγαπημένο framework! http://themehybrid.com/themes/hybrid

Ithemes builder και Elastic
Αυτά τα theme frameworks θεωρώ πως είναι το μέλον. Αυτό που κάνουν είναι να προσθέτουν την μεγαλύτερη διαθέσιμη ευκολία μέσα στα Options του Theme από το Admin Panel. Μάλιστα με τη χρήση τους μπορείτε να φέρετε ένα design σε αποτελέσματά που δεν θα πιστέψετε, απλώς ορίζοντας μεγέθη και μεταβλητές μέσα από το options page!
http://ithemes.com/purchase/builder-theme/
http://wordpress.org/extend/plugins/ela ... me-editor/

Υπάρχουν και άλλα;
Πολλά αλλά δεν έχω μείνει ευχαριστημένος. Αυτό είναι αντικειμενική άποψη παρόλα αυτά, μπορείτε να τα δοκιμάσετε και να μας πείτε και εμάς τη γνώμη σας!

Αυτά ήταν;
Όχι. Έχουμε και κάτι τελευταίο. Το Artisteer. Ένα μοναδικό εργαλείο το οποίο θα λατρέψετε αν αρχίσετε να το χρησιμοποιείτε!

Εικόνα

Το Artisteer είναι ένας WYSIWYG editor ο οποίος σας επιτρέπει να κάνετε Export σε Wordpress, Joomla, Drupal και απλή XHTML / CSS. Ο κώδικας που βγάζει είναι 100% Valid αν και δεν χρησιμοποιεί καθόλου CSS3. Η επεξεργασία και μετατροπή του theme γίνετε εύκολα αφού τα Classes που χρησιμοποιεί είναι είναι αρκετά απλά! Εάν το μάθετε αρκετά καλά, σύντομα θα μπορείτε να σχεδιάσετε τον βασικό ( ίσως και ολόκληρο το psd ) μέσα του και με πολύ λίγα βήματα να έχετε το design σας έτοιμο! http://www.artisteer.com/


Ας προχωρήσουμε λίγο στο Template μας τώρα

Η αρχιτεκτονική δομή που ακολουθεί το Wordpress στα template files του είναι η παρακάτω:

Εικόνα


Όπως βλέπετε, εάν δεν βρεί ένα από αυτά τα αρχείο, προχωράει παρακάτω μέχρι να βρεί ένα από αυτά, κατάλληλο για να παρουσιάσει το αποτέλεσμα που ζητήθηκε! Πότε όμως καλείτε κάθε από αυτά τα αρχεία;

Header.php &#8211; το αρχείο με το περιεχόμενο το οποίο διαβάζει πρώτα ο browser μας αφού βρίσκετε η κωδικοποίηση του template μας, το <head>, το <title> και τα javascript requests μας.
Index.php &#8211; το κεντρικό μας αρχείο όπου και περιέχει το Wordpress Loop μέσα του, για την παραγογή των άρθρων και των σελίδων. Με βάση το index.php δημιουργείτε το categories.php το archives.php το tags.php και το
Single.php &#8211; Η σελίδα η οποία θα εμφανίζει ένα post μόνο του. Μπορούμε να χρησιμοποιήσουμε τον ίδιο κώδικα από το index.php αλλά συνήθως όταν σχεδιάζουμε ένα blog, στο τέλος προσθέτουμε κάποια extra features, όπως rating, related posts, social bookmark κτλ.
Category.php &#8211; καλείτε όταν κάνουμε click σε ένα από τα categories του site μας. Μπορούμε να του δώσουμε διαφορετικό design από την index ή ακριβώς το ίδιο, αφού το Loop από μόνο του αναλαμβάνει τα εμφανίσει τα posts τα οποία ανήκουν σε αυτή την κατηγορία.
Archive.php &#8211; Παρουσιάζει τα posts που έχουν γραφτεί σε κάποια χρονική περίοδο.
tags.php &#8211; Παρουσιάζει τα posts τα οποία σχετίζονται σε κάποιο tag
Page.php &#8211; το αρχείο το οποίο είναι υπεύθυνο για την εμφάνιση του περιεχομένου των σελίδων τα οποία δημιουργούμε. Μπορεί και αυτό να είναι είτε ίδιο με το index.php είτε να έχει τη δικιά του δομή και design.
Author.php &#8211; Η συγκεκριμένη σελίδα είναι βοηθητική. Κάποια blogs δεν τη χρησιμοποιούν καθόλου, άλλα την θεωρούν βασική. Αυτό που κάνει είναι, εάν δεν προσθέσετε extra κώδικα, να εμφανίζει τα posts που έχει γράψει ένας χρήστης.
Sidebar.php &#8211; Το αρχείο που εμφανίζει το περιεχόμενο του sidebar μας
search.php, searchform.php &#8211; Το αρχείο που εμφανίζει τις αναζητήσεις που κάνουν οι επισκέπτες στο blog μας, και το searchform.php είναι η φόρμα αναζήτησης της σελίδας μας.
Comments.php &#8211; το αρχείο το οποίο περιέχει την φόρμα για τα comments μας. Το ίδιο αρχείο φυσικά και διαχειρίζεται τα comments, τα trackbacks και τα pingbacks.

[ι]Λίγο ποίο αναλυτικά&#8230;[/ι]

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

1) Το DOCTYPE
2) Τα JavaScript αρχεία τα οποία θα χρειαστούμε
3) <?php bloginfo('stylesheet_directory'); ?> το directory με το CSS αρχείο μας
4) Το <title><?php bloginfo('name'); ?></title> το οποίο θα εμφανίσει στο html tag title, τον τίτλο του blog που έχετε ρυθμίσει εσείς από τις επιλογές του Wordpress
5) Προσθέτουμε τα RSS feeds

Κώδικας: Επιλογή όλων

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo&#40;'rss2_url'&#41;; ?>" /><link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo&#40;'rss_url'&#41;; ?>" /><link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo&#40;'atom_url'&#41;; ?>" /><link rel="pingback" href="<?php bloginfo&#40;'pingback_url'&#41;; ?>" />

Καλούμε και το <?php wp_head(); ?> το οποίο είναι μια από τις core hooks και το χρησιμοποιούν αρκετοί προγραμματιστές στα plugin τους για να τοποθετήσουν αρχεία μέσα στο header μας!

έχοντας φυσικά ακολουθήσει μία σωστή html δομή, το header μας είναι έτοιμο!

Index.php
Εδώ, είναι τα βασικά και τα ποίο δύσκολα. Αυτό που θα κάνουμε είναι να καλέσουμε

το header.php
το sidebar.php
να εμφανίσουμε το content
να καλέσουμε το footer.php

lets call header!

στην πρώτη γραμμή λοιπόν προσθέτουμε το

Κώδικας: Επιλογή όλων

<?php get_header&#40;&#41;; ?>
και αυτό θα μας καλέσει το header.php αρχείο.
Προχωρώντας θα δούμε λίγο την Loop μας.

Κώδικας: Επιλογή όλων

<?php if &#40;have_posts&#40;&#41;&#41; &#58; while &#40;have_posts&#40;&#41;&#41; &#58; the_post&#40;&#41;; ?> <!-- the LOOP -->  
<!-- assigning post ID &#40;dynamic&#41; to every post so that you can control every single post -->  <div class="post" id="post-<?php the_ID&#40;&#41;; ?>"> <?php //creat author page the_author_posts_link&#40;&#41;;  ?>
<!-- article published date & month --><div class="date"><?php the_time&#40;'M', '', ''&#41;; ?> <?php the_time&#40;'d', '', ''&#41;; ?></div> 
<!-- the article title - linked so you can click and get into the article --><h1 class="posttitle"><a href="<?php the_permalink&#40;&#41; ?>" rel="bookmark"><?php the_title&#40;&#41;; ?></a></h1> 
<!-- returns the list of categories under which that particular article is posted --> 
<?php the_category&#40;','&#41; ?> 
<!-- number shows the number of comments on that particular aticle --> 
<?php comments_popup_link&#40;__&#40;'&#40; 0 &#41; Comments'&#41;, __&#40;'&#40; 1 &#41; Comment'&#41;, __&#40;'&#40; % &#41; Comments'&#41;&#41;; ?> <!&#8212;Wordpress thumbnail function from 2.9 -->
<?php the_post_thumbnail&#40;&#41;; ?>
<!-- the content of the article --><div class="storycontent">
<?php the_content&#40;__&#40;'more...'&#41;&#41;; ?></div> </div>
<!-- will inclued the comments.php file &#40;displayed only when inside an article&#41; - see below for the file-->
<?php comments_template&#40;&#41;; ?>
 <!-- end of the LOOP --> <?php endwhile; else&#58; ?>
 <p><!-- if LOOP fails, this text will be displayed --> 
<?php _e&#40;'Sorry, no posts matched your criteria.'&#41;; ?></p> 
<?php endif; ?> 
<!-- end if the LOOP fails -->
Ο παραπάνω κώδικας μας είναι η main loop μας! Απλό δεν είναι; Νομίζω και τα σχόλια είναι αρκετά κατανοητά για να δείτε τι κάνει το κάθε κομμάτι. Εάν υπάρχει απορία παρόλα αυτά, drop us a comment!

Το τελευταίο μας κομάτι είναι να δημιουργήσουμε το αρχείο functions.php ( μέσα στο συγκεκριμένο αρχείο προσθέτουμε ότι κώδικα php θέλουμε να πηγαίνει «πακέτο» με το theme μας )

Κώδικας: Επιλογή όλων

if &#40;  &#40;function_exists&#40;'has_post_thumbnail'&#41;&#41; && &#40;has_post_thumbnail&#40;&#41;&#41;  &#41; &#123;
   the_post_thumbnail&#40;&#41;;
&#125; else &#123;
   $postimage = get_post_meta&#40;$post->ID, 'post-image', true&#41;;
   if &#40;$postimage&#41; &#123;
      echo '<img src="'.$postimage.'" alt="" />';
   &#125;
&#125;
Το συγκεκριμένο κομμάτι κώδικα προστήθεται με την έκδοση 2.9 και είναι για την δημιουργεία των αυτόματων thumbnails. Αν θέλετε μπορείτε να διαβάσετε περισσότερα
Αυτό που μένει τώρα είναι να καλέσουμε το sidebar και το footer&#8230; παρόλα αυτά, το έχουμε είδη κάνει νωρίστερα χρησιμοποιώντας μια γνωστή μας function!

Κώδικας: Επιλογή όλων

<?php get_header&#40;&#41;; ?>
Για να καλέσουμε το sidebar.php τώρα απλώς γράφουμε

Κώδικας: Επιλογή όλων

<?php get_sidebar&#40;&#41;; ?>
Και μετά για το footer.php

Κώδικας: Επιλογή όλων

<?php get_footer&#40;&#41;; ?>
Πρίν δούμε το single.php ας τελειώσουμε το βασικό μας σκελετό

Το footer.php δεν χρεάζεται κάτι ιδαιέτερο εκτός από το κάλεσμα το footer hook, το οποίο και είναι

Κώδικας: Επιλογή όλων

<?php get_footer&#40;&#41;; ?>
το sidebar.php παρόλα αυτά έχει αρκετή και σύνθετη δουλειά.

Καταρχήν για να δουλέψει σωστά πρέπει να προσθέσουμε την δυνατότητα των Widgets.
Προσθέτουμε λοιπόν μέσα στο functions.php το παρακάτω:

Κώδικας: Επιλογή όλων

if &#40; function_exists&#40;'register_sidebar'&#41; &#41;
register_sidebar&#40;array&#40;
'name' => 'Homepage Widget 1',
'description' => __&#40;'The main widget area, most often used as a sidebar.', 'example'&#41;,
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
&#41;&#41;;
Το οποίο δημιουργεί την function την οποία θα προσθέσουμε στο template μας για να μπορούμε να χρησιμοποιήσουμε τα Widgets του wordpress ( η παραπάνω function είναι συμβατή με Wordpress 2.9+ ).

Τώρα λοιπόν προσθέτουμε στο sidebar.php την κλήση του Widget.

Κώδικας: Επιλογή όλων

<?php if &#40; !function_exists&#40;'dynamic_sidebar'&#41; || !dynamic_sidebar&#40;'Homepage Widget 1'&#41; &#41; &#58; ?>
<?php endif; ?>
And Voila! Τώρα μπορείτε από τον πίνακα ελέγχου να προσθέσετε widgets μέσα στο template σας!

Finally&#8230;
Τα βασικά τελειώσανε. Αν περάσετε τώρα τα αρχεία αυτά μέσα στο wp-admin/themes/template_name όπου template_name ο φάκελος που έχετε ορίσει, είστε έτοιμοι!
Ας δούμε όμως πώς να κάνουμε το Template μας λίγο καλύτερο!
Sidebar.php - Μιάς και ήταν το τελευταίο αρχείο που ασχοληθήκαμε ας το δούμε λίγο καλύτερα. Θα προσθέσουμε την φόρμα για την αναζήτηση. Πάνω λοιπόν από τα widgets, προσθέτουμε το εξής

Κώδικας: Επιλογή όλων

<!--search-->
	        <?php include &#40;TEMPLATEPATH . '/searchform.php'&#41;; ?> 
	
Το αρχείο searchform.php περιέχει τον εξής κώδικα:
[/code]
<div id="searchform">
<form method="" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="&nbsp;" />
</form></div>
[/code]
Που φυσικά είναι η φόρμα μας για να στείλει το search query στο search.php. Το search.php περιέχει απλώς ένα query (κάντε copy paste το index.php)

Some tips!
Μερικά όμορφα tips που μπορείτε να ακολουθήσετε για να κάνετε ποίο χρηστικό το search page σας

Κώδικας: Επιλογή όλων

<h2 class="pagetitle">Search Results</h2>
<h1>Browsing search results for <strong>"<?php the_search_query&#40;&#41; ?>"</strong>.</h1>
Για να δείξετε τα συνολικά search results

Κώδικας: Επιλογή όλων

<h2 class="pagetitle">Search Result for <?php /* Search Count */ $allsearch = &new WP_Query&#40;"s=$s&showposts=-1"&#41;; $key = wp_specialchars&#40;$s, 1&#41;; $count = $allsearch->post_count; _e&#40;''&#41;; _e&#40;'<span class="search-terms">'&#41;; echo $key; _e&#40;'</span>'&#41;; _e&#40;' &mdash; '&#41;; echo $count . ' '; _e&#40;'articles'&#41;; wp_reset_query&#40;&#41;; ?></h2>
Single.php &#8211; όπως αναφέραμε το αρχείο single.php εμφανίζει τον κώδικα που αντοιστειχεί στην εμφάνιση ενός άρθρου μόνο.

Το single.php είναι ακριβώς το ίδιο με το index.php μόνο που κάτω από το
<? the_content(); ?>
Προσθέτουμε το
<?php comments_template(); ?>
το οποίο μας επιτρέπει να καλέσουμε τα comment forms!

Some tip!
Για να δούμε και μερικά tips που θα κάνουν το single.php ακόμη ποίο όμορφο για τους επισκέπτες μας!

Related posts
Μπορείτε να προσθέσετε τον παρακάτω κώδικα και θα σας δώσει τα related posts με βάση τα tags Που έχετε προσθέσει

Κώδικας: Επιλογή όλων

<?php
//for use in the loop, list 5 post titles related to first tag on current post
$tags = wp_get_post_tags&#40;$post->ID&#41;;
if &#40;$tags&#41; &#123;
  echo 'Related Posts';
  $first_tag = $tags&#91;0&#93;->term_id;
  $args=array&#40;
    'tag__in' => array&#40;$first_tag&#41;,
    'post__not_in' => array&#40;$post->ID&#41;,
    'showposts'=>5,
    'caller_get_posts'=>1
   &#41;;
  $my_query = new WP_Query&#40;$args&#41;;
  if&#40; $my_query->have_posts&#40;&#41; &#41; &#123;
    while &#40;$my_query->have_posts&#40;&#41;&#41; &#58; $my_query->the_post&#40;&#41;; ?>
      <p><a href="<?php the_permalink&#40;&#41; ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute&#40;&#41;; ?>"><?php the_title&#40;&#41;; ?></a></p>
      <?php
    endwhile;
  &#125;
&#125;
?>
Θέλετε να προσθέσουμε και ένα Short Bio στο τέλος του Post για το συγγραφέα μας; Δεν είναι κάτι δύσκολο

Κώδικας: Επιλογή όλων

<div class="box">
<?php the_author_image&#40;&#41;; ?>
<?php the_author_description&#40;&#41;; ?>
</div>
Και στο css file σας μέσα

Κώδικας: Επιλογή όλων

.box &#123; 
  padding&#58; 8px;
  min-height&#58; 60px;
  background&#58; #efefef;
&#125;
.entry_author_image &#123;
  float&#58; left;
  background&#58; #fff;
  padding&#58; 4px;
  margin-right&#58; 8px;
  border-right&#58; solid 1px #dfdfdf;
  border-bottom&#58; solid 1px #dfdfdf;
&#125;
Comments.php
Το παρακάτω αρχείο είναι ίδιο για όλα τα templates, άρα απλώς παραθέτω ένα link, για όποιον το χρειάζεται. Στο συγκεκριμένο αρχείο εάν το διαβάσετε θα δείτε πως ο κώδικας του έχει πολλά tricks. Μπορείτε να δείτε τα περισσότερα μέσα από το Options Panel του Wordpress στην επιλογή σχετικά με τα comments!

Can I style comments;
Φυσικά και μπορείτε. Μπορείτε να δείτε μερικούς τρόπους για να καταλάβετε πως λειτουργούνε.
http://www.darrenhoyt.com/2007/08/18/st ... -comments/

Μπορείτε ακόμη να δείτε ένα παράδειγμα πώς να δώσετε διαφορετικό style μόνο στα comments του Admin
http://5thirtyone.com/archives/774

Δείτε και μερικά comment tips ακόμη
http://www.instantshift.com/2009/02/08/ ... age-hacks/

Archives.php
Εάν θέλετε το archives να είναι κάτι διαφορετικό από τα συνηθισμένα μπορείτε να κάνετε διάφορα tricks. Εμείς κάνουμε το εξής:

Κώδικας: Επιλογή όλων

Αναζήτηση&#58; <?php include &#40;TEMPLATEPATH . '/searchform.php'&#41;; ?>

<?php wp_tag_cloud&#40;'number=0'&#41;; ?>

<?php while&#40;have_posts&#40;&#41;&#41; &#58; the_post&#40;&#41;; ?>
<h3 class="archivehead">Μηνιαία Posts</h3>

<ul class="archivelist">

<?php wp_get_archives&#40;'type=monthly&show_count=1'&#41; ?>

</ul> 
<br />
<h3 class="archivehead">Όλα τα Posts!</h3>

<ul class="archivelist">
<?php wp_get_archives&#40;'type=postbypost&limit=50'&#41;;?>
</ul>

 
<?php endwhile; ?>
Όπου εμφανίζουμε μια μηχανή αναζήτησης, τα posts με βάση τους μήνες και τα τελευταία 50 posts.

Για να μπορέσουμε να ενεργοποιήσουμε αυτή τη σελίδα, θα πρέπει στην κορυφή της να βάλουμε το εξής

Κώδικας: Επιλογή όλων

<?php
/*
Template Name&#58; Archives
*/
?>
Ο παραπάνω κώδικας χρησιμοποιείτε όταν θέλουμε να φτιάξουμε αρχεία php που θα χρησιμοποιήσουμε ως templates. Με τον τρόπο αυτό μπορούμε να έχουμε διαφορετικό design σε κάποιες σελίδες.
Αφού φτιάξουμε λοιπόν τη σελίδα μας, πηγένουμε στο Admin panel, δημιουργούμε μια νέα σελίδα και επιλέγουμε το συγκεκριμένο template. Το πεδίο content το αφήνουμε λευκό.
Εικόνα


Author.php

Αφού λοιπόν φτιάξουμε τη σελίδα του author, αυτόματα αυτή αφού βασίζεται στον ίδιο κώδικα με το index.php θα μας δείξει τα Posts του συγκεκριμένου author που έχουμε επιλέξει. Ας καλέσουμε παρόλα αυτά μερικές επιλογές από το Admin Panel και το user info.

Ανοίξτε το αρχείο και πάνω από το Wordpress loop προσθέστε

Κώδικας: Επιλογή όλων

<?php
if&#40;isset&#40;$_GET&#91;'author_name'&#93;&#41;&#41; &#58;
$curauth = get_userdatabylogin&#40;$author_name&#41;;
else &#58;
$curauth = get_userdata&#40;intval&#40;$author&#41;&#41;;
endif;
?>
<h2>About&#58; <?php echo $curauth->nickname; ?></h2>
Website
<a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a><br />
Profile
<?php echo $curauth->user_description; ?><br />
Last Name
<?php echo $curauth->last_name; ?><br />
First Name
<?php echo $curauth->first_name; ?><br />
<h2>Posts by <?php echo $curauth->nickname; ?>&#58;</h2>
Μερικά Loop Info!
Ίσως κάποιες φορές χρειαστείτε να φτιάξετε πολαπλά loops μέσα στο template σας. Ο ποίο απλώς κώδικας για να το κάνετε είναι ο παρακάτω&#58;

<?php $my_query = new WP_Query&#40;'category_name=Featured&showposts=5'&#41;;
while &#40;$my_query->have_posts&#40;&#41;&#41; &#58; $my_query->the_post&#40;&#41;;
$do_not_duplicate = $post->ID; ?>
<!-- POST CODES HERE -->
<?php endwhile; ?>
Νομίζω είναι αρκετά κατανοητό τι πρέπει να αλλαχτεί για τα παίξει το loop σας σε άλλη κατηγορία ή με άλλο αριθμό Posts

Αυτό είναι ένα από τα βασικά που θα χρειαστείτε. Περισσότερα για τα Query info’s εδώ: http://codex.wordpress.org/Template_Tags/query_posts


Μπορείτε να βρείτε ότι extra πληροφορίες χρειάζεστε απο το codex
http://codex.wordpress.org

Ultimate24
Δημοσιεύσεις: 6
Εγγραφή: 13 Νοέμ 2009 17:19

Wordpress Themes - How to

Δημοσίευση από Ultimate24 » 28 Δεκ 2009 12:11

:clap: :clap: :clap: :yea:
Thank you

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από korgr » 28 Δεκ 2009 14:07

Αν και δεν χρησιμοποιω WP, δεν μπορω να μην δωσω και εγω τα συγχαρητηρια μου για το τοσο καλα δομημενο βοηθημα σου Βασιλη! :D
Well done man! :)

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Basilakis » 28 Δεκ 2009 14:24

Thank you παιδιά. Πήρε χρόνο αλλά τι να κάνουμε, έρπεπε να υπάρχει και στα Ελληνικά! :)

Άβαταρ μέλους
stevebat
Script Master
Δημοσιεύσεις: 307
Εγγραφή: 05 Αύγ 2009 15:54
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από stevebat » 28 Δεκ 2009 20:03

ευχαριστουμε πολυ!!!

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Andreas_O » 28 Δεκ 2009 23:44

Πραγματικά εκπληκτική δουλειά, για όσους ασχολούνται ή θέλουν να ασχοληθούν με το Wordpress :)
;]

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από vassilism » 29 Δεκ 2009 00:08

korgr έγραψε:Αν και δεν χρησιμοποιω WP, δεν μπορω να μην δωσω και εγω τα συγχαρητηρια μου για το τοσο καλα δομημενο βοηθημα σου Βασιλη! :D
Well done man! :)
+1
Αν και δεν έχω δει ποτέ το WP αυτό είναι ένα εξαιρετικό βοήθημα.

@Basilakhs άντε ντε ξεκίνα γράψε κανά βιβλίο πριν σε προλάβουν άλλοι.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Basilakis » 29 Δεκ 2009 00:46

@vassilism
Άντε με το καλό να βγάλουν! Γνωρίζω τα όρια μου και δυστυχώς δεν είμαι ειδικός με την ελληνική γλώσσα. Δεν μπορώ να ασχοληθώ με κάτι τέτοιο :D

Παιδιά πραγματικά ευχαριστώ για τα σχόλια σας. Αυτό το μπράβο στο συγκεκριμένο Tutorial αξίζει πραγματικά! :)

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1950
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από vassilism » 29 Δεκ 2009 00:56

Basilakis έγραψε:Άντε με το καλό να βγάλουν! Γνωρίζω τα όρια μου και δυστυχώς δεν είμαι ειδικός με την ελληνική γλώσσα. Δεν μπορώ να ασχοληθώ με κάτι τέτοιο :D
Ρε συ Αντρέα βάλτου λίγο μυαλό, τι είναι αυτά που λέει?

Άβαταρ μέλους
Andreas_O
Honorary Member
Δημοσιεύσεις: 1621
Εγγραφή: 14 Σεπ 2007 17:22
Τοποθεσία: Aθήνα
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Andreas_O » 29 Δεκ 2009 01:21

vassilism έγραψε:
Basilakis έγραψε:Άντε με το καλό να βγάλουν! Γνωρίζω τα όρια μου και δυστυχώς δεν είμαι ειδικός με την ελληνική γλώσσα. Δεν μπορώ να ασχοληθώ με κάτι τέτοιο :D
Ρε συ Αντρέα βάλτου λίγο μυαλό, τι είναι αυτά που λέει?
@basilakis :evil:
Νομίζω, πως δε μπορεί κανείς να είναι τέλειος. Η άποψή μου είναι, ότι σε ένα βιβλίο κάποιος καλύπτει τα τεχνικά (περιεχόμενο) και κάποιος το αποτέλεσμα (διορθωτής ελληνικών κειμένων, φιλόλογος or sth)
;]

Άβαταρ μέλους
deninho
Super Moderator
Δημοσιεύσεις: 7066
Εγγραφή: 17 Ιαν 2004 16:01
Τοποθεσία: σ'άλλη διάσταση
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από deninho » 29 Δεκ 2009 02:35

κι εμένα τι με έχετε εδώ ρε Βασίλη; Τσάμπα χάνω τις ώρες μου στη Φιλοσοφική; :lol:

Το βοήθημα είναι πολύ καλό :) Μπράβο, κι ευχαριστώ για τον κόπο σου να γράψεις κάτι τέτοιο :D

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από Basilakis » 29 Δεκ 2009 02:44

Λέτε να μαζέψουμε team :P

Άβαταρ μέλους
inBlogger
Δημοσιεύσεις: 576
Εγγραφή: 18 Απρ 2009 01:55
Τοποθεσία: Αθήνα.
Επικοινωνία:

Wordpress Themes - How to

Δημοσίευση από inBlogger » 29 Δεκ 2009 13:16

Bravo Bravo! Πολύ καλή δουλειά! Έχεις ένα pm, τσέκαρε το plz :-)
&#8226; inBlog.gr - Ενημερωτικό blog για SEO, Marketing, Social Media κ.α. ;-)
&#8226; w24.gr Forum - Ελληνική κοινότητα για Webmasters, SEO, internet marketing και affiliate marketers.(απο το 2009!)
&#8226;Travel Blog

pagou
Δημοσιεύσεις: 273
Εγγραφή: 07 Μάιος 2007 10:07

Wordpress Themes - How to

Δημοσίευση από pagou » 05 Ιουν 2010 15:55

πωλη καλω σηγχαρειτυροια

( οποτε συγκριτικα με αλλους μια χαρα τα εχεις τα ελληνικα )

Απάντηση

Επιστροφή στο “WordPress Themes”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες