Nous allons voir dans ce tutoriel WordPress comment créer 2 modèles de page en PHP, destinés à afficher des portfolios de pages ou d’articles.

Généralités

Description

Il s’agit de créer 2 templates de pages affichant sous forme de grille leminiatures des catégories de pages ou d’articles désirés.

La ou les catégorie(s) à afficher sont sélectionnées selon un code entré lors de la création de la page.

[wprtf]
Affiche les éléments de toutes les catégories de pages (template de page) ou d’articles (template d’article).

[wprtf:categorie]
Affiche les éléments de la catégorie de pages (template de page) ou d’articles (template d’article).

portfolio_2

Opérations

Pour arriver au résultat escompté, les opérations suivantes seront nécessaires:

Modification du fichier style.css du thème pour créer la grille d’affichage des icônes de portfolio.

Modification du fichier functions.php :

– Activer la gestion des catégories pour les pages et les articles.
– autoriser l’ajout de miniatures pour les pages.

Création de 2 pages templates portfolio_pages.php et portfolio_articles.php, cette dernière n’étant qu’une recopie de la précédente à 2 petits paramètres près.

Tests

Création d’1 page portfolio de page.
Création de 2 pages portfolio d’article.
Création de 2 articles.

Sources

Les sources décrites dans cet article sont téléchargeables en cliquant ici.

Mise en oeuvre

Modification du fichier style.css

Pour organiser l’affichage des catégories nous allons utiliser une liste non ordonnée. Chaque ligne de la liste contiendra une catégorie et son titre.

Cette liste sera de type inline-block afin d’afficher la liste horizontalement.

style.css

  display:inline-block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  list-style-type: none;
  }
  .li-prtf
  {
  display:inline-block;
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
  font-family: calibri;
  font-weight: normal;
  color: #fef86c;
  padding: 20px
  }

Modification du fichier functions.php

– Activation de la gestion des catégories pour les pages et les articles.
– Autorisation d’ajout de miniatures pour les pages.

functions.php

add_action( 'init', 'after_init' );
function after_init() {
/* Add taxonomy to pages and posts*/
register_taxonomy_for_object_type( 'post_tag', 'page' );
register_taxonomy_for_object_type( 'category', 'page' );
}

add_action( 'after_setup_theme', 'After_theme_setup' );
function thumbnails_Activate() {
/* Allow thumbnails for pages and posts */
add_theme_support( 'post-thumbnails' );
}

Création d’1 template de page « Portfolio de Pages »

Création du template

Créer un fichier vide portfolio-page.php dans le dossier du thème.

Déclarer que cette page est un modèle:

<?php 
 /* 
 * -------------------------------------------------- Template name 
 * Template Name: Portfolio_de_pages
 * -------------------------------------------------- */

Appeler la page d’entête du thème:

Get_header(); 
?>

Ouvrir et fermer le tag <div> du contenu:

<div id='contenu'>
</div>

Appeler le pied de page du thème:

<?php get_footer(); ?>

Enregistrer le fichier portfolio-page.php.

A ce stade, si l’on crée une nouvelle page dans la console d’administration de WordPress, le widget Attribut de Page doit apparaître dans la sidebar de droite avec le nouveau modèle de page.

Ouvrir le fichier portfolio-page.php.

A l’intérieur de la balise <div> du contenu:

<div id=’contenu’>
Insérer le code ici
</div>

