IÉSEG · Voir en ligne

Notable Alumni (module filtrable, WP + WPML)

Développement d’un module “Notable Alumni” filtrable par catégories : grille dynamique côté front (fetch/AJAX), contenu piloté par un custom post type et une taxonomie, compatible WPML (FR/EN).

WordPressPHPWP_QueryWPMLJavaScriptFetch/AJAXCSS
Année
2025
Stack
WordPress · PHP · WP_Query · WPML · JavaScript · Fetch/AJAX · CSS
Type
Réalisation
Rôle
Dev front + UX

Aperçu

Notable Alumni (module filtrable, WP + WPML)

Conception & réalisation

Problèmes rencontrés, décisions UX et livrables.

Problèmes identifiés

4 points
  1. 1.Créer un filtre par taxonomie avec chargement dynamique (sans recharger la page)
  2. 2.Gérer correctement le multilingue (WPML) : termes traduits + requêtes cohérentes
  3. 3.Garantir un rendu propre même si certains champs sont vides (photo, bio, société, etc.)
  4. 4.Trier les résultats de manière fiable (ordre alphabétique sur le nom)

Actions réalisées

4 livrables
  1. 1.Endpoint PHP qui renvoie les alumni en JSON via WP_Query (CPT + tax_query)
  2. 2.Switch de langue WPML côté endpoint + récupération du term_id traduit pour filtrer correctement
  3. 3.Rendu front en JS (fetch) avec fallback d’affichage si champ absent
  4. 4.Persistance du filtre via le hash d’URL pour garder l’état au refresh / partage de lien

Code

php
Endpoint AJAX : WPML + tax_query + JSON
php
1<?php
2require_once('../../../wp-load.php');
3header('Content-Type: application/json');
4

5$lang = isset($_GET['lang']) ? sanitize_text_field($_GET['lang']) : 'fr';
6$category = isset($_GET['category']) ? sanitize_text_field($_GET['category']) : '';
7

8do_action('wpml_switch_language', $lang);
9

10$args = [
11  'post_type'      => 'notable-alumnus',
12  'posts_per_page' => -1,
13  'post_status'    => 'publish',
14  'orderby'        => 'title',
15  'order'          => 'ASC',
16];
17

18// Filtre par catégorie (taxonomie) avec traduction WPML
19if (!empty($category)) {
20  $term = get_term_by('slug', $category, 'notable-alumni-category');
21  if ($term && function_exists('apply_filters')) {
22    $translated_term_id = apply_filters('wpml_object_id', $term->term_id, 'notable-alumni-category', true, $lang);
23    if ($translated_term_id) {
24      $args['tax_query'] = [[
25        'taxonomy' => 'notable-alumni-category',
26        'field'    => 'term_id',
27        'terms'    => $translated_term_id,
28      ]];
29    }
30  }
31}
32

33$q = new WP_Query($args);
34$out = [];
35

36while ($q->have_posts()) {
37  $q->the_post();
38  $id = get_the_ID();
39

40  $out[] = [
41    'title'     => get_the_title(),
42    'thumbnail' => get_the_post_thumbnail_url($id, 'full'),
43    'poste'     => get_post_meta($id, 'wpcf-poste', true),
44    'societe'   => get_post_meta($id, 'wpcf-societe', true),
45    'annee'     => get_post_meta($id, 'wpcf-annee-diplomation', true),
46    'bio_url'   => get_post_meta($id, 'wpcf-biographie', true),
47    'categories'=> wp_get_post_terms($id, 'notable-alumni-category', ['fields' => 'names']),
48  ];
49}
50

51wp_reset_postdata();
52echo json_encode($out);
53exit;

Suite du parcours

Accéder aux autres projets ou me contacter.

Retour aux projetsMe contacterVoir en ligne
Notable Alumni (module filtrable, WP + WPML) | Louis Rotellini | Louis Rotellini