jquery – Le blog de Niums

3 septembre 201331 décembre 2017

Page enfant/ parent avec les custom post type de wordpress

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' 					=&gt; __('Projet', 'Post type general name'),
    'singular_name' 		=&gt; __('Projet', 'Post type singular name'),
    'add_new' 				=&gt; __('Ajouter un nouveau Projet', 'projet'),
    'add_new_item' 			=&gt; __('Ajouter un nouveau Projet à gérer'),
    'edit_item' 			=&gt; __('Modifier ce projet'),
    'new_item' 				=&gt; __('Nouveau projet à gérer'),
    'all_items' 			=&gt; __('Tous les projet'),
    'view_item' 			=&gt; __('Voir la page du projet'),
    'search_items' 			=&gt; __('Rechercher des projets'),
    'not_found' 			=&gt; __('Aucun Projet trouvé'),
    'not_found_in_trash'	=&gt; __('Aucun Projet trouvée dans la corbeille'), 
    'parent_item_colon' 	=&gt; __(''),
    'menu_name' 			=&gt; __('Projet')

  );
  
  $args = array(
    'labels' 				=&gt; $labels,
    'public' 				=&gt; true,
    'show_ui' 				=&gt; true, 
    'show_in_nav_menus'		=&gt; true,
    'show_in_menu' 			=&gt; true, 
    'show_in_admin_bar'		=&gt; true,
    'query_var' 			=&gt; true,
    'menu_icon'				=&gt; null,
    'query_var'				=&gt; true,
    'rewrite' 				=&gt; array('slug' =&gt; 'notre-projet'),
    'capability_type' 		=&gt; 'page',
    'has_archive' 			=&gt; true, 
    'hierarchical' 			=&gt; true,
    'supports' 				=&gt; array('title', 'editor', 'author', 'page-attributes')
  ); 
  
  register_post_type('projet',$args);
}

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'	    =&gt; 'affaire',
	'posts_per_page'    =&gt;  10, 
	'paged'		    =&gt; $paged,
	'orderby'	    =&gt; 'name',
	'order'		    =&gt; 'ASC',
	//Display only top-level pages, exclude all child pages:
	'post_parent'   =&gt; 0
	)
);

if( $projets-&gt;have_posts() ):
{	
	while ($projets-&gt;have_posts()) : $projets-&gt;the_post();		
	?&gt;

$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();

En savoir plus

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();
	});

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

28 juin 20131 juillet 2013

Jquery et les checkbox, tout cocher et tout décocher d’un coup

Si comme moi vous avez besoin de cocher une checkbox qui coche ou décoche des cases enfants à cocher, voici quelques codes qui pourraient vous intéresser.

L’exemple en ligne

Continuer la lecture de « Jquery et les checkbox, tout cocher et tout décocher d’un coup »

23 mai 201328 mars 2014

Jquery – Défilement fluide (scroll) vers une ID, une ancre

Faire un lien vers une ancre n’est pas bien compliqué. Mais si on souhaite l’animer, faire glisser toute la page vers ce lien, cela devient un peu moins simple. C’est ce que nous allons voir ici avec l’utilisation de jquery.

Continuer la lecture de « Jquery – Défilement fluide (scroll) vers une ID, une ancre »

12 novembre 20121 juillet 2013

Jquery et les checkbox , quelques snippets utiles

Voici quelques bouts de code qui sont parfois utiles.
Vous pouvez avoir besoin de vérifier si une case à cocher l’est ou encore récupérer sa valeur etc…

A noter que le sélecteur jquery pour les checkbox est :checkbox qui est l’équivalent de $(‘[type=checkbox]’)
Continuer la lecture de « Jquery et les checkbox , quelques snippets utiles »

11 juillet 20129 août 2013

Ajouter un beau hover à la galerie par défaut de WordPress avec jquery

Pour mon portofolio, j’avais besoin d’améliorer la galerie photo de base de WordPress.
Elle me convenait, toutefois je souhaitais que sur le roll hover apparaisse un fond blanc sur lequel le nom de la référence soit marqué.
L’idée est de récupérer le title de l’image et de le coller dans le h3 d’un div caché qui ne s’afficherait qu’au passage de la souris.

L’exemple se trouve ici : http://webdesign.niums.com/clients/

Pour rappel voilà de quoi est composée la galerie créée par WordPress
.gallery : class de la galerie
.gallery-item : dl : conteneur
.gallery-icon :dt : élément à définir
.attachment-thumbnail : notre miniature

Voilà ce que nous allons y ajouter grâce à jquery
.hide : un div qui contiendra notre texte
h3 : une balise de titre
XXX : notre texte en le copiant depuis la balise title de l’image

Préparons nos fichiers

Nous aurons besoin
– de créer un fichier javascript externe que nous chargerons : site.js
– de modifier le fichier css de wordpress : style.css

Tout d’abord créons un fichier javascript que nous enregistrerons dans un dossier js de notre dossier de thème.

Nous appellerons ce fichier dans le header.php ou le footer.php selon notre convenance : soit avec un chargement en mémoire avec un enqueue soit directement dans le fichier header

Charger les scripts en mémoire : Version wp_enqueue_scripts