Insérer le code suivant:

 <!--------------------------------- Affiche le titre de la page en cours --> 
 <div class="content-titre"><?php the_title();?></div>

 <!--------------------------------- Recherche des catégories paramétrés dans la page -->
 <?php
 $query_page = get_page($page->ID); 
 $contenu_page = $query_page->post_content;

 /* Toutes catégories */
 if (strpos($contenu_page,"[prtf]") != false){
 $prtf_categorie = "";
 $Array_Category = array(get_categories());
 }
 /* Aucune catégorie */
 elseif (strpos($contenu_page,"[prtf:") == false){
 $prtf_categorie = "none";
 $Array_Category = array();
 }
 /* Une seule catégorie */
 else {
 $a = explode("[prtf:",$contenu_page);
 $b = explode("]",$a[1]);
 $prtf_categorie = $b[0];
 $Array_Category = array($prtf_categorie);
 } 
 ?>
 <div style="text-align:center">
 <ul class="ul-prtf" >
 <?php
 /* Pour chaque catégorie à traiter ... */
 foreach ($Array_Category as $prtf_categorie){
 $xCategory = get_category_by_slug($prtf_categorie);
 $id_category = $xCategory->term_id;

 /* ... recherche des pages */
 $args = array("post_type" => "page", "cat" => $id_category, "orderby" => "menu_order", "order" => "ASC"); 
 $query = new WP_Query($args);
 if ($query->have_posts()) {
 while ($query->have_posts()) {
 $query->the_post();?>
 <li class="li-prtf" >
 <!------------------------------------------------- affiche l'élément -->
 <div class="titre-article">
 <a href="<?php the_permalink();?>">
 <?php the_title();?><br />
 <?php the_post_thumbnail("medium");?>
 </a>
 </div>
 </li>
 <?php }
 }
 }
 wp_reset_postdata();?>
 </ul>
 </div>

Le template est maintenant prêt à être testé.

Test du template

Ouvrir la console d’administration WordPress du site.

Créer une nouvelle catégorie.
Nom de la catégorie : Produits Culturels
Identifiant de la catégorie : produits-culturels

Créer une nouvelle page.
Titre de la page: Accueil
Modèle de page: Portfolio_de_pages
Contenu de la page: [wprtf:produits-culturels]

Changer la page d’accueil du site dans Réglages > Lecture.
Page d’accueil: Statique
Nom de la page: Accueil

A ce stade, la page d’accueil du site accédée via un navigateur (http://nom_du_site) devrait présenter un contenu vide entouré de l’entête et du pied de page.

Créer une nouvelle page.
Titre de la page: Livres
Modèle de page: Modèle par défaut (pas important à ce stade)
Contenu de la page: Laisser la page vide (important)
Catégorie de la page: Produits Culturels
Mettre une image à la une: Sélectionner une image (important)

Créer une nouvelle page.
Titre de la page: Films
Modèle de page: Modèle par défaut (pas important à ce stade)
Contenu de la page: Laisser la page vide (important)
Catégorie de la page: Produits Culturels
Mettre une image à la une: Sélectionner une image (important)

C’est terminé, la page d’accueil du site accédée via un navigateur (http://nom_du_site) présente maintenant les miniatures des 2 pages de la catégorie Produits Culturels.

Création d’1 template de page Portfolio d’articles

Création du template d’articles

Pour les portfolio d’articles le principe est le même.

Dupliquer la page portfolio-pages.php et nommer la copie portfolio-article.php.

Dans la page portfolio-article.php modifier le nom du template en Portfolio_d’articles.

<?php 
 /* 
 * -------------------------------------------------- Template name 
 * Template Name: Portfolio_d'articles
 * -------------------------------------------------- */

Dans la recherche des pages, fixer le paramètre post_type à la valeur post.

 /* ... recherche des pages */
 $args = array("post_type" => "post", "cat" => $id_category, "orderby" => "menu_order", "order" => "ASC");

Le template est prêt à être testé.

Test du template d’articles

Ouvrir la console d’administration WordPress du site.

Créer 2 nouvelles catégories.

Nom de la catégorie 1 : Livres
Identifiant de la catégorie 1 : livres

Nom de la catégorie 2 : Films
Identifiant de la catégorie 2 : films

Modifier la page Livres créée au chapitre précédent.
Contenu de la page: [wprtf:livres]

Modifier la page Films créée au chapitre précédent.
Contenu de la page: [wprtf:films]

Créer un nouvel article.
Titre de l’article page: Moby Dick
Contenu de la page: Entrer du texte et des images
Catégorie de l’article: Livres
Mettre une image à la une: Sélectionner une image (important)

Fin du tuto.

la page d’accueil du site (http://nom_du_site) présente les miniatures des 2 pages de la catégorie Produits Culturels. en cliquant sur Livres on arrive sur la page portfolio des livres avec la miniature du livre Moby Dick affichée et qui permet d’accéder à l’article sur Moby Dick.

WordPress – Créer un Portfolio de Pages ou d’Articles