Code pour un scroll horizontal

Sur base du theme "theme_base", voici un code permettant de créer un scroll horizontal.

Le code se base au maximum sur Bootstrap. Il utilise cependant un peu de javascript pour calculer la taille du scroll horizontal.
Il affiche le contenu de la boucle, précédé par une page appelée "Baseline" si elle existe.

Où placer ce code

Ce code peut être déposé dans un template part et appelé avec le code d’inclusion de ceux-ci. Pour un template part du nom de home__scroll_horizontal.php, on aura donc :

get_template_part( 'morceaux/home_scroll_horizontal' );

Il peut aussi être codé directement dans la page home par exemple. Dans ce cas, on ajoutera les fonctions get_header() et get_footer() avant et après le code.

Le code

<div id="main" class="d-block d-md-flex scroll-vh-100">
   <!-- baselin -->
   <?php
   // on garde la requete par defaut
   $temp_query = $wp_query;
   $args = array(
       'post_type' => 'page',
       'title' => 'Baseline'
   );
   query_posts($args);
   if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
   <article id="baseline" class="ps-3 pe-6 fst-italic texte-grand d-flex align-items-center">
       <div class="">
           <?php the_content(); ?>
       </div>
   </article>
   <?php endwhile; ?>
   <?php endif; ?>

   <?php
   /* retrouver la query de base */
   $wp_query = $temp_query; ?>


   <!-- derniers articles -->
   <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
   <article class="px-3 scroll-item" id="post-<?php the_ID(); ?>">
       <div class="row h-100 py-4">
           <figure class="col col-md-6"><?php the_post_thumbnail('illu-scroll', array( 'class' => 'mw-100 mh-100' )); ?></figure>
           <div class="col-12 col-md-6">
               <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
               <div class="post_content texte-petit  pe-5">
                   <?php the_excerpt(); ?>
               </div>
           </div>
       </div>
   </article>
   <?php endwhile; ?>
   <!-- lien vers page precedente et suivante -->
   <?php endif; ?>
</div>

<style>
   /* css spécifique à ce layout */
   .logged-in .navbar.fixed-top {
       top:32px;
   }

   #main {
       padding:50px 0;
       width:100%; /* sera recalculé avec du script */
   }
   .scroll-vw-50 {
       width:50vw;
   }

   @media (min-width: 768px) {
       #main {
           width:10000px; /* sera recalculé avec du script */
       }
       #baseline {
           width:500px;
       }
       .scroll-vh-100 {
           height:100vh;
       }
       .logged-in .scroll-vh-100 {
           height:calc(100vh - 47px) !important;
       }
       .scroll-item {
           height:100%;
           width:800px;
       }
       .navbar {
           position: fixed;
           top:0;
           left:0;
       }
       .logged-in .navbar {
           top:32px;
       }
       footer {
           position:fixed;
           bottom:0;
           left:0;
       }
   }
</style>
<script>
   calcule_width();
   jQuery(window).resize(function(){ calcule_width(); });

   function calcule_width(){
       if(jQuery(window).width() < 768){
           jQuery("#main").css("width","100%");
       } else {
           jQuery("#main").css("width","10000px");
           var l=0;
           jQuery("#main article").each(function(){
               l+=jQuery(this).width();
           });
           jQuery("#main").css("width",l+"px");
       }
   }
</script>

La navigation et le footer

La navigation et le footer doivent être adaptés.

La navigation :

       <nav class="navbar navbar-expand-lg">
           <div class="container-fluid">
               <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" class="titre-petit text-primary"><?php bloginfo('name'); ?></a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                   <i class="bi bi-list"></i>
               </button>
               <?php
               // transformer le menu en menu prêt pour bootstrap
               wp_nav_menu(array(
                   'theme_location'    => 'menu-principal',
                   'container'       => 'div',
                   'container_id'    => 'navbarSupportedContent',
                   'container_class' => 'collapse navbar-collapse ', //'collapse navbar-collapse justify-content-end',
                   'menu_id'         => false,
                   'menu_class'      => 'navbar-nav ms-auto',
                   'depth'           => 3,
                   'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                   'walker'          => new wp_bootstrap_navwalker()
               ));
               ?>
           </div>
       </nav>

Le footer

<footer class="container-fluid row px-3 pb-3">
   <div class="texte-petit">
       <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> est un site Wordpress accompagné du thème gr3_minimal
   </div>
</footer>