Δυναμική Λίστα με τις Δημοσιεύσεις στο WordPress

Αν έχουμε ένα hosted WordPress blog – δηλαδή όχι στο WordPress.com – είναι χρήσιμο για τους επισκέπτες μας να έχουμε μια λίστα με τις δημοσιεύσεις. Στον οδηγό αυτό θα δούμε, βήμα προς βήμα, πως να φτιάξουμε μια αναλυτική, δυναμική λίστα με τις δημοσιεύσεις, είτε έχουμε 10 posts, είτε 10.000.

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

Προετοιμασία: Πρόσβαση στο Server και Notepad ++

Το πρώτο σημαντικό βήμα για να δημιουργήσουμε λίστα με τις δημοσιεύσεις είναι να έχουμε πρόσβαση στο Server που φιλοξενεί την ιστοσελίδα μας, είτε μέσω FTP ή από τον διαχειριστή αρχείων του Cpanel / Plesk ή άλλου συστήματος διαχείρισης.

Θα γράψουμε πρώτα τον κώδικα τοπικά στον υπολογιστή μας, και στη συνέχεια θα τον ανεβάσουμε στο κατάλληλο σημείο για να τον αξιοποιήσει η εγκατάσταση WordPress.

Πρακτικά, μπορούμε να δημιουργήσουμε τη λίστα με τις δημοσιεύσεις σε οποιονδήποτε επεξεργαστή κειμένου, όπως το Σημειωματάριο των Windows

Είναι όμως προς όφελός μας να έχουμε έναν οργανωμένο επεξεργαστή, ο οποίος να αναγνωρίζει κώδικα, καθώς θα μας βοηθήσει να ξεχωρίσουμε τα στοιχεία του κώδικα (πχ σχόλια, tags κλπ) και να αποφύγουμε λάθη.

Στον οδηγό θα χρησιμοποιήσουμε το Notepad ++, μια εξαιρετικά ευέλικτη δωρεάν εφαρμογή, με πλήθος ευκολιών για τον αρχάριο ή τον έμπειρο προγραμματιστή.

Στην αρχή που θα γράφουμε τον κώδικα, δεν θα φαίνονται με χρώματα τα στοιχεία. Αρκεί όμως να κάνουμε αποθήκευση…

…και να επιλέξουμε σαν τύπο αρχείου το PHP Hypertext Preprocessor file, ώστε το πρόγραμμα να εφαρμόσει τους κατάλληλους κανόνες για τη γλώσσα προγραμματισμού.

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

To Template για μια δυναμική λίστα με τις δημοσιεύσεις στο WordPress

Αρχικά θα δημιουργήσουμε ένα template για σελίδα στο WordPress, το οποίο θα μπορέσει να φιλοξενήσει οποιουδήποτε είδους δυναμική λίστα με τις δημοσιεύσεις, πχ χρονολογικό αρχείο, site feed, κατηγορίες κλπ.

Το πρώτο βήμα είναι να ορίσουμε πως το αρχείο περιέχει ένα template, και να του δώσουμε ένα όνομα. Δεν χρειάζεται να γράψετε τον κώδικα τώρα, θα σας τον έχουμε έτοιμο παρακάτω στον οδηγό.

Παρατηρούμε πως εντός του <?php ?> τα σχόλια ορίζονται ανάμεσα σε /* και */, αλλά στον κώδικα εκτός ορίζονται με <!– και –>.

Το όνομα που ορίσαμε ως template name, αφού ανεβάσουμε το αρχείο, είναι αυτό που θα εμφανίζεται στα πρότυπα που μπορούμε να επιλέξουμε σε μια σελίδα του WordPress.

Αμέσως μετά, εισάγουμε τον header, και ανοίγουμε δύο στοιχεία div. Το να τους δώσουμε συγκεκριμένο id και class θα μας βοηθήσει αν θελήσουμε να τροποποιήσουμε την εμφάνιση μέσω CSS.

Το να αφήνουμε τα κατάλληλα tabs για τον κώδικα που ανήκει στο κάθε στοιχείο div θα μας βοηθήσει να έχουμε κώδικα ευανάγνωστο, αν θελήσουμε να κάνουμε αλλαγές κάποια στιγμή αργότερα.

Ανοίγουμε ένα php while με συνθήκη το have_posts() που ελέγχει αν υπάρχουν δημοσιεύσεις προς εμφάνιση (είναι τύπου boolean, επιστρέφει TRUE ή FALSE) για να φορτώσει την επόμενη δημοσίευση the_post().

Δημιουργούμε επίσης ένα header όπου θα εισάγεται αυτόματα ο τίτλος που θα ορίζουμε στην εκάστοτε σελίδα…

Ανοίγουμε δύο ακόμα div.

