Categorie : Wordpress
Tags : ,
Commentaires fermés.
Auteur : MariusV
18-01-2017 - Il y a 3 ans
MAJ : 13 Déc 2017 a 04:52 Démo    

Liste alphabétique des posts

Liste alphabétique des posts


Demo Blog liste alphabetique



<?php /* Template Name: Alphabetique Table */ ?>
<?php get_header();?>

<?php $posts_per_row = -1; 
$posts_per_page = -1;
$curr_letter = $_GET["character"];
 ?>

Affichage des lettres de l’alphabet


 
<div class="container-fluid">
<hr>
<div class="row">

<ul class="directory-list">      
<li><a href="<?php the_permalink() ?>/?character=A">a</a></li>
<li><a href="<?php the_permalink() ?>/?character=B">b</a></li>
<li><a href="<?php the_permalink() ?>/?character=C">c</a></li>
<li><a href="<?php the_permalink() ?>/?character=D">d</a></li>
<li><a href="<?php the_permalink() ?>/?character=E">e</a></li>
<li><a href="<?php the_permalink() ?>/?character=F">f</a></li>
<li><a href="<?php the_permalink() ?>/?character=G">g</a></li>
<li><a href="<?php the_permalink() ?>/?character=H">h</a></li>
<li><a href="<?php the_permalink() ?>/?character=I">i</a></li>
<li><a href="<?php the_permalink() ?>/?character=J">j</a></li>
<li><a href="<?php the_permalink() ?>/?character=K">k</a></li>
<li><a href="<?php the_permalink() ?>/?character=L">l</a></li>
<li><a href="<?php the_permalink() ?>/?character=M">m</a></li>
<li><a href="<?php the_permalink() ?>/?character=N">n</a></li>
<li><a href="<?php the_permalink() ?>/?character=O">o</a></li>
<li><a href="<?php the_permalink() ?>/?character=P">p</a></li>
<li><a href="<?php the_permalink() ?>/?character=Q">q</a></li>
<li><a href="<?php the_permalink() ?>/?character=R">r</a></li>
<li><a href="<?php the_permalink() ?>/?character=S">s</a></li>
<li><a href="<?php the_permalink() ?>/?character=T">t</a></li>
<li><a href="<?php the_permalink() ?>/?character=U">u</a></li>
<li><a href="<?php the_permalink() ?>/?character=V">v</a></li>
<li><a href="<?php the_permalink() ?>/?character=W">w</a></li>
<li><a href="<?php the_permalink() ?>/?character=X">x</a></li>
<li><a href="<?php the_permalink() ?>/?character=Y">y</a></li>
<li><a href="<?php the_permalink() ?>/?character=Z">z</a></li>
    </ul>
</div>
<hr>
 </div>
 <!-- FIN Container -->

Le query et la table bootstrap

 

<div class="container-fluid">

<div class="row">
<?php echo $curr_letter ;?>

<table class="table table-hover">
<thead>
<tr>
<th>Post</th>
<th>Categorie</th>
<th>Extrait</th>
<th>Date</th>
<th>Auteur</th>
</tr>
</thead>

       <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : -1; $args = array ( 'posts_per_page' => $posts_per_page,
         'post_type' => 'post',
         'orderby' => 'title',
         'order' => 'ASC',
         'paged' => $paged
       );
       query_posts($args);

       if ( have_posts() ) {
         while ( have_posts() ) {
           the_post();
           $first_letter = strtoupper(substr(apply_filters('the_title',$post->post_title),0,1));

           if ($first_letter == $curr_letter) {  ?>
 
<tbody>      
<tr>        
<td><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
          <?php $thetitle = $post->post_title; /* or you can use get_the_title() */
                $getlength = strlen($thetitle);
                $thelength = 40;
                echo substr($thetitle, 0, $thelength);
                if ($getlength > $thelength) echo "...";

            ?>
          </a></td>
<td><?php _e( '', 'html5blank' ); the_category(', '); // Separated by commas ?> </td>
<td> <?php echo substr(get_the_excerpt(), 0,95); ?>  </td>
<td> <?php the_date('d-m-y'); ?>  </td>
<td> <?php the_author(); ?>  </td>
      </tr>
    </tbody>


        <!-- Fin COL -->
           <?php } ?> <!-- Fin IF -->
         <?php } ?><!-- Fin WHILE -->

       <?php } else { echo " 
<h2>Sorry, no posts were found!</h2>"; } ?>
  </table>
    </div>
</div>

La pagination

 <!-- PAGINATION -->
<div class="container">
<ul class="pagination">
<li>
        <?php $big = 999999999; // need an unlikely integer echo paginate_links( array( 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
            'format' => '?paged=%#%',
            'current' => $paged,
            'total' => $query->max_num_pages
              ) );
            wp_reset_postdata();
        ?>
      </li>
    </ul>
  </div>
<!-- PAGINATION -->

Le CSS

.directory-list, .directory-info-row .social-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.directory-list li {
    border-left: 1px solid #f1f2f7;
    display: table-cell;
    width: 1%;
}

.directory-list li a {
    display: block;
    padding: 5px 0;
    text-align: center;
    text-transform: uppercase;
    background: #fff;
    color: #7A7676;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    text-decoration: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
 

.directory-list li a:hover, .directory-info-row .social-links li a:hover {
    background: #ff6c60;
    color: #fff;
}



Debut : Fin : Fini depuis : 0 jour(s)
« - »

Les commentaires sont fermés.