Dans le fichier function php, ajoutons le code ci-dessous


/**
 * chargement de jquery, de la feuille de style et du fichier js
 */
function niums_scripts() {

 /* 
 chargeons jquery 
 wp_enqueue_scripts action hook charge seulement en front end 
 si les scripts sont nécessaires en admin on peut aussi 
 utiliser admin_enqueue_scripts 
 */	

   // l'appel à jquery qui est déjà inclus dans wordpress
   wp_enqueue_script('jquery'); 
   // appel du fichier styles.css
   wp_enqueue_style( 'style', get_stylesheet_uri() );
    
   // chargement de site.js en faisant attention à ce que jquery soit chargé avant 
   // (en tant que dépendance) puis on le charge dans le footer
   //wp_enqueue_script( $handle    ,$src    ,$deps    ,$ver    ,$in_footer );
    wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );
 
}

add_action( 'wp_enqueue_scripts', 'niums_scripts' );

/**

* chargement de jquery, de la feuille de style et du fichier js

function niums_scripts() {

chargeons jquery

wp_enqueue_scripts action hook charge seulement en front end

si les scripts sont nécessaires en admin on peut aussi

utiliser admin_enqueue_scripts

// l'appel à jquery qui est déjà inclus dans wordpress

wp_enqueue_script('jquery');

// appel du fichier styles.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

// chargement de site.js en faisant attention à ce que jquery soit chargé avant

// (en tant que dépendance) puis on le charge dans le footer

//wp_enqueue_script( $handle ,$src ,$deps ,$ver ,$in_footer );

wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );

}

add_action( 'wp_enqueue_scripts', 'niums_scripts' );

Charger directement les scripts dans le header

Si pour une raison ou une autre, le chargement en mémoire ne vous convient pas, vous pouvez aussi charger directement les fichiers dans header.php entre head et /head


// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger
// charger le fichier js
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/site.js"></script>

// votre fichier style est normalement déjà chargé comme suit
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger

// charger le fichier js

// votre fichier style est normalement déjà chargé comme suit

Création de notre js

Maintenant que tous nos fichiers sont chargés, nous pouvons créer nos fonctions.

PS : J’ai modifié mon appel à la fonction principale qui se fait lorsque le document est prêt afin qu’on puisse utiliser $() comme alias et cela sans conflit.


jQuery(document).ready(function($){
    // ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible
   // le code qui suit se placera donc ici
});

jQuery(document).ready(function($){

// ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible

// le code qui suit se placera donc ici

});

Pour commencer, ajoutons la classe wrap à chaque liste de définitions.
Cette class permettra aux listes d’avoir des positions « relative » afin que le futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute »


$(".gallery-item").addClass("wrap");

// puis attachons un gestionnaire d'évènement à la class wrap

$(".wrap").on({
   mouseover: function() {
      	$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
   },
     mouseout: function() {
      	$(".hide", this).stop().fadeTo(300, 0); //  on définit le hover à 0%
  }
 });

//.puis nous ajoutons notre div .hide :  après  .gallery-icon 

$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');

// puis nous créons un h3 dans le .hide

$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>'); 

// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image 

$(".gallery .gallery-item .gallery-icon").each(function (index) { 
var leTitre = $(this).find(".attachment-thumbnail").attr('alt');
$(this).find(".hide h3").text(leTitre);

$(".gallery-item").addClass("wrap");

// puis attachons un gestionnaire d'évènement à la class wrap

$(".wrap").on({

mouseover: function() {

$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%

mouseout: function() {

$(".hide", this).stop().fadeTo(300, 0); // on définit le hover à 0%

}

});

//.puis nous ajoutons notre div .hide : après .gallery-icon

$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');

// puis nous créons un h3 dans le .hide

$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>');

// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image

$(".gallery .gallery-item .gallery-icon").each(function (index) {

var leTitre = $(this).find(".attachment-thumbnail").attr('alt');

$(this).find(".hide h3").text(leTitre);

Pour infos jQuery peut accepter un second paramètre afin d’écraser le contexte de la sélection


 $("img", this);
// est la même chose que
 $(this).find("img");

$("img", this);

// est la même chose que

$(this).find("img");

Et si l’image est un descendant direct de l’élément cliqué alors nous pouvons aussi écrire :


$(this).children("img");

$(this).children("img");

En ce qui concerne le css, rien de spécial

Ajoutez le code ci-dessous dans votre fichier style.css


/* Wraps */
.wrap {
	position:relative;
	width:100%;
	height:auto;
}

.hide {
        display:none;
	background-color:#fff;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

/* Wraps */

.wrap {

position:relative;

width:100%;

height:auto;

}

.hide {

display:none;

background-color:#fff;

background-color:rgba(255,255,255,.9);

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:2;

}

Pour info

Dans WordPress il est possible de choisir le nombre d’images par ligne.
Dans le cas contraire, pour décider du nombre d’éléments par ligne, on pourrait aussi écrire :


dl dt:nth-child(4n){clear:left;} 
//ou
ul li:nth-child(4n){clear:left;}

dl dt:nth-child(4n){clear:left;}

//ou

ul li:nth-child(4n){clear:left;}

Voilà +++