Catégorie : Wordpress

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

<script type="importmap">
  {
    "imports": {
       "three": "<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/build/three.module.js"
    }
  }
</script>	

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><!-- #post-<?php the_ID(); ?> -->

<script type="module">
 
 
 import * as THREE from 'three';
 import { OrbitControls } from  '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from '<?php bloginfo('template_directory'); ?>/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-<?php the_ID(); ?>' );
 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( '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/js/libs/draco/gltf/' );

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

 loader.load( '<?php echo $captureUrl;  ?>', function ( gltf )  {
	 const model = gltf.scene;
	 model.name = 'capture-<?php echo $captureId; ?>'
	 //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 );
}

</script>

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(); ?>>

<div id="capture-<?php the_ID(); ?>" class="canvas-box"></div>

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

?>

<?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->ID, 'url_3d', true);
 $captureId = 'capture3d-'.get_the_ID();

?>;

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!

1. Uploader les fichiers JS

Dans votre thème, dézippez et uploadez à la racine le dossier threejs

Télécharger le dossier three.js

2. Autoriser l’upload des fichiers .svg et .glb

Éditez le fichier functions.php et copier cette fonction:

/**
 * 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

<script type="importmap">
  {
    "imports": {
       "three": "<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/build/three.module.js"
    }
  }
</script>	

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><!-- #post-<?php the_ID(); ?> -->

<script type="module">
 
 
 import * as THREE from 'three';
 import { OrbitControls } from  '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/jsm/loaders/GLTFLoader.js';
 import { DRACOLoader } from '<?php bloginfo('template_directory'); ?>/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-<?php the_ID(); ?>' );
 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( '<?php bloginfo('template_directory'); ?>/threejs/node_modules/three/examples/js/libs/draco/gltf/' );

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

 loader.load( '<?php echo $captureUrl;  ?>', function ( gltf )  {
	 const model = gltf.scene;
	 model.name = 'capture-<?php echo $captureId; ?>'
	 //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 );
}

</script>

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(); ?>>

<div id="capture-<?php the_ID(); ?>" class="canvas-box"></div>

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

?>

<?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->ID, 'url_3d', true);
 $captureId = 'capture3d-'.get_the_ID();

?>;

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!

the_excerpt()

Dans le fichier functions.php

add_shortcode( 'query_shortcode', 'query_shortcode_function' );
function query_shortcode_function() {
    $buffer = '<h3>Post Titles</h3>';
    $q = new WP_Query(array(
        'post_type' => 'post',
        'posts_per_page' => 5
    ));
    while ($q->have_posts()) {
        $q->the_post();
        $buffer = $buffer.get_the_title().'<br>';
    }
    wp_reset_postdata();
    return $buffer;
}

Changer ou personnaliser le texte « Read more… »:

/**
 * Filter the "read more" excerpt string link to the post.
 *
 * @param string $more "Read more" excerpt string.
 * @return string (Maybe) modified "read more" excerpt string.
 */
function wpdocs_excerpt_more( $more ) {
    if ( ! is_single() ) {
        $more = sprintf( '<a class="read-more" href="%1$s">%2$s</a>',
            get_permalink( get_the_ID() ),
            __( 'Read More', 'textdomain' )
        );
    }
 
    return $more;
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );

Changer ou personnaliser le symbole en fin de texte tronqué:

/**
 * Filter the excerpt "read more" string.
 *
 * @param string $more "Read more" excerpt string.
 * @return string (Maybe) modified "read more" excerpt string.
 */
