logo

Fenêtre pop-up & actualité sticky [PHP + JS + CSS]

AccueilAstuces WordpressFenêtre pop-up & actualité sticky [PHP + JS + CSS]

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('&#9998'); ?></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;
}

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *