Les Types De Contenus

Créer un nouveau type de contenu

Les avantages dans la création d'un nouveau type de contenu sont multiples :

1. En GENERAL : permettre des regroupements de contenu en fonction d'un sujet


2. En FRONT : permettre de faire des affichages standardisés


3. En BACK : permettre de n'oublier aucune information (et forcer à les saisir dans l'ordre) avec des champs personnalisés lors de la création d'un contenu.

Actuellement nous avons 2 types de contenu que nous connaissons bien : article et page.
Avant de créer un type de contenu supplémentaire, il faut identifier les sujets sur votre site, vous faites des fiches restaurant (comme lafourchette), il vous faut un type de contenu restaurant !

Nous allons prendre le contexte du garage qui présente des véhicules comme sujet.

Pour créer un nouveau type de contenu, vous pouvez utiliser le plugin CUSTOM POST TYPE UI

Extension> Ajouter> CUSTOM POST TYPE UI (Par WebDevStudios)
Ce plugin permet de créer des types de contenus personnalisés

Lorsque le plugin est activé, une partie CPT UI apparait dans la colonne de gauche.
On se retrouve dans la partie "ADD / EDIT POSTS TYPE" pour saisir les informations suivantes :

• Post Type Slug : vehicule


• Plural Label : vehicules


• Singular Label : vehicule


• Description : Ce type de contenu nous permet de créer des contenu véhicules

Une fois que vous avez enregistré votre nouveau type de contenu en cliquant sur le bouton Add Post Type, vous pouvez rafraichir la page (au clavier, touche F5), et vous verrez qu'une partie "Vehicules" apparait dans la colonne de gauche (au même titre qu'articles ou pages).

Ajouter des champs personnalisés

Télécharger et installer le plugin : ADVANCED CUSTOM FIELDS (Par Elliot Condon).

Ce plugin permet la création de champs personnalisés dans l'administration
Une nouvelle partie apparait dans la colonne de gauche : ACF
Dans la partie ACF > Ajouter.
Il faut donner un nom au groupe de champs

Vous pouvez ajouter des champs en faisant attention à conserver des noms informatiques (sans accent ni majuscule) dans la partie nom du champ.



Nous allons ajouter plusieurs champs :

• modele (modèle du véhicule) - champ texte


• km (kilométrage du véhicule) - champ nombre


• carburant (type de carburant pour le véhicule) - champ liste de choix


• photo (photo du véhicule) - champ image (avec Valeur affichée dans le template : URL de l'image)


• prix (prix du véhicule dans notre garage) - champ nombre

Une fois que vos champs sont créés, cliquer sur "montrer ce champ quand" "type de publication" "est égal à" "vehicule" :

Ensuite n'oubliea pas de cliquer sur le bouton Publier.

Allez dans votre interface d'administration backOffice au niveau de la colonne de gauche dans la partie : Véhicules > Ajouter

Vous devriez constater la présence de vos champs personnalisés :



Si les champs n'apparaissent pas, il est possible de cliquer tout en haut dans "option de l'écran" pour effectuer des réglages.

Définir un affichage personnalisé avec l'utilisation d'un template

Imaginons qu'on ait un nombre conséquent de fiches véhicules, pour éviter que l'affichage soit aléatoire avec des informations dispersées et aussi pour éviter de perdre l'internaute, nous allons standardiser l'affichage, exemple :


Pour cela nous allons créer le fichier : single-vehicule.php

Et nous allons introduire le code suivant :

	<?php get_header(); ?>
	<div class="vehicule">
		<?php while ( have_posts() ) : the_post(); ?>
				<h1><?php the_title(); ?></h1>
			<div class="vehicule-photo">
				<img src="<?php the_field('photo'); ?>">
			</div>
			<div class="vehicule-informations">
				<span><?php the_field('modele'); ?></span>
				<span><?php the_field('km'); ?></span>
				<span><?php the_field('carburant'); ?></span>
				<span><?php the_field('prix'); ?></span>
			</div>
			<div class="clear"></div>
			<div class="vehicule-description">
				<p><?php the_content(); ?></p>
			</div>
		<?php endwhile;	?>
	</div>
	<?php get_footer(); ?>

Code Css associé dans le fichier style.css :

	.vehicule  h1{ text-align: center; margin: 0 0 20px 0; }
	.vehicule-photo{
		float: left;
		width: 350px;
		margin: 0 10px;
	}
	.vehicule-informations{
		float: left;
		width: 350px;
		margin: 0 10px;
	}
	.vehicule-description{
	font-style : italic;
	margin: 20px 0 0 0;
	}

La création de ce fichier template single-voiture.php va avoir pour effet de donner une mise en forme standardiser, c'est à dire que l'affichage sera le même pour tous les prochains contenus véhicules créés.
Voici quelques explications d'une manière générale :

• HAVE_POSTS()
  • envoie un booléen (TRUE ou FALSE) pour savoir s’il reste des objets à afficher sur la page en cours. Par exemple, lorsque l’on cherche à lister les derniers articles d’un blog, la fonction renverra true tant que tous les articles récupérés dans la base de données n’auront pas été affichés.


• THE_POST();
  • À l’intérieur de la boucle, la fonction the_post() effectue la récupération d’un article. À chaque appel de cette fonction, un curseur interne à WordPress sélectionne l’article suivant dans la liste de ceux que l’on a récupérés. Lorsque le curseur arrivera au dernier article, alors la méthode have_posts() renverra false et la boucle se terminera.


• THE_CONTENT();
  • Affiche le contenu


• THE_TITLE();
  • Affiche le titre


• THE_FIELD();
  • Affiche un champ en particulier

Dans notre cas, un seul contenu doit s'afficher nous aurions pu éventuellement nous passer de la boucle php.

THE_FIELD('nom_du_champ') permet d'afficher un champ en particulier, pour cela il faut connaitre son nom en repassant dans la rubrique ACF :



En ce qui concerne l'affichage de l'image, vérifiez bien que votre champ photo renvoie l'URL de l'image (c'est vous qui devez choisir cette option)

Créer des templates pour un contenu spécifique

Il est possible de créer un fichier template pour un contenu spécifique, pour cela il faut identifier le n° id du contenu à afficher

Pour connaitre le n° id du contenu à afficher, vous pouvez le repérer dans l'url système.

Pages > Toutes les pages > Lorsque vous êtes dans le listing des différentes pages, vous pouvez apercevoir le contenu dont vous souhaitez personnaliser l'affichage, en survolant le lien avec votre curseur, vous devriez voir apparaitre ?post=2 (par exemple)

Par conséquent, le fichier template à créer dans votre thème sera : page-2.php

VOICI NOTRE TEMPLATE page-2.php :

	<?php get_header(); ?>
	<?php the_title(); ?>
	<?php while ( have_posts() ) : the_post(); ?>
		<?php the_content(); ?>
	<?php endwhile;  ?>
	<?php get_footer(); ?>	

Pour observer le résultat, il n'y a plus qu'à ce rendre sur le contenu en question à l'aide de votre navigateur et vous verrez que des modifications très précises sont possibles.