Random Grid sur Home page ! (Wordpress)

[pomme man]

Bonjour,

Je reviens encore sur ce forum pour une aide dans le code...

J'ai, sur la home, une grid pour l'affichage des postes...

Je rencontre ainsi 2 petit soucies.

1) j'aimerais faire un random des postes sur la home page.
Faire en sorte que la grid s'affiche donc de façon aléatoire et non pas les derniers postes en premiers...

Voici le code utilisé pour le création des grides :

Sur : loop.php

<?php if ( have_posts() ) : ?>

    <div id="loop" class="<?php if ($_COOKIE['mode'] == 'grid') echo 'grid'; else echo 'list'; ?> clear">

    <?php while ( have_posts() ) : the_post(); ?>

        <div <?php post_class('post clear'); ?> id="post_<?php the_ID(); ?>">
            <?php if ( has_post_thumbnail() ) :?>
            <a href="<?php the_permalink() ?>" class="thumb"><?php the_post_thumbnail('thumbnail', array(
                        'alt'    => trim(strip_tags( $post->post_title )),
                        'title'    => trim(strip_tags( $post->post_title )),
                    )); ?></a>
            <?php endif; ?>

            <div class="post-category"><?php the_category(' / '); ?></div>
            <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

            <div class="post-content"><?php if (function_exists('smart_excerpt')) smart_excerpt(get_the_excerpt(), 55); ?></div>
        </div>


    <?php endwhile; ?>

    </div>

<?php endif; ?>

sur index.php

<?php get_header(); ?>

<div class="content-title">
    Portfolio
    <a href="javascript: void(0);" id="mode"<?php if ($_COOKIE['mode'] == 'grid') echo ' class="flip"'; ?>></a>
</div>

<?php query_posts(array(
        'post__not_in' => $exl_posts,
        'paged' => $paged,
    )
); ?>

<?php get_template_part('loop'); ?>

<?php wp_reset_query(); ?>

<?php get_template_part('pagination'); ?>

<?php get_footer(); ?>

sur fonction.php

    # Home & Front Page ########################################
    if (is_home() || is_front_page()) {
        $newtitle = get_bloginfo('name') . $sep . get_bloginfo('description');
    } else {
        $newtitle .=  $sep . get_bloginfo('name');
    }
    return $newtitle;
}
add_filter('wp_title', 'seo_title');

function new_excerpt_length($length) {
    return 200;
}
add_filter('excerpt_length', 'new_excerpt_length');


function getTinyUrl($url) {
    $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url);
    return $tinyurl;
}

function smart_excerpt($string, $limit) {
    $words = explode(" ",$string);
    if ( count($words) >= $limit) $dots = '...';
    echo implode(" ",array_splice($words,0,$limit)).$dots;
}

function comments_link_attributes(){
    return 'class="comments_popup_link"';
}
add_filter('comments_popup_link_attributes', 'comments_link_attributes');

function next_posts_attributes(){
    return 'class="nextpostslink"';
}
add_filter('next_posts_link_attributes', 'next_posts_attributes');

?>

voila, je ne sais trop quoi faire pour ce random.
A savoir, j'ai déjà un random dans les "post_thumb" en widget sans plug in (si ça vous interresse de le récupérer...)

voici le code de ce random widget dans fonction.php

class Recentposts_thumbnail extends WP_Widget {

    function Recentposts_thumbnail() {
        parent::WP_Widget(false, $name = 'Sight Recent Posts');
    }
    

    function widget($args, $instance) {
        extract( $args );
        $title = apply_filters('widget_title', $instance['title']);
        ?>
            <?php echo $before_widget; ?>
            <?php if ( $title ) echo $before_title . $title . $after_title;  else echo '<div class="widget-body clear">'; ?>


            <?php
                global $post;
                
                $q_args = array(
                    'numberposts' => 7, 'exclude' => $current_args, 'orderby' => 'rand',
                );
                $rand_posts = get_posts($q_args);
                foreach ( $rand_posts as $post ) :
                    setup_postdata($post);
            ?>

                <a href="<?php the_permalink(); ?>" class="rpthumb clear">
                    <?php if ( has_post_thumbnail() && !get_option('rpthumb_thumb') ) {
                        the_post_thumbnail('mini-thumbnail');
                        $offset = 'style="padding-left: 65px;"';
                    }
                    ?>
                    <span class="rpthumb-title" <?php echo $offset; ?>><?php the_title(); ?></span>

                </a>

            <?php endforeach; ?>

            <?php echo $after_widget; ?>
        <?php
    }

2) je n'arrive pas à distinguer les différent carré de la grid.
ainsi, ils ont tous une marge de 20px, qui du coup ce retrouve aussi sur la troisiéme grid et qui me pose un problème d'alignement...

voici le code CSS

.grid .post {width: 183px; height: 183px; background-color: #f5f5f5; padding: 15px; float: left; margin: 20px 20px 0px 0px; position: relative; overflow: hidden; cursor: pointer;}
.grid .post .post-category, .grid .post .post-content, .grid .post .post-meta em {display: none;}
.grid .post h2, .grid .post .post-meta {display: block;}
.grid .post .thumb {width: 214px; height: 214px; position: absolute; top: 0; left: 0; z-index: 1;}
.grid .post .thumb img {width: 214px; height: 214px;}

.grid .post h2, .grid .post h2 a {color: #000; font-size: 16px; font-weight: normal; text-decoration: none;}
.grid .post h2 {margin-bottom: 5px;}
.grid .post a {text-decoration: none;}
.grid .post a:hover {text-decoration: underline;}
.grid .post .post-meta {font-size: 10px; font-style: italic; color: #656363;}
.grid .post .post-meta span, .grid .post .post-meta a {color: #000; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
.grid .post .post-meta .post-author {text-transform: uppercase;}
.grid .post .comments_popup_link {position: absolute; bottom: 18px; right: 18px;}
.grid .post .post-edit-link {position: absolute; bottom: 18px; left: 18px;}

Merci de m'aider !!!
PS, je donne mon templette à qui le souhaite sans soucie...
une fois terminé !




Ma configuration WP actuelle
- Version de WordPress : 3.1
- Version de PHP/MySQL : 5.3
- Thème utilisé : le mien perso ! "nom : MAD"

 

[momo-fr]

Pour ton truc d'alignement j'ai déjà vu un truc dans ce style avec le dernier élement de la liste qui prend une classe particulière, c'est une piste, je n'ai pas de code a te proposer.

Sinon, dans ce genre de cas une marge gauche/droite de 10 px rendra mieux avec un petit decalage sous ton filet mais c'est plus "propre"...

 

[Niconemo]

Sinon, dans ce genre de cas une marge gauche/droite de 10 px rendra mieux avec un petit decalage sous ton filet mais c'est plus "propre"...

+1

Ce qui ferait, dans, la première ligne de ta CSS :

20px 10px 0px 10px;

au lieu de

20px 20px 0px 0px

Sinon, l'autre solution est de mettre une largeur fixe à l’élément bloc supérieur avec un overflow:hidden