Το div της τάξης eisagwgiko θα περιέχει το κείμενο που θα γράψουμε εισαγωγικά στη λίστα με τις δημοσιεύσεις…

Το div “dimosieuseis” είναι εκεί που θα προσθέσουμε τον κώδικα ο οποίος θα φτιάξει αυτόματα τη λίστα με τις δημοσιεύσεις.

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

Τέλος, κλείνουμε όλα τα αντικείμενα που είχαμε ανοίξει: τα div .dimosieuseis και .eisagwgiko, το article, το while, και τα δύο αρχικά div.

Στο κάτω μέρος του κώδικα, στο παράδειγμα έχουμε κρυμμένη τη sidebar, και μπορούμε να την εμφανίζουμε σβήνοντας το σχόλιο (τα /* και */)…

…ενώ αμέσως μετά συμπεριλαμβάνουμε το footer της σελίδας.

Ο συνολικός κώδικας μέχρι στιγμής είναι αυτός:

<?php
/*
Template Name: Sitemap Template 
 * @package PCsteps
 */
 ?>
<!-- Όλος ο υπόλοιπος κώδικας προστίθεται κάτω από αυτή τη γραμμή -->
<?php get_header(); ?>

<div id="dimosieuseis" class="perioxi-periexomenou">
 <div id="periexomeno" class="periexomeno-site" role="main">
 
  <?php while ( have_posts() ) : the_post(); ?>
   
   <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
    <!-- προστίθεται ο τίτλος που ορίσαμε στη σελίδα -->
      <h1 class="entry-title h1"> <?php the_title(); ?> </h1>
    </header>
 
    <div class="eisagwgiko">
    <!-- Δείχνουμε το περιεχόμενο που έχει 
    προσθέσει στη σελίδα ο χρήστης
    πχ μια εισαγωγική παράγραφο -->
    <?php the_content(); ?> 
 
     <div class="dimosieuseis">
 
     <!-- Εδώ θα προσθέσουμε κώδικα
     ανάλογα με το περιεχόμενο και
     τη μορφή που θέλουμε να έχει
     η λίστα των δημοσιεύσεων-->
 
     <!-- Μέχρι εδώ -->
     </div><!-- κλείνει το .dimosieuseis-->
    </div><!-- κλείνει το .eisagwgiko--> 
   </article><!-- κλείνει το #post -->
  <?php endwhile; // κλείνει το loop. ?>
 </div><!-- #periexomeno -->
</div><!-- #dimosieuseis -->

<?php /* Βγάζουμε το σχόλιο αν θέλουμε να
      φαίνεται η sidebar
 get_sidebar(); */ ?>
<!-- συμπεριλαμβάνουμε το Footer -->
<?php get_footer(); ?>

Οι κώδικες για τη δυναμική λίστα με τις δημοσιεύσεις στο WordPress

Αναλόγως με του ποιο θέλουμε να είναι το περιεχόμενο της σελίδας, προσθέτουμε τον αντίστοιχο κώδικα στο <div class=”dimosieuseis”>

Μπορούμε φυσικά να προσθέσουμε περισσότερους από έναν κώδικες, αν θέλουμε να εισάγουμε δύο διαφορετικές λειτουργικότητες.

Κουτί αναζήτησης

<div class="dimosieuseis">
 
 <section class="q-search">
 <h2 class="entry-title">Γρήγορη Αναζήτηση</h2>
 <?php get_search_form(); ?>
 </section>
</div><!-- κλείνει το .dimosieuseis-->

Τα  RSS Feeds της σελίδας

<div class="dimosieuseis">
 
 <section class="feeds">
 <h2 class="entry-title">Feeds</h2>
 <ul>
  <li><a title="Full content" href="feed:<?php bloginfo('rss2_url'); ?>">Main RSS</a></li>
  <li><a title="Comment Feed" href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comment Feed</a></li>
 </ul>
 </section>
</div><!-- κλείνει το .dimosieuseis-->

Πλήρης λίστα με τις κατηγορίες + RSS

<div class="dimosieuseis">

 <section class="categories">
 <h2 class="entry-title"><i class="icon-th-list"></i> Κατηγορίες</h2>
   <ul><?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0&feed=RSS'); ?></ul>
 </section>

</div><!-- κλείνει το .dimosieuseis-->

Μηνιαίο αρχείο με αριθμό δημοσιεύσεων

<div class="dimosieuseis">

 <section class="archives">
 <h2 class="entry-title">Μηνιαίο Αρχείο</h2>
 <ul>
  <?php wp_get_archives('type=monthly&show_post_count=true'); ?>
 </ul>
 </section>

</div><!-- κλείνει το .dimosieuseis-->

Λίστα των σελίδων

