Intégration Slider swiper.js

Toute la documentation se trouve ici

1. Intégrer les fichiers indispensables .js et .css

Dans votre thème, retrouver le fichier functions.php

Editer-le, repérer la fonction:

/**
* Enqueue scripts and styles.
*/
function test_scripts() {
wp_enqueue_style( 'test-style', get_stylesheet_uri() );

wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '/js/navigation.js', array(), array(), _S_VERSION, true );

wp_enqueue_script( 'test-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true );

if ( is_singular() comments_open() ; get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'test_scripts' );

Ajouter la ligne suivante avant celle qui charge votre css personnalisée

wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' );

Ajouter la ligne suivante avant celle qui charge vos scripts

wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), _S_VERSION, true );

2. Préparer l’html requis

La structure requise est:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Éditez le fichier archive.php
Ajouter la structure dansla boucle « while »

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package The_Way_Ball_Go_Theme
 */

get_header();
?>

	<main id="primary" class="site-main">
		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="archive-description">', '</div>' );
				?>
			</header><!-- .page-header -->


			<?php
			/* Start the Loop */
			while ( have_posts() ) :
				the_post();

				/*
				 * Include the Post-Type-specific template for the content.
				 * If you want to override this in a child theme, then include a file
				 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
				 */
				get_template_part( 'template-parts/content-archive', get_post_type() );

			endwhile;

			the_posts_navigation();

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif;
		?>


	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

Fichier modifié

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package The_Way_Ball_Go_Theme
 */

get_header();
?>

	<main id="primary" class="site-main">
		<?php if ( have_posts() ) : ?>

			<header class="page-header">
				<?php
				the_archive_title( '<h1 class="page-title">', '</h1>' );
				the_archive_description( '<div class="archive-description">', '</div>' );
				?>
			</header><!-- .page-header -->

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">


			<?php
			/* Start the Loop */
			while ( have_posts() ) :?>

				<div class="swiper-slide">
<a href="<?php the_permalink(); ?>"
<?php the_post_thumbnail('thumbnail');?>
<?php the_title();?>
</a>
</div>


			<? endwhile;?>

</div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>


			<?php the_posts_navigation();

		else :

			get_template_part( 'template-parts/content', 'none' );

		endif;
		?>


	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

/**
 * Autoriser l'upload de tous types de format dans les médias
 */


add_filter('upload_mimes', 'wpm_myme_types', 1, 1);

function wpm_myme_types($mime_types){
	$mime_types['svg'] = 'application/postscript'; //On autorise les .svg
    $mime_types['glb'] = 'application/postscript'; //On autorise les .glb
    return $mime_types;
}

3. Copier le script dans le header.php

Éditez le fichier header.php et copier ce script juste après le début su div id= »page »:

<div id="page" class="site">
ICI

&lt;script type=&quot;importmap&quot;&gt;
  {
    &quot;imports&quot;: {
       &quot;three&quot;: &quot;&lt;?php bloginfo('template_directory'); ?&gt;/threejs/node_modules/three/build/three.module.js&quot;
    }
  }
&lt;/script&gt;

4. Intégrer le script dans le contenu de vos articles

Éditez le fichier content.php (l’affichage du contenu d’un article) et copier ce script JUSTE AVANT la fermeture de l’article
</article>

&lt;script type=&quot;module&quot;&gt;
 
 
 import * as THREE from 'three';
 import { OrbitControls } from  '&lt;?php bloginfo('template_directory'); ?&gt;/threejs/node_modules/three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from '&lt;?php bloginfo('template_directory'); ?&gt;/threejs/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from '&lt;?php bloginfo('template_directory'); ?&gt;/threejs/node_modules/three/examples/jsm/loaders/DRACOLoader.js';


let container, containerBox;
let cameraPersp, cameraOrtho, currentCamera;
let orbit, scene, raycaster, renderer, control;
const clock = new THREE.Clock();


init();
render();
animate();



