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;
}