<div class="dimosieuseis">

 <section class="pages">
 <h2 class="entry-title">Σελίδες</h2>
  <ul><?php wp_list_pages("title_li="); ?></ul>
 </section>

</div><!-- κλείνει το .dimosieuseis-->

Λίστα με τις δημοσιεύσεις (τελευταίες 10)

<div class="dimosieuseis">

 <section class="posts">
 <h2 class="entry-title">Οι τελευταίες 10 δημοσιεύσεις:</h2>
 <ul><?php $archive_query = new WP_Query('showposts=10');
 while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
 <li>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
 </li>
 <?php endwhile; ?>
 </ul>
</section>

</div><!-- κλείνει το .dimosieuseis-->

Λίστα με τις δημοσιεύσεις (όλες)

<div class="dimosieuseis">

 <section class="posts">
 <h2 class="entry-title">Όλες οι δημοσιεύσεις:</h2>
 <ul><?php $archive_query = new WP_Query('showposts=-1');
 while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
 <li>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
 </li>
 <?php endwhile; ?>
 </ul>
</section>

</div><!-- κλείνει το .dimosieuseis-->

To Template για μια δυναμική λίστα με τις δημοσιεύσεις στο Genesis Framework

To Genesis Framework και τα πολλαπλά child-themes του είναι ένα από τα πιο δημοφιλή θέματα για το WordPress.

Καθώς το Genesis Framework λειτουργεί διαφορετικά από τα περισσότερα themes, ο παραπάνω κώδικας δεν πρόκειται να λειτουργήσει για να δημιουργήσουμε μια δυναμική λίστα με τις δημοσιεύσεις.

Αυτός είναι ο κώδικας που πρέπει να χρησιμοποιήσουμε στο Genesis Framework ή σε οποιοδήποτε child-theme του:

<?php
/**
* Template Name: Sitemap Template
*/

// Εισάγουμε το δικό μας custom loop
add_action( 'genesis_loop', 'cd_full_loop' );

function cd_full_loop() {

/* Αυτός ο πίνακας αποφασίζει την κατηγορία, τη σειρά, και το πόσα άρθρα θα περιλαμβάνει η λίστα των δημοσιεύσεων */ 
$args = array(
// 'category_name' => 'windows',
/* αν το 'category_name' έχει το έχουμε κρύψει σαν σχόλιο
ή είναι κενό, θα έχουμε τις δημοσιεύσεις από κάθε κατηγορία */
 'orderby' => 'title',
 'order' => 'ASC',
 'posts_per_page'=> '-1',
 );

$loop = new WP_Query( $args );

//αν υπάρχουν δημοσιεύσεις...
 if( $loop->have_posts() ) {

//...και για όσο υπάρχουν δημοσιεύσεις...
 while( $loop->have_posts() ): $loop->the_post();

/* ...δείξε (echo) κάθε δημοσίευση με το σύνδεσμο, τον τίτλο, και την ημερομηνία */
 echo '<li><a href="'. get_permalink() .'" target="_blank" style="font-weight: 700;">' . get_the_title() . '</a><br>Δημοσίευση: '. get_the_date() .'</li><br>';

 endwhile;
 }
 wp_reset_postdata();

}

genesis();

Αυτός ο κώδικας είναι αρκετά πιο απλός καθώς δεν χρειάζεται να φτιάξουμε div, το Genesis Framework αναλαμβάνει αυτή τη δουλειά για εμάς.

Για περισσότερες πληροφορίες σχετικά τις παραμέτρους του πίνακα $arrays, που θα μας επιτρέψουν να συμπεριλάβουμε συγκεκριμένες δημοσιεύσεις στη λίστα, και με τη σωστή σειρά, δείτε το WordPress Codex σχετικά με τη λειτουργία get_posts.

Ανέβασμα του αρχείου και επιλογή Template

Αφού δημιουργήσαμε το αρχείο – στο παράδειγμα το ονομάσαμε sitemap.php – αρκεί να το ανεβάσουμε, είτε με FTP είτε μέσω του File manager στον φάκελο του Theme, τον οποίο θα βρούμε στο /wp-content/themes/(το όνομα του theme)/

Για το Genesis Framework, αν χρησιμοποιούμε ένα child-theme, χρειάζεται να ανεβάσουμε το αρχείο στο φάκελο του child-theme.

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

Η δυναμική λίστα με τις δημοσιεύσεις είναι έτοιμη

Επισκεπτόμενοι τη σελίδα
https://www.pcsteps.gr/αρχείο/

…θα βρούμε όλους τους δημοσιευμένους οδηγούς του PCsteps σε αλφαβητική σειρά.

Έχετε απορίες σχετικά με τη δυναμική λίστα με τις δημοσιεύσεις?

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