function init() {
 container = document.getElementById( 'capture-&lt;?php the_ID(); ?&gt;' );
 containerBox = container.getBoundingClientRect();
 console.log(containerBox.width, containerBox.height);

 renderer = new THREE.WebGLRenderer( { alpha: true } );
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( containerBox.width, containerBox.height );
 // setClearColor(Couleur de fond de la 3D, transparance de 0 à 1)
 renderer.setClearColor( 0xffffff, 0 ); // the default

 container.appendChild( renderer.domElement );
 const aspect = containerBox.width / containerBox.height;

 // THREE.PerspectiveCamera(Champ de Vision FOV, ratio, près, loin)
 // currentCamera.position.set(x,y,z) // position de la caméra
 cameraPersp = new THREE.PerspectiveCamera( 33, aspect, 0.1, 1500 );
 currentCamera = cameraPersp;
 currentCamera.position.set( 1, 1, 0);
 currentCamera.lookAt( 0, 0, 0 );

 scene = new THREE.Scene();
 // THREE.Fog(Couleur du brouillard, transparance de 0 à 1, distance)
 scene.fog = new THREE.Fog( 0xffffff, 1, 1500 );

 // THREE.HemisphereLight(Couleur du la lumière, Couleur de l'ombre)
 const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff );
 // hemiLight.position.set(x,y,z) // Position de la lumière en x,y,z
 hemiLight.position.set( 0, 50, 0 );
 scene.add( hemiLight );

 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath( '&lt;?php bloginfo('template_directory'); ?&gt;/threejs/node_modules/three/examples/js/libs/draco/gltf/' );

 const loader = new GLTFLoader();
 loader.setDRACOLoader( dracoLoader );   

 loader.load( '&lt;?php echo $captureUrl;  ?&gt;', function ( gltf )  {
	 const model = gltf.scene;
	 model.name = 'capture-&lt;?php echo $captureId; ?&gt;'
	 //position initiale
	 model.position.set( 0, 0, 0 );
	 //taille initiale
	 model.scale.set( 1, 1, 1 );
	 scene.add( model );
 });                             
  
 orbit = new OrbitControls( currentCamera, renderer.domElement );
 orbit.update();
 orbit.addEventListener( 'change', render );
  
 window.addEventListener( 'resize', onWindowResize );
}

function onWindowResize() {
 const aspect = containerBox.width / containerBox.height;
 cameraPersp.aspect = aspect;
 cameraPersp.updateProjectionMatrix();
 renderer.setSize( containerBox.width, containerBox.height );
 render();
}

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, currentCamera );
}

function onPointerMove( event ) {
 pointer.x = ( event.clientX / containerBox.width ) * 2 - 1;
 pointer.y = - ( event.clientY / containerBox.height ) * 2 + 1;
}

function render() {
 renderer.render( scene, currentCamera );
}

&lt;/script&gt;

5. Intégrer la zone d’affichage de l’objet 3D

Éditez toujours le fichier content.php (l’affichage du contenu d’un article) et copier ce code JUSTE APRÈS l’ouverture de l’article
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>


&lt;div id=&quot;capture-&lt;?php the_ID(); ?&gt;&quot; class=&quot;canvas-box&quot;&gt;&lt;/div&gt;

6. Définir la taille du canvas

Éditez le fichier style-custom.css et définissez la hauteur du canvas


/*
** 3D
*/
.canvas-box {
    height: 500px;
}

7. Créer un champ personnalisé « url_3d »

Dans l’éditeur wordpress, dans un article, créez le champ personnalisé « url_3d ».

8. Récupérer la valeur du champ « url_3d » dans le script

Éditez le fichier content.php (l’affichage du contenu d’un article) et copier ce code DANS le php en haut de l’article de l’article
<?php /** * Template part for displaying posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package Capture3d */ ICI ?>


&lt;?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package The_Way_Ball_Go_Theme
 */

 $captureUrl = get_post_meta($post-&gt;ID, 'url_3d', true);
 $captureId = 'capture3d-'.get_the_ID();

?&gt;;

8. Récupérer et renseigner le champ personnalisé pour chacun des articles

Dans la bibliothèque de média: uplaoder votre fichier 3D
Séléctionnez le et copier l’url du fichier

Copiez cet url dans le champ « url_3d »

Enregistrez et prévisualisez!