skip to Main Content

Comment comprendre les Post Type Template de WordPress 4.7

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

WordPress 4.7 a proposé quelques nouvelles améliorations fantastiques pour le système de template du CMS. Les modèles ont été élargies pour englober tous les formats de publication, ce qui permet aux développeurs de créer des thèmes plus nuancés et en même temps de permettant aux propriétaires de site de gérer le contenu plus facilement.

Mais comment ça fonctionne ? Dans ce tutoriel, je vais vous montrer comment utiliser les modèles des formats de publication dans vos thèmes avec quelques exemples faciles.

C’est quoi les modèles sur WordPress ?

Les modèles sont essentiellement des fichiers spéciaux qui peuvent changer l’apparence et la sensation d’une page et/ou ajouter des fonctionnalités à votre site WordPress.

Avant WordPress 4.7, les modèles n’était disponibles que pour les pages, ils ont donc  été surnommés les modèles de page . Cependant, WordPress 4.7 a élargi leur utilisation pour inclure tout format de publication, alors dans ce tutoriel, je parlerai de modèles pour désigner ces derniers.

Une fois que les modèles sont enregistrés dans le thème, ils peuvent être sélectionnés sur les pages d’édition des articles.

Préparer le terrain pour l’utilisation de modèles

Nous allons travailler sur un exemple.

Pour tester cela , nous devons créer un thème enfant en premier. Utilisons  Twenty Seventeen , le nouveau thème WordPress par défaut.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

Pour commencer, créez un nouveau dossier dans le répertoire du thème. Je le mien a été nommé « cPPT » (abréviation de modèles de type de poste personnalisé) puis j’ai ajouté de nouveaux nouveaux fichiers: style.css et functions.php . Utilisez le code ci – dessous pour configurer ces fichiers:

/*
 Theme Name:   Custom Post Type Template Example
 Theme URI:    http://blair-jersyer.com
 Description:  An example theme that utilizes custom post type templates
 Author:       Daniel Pataki
 Author URI:   http://blair-jersyer.com
 Template:     twentyseventeen
 Version:      1.0.0
*/
<?php

add_action( 'wp_enqueue_scripts', 'cptt_assets' );
function cptt_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

Tous ensemble! Vous devriez maintenant voir le thème de l’enfant dans la section Apparence de votre tableau de bord WordPress. Une fois activé, vous devriez voir une vanille, non modifiée qui provient du thème parent.

Création d’un format de publication personnalisé

Nous allons commencer par tester le système de Template avec un format de publication personnalisé. Imaginez que vous êtes en train de créer un site web en rapport avec les jeux vidéos.

Alors que vous êtes en train de rédiger du contenu pour les jeux vidéos, vous souhaiterez publier un nouveau contenu qui soit concis mais suffisamment déjà pour fournir l’essentiel des informations.

Pour faire en sorte qu’un soit différent visuellement d’un autre, vous devez utiliser une catégorie ou un appareil arbitraire. Les templates simplifient considérablement le processus.

add_action( 'init', 'cptt_custom_post_types' );
function cptt_custom_post_types() {
  register_post_type( 'game',
    array(
      'labels' => array(
        'name' => __( 'Jeux Vidéos' ),
        'singular_name' => __( 'Jeu Vidéo' )
      ),
      'public' => true,
      'has_archive' => true,
      'supports' => array( 'title', 'editor', 'thumbnail' ),
      'menu_icon' => 'dashicons-laptop'
    )
  );
}

J’ai omit certains labels et options, mais ce code sera suffisant pour le but que nous souhaitons atteindre.

Création de templates

Un template est un fichier PHP régulier avec un commentaire spéciale tout au dessus, qui indique à WordPress le titre du template et où il doit être utilisé.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Nous allons créer un pour la critique des jeux vidéos.

<?php
/*
Template Name: Critique de Jeu
Template Post Type: game
*/

Lorsque vous créer une nouvelle publication sur les jeux vidéos, vous verrez un sélecteur s’afficher avec deux options : « default » et « Critique de Jeu ». Une fois que vous aurez sélectionné un template, le code à l’intérieur du template sera utilisé.

 

Pour créer une vue, tout ce que je vais faire, c’est de copier à partir de Twenty Seventeen. Je créer un fichier qui se nomme donc « template-game-review.php » avec le code suivant :
<?php
/*
Template Name: Critique de Jeu
Template Post Type: game
*/

get_header( 'review' ); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<?php
				/* Start the Loop */
				while ( have_posts() ) : the_post();

					get_template_part( 'template-parts/game/content', 'review' );

					// Si les commentaires sont affichés ou s'il existe un commentaire, chargeons le template des commentaires.
					if ( comments_open() || get_comments_number() ) :
						comments_template();
					endif;

					the_post_navigation( array(
						'prev_text' => '<span class="screen-reader-text">' . __( 'Précédent Article', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Précédent', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '</span>%title</span>',
						'next_text' => '<span class="screen-reader-text">' . __( 'Article Suivant', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( 'Suivant', 'twentyseventeen' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ) . '</span></span>',
					) );

				endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
	<?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer();

J’ai copier tout ce code de « Twenty Seventeen ». j’ai modifié la fonction « get_header » avec un paramètre, afin qu’il en découle un en-tête différent. J’ai également modifier les paramètres du templates « get_template_part() » pour que cela soit ainsi : « get_template_part( ‘template-parts/game/content’, ‘review’ ); ».

Je crée ensuite un fichier pour l’en-tête que je nomme « header-review.php » et je colle le code du fichier « header.php » de Twenty Seventeen et je retire a ligne suivante :

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

J’ai ensuite crée un fichier « template-parts/game/content-review.php ». J’ai collé le code de « content.php » de Twenty Seventeen et j’ai retiré quelques lignes de code qui n’était pas vraiment nécessaires. J’ai ajouté ce code tout en haut :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

<header id='review-head'>
	<h1><?php the_title() ?></h1>
	<small>Full Video Review</small>
</header>

J’ai ajouté le code CSS suivant :

.site-content-contain {
    position: static;
}

#review-head {
  position: absolute;
  top:55px;
  left:0px;
  padding:22px;
  color:#fff;
  width:100%;
  text-align:center;
  background: rgba(0,0,0,0.3);
}

#review-head h1 {
  font-weight: 300;
  margin:0px;
  padding:0px;
}

#review-head small {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  text-transform: uppercase;
  font-size:11px;
  letter-spacing: 1px
}

C’est tout ce qu’il faut faire pour créer un template pour un format de publication personnalisé sur WordPress. Si vous avez des questions, n’hésitez pas à nous les poser.

 

Cet article comporte 0 commentaires

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
14 Partages
Partagez10
Tweetez1
Enregistrer3