function wpdocs_excerpt_more_string( $more ) {
    return ' [.....]';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more_string' );

Tous les détails à retrouver ici

Par défaut, votre thème de base (Underscore) affiche dans une catégorie la totalité du contenu de chaque article.
Cela n’est pas très ergonomique si vous avez beaucoup d’articles.

Il serait plus logique d’avoir un extrait du contenu et, si on souhaite en savoir plus: on clique pour obtenir la totalité du contenu de l’article.

Le concept

Le fichier archive.php

Observer le fichier archive.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', get_post_type() );

	endwhile;

C’est un exemple d’application d’une boucle wordpress (loop). De quoi s’agit-il?

La Boucle (The Loop) est utilisée par WordPress pour afficher chacun de vos Articles. Par l’utilisation de La Boucle, WordPress traite tous les Articles devant être affichés sur la page active et adapte leur présentation en utilisant les critères décrits par les marqueurs de La Boucle. Tous les morceaux de code HTML ou PHP placés entre le début et la fin de La Boucle seront exécutés pour chaque Article.

Référence: https://codex.wordpress.org/fr:La_Boucle

Pour faire simple:

• On cherche dans la base données.
• On trouve x articles
• Pour chacun d’eux, on cherche le modèle content.php qui se trouve dans le dossier « template-parts » et on l’affiche.

La customisation

Dans le dossier « template-parts »: Créer une copie de content.php et le renommer content-archive.php et éditez-le comme souhaité.

Exemple:

<?php
/**
 * Template part for displaying posts in an archive
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Fixiecity
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

         <?php the_post_thumbnail('thumbnail'); ?>

        <header class="entry-header">
                <?php the_title('<h2 class="entry-title">','</h2>'); ?>
        </header><!-- .entry-header -->

        <div class="entry-content">
		<?php the_excerpt(); ?>
        </div>

</article><!-- #post-<?php the_ID(); ?> -->

Il faut bien entendu, comme il s’agit uniquement d’un résumé, ajouter le(s) lien(s):

<?php
/**
 * Template part for displaying posts in an archive
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Fixiecity
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('thumbnail'); ?>
        </a>

        <header class="entry-header">
            <a href="<?php the_permalink(); ?>">
                <?php the_title('<h2 class="entry-title">','</h2>'); ?>
            </a>    
        </header><!-- .entry-header -->

        <div class="entry-content">
		<?php the_excerpt(); ?>
	</div><!-- .entry-content -->

    </div>
</div>

</article><!-- #post-<?php the_ID(); ?> -->

Et corriger le lien dans archive.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;

Mise en page particulière pour chaque catégorie.

Il est possible d’avoir, pour chaque catégorie, une mise en page particulière.
Nous n’utilisons alors plus archive.php mais category-slug.php où slug est le nom informatique de la catégorie (sans accent, espace ou majuscule).
On duplique archive.php et on le renomme selon la catégorie concernée.
On oublie pas de préciser le fichier de contenu.

Exemple: category-actualites.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-category-actualites', get_post_type() );

	endwhile;

Exemple: content-category-actualites.php

/**
 * Template part for displaying posts in category actualites
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package test
 */

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <header class="entry-header">
            <a href="<?php the_permalink(); ?>">
                <?php the_title('<h2 class="entry-title">','</h2>'); ?>
            </a>    
        </header><!-- .entry-header -->

        <div class="entry-content">
		<?php the_excerpt(); ?>
	</div><!-- .entry-content -->

    </div>
</div>

</article><!-- #post-<?php the_ID(); ?> -->

Cas particulier:

Vous avez 1 catégorie « shop » avec 3 sous-catégories: « accessoires », « bikes », « clothes ».
Vous créez un fichier « category-shop.php » avec un « content-category-shop » comme expliqué ci-dessus.

Le template s’appliquera (malheureusement) uniquement à la catégorie « shop »; et pas sur les sous-catégories « accessoires », « bikes », « clothes ».

Si vous souhaitez appliquer « category-shop.php » sur les sous catégories, ajouter ce code dans votre fichier functions.php

// force sub categories to use parent category templates
function wcs_force_use_parent_category_template() {

    $category = get_queried_object();
    $templates = array();

    // Add default category template files
    $templates[] = "category-{$category->slug}.php";
    $templates[] = "category-{$category->term_id}.php";

    if ( $category->category_parent != 0 ) {
        $parent = get_category( $category->category_parent );

        if ( !empty($parent) ) {
            $templates[] = "category-{$parent->slug}.php";
            $templates[] = "category-{$parent->term_id}.php";
        }
    }

    $templates[] = 'category.php';
    return locate_template( $templates );
}
add_filter( 'category_template', 'wcs_force_use_parent_category_template' );

Référence: http://wpcodesnippet.com/force-sub-categories-use-parent-category-templates/

Le concept

Le fichier single.php

<?php
while ( have_posts() ) :
the_post();

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

	the_post_navigation(
		array(
                    ...
		);

	if ( comments_open() || get_comments_number() ) :
                    ...
	endif;

endwhile; // End of the loop.
?>

Si un article est trouvé: on cherche de template content.php et on l’affiche

Donc si on désire changer l’affichage de l’article: il faut ouvrir et modifier le fichier content.php

Le fichier content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_singular() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		endif;

		if ( 'post' === get_post_type() ) :
			?>
			<div class="entry-meta">
				<?php
				test_posted_on();
				test_posted_by();
				?>
			</div><!-- .entry-meta -->
		<?php endif; ?>
	</header><!-- .entry-header -->

	<?php test_post_thumbnail(); ?>

	<div class="entry-content">
		<?php
		the_content(
			sprintf(
				wp_kses(
					/* translators: %s: Name of current post. Only visible to screen readers */
					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'test' ),
					array(
						'span' => array(
							'class' => array(),
						),
					)
				),
				wp_kses_post( get_the_title() )
			)
		);

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'test' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php test_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

On peut le simplifier celui- comme suit:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php the_title( '<h2 class="entry-title">'</h2>' );?>
	</header><!-- .entry-header -->

	<?php test_post_thumbnail(); ?>

	<div class="entry-content">
		<?php
		the_content(
			sprintf(
				wp_kses(
					/* translators: %s: Name of current post. Only visible to screen readers */
					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'test' ),
					array(
						'span' => array(
							'class' => array(),
						),
					)
				),
				wp_kses_post( get_the_title() )
			)
		);

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'test' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php test_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

L’ordre des éléments peut être modifier:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <?php test_post_thumbnail(); ?>

	<header class="entry-header">
		<?php the_title( '<h2 class="entry-title">'</h2>' );?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php the_content(); ?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php test_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

Ou des éléments supprimer, en le commentant (en php: // devant la ligne):

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <?php // test_post_thumbnail(); ?>

	<header class="entry-header">
		<?php the_title( '<h2 class="entry-title">'</h2>' );?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php the_content(); ?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php test_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->