Sur un projet j’ai eu à gérer des pages parentes et enfants dans wordpress pour des custom post type: le but était de n’afficher que les titres des pages parents et au clic sur le titre afficher dessous les titres des pages enfants.
1 – on suppose que vous avez déjà créé votre custom post type nommé « projet » dans votre fichier function.php en faisant attention à ce que hierachical soit égal à true
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | add_action( 'init', 'projet_show_init' ); // initialiser les fonctionnalités function projet_show_init() { // les labels : les noms qui seront utilisés et vont apparaitre dans l'admin $labels = array( 'name' => __('Projet', 'Post type general name'), 'singular_name' => __('Projet', 'Post type singular name'), 'add_new' => __('Ajouter un nouveau Projet', 'projet'), 'add_new_item' => __('Ajouter un nouveau Projet à gérer'), 'edit_item' => __('Modifier ce projet'), 'new_item' => __('Nouveau projet à gérer'), 'all_items' => __('Tous les projet'), 'view_item' => __('Voir la page du projet'), 'search_items' => __('Rechercher des projets'), 'not_found' => __('Aucun Projet trouvé'), 'not_found_in_trash' => __('Aucun Projet trouvée dans la corbeille'), 'parent_item_colon' => __(''), 'menu_name' => __('Projet') ); $args = array( 'labels' => $labels, 'public' => true, 'show_ui' => true, 'show_in_nav_menus' => true, 'show_in_menu' => true, 'show_in_admin_bar' => true, 'query_var' => true, 'menu_icon' => null, 'query_var' => true, 'rewrite' => array('slug' => 'notre-projet'), 'capability_type' => 'page', 'has_archive' => true, 'hierarchical' => true, 'supports' => array('title', 'editor', 'author', 'page-attributes') ); register_post_type('projet',$args); } |
La page listant tous les projets est le fichier archive-projet.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $affaires = new WP_query( array( 'post_type' => 'affaire', 'posts_per_page' => 10, 'paged' => $paged, 'orderby' => 'name', 'order' => 'ASC', //Display only top-level pages, exclude all child pages: 'post_parent' => 0 ) ); if( $projets->have_posts() ): { while ($projets->have_posts()) : $projets->the_post(); ?> |
Nous venons d’afficher les pages parentes et enfant. Maintenant il nous faut styliser cela puis afficher au démarage seulement les titre des parents
jquery : afficher cacher
1 2 3 4 5 6 7 8 9 10 11 12 13 | function cacherTitreEnfant () { $('article.parent .enfant').slideUp(); } cacherTitreEnfant (); $('article.parent h3 a').on("click" , function(event){ cacherTitreEnfant(); event.preventDefault(); $(this).closest('article.parent').find('.enfant').slideDown(); }); |
Référence : http://codex.wordpress.org/Function_Reference/get_pages