Catégorie : jquery

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

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

$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

	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