Permet de mettre en avant une actualité qui s’affichera sur la première page dans une fenêtre pop-up de Bulma (s’ouvre au bout de 5 secondes et se ferme après 15)
Code HTML à coller sur la première page
<!-- sticky - en avant --> <?php $sticky = get_option( 'sticky_posts' ); $args = array( 'posts_per_page' => 1, 'post__in' => $sticky, 'ignore_sticky_posts' => 1 ); $recentPosts = new WP_Query( $args ); if ( isset($sticky[0]) ) { while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?> <a href="#modalOpen" id="modalContentin"></a> <div class="modal" id="modalOpen" role="dialog" aria-modal="true"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head background-color-black"> <p class="modal-card-title has-text-centered has-text-weight-bold is-size-4 color-white"><?php the_title(); ?><?php edit_post_link('✎'); ?></p> <a class="delete" aria-label="close" href="#" id="modalContentout" title="Fermer la fenêtre"></a> </header> <section class="modal-card-body background-color-white"> <div class="content"> <?php if (has_post_thumbnail()) {?> <picture> <?php the_post_thumbnail('thumbnail'); ?> </picture> <?php } else { ?> <?php $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/"); $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE); chdir($curdir); $file=$files[array_rand($files)]; ?> <picture><img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" /></picture> <?php } ?> <?php the_excerpt();?> <p class="has-text-centered"><a class="button" href="<?php the_permalink() ?>" title="<?php the_title(); ?>">en savoir plus</a><p> </div> </section> </div> </div> <script> setTimeout("CallButton()",500) function CallButton(){ document.getElementById("modalContentin").click(); } setTimeout("CallButton2()",20000) function CallButton2(){ document.getElementById("modalContentout").click(); } </script> <?php endwhile; }?>
CSS
/*-------------------------------------------------------------- # STICKY EN AVANT --------------------------------------------------------------*/ /* Ouverture */ #modalOpen:target { display: flex; } /* Fix styles bulma */ .modal { z-index: 300; } .modal-card { max-height: unset; overflow: auto; } .modal-card-title { flex-shrink: 1; } /* .bulma-card-body à décommenter si pas de footer dans le modal */ .modal-card-body { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .modal img{ margin: 1rem auto; }