wordpress Archives - Copier coller

ACF repeater field avec la version gratuite d’ACF

copier coller — Sat, 19 Dec 2020 13:13:12 +0000

Comment incorporer et utiliser les repeater field avec ACF ?

Les repeater-fields d’ACF permettent de créer des sous-champ aux traditionnels « custom fields » du plugin, donnant plus de flexibilité et de plus grandes possibilités d’affichage sur votre site. La bonne nouvelle, peu diffusée, c’est qu’Elliot Condom (l’auteur du plugin) lui même met à disposition sur une page GitHub une version isolée du « repeater field », et celle-ci s’incorpore parfaitement avec la version gratuite d’ACF.

Sur un récent site, j’ai pu tester et voir que ca marchait parfaitement. Cet add-on n’a pas de page de configuration , il se retrouve automatiquement dans la liste de le menu déroulant des « types de champs » lors de la création d’un « custom field. »

Ici je vais donc donner un exemple d’utilisation pour montrer comment on peut s’en servir.

La création du champ principal et des sous-champ ACF

Dans mon site de test, j’ai un widget qui affiche des formations à venir, avec une mention de la ville et des dates associées. Chaque ville peut contenir plusieurs dates. C’est là que l’add-on « repeater » devient intéressant. L’idée est donc de créer par ville, plusieurs sous champ pour toutes les dates de formation. L’add-on permet en fait à l’utilisateur qui édite la page de multiplier autant de dates que souhaité.

Mon champ principal, je l’appelle donc « Réservations ».

Dans « type de champ », et dans la section « disposition », je sélectionne le champ « répéteur ».

Cela va dérouler juste en dessous une nouvelle section « sous-champs ».

Le sous champ « ville »

A l’intérieur je crée donc mes deux sous-champs « ville » et « dates ». Ville est un champ « select » ou « menu déroulant » dans lequel je place quelques villes. L’utilisateur aura dans sa page d’édition le choix entre ces villes prédéfinies.

Le sous champ « répéteur » date

Pour les dates, je choisis à nouveau un champ « répéteur » dans lequel je place deux sous champ « date de début » et « date de fin ». L’utilisateur pourra à l’infini ajouter des dates pour chaque ville choisie.

Page d’édition

Dans la page d’édition, l’utilisateur retrouvera son champ additionnel « réservations », avec à l’intérieur les sous-champ ville et date. Pour chaque ville sélectionnée, il pourra rajouter autant de dates que souhaité

Afficher ses custom fields en front

On peut ensuite se reporter à la doc officielle d’ACF pour comprendre comment afficher ses données sur le site. Ici on n’appelle plus les champs individuellement avec des get_field() ou the_field(), mais on crée une boucle spécifique pour le champ répéteur et on utilise un get_sub_field() pour aller chercher les données des sous-champs, comme ci-dessous :


// Check rows exists.
if( have_rows('repeater_field_name') ):

    // Loop through rows.
    while( have_rows('repeater_field_name') ) : the_row();

        // Load sub field value.
        $sub_value = get_sub_field('sub_field');
        // Do something...

    // End loop.
    endwhile;

// No value.
else :
    // Do something...
endif;

créer un widget pour afficher ses villes et dates

Pour cet exemple, je dois afficher ces données dans un widget. L’utilisateur affiche en front et dans chaque page, article ou custom post type un widget contenant des villes et dates associées, pour chaque nouvelle formation à venir

Voici le code simplifié de mon widget:

class Monsite_Upcoming_Events extends WP_Widget {
	function __construct() {
	parent::__construct(
		'monsite_upcoming_events', // Base ID
		__( 'Monsite Upcoming Events (Sidebar only)', 'text-domain' ), // Name
		array( 'description' => __( 'Shows Formations dates', 'text-domain' ), ) // Args
	);
} 
	public function form( $instance ) {
		$title = '';
	    if( !empty( $instance['title'] ) ) {
	        $title = $instance['title'];
	    }
	    ?> 
		
		    
		    
		

		}
	public function update( $new_instance, $old_instance ) {
	    $instance = $old_instance;
	    $instance['title'] = $new_instance['title'];
	    return $instance;
	}
	public function widget( $args, $instance ) {
		
		
		// vars
		$title = get_the_title();		
		if(have_rows('reservation')):
			echo $args['before_widget'];
			if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		   while(have_rows('reservation')): the_row(); 
			$ville = get_sub_field('ville');
			foreach($ville as $city){
 			echo '';
		            // Display city name.
				echo '' .  $city . '
';
		           } 
				if(have_rows('dates')):
				echo '';
				while(have_rows('dates')): the_row(); 
					$event_start_date = get_sub_field( 'date_de_debut'  );
					$event_end_date   = get_sub_field( 'date_de_fin' );
		            // Display posts in that city.
		            
		                if($event_start_date &&  $event_end_date){
		                echo ' Du ' . $event_start_date . ' au ' . $event_end_date . '
';				
		            }
		           
	 			endwhile; 
				echo '
';
				endif;	
			echo '
'; 
			endwhile;
			endif;
		echo $args['after_widget'];
	}
}

Détail du widget

Voici un rendu possible du widget crée. Le widget ne comporte aucune option, il sert juste à afficher les données insérées par l’utilisateur. Dans la page des widget dans Apparence/widget, il suffit juste de placer le widget dans la page de son choix. En front il affiche les villes sélectionnées dans la page d’édition, et toutes les dates correspondantes.

Dans la fonction widget, on construit donc l’apparence de ce dernier : on commence donc par la boucle citée plus haut :

if(have_rows('reservation')): while(have_rows('reservation')): the_row();

on récupère le sous-champ ville, et on affiche toutes les villes dans un titre :

$ville = get_sub_field('ville');
			foreach($ville as $city){
 			echo '';
		            // Display city name.
				echo '' .  $city . '
';
		           }

Puis à l’intérieur du foreach, on recrée une seconde boucle, pour récupérer toutes les dates associées

if(have_rows('dates')):
				echo '';
				while(have_rows('dates')): the_row(); 
					$event_start_date = get_sub_field( 'date_de_debut'  );
					$event_end_date   = get_sub_field( 'date_de_fin' );

......

Le reste est propre à cet exemple : je crée un url dynamique avec des querys tring : chaque ligne contenant une date de début et de fin constitue en fait un lien qui pointera vers un formulaire déjà prérempli.

Voilà, le but ici est surtout de montrer qu’on n’a pas forcément besoin de la version pro d’ACF pour créer des sous champ « répéteur », et qu’en l’état, cette configuration permet déjà d’aller beaucoup plus loin qu’avec la version simple d’ACF. Sans ca, on serait obligé de créer des boucles beaucoup plus complexes pour arriver au même résultat.

The post ACF repeater field avec la version gratuite d’ACF appeared first on Copier coller.

Comment consolider le comportement du menu pour vos CPT

copier coller — Sun, 26 Apr 2020 18:00:12 +0000

Comment consolider le comportement du menu pour vos CPT ?

Cet article fait suite au précédent, dans lequel je donne un exemple de contournement pour créer une page d’archive de custom post type personnalisée. Lorsque vous créez un custom post type, WordPress en effet va générer automatiquement une page d’archive que vous pourrez retrouver dans l’onglet Apparence / menu. C’est une page qui n’existe pas en dur dans le dossier wordpress, et qu’on ne peut malheureusement pas personnaliser.

On a donc vu comment contourner cette contrainte, en créant un modèle de page qui prend le rôle de page d’archive.

Le problème

Le problème, c’est qu’il reste à modifier le comportement du menu wordpress qui se perd un peu dans l’arborescence. Il se peut que wordpress souligne la page blog lorsque vous êtes dans un article de custom post type, comme si la page blog était parente de vos CPT.

Pour contourner ce dysfonctionnement, et si vous avez placé votre page d’archive personnalisée dans le menu, voici le code à insérer dans functions.php

La solution

Ce code vous permettra, lorsque vous êtes dans une page single CPT, de surligner le modèle de page plutôt que la page blog, comme s’il s’agissait d’une page d’archive parente classique.


/* PREVENT BLOG CURENT MENU ITEM CLASS ON CPT*/
add_filter( 'nav_menu_css_class', 'theme_remove_cpt_blog_class', 10, 3 );
function theme_remove_cpt_blog_class( $classes, $item, $args ) {
    if( !is_singular( 'post' ) AND !is_category() AND !is_tag() AND !is_date() ):
        $blog_page_id = intval( get_option( 'page_for_posts' ) );
        if( $blog_page_id != 0 AND $item->object_id == $blog_page_id )
            unset( $classes[ array_search( 'current_page_parent', $classes ) ] ); 
    endif;
    return $classes;
}

/* ADD CURRENT MENU ITEM CLASS ON CPT PARENT PAGE */
add_action( 'nav_menu_css_class', 'theme_add_cpt_ancestor_class', 10, 3 );
function theme_add_cpt_ancestor_class( $classes, $item, $args ) {
    global $post;
    $current_post_type = get_post_type_object( get_post_type( $post->ID ) );
    $current_post_type_slug = $current_post_type->rewrite[ 'slug' ];
    $menu_slug = strtolower( trim( $item->url ) );
    if( strpos( $menu_slug, $current_post_type_slug ) !== false )
        $classes[] = 'current_page_parent';
    return $classes;
}

Cette action et ce filtre permettent de retirer la classe current_page_parent que wordpress attribue automatiquement à la page blog, et de la réattribuer à votre modèle de page.

L’utilisateur ne verra donc plus aucune différence entre le modèle de page et une vraie page d’archive.

The post Comment consolider le comportement du menu pour vos CPT appeared first on Copier coller.

Créer des pages d’archive pour vos custom post type

copier coller — Sat, 25 Apr 2020 18:00:56 +0000

Comment créer des pages d’archives customisées pour vos custom post type ?

Dans cet article, nous allons voir comment outrepasser le fonctionnement par défaut de wordpress concernant les custom post type. Normalement, à la création de votre custom post type, si l’on donne comme argument « has_archive » =>’true‘ à notre CPT, wordpress va automatiquement créer une page d’archive qui affichera tous nos custom post type.

Le problème

Le problème c’est que cette page n’est pas générée dans le dossier wordpress, on ne peut donc pas la modifier par le code. Dans le cas de l’utilisation d’un page builder, Elementor ou autre, vous ne pourrez pas éditer la page.

La solution

Si vous utilisez un page builder et que vous avez besoin de modifier la page ou la rendre administrable pour l’utilisateur final, il faut donc impérativement trouver une solution. Celle-ci consiste en fait à créer un modèle de page d’archive pour notre custom post type.

La création du custom post type

Voici le code de création d’un custom post type. Ici, notre custom post type s’appelle « formation »

function cc_formation_cpt() {
	/* Formation */
	$labels = array(
		'name'                => _x('Formations', 'Post Type General Name', 'text_domain'),
		'singular_name'       => _x('Formation', 'Post Type Singular Name', 'text_domain'),
		'menu_name'           => _x('Formations', 'text_domain'),
		'name_admin_bar'      => _x('Formations', 'text_domain'),
		'all_items'           => _x('Toutes les formations', 'text_domain'),
		'add_new_item'        => _x('Ajouter une nouvelle formation', 'text_domain'),
		'add_new'             => _x('Ajouter', 'text_domain'),
		'new_item'            => _x('Nouvelle formation', 'text_domain' ),
		'edit_item'           => _x('Editer la formation', 'text_domain'),
		'update_item'         => _x('Mettre à jour la formation', 'text_domain'),
		'view_item'           => _x('Voir la formation', 'text_domain'),
		'search_items'        => _x('Rechercher une formation', 'text_domain'),
		'not_found'           => _x('Aucune formation trouvée', 'text_domain'),
		'not_found_in_trash'  => _x('Aucune formation trouvée dans la corbeille', 'text_domain'),
	);
	
	$args = array(
		'label'               => _x('Formation', 'text_domain'),
		'description'         => _x('Formations', 'text_domain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => true,
		'rewrite'             =>  array( 'slug' => 'toutes-nos-formations' ),
		'capability_type'     => 'post',
		'show_in_rest'			=>'true',
	);
	register_post_type('formation', $args);	
}
add_action('init', 'cc_formation_cpt', 10);

Si on laisse ici « has_archive » = »true » , on peut retrouver un onglet qui s’appelerait « toutes les formations » dans l’onglet Apparence / Menu du backoffice. On aurait donc automatiquement une page avec tous les articles lis à ce custom post type.

Nous on passe ce paramètre « has_archive » à false, et on crée par la même occasion une réécriture d’url :

'rewrite' => array( 'slug' => 'toutes-nos-formations' ),

Cela garantit que WP ne crée pas d’archive réelle et accepte notre modèle de page à la place. La réécriture garantit notamment que les CPT individuels seront publiés de manière à ressembler à des « enfants » de cette page, même s’ils ne le sont pas en réalité !

La création du modèle de page

Template Name: Toutes nos Formations

Tout en haut de notre nouveau fichier php, on signifie à worpdress qu’on est là sur un nouveau modèle de page « Toutes nos formations ». Le nom doit être le même que celui indiqué dans la réécriture d’url. Dans le backoffice de wordpress, on crée ensuite notre nouvelle page « Toutes nos formations » et on lui attribue comme modèle de page « Toutes nos formations ».

Une page administrable

Dans cette page, on va donc pouvoir coder en dur tout ce qu’on veut, cela occupera un espace dans la page en front. On va notamment créer la boucle qui va ramener tous nos custom post type. Il s’agit ici de simuler le comportement d’une page d’archive classique .

			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args=array(
			'post_type' =>'formation',
			'posts_per_page' =>5,
			'paged' => $paged

			);
			$query = new WP_Query( $args ); //Check the WP_Query docs to see how you can limit which posts to display ?>
			have_posts() ) : ?>

Pour le reste, on peut appeler le template_tag the_content() normalement, afin que l’utilisateur puisse administrer le reste de la page via l’éditeur de wordpress, Elementor, ou tout autre page builder

		if ( have_posts() ) :
			while ( have_posts() ) : the_post();
			the_content();
			endwhile; 
			endif;		
		;?>

Le breadcrumb

Sans modification supplémentaire, le fil d’Ariane va continuer à afficher le nom de la page d’archive générée automatiquement par wordpress. Il va donc falloir le modifier. Si on utilise Yoast SEO, voici un bout de code qui permet de modifier ce fil d’Ariane.

function cc_filter_yoast_breadcrumbs( $links ) {
    // Only affect individual "mycpt" CPTs
    if ( is_singular( 'mycpt' ) ) {
        // Add "My CPT" breadcrumb
        $addedBreadcrumbs = array(
            array( 'text' => 'My CPT', 'url' => '/mycpt/', 'allow_html' => 1)
        );
        // Add the new breadcrumb before the single CPT title
        array_splice( $links, 1, 0, $addedBreadcrumbs );
    }
    // Always return the links, even if we didn't change them
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'cc_filter_yoast_breadcrumbs' );
?>

Adapté à notre exemple, voici ce que cela donne:

function cc_formation_filter_yoast_breadcrumbs( $links ) {
   
    if ( is_singular( 'formation' ) ) {
       
        $addedBreadcrumbs = array(
            array( 'text' => 'Toutes nos formations', 'url' => '/mon site/toutes-nos-formations/', 'allow_html' => 1)
        );
        
        array_splice( $links, 1, 0, $addedBreadcrumbs );
    }
    
    return $links;
}
add_filter( 'wpseo_breadcrumb_links', 'cc_formation_filter_yoast_breadcrumbs' );

Maintenant, lorsque vous serez dans votre article du custom post type, le fil d’Ariane affichera le nom de votre modèle de page crée précédemment. L’utilisateur ne pourra donc plus tomber sur la page d’archive générée par wordpress.

Sources :

Cette astuce m’a été donnée par WebElaine sur stackoveflow.

The post Créer des pages d’archive pour vos custom post type appeared first on Copier coller.

Système de filtres avancés pour custom post type

copier coller — Tue, 21 Apr 2020 18:07:31 +0000

Comment créer un système de filtre avancés pour vos custom post type ?

Cet article fait suite aux deux précédents articles sur les systèmes de filtres et bouton ajax load more dans les articles et les custom post type.

Mon système de filtre avancé

Ici, je poste un autre exemple avec un système de filtre un peu plus avancé, avec deux taxonomies : la catégorie et le niveau. Mon arborescence et la structure des fichiers est la même que pour les deux derniers articles cités. Je ne poste donc ici que la partie de code utile.

Voici le rendu souhaité de mes filtres : deux rangées, une pour chaque taxonomie. Chaque rangée possède un bouton de réinitialisation, pour que l’utilisateur puisse annuler le filtre d’une rangée tout en gardant un autre filtre activé.

Mon custom post type

Je commence donc par créer mon custom post type, ainsi que les taxonomies associées.

/*AVIS*/
function cc_cpt_review() {
	/* Formation */
	$labels = array(
		'name'                => _x('Avis', 'Post Type General Name', 'text_domain'),
		'singular_name'       => _x('Avis', 'Post Type Singular Name', 'text_domain'),
		'menu_name'           => _x('Avis', 'text_domain'),
		'name_admin_bar'      => _x('Avis', 'text_domain'),
		'all_items'           => _x('Tous les Avis', 'text_domain'),
		'add_new_item'        => _x('Ajouter un nouvel Avis', 'text_domain'),
		'add_new'             => _x('Ajouter', 'text_domain'),
		'new_item'            => _x('Nouvel avis', 'text_domain' ),
		'edit_item'           => _x('Editer l\'avis', 'text_domain'),
		'update_item'         => _x('Mettre à jour l\'avis', 'text_domain'),
		'view_item'           => _x('Voir l\'avis', 'text_domain'),
		'search_items'        => _x('Rechercher un avis', 'text_domain'),
		'not_found'           => _x('Aucun avis trouvé', 'text_domain'),
		'not_found_in_trash'  => _x('Aucun avis trouvé dans la corbeille', 'text_domain'),
	);
	
	$args = array(
		'label'               => _x('Avis', 'text_domain'),
		'description'         => _x('Avis', 'text_domain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => 'avis',
		'rewrite'             =>  array( 'slug' => 'tous-les-avis' ),
		'capability_type'     => 'post',
		'show_in_rest'			=>'true',
	);
	register_post_type('avis', $args);	
}
add_action('init', 'cc_cpt_review', 10);



function cc_add_taxonomies_review() {
	// Catégorie de série
	$labels_cat_avis = array(
		'name'                       => _x( 'Catégories de l\'avis', 'taxonomy general name'),
		'singular_name'              => _x( 'Catégories de l\'avis', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher une catégorie'),
		'popular_items'              => __( 'Catégories populaires'),
		'all_items'                  => __( 'Toutes les catégories'),
		'edit_item'                  => __( 'Editer une catégorie'),
		'update_item'                => __( 'Mettre à jour une catégorie'),
		'add_new_item'               => __( 'Ajouter une nouvelle catégorie'),
		'new_item_name'              => __( 'Nom de la nouvelle catégorie'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer une catégorie'),
		'choose_from_most_used'      => __( 'Choisir parmi les catégories les plus utilisées'),
		'not_found'                  => __( 'Pas de catégories trouvée'),
		'menu_name'                  => __( 'Catégorie d\'avis'),
	);

	$args_cat_avis = array(

		'hierarchical'          => true,
		'labels'                => $labels_cat_avis,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'categories-avis' ),
	);

	register_taxonomy( 'categories-avis', 'avis', $args_cat_avis );
}
add_action( 'init', 'cc_add_taxonomies_review', 0 );

function cc_avis_level_taxonomies() {

	$labels_level_avis = array(
		'name'                       => _x( 'Niveaux de l\'avis', 'taxonomy general name'),
		'singular_name'              => _x( 'Niveau de l\'avis', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher un avis'),
		'popular_items'              => __( 'Niveaux populaires'),
		'all_items'                  => __( 'Tous les Niveaux'),
		'edit_item'                  => __( 'Editer un niveau'),
		'update_item'                => __( 'Mettre à jour un niveau'),
		'add_new_item'               => __( 'Ajouter un nouveau niveau'),
		'new_item_name'              => __( 'Nom de le nouveau niveau'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer un niveau'),
		'choose_from_most_used'      => __( 'Choisir parmi les niveaux les plus utilisés'),
		'not_found'                  => __( 'Pas de niveau trouvé'),
		'menu_name'                  => __( 'Niveau de l\'avis'),
	);

	$args_level_avis = array(
	
		'hierarchical'          => true,
		'labels'                => $labels_level_avis,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'niveau-avis' ),
	);

	register_taxonomy( 'niveau-avis', 'avis', $args_level_avis );
}
add_action( 'init', 'cc_avis_level_taxonomies', 0 );

Mon modèle de page ou page d’archive

Dans ma page d’archive personnalisée ou modèle de page, je crée deux formulaires de filtrage, un pour chacune de mes taxonomies.


				
					
					Toutes
					
										if( $terms = get_terms( array( 'taxonomy' => 'categories-avis' ) ) ) :
						foreach( $terms as $term ) :
							echo '' . $term->name . '';
						endforeach;
					endif;
					?>
				

				
					Toutes
					
											if( $terms = get_terms( array( 'taxonomy' => 'niveau-avis' ) ) ) :
							foreach( $terms as $term ) :
								echo '' . $term->name . '';
							endforeach;
						endif;?>
					

					
					
				

			

		
		   			// le début de ma boucle
			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args = array(
				'post_type' =>'avis',
				'posts_per_page' =>5,
				'paged' => $paged
			);
			$query = new WP_Query( $args ); ?>
			have_posts() ) : ?>
		    
			       have_posts() ) : $query->the_post(); 
					$taxonomies = array('categories-avis','niveau-avis');
					$termsArray = wp_get_object_terms($post->ID, $taxonomies, array( 'orderby' => 'term_order' ) );  
					$termsString = ""; 
					foreach ( $termsArray as $term ) {  
					$termsString .= $term->slug.' '; 
					}

Tout à la fin de mon fichier, j’ajoute mon bouton ajax load more :

				 
			if (  $query->max_num_pages > 1 ) :
				echo 'Afficher plus d\'avis
'; // you can use  as well
			endif;

Juste après j’appelle mon fichier js qui va contenir mes fonctions pour les filtres et le bouton loadmore, et je défini ici mes variables pour l’ajax;

Les fonctions php

Dans un fichier à part, que j’appellerai avis-query.php, je crée ma fonction pour les filtres. Tout est décomposé ici pour rendre les choses plus claires. Je crée mes conditions pour chaque cas d’utilisation.

add_action('wp_ajax_ccavisfilter', 'cc_avis_filter_function'); 
add_action('wp_ajax_nopriv_ccavisfilter', 'cc_avis_filter_function');
 


function cc_avis_filter_function(){

	if( isset( $_POST['all_categ'] ) || isset( $_POST['all_niveau'] )){
		$niveau = get_terms( array( 'taxonomy' => 'niveau-avis' ) );
		$categ = get_terms( array( 'taxonomy' => 'categories-avis' ) );
    	$args=array(
			'post_type'             => 'avis',
		    'posts_per_page'        => 5,
		    'tax_query' => array(
	        'relation' => 'OR',
        array(
            'taxonomy' => 'categories-avis',
            'field'    => 'term_id',
            'terms'    => $categ,
        ),
        array(
            'taxonomy' => 'niveau-avis',
            'field'    => 'term_id',
            'terms'    => $niveau ,
        ),
        ),
		    );
		
	}
	if( isset( $_POST['all_categ'] ) && isset( $_POST['all_niveau'] )){
		$niveau = get_terms( array( 'taxonomy' => 'niveau-avis' ) );
		$categ = get_terms( array( 'taxonomy' => 'categories-avis' ) );
    	$args=array(
			'post_type'             => 'avis',
		    'posts_per_page'        => 5,
		    'tax_query' => array(
	        'relation' => 'AND',
        array(
            'taxonomy' => 'categories-avis',
            'field'    => 'term_id',
            'terms'    => $categ,
        ),
        array(
            'taxonomy' => 'niveau-avis',
            'field'    => 'term_id',
            'terms'    => $niveau ,
        ),
        ),
		    );
		
	}	
	// for taxonomies / categories
	if( isset( $_POST['category_avis_filters'] ) || isset( $_POST['niveau_avis_filters'] )){
		$args=array(
			'post_type'             => 'avis',
		    'posts_per_page'        => 5,
		    'tax_query' => array(
	        'relation' => 'OR',
        array(
            'taxonomy' => 'categories-avis',
            'field'    => 'term_id',
            'terms'    => $_POST['category_avis_filters'],
        ),
        array(
            'taxonomy' => 'niveau-avis',
            'field'    => 'term_id',
            'terms'    => $_POST['niveau_avis_filters'],
        ),
        ),
		    );
		
	}
 		if( isset( $_POST['category_avis_filters'] ) && isset( $_POST['niveau_avis_filters'] )){
		$args=array(
			'post_type'             => 'avis',
		    'posts_per_page'        => 5,
		    'tax_query' => array(
	        'relation' => 'AND',
        array(
            'taxonomy' => 'categories-avis',
            'field'    => 'term_id',
            'terms'    => $_POST['category_avis_filters'],
        ),
        array(
            'taxonomy' => 'niveau-avis',
            'field'    => 'term_id',
            'terms'    => $_POST['niveau_avis_filters'],
        ),
        ),
		    );
		
	}


	

	$query = new WP_Query( $args ); 
	if ( $query->have_posts() ) : 
 		  
 		ob_start(); 
 		while ( $query->have_posts() ) : $query->the_post();
			
					$taxonomies = get_object_taxonomies( array( 'post_type' => 'avis') );
					$termsArray = get_the_terms( $post->ID, $taxonomies );  
					$termsString = ""; 
					foreach ( $termsArray as $term ) { 
					$termsString .= $term->slug.' '; 
					}
					?> 



		endwhile;
 		$posts_html = ob_get_contents(); 
   		ob_end_clean(); 
	else:
		$posts_html = 'Aucun résultat.
';
	endif;
 	echo json_encode( array(
		'posts' => json_encode( $query->query_vars ),
		'max_page' => $query->max_num_pages,
		'found_posts' => $query->found_posts,
		'content' => $posts_html
	) );
	die();
}

Ici je fais en sorte qu’on puisse sélectionner une catégorie et un niveau par catégorie, OU, un niveau et une catégorie par niveau.

Les fonction js

Dans un fichier js à part, que je nomme load-more-avis.js, je crée donc mes deux fonctions : une pour le bouton load more, et l’autre pour les filtres.

jQuery(function($){

 /* LOAD MORE FUNCTION ON avis ARCHIVE PAGE */
  $('#cc_avis_loadmore').click(function(){
 
     data = {
      'action': 'loadmoreavisbutton',
      'query': posts_myajax_avis,
      'page' : current_page_myajax_avis
    };
 
    $.ajax({
      url : '/numgrade/wp-admin/admin-ajax.php', // AJAX handler
      data : data,
      type : 'POST',
      beforeSend : function ( xhr ) {
        $('#cc_avis_loadmore').text('Recherche...'); // some type of preloader
      },
      success : function( posts ){
        if( posts ) {
 
          $('#cc_avis_loadmore').text( 'Afficher plus d\'avis' );
          $('#cc_avis_wrap').append( posts ); // insert new posts
         current_page_myajax_avis++;
 
          if ( current_page_myajax_avis == max_page_myajax_avis )
            $('#cc_avis_loadmore').hide(); // if last page, HIDE the button
 
        } else {
          $('#cc_avis_loadmore').hide(); // if no data, HIDE the button as well
        }
      }
    });
    return false;
  });
/* FILTERING FUNCTION ON avis ARCHIVE PAGE */
  $('#avis_filters').change(function(){
    $.ajax({
      url : '/numgrade/wp-admin/admin-ajax.php',
      data : $('#avis_filters').serialize(), // form data
      dataType : 'json', // this data type allows us to receive objects from the server
      type : 'POST',

      success : function( data ){
        // when filter applied:
        // set the current page to 1
        current_page_myajax_avis = 1; 
        // set the new query parameters
        posts_myajax_avis = data.posts;
        // set the new max page parameter
        max_page_myajax_avis = data.max_page; 
        // change the button label back
        // insert the posts to the container
        $('#cc_avis_wrap').html(data.content); 
        // hide load more button, if there are not enough posts for the second page
        if ( data.max_page < 2 ) {
          $('#cc_avis_loadmore').hide();
        } else {
          $('#cc_avis_loadmore').show();
        }
      }
    });
    // do not submit the form
    return false;
 
  });

});

Maintenant, quelque soit le choix de l’utilisateur, le bouton load-more ne chargera que la suite des articles de la catégorie et du niveau sélectionnés.

The post Système de filtres avancés pour custom post type appeared first on Copier coller.

Filtrer ses custom post type et ajouter un bouton load more

copier coller — Mon, 20 Apr 2020 18:48:39 +0000

Comment rajouter des filtres et un bouton load more à ses custom post type ?

Dans un précédent article, j’ai montré un exemple d’implémentation, à partir des articles classiques, d’une fonction de filtrage et de rechargement en ajax des articles.

Ici on va voir comment pousser encore plus loin ce système en l’étendant aux custom post type. Voici un rendu possible : on a nos différents filtres tout en haut, et un bouton de rechargement d’articles en ajax tout en bas.

Création du custom post type

Je pars du même exemple que précédemment : je crée un custom post type appelé « formation ». Je lui attribue deux taxonomies : « categorie-formations » et « niveau-formation« . Ces taxonomies ont comme argument : ‘hierarchical’ => true », : cela permet entre autre d’avoir des cases à cocher dans le backoffice, comme pour des catégories classiques.

function cc_formation_cpt() {
	/* Formation */
	$labels = array(
		'name'                => _x('Formations', 'Post Type General Name', 'text_domain'),
		'singular_name'       => _x('Formation', 'Post Type Singular Name', 'text_domain'),
		'menu_name'           => _x('Formations', 'text_domain'),
		'name_admin_bar'      => _x('Formations', 'text_domain'),
		'all_items'           => _x('Toutes les formations', 'text_domain'),
		'add_new_item'        => _x('Ajouter une nouvelle formation', 'text_domain'),
		'add_new'             => _x('Ajouter', 'text_domain'),
		'new_item'            => _x('Nouvelle formation', 'text_domain' ),
		'edit_item'           => _x('Editer la formation', 'text_domain'),
		'update_item'         => _x('Mettre à jour la formation', 'text_domain'),
		'view_item'           => _x('Voir la formation', 'text_domain'),
		'search_items'        => _x('Rechercher une formation', 'text_domain'),
		'not_found'           => _x('Aucune formation trouvée', 'text_domain'),
		'not_found_in_trash'  => _x('Aucune formation trouvée dans la corbeille', 'text_domain'),
	);
	
	$args = array(
		'label'               => _x('Formation', 'text_domain'),
		'description'         => _x('Formations', 'text_domain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => true,
		'rewrite'             =>  array( 'slug' => 'toutes-nos-formations' ),
		'capability_type'     => 'post',
		'show_in_rest'			=>'true',
	);
	register_post_type('formation', $args);	
}
add_action('init', 'cc_formation_cpt', 10);



function cc_formation_category_taxonomies() {

	$labels_cat_formation = array(
		'name'                       => _x( 'Catégories de la formation', 'taxonomy general name'),
		'singular_name'              => _x( 'Catégories de la formation', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher une catégorie'),
		'popular_items'              => __( 'Catégories populaires'),
		'all_items'                  => __( 'Toutes les catégories'),
		'edit_item'                  => __( 'Editer une catégorie'),
		'update_item'                => __( 'Mettre à jour une catégorie'),
		'add_new_item'               => __( 'Ajouter une nouvelle catégorie'),
		'new_item_name'              => __( 'Nom de la nouvelle catégorie'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer une catégorie'),
		'choose_from_most_used'      => __( 'Choisir parmi les catégories les plus utilisées'),
		'not_found'                  => __( 'Pas de catégories trouvée'),
		'menu_name'                  => __( 'Catégorie de formation'),
	);

	$args_cat_formation = array(
		'hierarchical'          => true,
		'labels'                => $labels_cat_formation,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'categories-formations' ),
	);

	register_taxonomy( 'categories-formations', 'formation', $args_cat_formation );
}
add_action( 'init', 'cc_formation_category_taxonomies', 0 );

function cc_formation_level_taxonomies() {

	$labels_level_formation = array(
		'name'                       => _x( 'Niveaux de la formation', 'taxonomy general name'),
		'singular_name'              => _x( 'Niveau de la formation', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher un niveau'),
		'popular_items'              => __( 'Niveaux populaires'),
		'all_items'                  => __( 'Tous les Niveaux'),
		'edit_item'                  => __( 'Editer un niveau'),
		'update_item'                => __( 'Mettre à jour un niveau'),
		'add_new_item'               => __( 'Ajouter un nouveau niveau'),
		'new_item_name'              => __( 'Nom de le nouveau niveau'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer un niveau'),
		'choose_from_most_used'      => __( 'Choisir parmi les nivexau les plus utilisées'),
		'not_found'                  => __( 'Pas de niveau trouvé'),
		'menu_name'                  => __( 'Niveau de formation'),
	);

	$args_level_formation = array(
	
		'hierarchical'          => true,
		'labels'                => $labels_level_formation,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'niveau-formations' ),
	);

	register_taxonomy( 'niveau-formations', 'formation', $args_level_formation );
}
add_action( 'init', 'cc_formation_level_taxonomies', 0 );

Une page d’archive pour le custom post type

Je crée ensuite ma page d’archive page-formation.php pour mon custom post type. Normalement, en passant l’argument has_archive à true, wordpress va automatiquement générer une page d’archive pour notre custom post type. Il suffira alors d’aller la chercher dans Apparence / Menu et de la placer dans le menu. Le problème c’est que cette page est « fictive », dans le sens où elle n’existe pas en dur dans le dossier wordpress. On ne peut donc pas l’administrer.

Dans mon exemple, j’ai forcément besoin de pouvoir la personnaliser puisque je veux y inclure mon système de filtre et le bouton ajax load more. Je veux aussi donner la possibilité à l’utilisateur final de pouvoir intervenir dessus. Après le bloc de filtre et la boucle pour mes custom post type, je replace donc un the_content(), ce qui va lui permettre d’éditer la page via l’éditeur classique de wordpress, ou tout autre page builder.

/**
 * Template Name: Toutes nos Formations
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 
 *
 */
get_header();
?>


	
		
				
				
										if(get_field('titre'))
					{
						echo '' . get_field('titre') . '
';
					}
					?>
					

					
											echo '' . get_field('description') . '
';
					} ?>
				     

					
				

			

			 
				
					Toutes

										
										if( $terms = get_terms( array( 'taxonomy' => 'categories-formations' ) ) ) :
						foreach( $terms as $term ) :
							echo '' . $term->name . '
';
						endforeach;
					endif;
					?>
					
					
				

			

		   			// ma boucle qui me ramène tous les custom post type "formation"
			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args=array(
			'post_type' =>'formation',
			'posts_per_page' =>5,
			'paged' => $paged

			);
			$query = new WP_Query( $args );  ?>
			have_posts() ) : ?>
		    
			    have_posts() ) : $query->the_post(); 
					$termsArray = get_the_terms( $post->ID, "categories-formations" );  // On récupère la taxonomy
					$termsString = ""; 
					foreach ( $termsArray as $term ) { 
					$termsString .= $term->slug.' '; 
					}
					?> 
					
					>
						
					     					    	if ( has_post_thumbnail() ) { 
					                      the_post_thumbnail('masonryLayout');
					                } ;
							?>
						

						
																the_title( '', '
' );
								?>
						

						
																	$duree = get_field_object('duree');
									echo '' .  get_field('duree') . '
';
									}
								?>
							

						
							
						

						
							Voir
						

					

				 
 

		    			    	?>
		    
 
		
							 
			if (  $query->max_num_pages > 1 ) :
				echo 'Afficher plus de formations
'; // you can use  as well
			endif;
		
			else :
			get_template_part( 'template-parts/content', 'none' );
			endif;	
			?>
		


				// hack : je replace ici the content(), pour laisser l'utilisateur administrer cette partie de la page
		
		if ( have_posts() ) :
			while ( have_posts() ) : the_post();
			the_content();
			endwhile; 
			endif;		
		;?>

Ici, il faut faire attention aux éléments suivants :

L’id du formulaire : #formation_filters
Le nom du bouton radio qui va nous permettre de récupérer la sélection de l’utilisateur : name= »category_formation_filters »
La valeur du champ caché pour l’envoi du formulaire : value= »ccformationfilter » qui devra correspondre au nom de mon action ajax pour les filtres.

Contrairement au précédent article, les variables servant wp_localize_script ne sont pas injectés via le fichier functions.php, mais directement à la fin de mon fichier page-formation.php. Ce sont ces variables qui seront utilisées dans le fichier js, donc attention à la nomenclature !

L’appel au fichier js qui va contenir tout le code est aussi appelé directement depuis cette page.

Ainsi, en changeant juste le nom des variables et en créant un fichier distinct, vous pourrez étendre ce système à tous vos custom post types !

Création du fichier formation-query.php

Dans un dossier à part, je crée un nouveau fichier php que j’appelle formation-query.php. Vous pouvez évidemment lui attribuer le nom de votre choix.

Dans le fichier functions.php, je l’inclue avec un require :

/**
 * Formation query
 */

require get_template_directory() . '/inc/formation-query.php';

Ce fichier va contenir deux grandes fonctions et deux boucles, l’une pour les filtres, l’autre pour le bouton ajax load more. On reprend la même logique que pour les articles de blogs de mon précédent article, mais on sépare à présent les fichiers pour une arborescence plus propre, et un code plus facilement maintenable.


add_action('wp_ajax_loadmoreformationbutton', 'cc_formation_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmoreformationbutton', 'cc_formation_loadmore_ajax_handler');
 
function cc_formation_loadmore_ajax_handler(){

	$args = json_decode( stripslashes( $_POST['query'] ), true ); 
	$args['paged'] = $_POST['page'] + 1; 
	$args['post_status'] = 'publish';
	$args["post_type"] = 'formation';
	query_posts( $args );
	global $wp_query;
	if( have_posts() ) :
 		while( have_posts() ): the_post();
			$termsArray = get_the_terms($post->ID, "categories-formations");  
			 $termsString =""; 
			 foreach ( $termsArray as $term ) {
			 $termsString .= $term->slug;  
			 }
			 ?>
 			
				>
					
				     				    	if ( has_post_thumbnail() ) { 
				                      the_post_thumbnail('masonryLayout');
				                } ;
						?>
					

					
						', '' );?>
					

					
						
					

					
						Voir
					

				

			 
 
					endwhile;
	endif;
	die; 
}
 
add_action('wp_ajax_ccformationfilter', 'cc_formation_filter_function'); 
add_action('wp_ajax_nopriv_ccformationfilter', 'cc_formation_filter_function');
 


function cc_formation_filter_function(){

	if( isset( $_POST['all'] ) )
    	$terms = get_terms( array( 'taxonomy' => 'categories-formations' ) );
            $args['tax_query'] = array(
                array(
                    
                    'taxonomy' => 'categories-formations',
                    'field' => 'term_id',
                    'terms' => $terms,
                    "posts_per_page" => 5
                )
            );





	$args["post_type"] = 'formation';
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'categories-formations',
				'field' => 'term_id',
				'terms' => $_POST['category_formation_filters'],
				"posts_per_page" => 5
			)
		);
 
	$query = new WP_Query($args);
	if( $query->have_posts() ) :
 		ob_start(); 
 		while( $query->have_posts() ): $query->the_post();
 	
			$termsArray = get_the_terms($post->ID, "categories-formations");  
			 $termsString =""; 
			 foreach ( $termsArray as $term ) { 
			 $termsString .= $term->slug;  
			 }
			 ?>
 			
				>
					
				     				    	if ( has_post_thumbnail() ) { 
				                      the_post_thumbnail('masonryLayout');
				                } 
						?>
					

					
						', '' );?>
					

					
															$duree = get_field_object('duree');
								echo '' .  get_field('duree') . '
';
								}
							?>
						

					
						
					

					
						Voir
					

				

			 
 
					endwhile;
 		$posts_html = ob_get_contents(); 
   		ob_end_clean(); 
	else:
		$posts_html = 'Aucun résultat.
';
	endif;
 	echo json_encode( array(
		'posts' => json_encode( $query->query_vars ),
		'max_page' => $query->max_num_pages,
		'found_posts' => $query->found_posts,
		'content' => $posts_html
	) );
	die();
}

Le bouton ajax load more

Ici, mon action ajax s’appelle: loadmoreformationbutton

Dans ma fonction cc_formation_loadmore_ajax_handler, je crée la même boucle que dans mon modèle de page et custom post type page-formation.php.

Le sytème de filtre

Pour mes filtres, mon action ajax s’appelle : ccformationfilter, le même nom que la valeur de mon champs caché dans le formulaire de filtrage.

Je crée une première boucle pour mon bouton « all », sans distinction de catégorie:

$terms = get_terms( array( 'taxonomy' => 'categories-formations' ) );

Juste en dessous, je crée une deuxième boucle qui me ramène les articles de la catégorie sélectionnée par l’utilisateur

$args['tax_query'] = array(
			array(.....

'terms' => $_POST['category_formation_filters'],

Le fichier js

Comme je l’ai indiqué plus haut, on doit faire appel à un nouveau fichier js que j’ai appelé load-more.js

A l’intérieur, on va créer nos deux fonctions, pour les filtres et le bouton load more.

jQuery(function($){

/* LOAD MORE FUNCTION ON FORMATION ARCHIVE PAGE */
$('#cc_formation_loadmore').click(function(){
   data = {
    'action': 'loadmoreformationbutton', // le nom de mon action ajax
    'query': posts_myajax, // ma variable attribuée dans le fichier page-formation.php
    'page' : current_page_myajax // ma variable attribuée dans le fichier page-formation.php
  };
  $.ajax({
    url : '/monsite/wp-admin/admin-ajax.php', // AJAX handler
    data : data,
    type : 'POST',
    beforeSend : function ( xhr ) {
      $('#cc_formation_loadmore').text('Recherche...'); // ici l'ID de mon bouton load more
    },
    success : function( posts ){
      if( posts ) {

        $('#cc_formation_loadmore').text( 'Afficher plus de formations' );
        $('#cc_formation_wrap').append( posts ); 
       current_page_myajax++;

        if ( current_page_myajax == max_page_myajax )
          $('#cc_formation_loadmore').hide(); 

      } else {
        $('#cc_formation_loadmore').hide(); 
      }
    }
  });
  return false;
});

/* FILTERING FUNCTION ON FORMATION ARCHIVE PAGE */
$('#formation_filters').change(function(){
  $.ajax({
    url : '/numgrade/wp-admin/admin-ajax.php',
    data : $('#formation_filters').serialize(), // form data
    dataType : 'json', 
    type : 'POST',

    success : function( data ){

      current_page_myajax = 1; 

      posts_myajax = data.posts;
     
      max_page_myajax = data.max_page; 
      
      $('#cc_formation_wrap').html(data.content); 
     
      if ( data.max_page < 2 ) {
        $('#cc_formation_loadmore').hide();
      } else {
        $('#cc_formation_loadmore').show();
      }
    }
  });
 
  return false;

});

});

La liaison entre tous ces fichiers

Pour que le tout fonctionne, il faut surtout bien faire attention à nommer les éléments de la même manière d’une page à l’autre.

Les différents ID et nom attribués dans les autres fichiers se retrouvent dans le js:

L’ID du conteneur principal : #cc_formation_wrap

L’ID de mon bouton load more : #cc_formation_loadmore

Le nom de mon action ajax : loadmoreformationbutton

L’ID de mon formulaire de filtrage : #formation_filters

mes variables crées dans le fichier page-formation.php : current_page_myajax , posts_myajax et max_page_myajax.

Recommandations :

Si malgré tout ce code vous ne parvenez pas à faire marcher le bouton loadmore en ajax ou le système de filtres, je vous invite à consulter les nombreux commentaires sur les pages suivantes : loadmore, filters, ajax et filtres, load more et pagination. De nombreux internautes posent des questions et d’autres y répondent. Vous devriez y trouver des pistes !

Si vous rencontrez un problème lors de l’affichage des articles, notamment au niveau du nombre de posts affichés, changez le paramètre « posts_per_page » et modifiez également les options dans le backoffice de wordpress dans Réglages / Lecture.

The post Filtrer ses custom post type et ajouter un bouton load more appeared first on Copier coller.

Créer un système de notation (rating/reviews) sur wordpress sans pugin

copier coller — Mon, 20 Apr 2020 16:00:36 +0000

Comment créer un système de notation interne sur wordpress ?

Dans ce tuto, on va voir comment mettre en place un système de notation simple, sans faire appel à un plugin. La plupart des plugins de notation sont de vrais systèmes intégrés, avec la création à la volée de custom post types, la possibilité pour l’utilisateur de noter ou de commenter via un formulaire, etc. Ce sont des solutions tout en un qui facilitent le travail des non développeurs, mais en réalité peu personnalisables.

Pour un besoin plus modeste, on va créer un système de notation propre, notamment grâce à la fonction wp_star_rating() intégrée d’office dans wordpress !

Ce dont on va avoir besoin :

un custom post type « avis » (cela marche aussi sur des articles bien sûr)
ACF dans sa version gratuite, pour générer des metabox additionnelles pour nos différentes notes.
Le codex pour le code de base.

Le codex et la fonction wp_star_rating( $args )

En fouillant un peu, on découvre en effet que wordpress dispose déjà d’une fonction dédiée à la notation par étoiie, d’où son nom : wp_star_rating ! Le codex explique brièvement comment l’implémenter sur son site. On va donc voir comment s’en servir.

Prérequis :

Selon le codex : » In order to use this function on the front end, your template must include the wp-admin/includes/template.php file and enqueue the appropriate dashicons CSS font information. »

L’appel du fichier template.php

On commence donc par appeler le fichier requis, avec ce bout de code à insérer dans le fichier functions.php

require_once( ABSPATH . 'wp-admin/includes/template.php' );

L’utilisation de la fonction

L’exemple donné un peu partout est le suivant :

if ( !function_exists( 'wp_star_rating' ) ) { 
    require_once ABSPATH . '/wp-admin/includes/template.php'; 
} 
  
// Optional. Array of star ratings arguments. 
$args = array( 
    'rating' => 0, 
    'type' => 'rating', 
    'number' => 0 
); 
  
// NOTICE! Understand what this does before running. 
$result = wp_star_rating($args);

Le style

Toujours selon le codex, cette fonction fait appel à la police Dashicon, et la doc recommande donc de l’installer ou de faire appel à ces icônes. Voici en bonus, le style par défaut donné en exemple. Ici, on voit qu’on a trois icônes, une étoile vide, une deuxième à moitié pleine, et une troisième entièrement colorée. Ces différentes icônes sont clairement nommées via les classes :

star-full
star-half
star-empty

Elles vont servir à indiquer la notation, puisque selon le codex, les chiffres sont « expressed in either a 0.5 rating increment, or percentage.« . Le 0.5 sera donc défini par l’icone à moitié vide dont la classe est « star-half ».

@font-face {
    font-family: "dashicons";
    src: url("../fonts/dashicons.eot");
}
 
@font-face {
    font-family: "dashicons";
    src: url(data:application/x-font-woff;charset=utf-8;base64,/* !! Large amount of data removed, see wp-includes/css/dashicons.css for complete data !! */) format("woff"),
        url("../fonts/dashicons.ttf") format("truetype"),
        url("../fonts/dashicons.svg#dashicons") format("svg");
    font-weight: normal;
    font-style: normal;
}
 
.star-rating .star-full:before {
    content: "\f155";
}
 
.star-rating .star-half:before {
    content: "\f459";
}
 
.star-rating .star-empty:before {
    content: "\f154";
}
 
.star-rating .star {
    color: #0074A2;
    display: inline-block;
    font-family: dashicons;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    line-height: 1;
    text-align: center;
    text-decoration: inherit;
    vertical-align: top;
    width: 20px;
}

Voilà, maintenant qu’on a les prérequis, on peut commencer !

Un exemple concret d’utilisation

Pour notre exemple, on va partir d’un besoin simple : dans notre site, l’utilisateur final doit pouvoir manuellement ajouter des notes à ses articles ou custom post type.

Ces notes seront affichées de différentes manières en fonction de la page : une note sur des vignettes, des étoiles ou des ronds sur une page archive.

Voici le rendu souhaité : à travers un widget qui affiche des vignettes en slider. Ici on a un simple chiffre.

Et ici dans une page archive, avec des vignettes les unes à la suite des autres. Ici on a à la fois le même chiffre et en plus des icônes.

Problématique

Quand on est face à une demande similaire, on peut se demander comment on va faire pour avoir d’un côté :

une notation avec des chiffres
Une notation avec des chiffres, et en dessous des notes représentées par des icônes.

L’admin doit pouvoir insérer manuellement ces données, mais l’idéal c’est que la note chiffrée soit la moyenne, calculée automatiquement, des notes affichées par thème.

On va donc imaginer dans un custom post type par exemple, un champ additionnel dans lequel l’admin insérera une notation chiffrée, de 1 à 5.

Puis on va imaginer trois champs additionnels pour les thème « Animation » / « Contenu » / « Organisation ». L’admin devra là aussi insérer manuellement une note, de 1 à 5.

Puisque la note chiffrée on la retrouve un peu partout sur le site, autant prévoir un champ automatisé, qui serait la moyenne des 3 autres notes insérées manuellement..

Création d’un custom post type

Commençons d’abord par créer notre custom post type « avis ». Celui ci dispose ici de deux taxonomies que je met ici, mais pour notre exemple, on en aura pas besoin.


/*AVIS*/
function cc_cpt_review() {
	/* Formation */
	$labels = array(
		'name'                => _x('Avis', 'Post Type General Name', 'text_domain'),
		'singular_name'       => _x('Avis', 'Post Type Singular Name', 'text_domain'),
		'menu_name'           => _x('Avis', 'text_domain'),
		'name_admin_bar'      => _x('Avis', 'text_domain'),
		'all_items'           => _x('Tous les Avis', 'text_domain'),
		'add_new_item'        => _x('Ajouter un nouvel Avis', 'text_domain'),
		'add_new'             => _x('Ajouter', 'text_domain'),
		'new_item'            => _x('Nouvel avis', 'text_domain' ),
		'edit_item'           => _x('Editer l\'avis', 'text_domain'),
		'update_item'         => _x('Mettre à jour l\'avis', 'text_domain'),
		'view_item'           => _x('Voir l\'avis', 'text_domain'),
		'search_items'        => _x('Rechercher un avis', 'text_domain'),
		'not_found'           => _x('Aucun avis trouvé', 'text_domain'),
		'not_found_in_trash'  => _x('Aucun avis trouvé dans la corbeille', 'text_domain'),
	);
	
	$args = array(
		'label'               => _x('Avis', 'text_domain'),
		'description'         => _x('Avis', 'text_domain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => 'avis',
		'rewrite'             =>  array( 'slug' => 'tous-les-avis' ),
		'capability_type'     => 'post',
		'show_in_rest'			=>'true',
	);
	register_post_type('avis', $args);	
}
add_action('init', 'cc_cpt_review', 10);



function cc_add_taxonomies_review() {
	// Catégorie de série
	$labels_cat_avis = array(
		'name'                       => _x( 'Catégories de l\'avis', 'taxonomy general name'),
		'singular_name'              => _x( 'Catégories de l\'avis', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher une catégorie'),
		'popular_items'              => __( 'Catégories populaires'),
		'all_items'                  => __( 'Toutes les catégories'),
		'edit_item'                  => __( 'Editer une catégorie'),
		'update_item'                => __( 'Mettre à jour une catégorie'),
		'add_new_item'               => __( 'Ajouter une nouvelle catégorie'),
		'new_item_name'              => __( 'Nom de la nouvelle catégorie'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer une catégorie'),
		'choose_from_most_used'      => __( 'Choisir parmi les catégories les plus utilisées'),
		'not_found'                  => __( 'Pas de catégories trouvée'),
		'menu_name'                  => __( 'Catégorie d\'avis'),
	);

	$args_cat_avis = array(

		'hierarchical'          => true,
		'labels'                => $labels_cat_avis,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'categories-avis' ),
	);

	register_taxonomy( 'categories-avis', 'avis', $args_cat_avis );
}
add_action( 'init', 'cc_add_taxonomies_review', 0 );

function cc_avis_level_taxonomies() {

	$labels_level_avis = array(
		'name'                       => _x( 'Niveaux de l\'avis', 'taxonomy general name'),
		'singular_name'              => _x( 'Niveau de l\'avis', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher un avis'),
		'popular_items'              => __( 'Niveaux populaires'),
		'all_items'                  => __( 'Tous les Niveaux'),
		'edit_item'                  => __( 'Editer un niveau'),
		'update_item'                => __( 'Mettre à jour un niveau'),
		'add_new_item'               => __( 'Ajouter un nouveau niveau'),
		'new_item_name'              => __( 'Nom de le nouveau niveau'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer un niveau'),
		'choose_from_most_used'      => __( 'Choisir parmi les niveaux les plus utilisés'),
		'not_found'                  => __( 'Pas de niveau trouvé'),
		'menu_name'                  => __( 'Niveau de l\'avis'),
	);

	$args_level_avis = array(
	
		'hierarchical'          => true,
		'labels'                => $labels_level_avis,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'niveau-avis' ),
	);

	register_taxonomy( 'niveau-avis', 'avis', $args_level_avis );
}
add_action( 'init', 'cc_avis_level_taxonomies', 0 );

Une fois crée, on retrouve notre CPT (custom post type) donc dans le backoffice du site, et on peut commencer à remplir des « avis », comme on le ferait pour un article.

Mais avant cela, on va créer des champs additionnels pour nos « avis » grâce à ACF.

Création de meta box ACF

On va donc créer un groupe de champs propre à nos « avis ». A l’intérieur, le premier champ à créer sera la « note » globale. On choisit comme type de champ : « Nombre« .

On va ensuite créer nos trois autres notes »Animation », « Contenu » et « Organisation ».

Ce sont également des champs de type « nombre« , sauf que cette fois on précise une valeur minimale de 1 et une note maximale de 5.

Pour finir, on n’oublie pas de préciser que le groupe de champs ne devra apparaître que dans le « type de publication » – « Avis »

Pour le type de publication, on peut faire un peu ce qu’on veut, ça dépend vraiment de votre projet de base.

Dans la page d’édition de mon custom post type

Dans la page d’édition d’un « avis », on retrouve les différents champs ACF. On peut donc renseigner manuellement une note, en tapant directement un chiffre ou en s’aidant des flèches de navigation qui apparaissent au survol du champ. Petite précision, si vous tapez un chiffre le champ l’acceptera, quelqu’il soit, alors que si on utilise les flèches, on est bien limité de 1 à 5.

Attention : pour l’instant il ne faut rien indiquer dans le champs « note », celui-ci est censé se remplir tout seul, grâce à une fonction qui fera la moyenne des trois autres notes.

Créer le système de notation

Dans le fichier pnp de son CPT, on va maintenant appeler nos différents champs ACF, afin d’afficher nos notes.

Tout d’abord, j’appelle le champ « note » qui va contenir ma note globale. C’est le gros 4.5/5, 2.7/5 que vous voyez sur les images plus haut. Pour l’instant il ne doit rien afficher, puisqu’on n’a pas encore rempli ce champ.


																	$note = get_field('note');
									if($note): 
									 $args = array(
									   'rating' => $note,
									   'type' => 'rating',
									   'number' => '',
									);?>
									
										/5

Ici je ramène la valeur de mon champs avec le get_field (‘note’); Je la mets dans une variable et la passe comme argument de ma fonction wp_star_rating();

D’un côté je veux afficher la valeur du champs, donc une note :

/5

J’utilise la fonction round(), avec le 1 pour arrondir à une décimale après la virgule.

De l’autre côté, ou juste à côté plutôt je veux afficher le même résultat mais en icône. J’affiche donc directement la fonction avec mes arguments, wordpress s’occupe du reste. Si ma note est 4.5/5 par exemple, il va appeler 4 icones pleine, puis une à moitié vide.

Ce bout de code sera à terme censé m’afficher ca :

Ensuite, pour afficher les notes du dessous j’appelle de la même manière les valeurs de mes autres champs:

		
		
						
							
																	if(get_field('animation'))
									{ 	$animation = get_field_object('animation');
										echo '' . $animation['label'] .'
';
									}

									if(get_field('contenu'))
									{ 	$contenu = get_field_object('contenu');
										echo '' . $contenu['label'] .'
';
									}
									if(get_field('organisation'))
									{ 	$organisation = get_field_object('organisation');
										echo '' . $organisation['label'] .'
';
									}
								?>
							

							
							
								$animation = get_field('animation');
								if($animation):
								 $args = array(
								   'rating' => $animation,
								   'type' => 'rating',
								   'number' => '',
								);?>
								
								

								

																$contenu = get_field('contenu');
								if($contenu):
								 $args = array(
								   'rating' => $contenu,
								   'type' => 'rating',
								   'number' => '',
								);?>
								
								

								

																$organisation = get_field('organisation');
								 if($organisation):
								 $args = array(
								   'rating' => $organisation,
								   'type' => 'rating',
								   'number' => '',
								);?>

Un get_field() à chaque fois pour récupérer la valeur, et je passe la variable dans les arguments de ma fonction.

Cela est censé m’afficher des icônes comme ci-dessous.

Si vous utilisez dashicons et les icônes d’étoiles par défaut fourni dans le code css plus haut, vous aurez ici des étoiles à la place des ronds. On va voir plus bas comment mettre ses propres icônes.

Ici, comme le texte utilisé correspond aux titres de mes champs ACF, je peux directement utiliser la fonction get_field_object pour récupérer l’ensemble des attributs de mon champ, et en extraire le titre ou « label« . Ce sont les titres « Animation », « Contenu » et « Organisation » que vous voyez plus haut.

if(get_field('animation'))
									{ 	$animation = get_field_object('animation');
										echo '' . $animation['label'] .'
';
									}

Dans un widget d’avis, sur lesquels ne figure que la note globale, j’utilise exactement le même code


																	 if($note){ 	
									
									echo '' . round($note,1) . '/5
';
									}
								?>

Ici il n’y a pas d’étoile ou d’icône, juste la valeur de mon champ « note ».

La fonction de calcul

Maintenant on va voir comment on peut faire en sorte que le champs ACF « note » soit calculé automatiquement.

Pour cela on va devoir insérer une fonction de calcul à l’intérieur du hook ACF ‘acf/save_post‘.

Voici la fonction, à placer dans le fichier functions.php

function my_acf_save_post( $post_id ) {
    
// get new value
$animation = get_field('animation');
$contenu = get_field('contenu');
$organisation = get_field('organisation');
    
// do something
$note_globale = $animation + $contenu + $organisation;
$note_finale = $note_globale / 3;
$note = number_format($note_finale,1);
update_field('note', $note, $post_id);	
}
add_action('acf/save_post', 'my_acf_save_post', 20);

Comme vous pouvez le voir, c’est assez simple. On récupère la valeur de nos trois champs ACF « Animation », « Contenu » et « Organisation ».

On les additionne et on met la somme dans une variable. Puisque ca doit faire la moyenne de trois note, on divise par trois. On met le résultat dans une nouvelle variable. Cette variable, on la passe dans la fonction number_format

number_format($note_finale,1);

Le 1 sert à limiter à une, le nombre de décimale après la virgule. Pourquoi number_format et pas round() ? Ne me demandez pas, ici round() ne marche tout simplement pas !

Enfin, on utilise la fonction update_field(); pour mettre à jour le champ « note » laissé vide jusque là.

Maintenant une fois que vous aurez rempli les trois champs, Vous pourrez enregistrez votre page à l’édition, rechargez en faisant un Ctrl F5, et le champ affichera la moyenne directement !

Le style personnalisé

Personnellement, dans ce projet, je n’ai pas appelé la bibliothèque dashicons. Puisque je dois afficher des ronds et non des étoiles, je vais devoir trouver une solution personnalisée.

En fait j’utilise les même classes que celles utilisées ou générées par la fonction wp_star_rating( $args ) et j’appelle simplement en background mes images perso. Les images, soit on les crée soit-même, soit on utilise des images récupérées sur le net, sur flaticon ou tout autre site d’icône.

.star-rating{
	display:inline-block;
}
.star-rating .star-full:before {
    content: "";
    background: url(img/full.png);
    display: inline-block;
    position: relative;
    background-size: 10px;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}
.star-rating .star-half:before {
    content: "";
    background: url(img/mid-full.png);
    display: inline-block;
    position: relative;
    background-size: 10px;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}
.star-rating .star-empty:before {
    content: "";
    background: url(img/empty.png);
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-size: 10px;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}
.star-rating .star {
    display: inline-block;
    vertical-align: top;
}

Voilà donc comment intégrer assez simplement un système de notation, plutôt statique, mais qui peut faire son effet !

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

The post Créer un système de notation (rating/reviews) sur wordpress sans pugin appeared first on Copier coller.

Affichage alterné pour site multilingue

copier coller — Sat, 18 Apr 2020 18:35:37 +0000

Comment afficher différents contenus en fonction de la langue?

Tout dépend du contexte, mais dans certains cas, et pour certains thèmes wordpress, il se peut qu’on ait besoin d’afficher un certain contenu en français, et un autre en anglais par exemple :

Si vous utilisez WMPL :


    Votre contenu hmlt fr

 	votre contenu html en

Si vous utilisez Polylang:

  				$currentlang = get_bloginfo('language');
    			if($currentlang=="fr-FR"): ?>
		
				votre conteneu fr
				    			// si la langue affichee est l'anglais US
    			elseif($currentlang=="en-GB"):?>

				votre conteneu en

Chaque plugin a ses petites nuances de syntaxe, mais la logique est la même derrière !

The post Affichage alterné pour site multilingue appeared first on Copier coller.

Filtrer ses articles et ajouter un bouton « loadmore »

copier coller — Sat, 18 Apr 2020 18:22:55 +0000

Comment créer un filtre et un bouton ajax load more pour vos articles ?

Aujourd’hui on va voir comment créer un système de filtre (classification) pour les articles, et ajouter une navigation ajax grâce à un bouton load more.

Les sources

Le code s’inspire très largement de l’excellent tuto de rudrastyh, sauf que nous on ne va pas utiliser le même système de filtres. Dans son tutoriel, rudrastyh utilise des champs select qu’il relie entre eux. Dans notre exemple, on va partir sur des checkbox ou boutons radios, stylisés en bouton. Pour une simple liste en ul>li, le code sera le même.

Je me suis également appuyé sur le tuto d’Alicia ramirez, qui en fait une utilisation plus simple en utilisant isotope.js.

On va partir ici d’un cadre relativement simple, celui des articles classiques de wordpress.

Un affichage original

On va en plus permettre un affichage original de nos articles, avec un système en colonnes, qui se reproduira à chaque filtrage .

Voici donc le résultat auquel on veut parvenir :

L’originalité de mon exemple, c’est qu’au clic sur n’importe lequel des filtres, la présentation des vignettes d’articles sera la même, avec toujours en premier, une vignette de 12 colonnes, ensuite 6, puis 4.

Ce dont on va avoir besoin :

Des articles. Cela paraît évident, donc il faut créer des articles pour que le système fonctionne.
Des catégories : liez vos articles à des catégories, les boutons des filtres représentent justement vos catégories.
Une grille en colonne, j’utilise ici une grille flexbox originale que vous pouvez trouver ici.

La structure de base

Je repars ici de mon exemple précédent, auquel je rajoute le système de filtres. Je suis dans ma page blog, donc dans mon fichier index.php ou home.php.


		
		
						single_post_title('', '
' );
			?>
		

	

	
		
			Toutes

						if( $terms = get_terms( array( 'taxonomy' => 'category' ) ) ) :
			foreach( $terms as $term ) :
			echo '' . $term->name . '
';
			endforeach;
			endif;
			?>
			
			
		

	

		$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$args = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => 5,
		'paged' => $paged

	);
	$query = new WP_Query( $args ); ?>
		if ( $query->have_posts() ) :
	$count = (int)0;?>
	
				while ( $query->have_posts() ) : $count++;
		$query->the_post();
		if($count == 1){ // Si c'est le premier article de la liste, entour le d'une clase 12 colonnes
			$span = 'flex-col-xs-12';
		}
		if($count == 2 || $count == 3){// Si c'est le deuxième et troisième article de la liste, entour le d'une clase 6 colonnes
			$span = 'flex-col-sm-6';

		}
		if($count > 3){ // sinon pour tous les suivants, répartis les en 3 colonnes
			$span = 'flex-col-sm-4';

		}
		//If its not 3 or higher, increase the count
		$termsArray = get_the_terms($post->ID, "category");  
		$termsString =""; 
		foreach ( $termsArray as $term ) {  
			$termsString .= $term->slug;  
		}
		?>
		
			>
				
										if ( has_post_thumbnail() ) { 
						if($count == 1){
							the_post_thumbnail('blog_featured');										
						}else{
							the_post_thumbnail();
						}
					}

					if ( 'post' === get_post_type() ) :
					?>
					
												numgrade_category_sticker(); 	
						?>
					


					
				


				
					
												if ( is_singular() ) :
						the_title( '', '
' );
						else :
						the_title( '', '
' );
						endif;
						?>
					

					
						
					

										if($count == 1){ ?>
					
						Lire
					

					
				

				
				
					Lire
				

				
			

		



			
	
 					

		if (  $wp_query->max_num_pages > 1 ) :
	echo 'Voir plus d\'articles
'; 
	endif;

	else :

	get_template_part( 'template-parts/content', 'none' );

	endif;
	?>

Le système de filtres

Le système de filtres est assez simple, c’est un code que l’on peut retrouver un peu partout, notamment sur stackoverflow, puisque tout le monde se base sur les mêmes tutoriels, celui d’Alicia Ramirez par exemple ! C’est évidemment à personnaliser en fonction de ses besoins.


Toutes

if( $terms = get_terms( array( 'taxonomy' => 'category' ) ) ) :
foreach( $terms as $term ) :
echo '' . $term->name . '
';
endforeach;
endif;
?>

C’est donc un simple formulaire, contenant un bouton radio « all » censé réinitialiser la recherche ou le filtrage. Ensuite dans une boucle on crée autant de boutons radios qu’il y a de catégories, et pour chacune d’entre elle, on récupère l’id, le nom ou le slug.

Il faut faire très attention aux noms données aux éléments : Choisissez des noms précis et gardez-les, il faut avoir un peu de rigueur là-dessus car on va les retrouver un peu partout dans le système :

l’ID du formulaire : id= »post_filters »
le nom de nos boutons radio : name= »category_filters »
la valeur du champ caché pour envoyer le formulaire: value= »ccfilter »

L’article en lui-même

La boucle principale va donc nous ramener nos articles. Ici, comme précisé au début, j’affiche grâce à un compteur que j’incrémente, une disposition en colonne, comme sur l’image. Le code est propre à mon projet, à vous de styliser ça à votre façon !

L’essentiel, c’est que l’article soit disposé dans un conteneur, ici je lui donne l’ID: id= »cc_posts_wrap ». Le système de filtres, ainsi que le bouton load more sont donc à l’extérieur de ce conteneur.

Le bouton load-more

Enfin, tout à la fin on place notre bouton load more

if (  $wp_query->max_num_pages > 1 ) :
echo 'Voir plus d\'articles
';

Le moteur des filtres et bu bouton ajax

Voici tout le code à insérer dans functions.php

/*FUNCTION FILTER AND AJAX LOAD MORE*/
add_action( 'wp_enqueue_scripts', 'cc_script_and_styles');
function cc_script_and_styles() {
	if ( is_home() || is_category() || is_archive()) {
	global $wp_query;
	wp_register_script( 'cc_scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery') );
	wp_localize_script( 'cc_scripts', 'cc_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
		'max_page' => $wp_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'cc_scripts' );
 }
}
/*AJAX LOAD MORE AND FILTERS*/
add_action('wp_ajax_loadmorebutton', 'cc_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmorebutton', 'cc_loadmore_ajax_handler');
 
function cc_loadmore_ajax_handler(){
	$params = json_decode( stripslashes( $_POST['query'] ), true ); 
	$params['paged'] = $_POST['page'] + 1; 
	$params['post_status'] = 'publish';
	query_posts( $params );

	if( have_posts() ) :
		while( have_posts() ): the_post();
			$termsArray = get_the_terms($post->ID, "category");  
			 $termsString =""; 
			 foreach ( $termsArray as $term ) {
			 $termsString .= $term->slug;  
			 }
			 ?>
 			
				>
					
													if ( has_post_thumbnail() ) { 
						
						 		the_post_thumbnail();
						 	}
						 if ( 'post' === get_post_type() ) :
							?>
							
																numgrade_category_sticker(); 	
								?>
							

						
					

					
						
															the_title( '', '
' );
							?>
						

						
							
						

					

					
							Lire
						

				

			

					endwhile;
	endif;
	die; 
}
 
add_action('wp_ajax_ccfilter', 'cc_filter_function'); 
add_action('wp_ajax_nopriv_ccfilter', 'cc_filter_function');
 
function cc_filter_function(){
    if( isset( $_POST['all'] ) )
    	$terms = get_terms( array( 'taxonomy' => 'category' ) );
            $args['tax_query'] = array(
                array(
                    'taxonomy' => 'category',
                    'field' => 'id',
                    'terms' => $terms,
                    "posts_per_page" => 5
                )
            );
	if( isset( $_POST['category_filters'] ) )
	    $args['tax_query'] = array(
	        array(
	            'taxonomy' => 'category',
	            'field' => 'id',
	            'terms' => $_POST['category_filters'],
	            "posts_per_page" => 5
	        )
	    );
		query_posts( $args );
	global $wp_query;
	if( have_posts() ) : $count = (int)0;
 		ob_start(); 
		while( have_posts() ): $count++;
		the_post();
 		if($count == 1){
				$span = 'flex-col-xs-12';
			}
			if($count == 2 || $count == 3){
		   	$span = 'flex-col-sm-6';
			}
			if($count > 3){
		   	$span = 'flex-col-sm-4';
			}
			 $termsArray = get_the_terms($post->ID, "category");  
			 $termsString =""; 
			 foreach ( $termsArray as $term ) { 
			 $termsString .= $term->slug;  
			 }
			 ?>
 			 
				>
					
													if ( has_post_thumbnail() ) { 
								if($count == 1){
						 		the_post_thumbnail('blog_featured');										
							}else{
						 		the_post_thumbnail();
						 	}
						}			 
						 if ( 'post' === get_post_type() ) :
							?>
							
																numgrade_category_sticker(); 	
								?>
							

						
					

					
						
														if ( is_singular() ) :
								the_title( '', '
' );
							else :
								the_title( '', '
' );
							endif;
							?>
						

						
							
						

												if($count == 1){ ?>
							
								Lire
							

						
					

					
					
						Lire
					

					
				

			

					endwhile;
 		$posts_html = ob_get_contents(); 
   		ob_end_clean(); 
	else:
		$posts_html = 'Aucun résultat
';
	endif;

 	echo json_encode( array(
		'posts' => json_encode( $wp_query->query_vars ),
		'max_page' => $wp_query->max_num_pages,
		'found_posts' => $wp_query->found_posts,
		'content' => $posts_html
	) );
	die();
}

Le code est à diviser en trois étapes:

1-D’abord, l’appel aux scripts ajax de wordpress

add_action( 'wp_enqueue_scripts', 'cc_script_and_styles');
function cc_script_and_styles() {
	if ( is_home() || is_category() || is_archive()) {
	global $wp_query;
	wp_register_script( 'cc_scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery') );
	wp_localize_script( 'cc_scripts', 'cc_loadmore_params', array(
		'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
		'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
		'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
		'max_page' => $wp_query->max_num_pages
	) );
 
 	wp_enqueue_script( 'cc_scripts' );
 }
}

/*AJAX LOAD MORE AND FILTERS*/
add_action('wp_ajax_loadmorebutton', 'cc_loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmorebutton', 'cc_loadmore_ajax_handler');

Dans notre fonction wp_enqueue_script, on fait appel à un premier fichier js qui va contenir tout le code nécessaire au bon fonctionnement du système de filtre et du rechargement ajax des articles. On voit ca juste après.

Puis on charge le fichier ‘admin-ajax.php‘ intégré par défaut dans wordpress.

Vous pouvez voir que j’entoure l’appel au script d’une condition :

if ( is_home() || is_category() || is_archive()) {...}

Comme j’utilise ce système aussi pour des custom post type, je limite ici l’appel des scripts au blog, aux catégories et aux archives puisque j’utilise ce même script pour mes catégories et mes archives. Comme l’appel au script ajax est différent pour les custom post type, j’évite ainsi une interférence entre les deux.

2-Ajax load more button

Les deux lignes de codes qui suivent nous servent à créer nos actions ajax. Les premières serviront au bouton ajax load more, et plus bas dans le code, on va retrouver la même chose mais cette fois pour les filtres ajax.

Dans notre add_action et pour faire fonctionner notre ajax, les deux « mots clés » wp_ajax_ » et « wp_ajax_nopriv_ » sont obligatoires, et ils doivent être suivis du nom de votre action.

Pour le bouton load_more, je leur donne un nom significatif « loadmorebutton« . Le nom donné en deuxième argument : « cc_loadmore_ajax_handler » est le nom de la fonction située juste en dessous.

Comme on le voit, cette fonction « function cc_loadmore_ajax_handler(){ } » contient une boucle pour afficher mes articles. Ici, je n’ai pas besoin de reproduire l’affichage avec différentes tailles de colonnes. Comme les articles doivent s’afficher à la suite, je souhaite plutôt conserver un affichage homogène avec les derniers articles. Ils s’afficheront donc normalement, c’est à dire en 3 colonnes.

Filters functions

Ensuite vient le code pour le filtrage des articles.

Ici, on retrouve les deux mots clés obligatoires, suivi du nom de mes actions :

add_action('wp_ajax_ccfilter', 'cc_filter_function'); 
add_action('wp_ajax_nopriv_ccfilter', 'cc_filter_function');

Le nom de l’action donné ici: « ccfilter« , doit être le même que celui de la valeur de mon champs caché dans le formulaire de filtrage, souvenez-vous.

Comme à chaque clic sur un bouton de filtrage la page devra « effacer les articles » pour afficher ceux d’une autre catégorie, je souhaite conserver mon affichage original montré dans l’image. La boucle est donc exactement la même que dans mon fichier index.php (ou home.php)

Pour le bouton « all », c’est assez simple en fait, on crée un boucle sans distinction de catégorie :

On ramène toutes les catégories, avec get_terms suivi du nom de la taxonomie qui est ici category (système classique de wordpress). On aurait aussi pu faire un simple get_categories().

$terms = get_terms( array( 'taxonomy' => 'category' ) );

Dans les arguments de la requête, on ne fait pas de distinction :

'terms' => $terms,

Dans la boucle suivante par contre, on fait en sorte de distinguer chaque catégorie avec un tax_query().

tax_query:: $args['tax_query'] = array(
array(

et dans les arguments, on ramène la catégorie qui a été sélectionnée par l’utilisateur :

'terms' => $_POST['category_filters'],

Notez que cette deuxième grande boucle est entourée des tags

ob_start(); 
 (...)
$posts_html = ob_get_contents(); 
  ob_end_clean(); 
(...)


echo json_encode( array(
		'posts' => json_encode( $wp_query->query_vars ),
		'max_page' => $wp_query->max_num_pages,
		'found_posts' => $wp_query->found_posts,
		'content' => $posts_html
	) );
 	
	die();

Vous pouvez vous référer à l’article cité ou aller sur php.net pour comprendre l’utilité des fonctions ob_start(); ob_end_clean(); et ob_get_contents();

Les fonctions js

Dans notre fonction wp_enqueue_script, on a vu qu’on faisait appel à un fichier js

wp_register_script( 'cc_scripts', get_stylesheet_directory_uri() . '/js/script.js', array('jquery') );

Il va donc falloir créer ce fichier. Donnez-lui le nom que vous voulez, bien sûr le même que dans cette fonction wp_register_script().

Et voici donc tout le code à insérer dans le fichier js

 jQuery(function($){

	 /* LOAD MORE FUNCTION ON FORMATION ARCHIVE PAGE */
	 $('#cc_loadmore').click(function(){

		 $.ajax({
			 url : cc_loadmore_params.ajaxurl, // AJAX handler
			 data : {
				 'action': 'loadmorebutton', // le paramètre pour admin-ajax.php
				 'query': cc_loadmore_params.posts, // le paramètre de la loop utilisée par wp_localize_script()
				 'page' : cc_loadmore_params.current_page // la page en cours
			 },
			 type : 'POST',
			 beforeSend : function ( xhr ) {
				 $('#cc_loadmore').text('Recherche...'); // mettre ici let exte de son choix pour le chargement des articles
			 },
			 success : function( posts ){
				 if( posts ) {

					 $('#cc_loadmore').text( 'Voir plus d\'articles' );
					 $('#cc_posts_wrap').append( posts ); // on "append" les articles supplémentaires
					 cc_loadmore_params.current_page++;

					 if ( cc_loadmore_params.current_page == cc_loadmore_params.max_page ) 
						 $('#cc_loadmore').hide(); // on cache le bouton s'il n'y a plus d'articles

				 } else {
					 $('#cc_loadmore').hide(); // s'il n'y a rien à afficher on cache le bouton
				 }
			 }
		 });
		 return false;
	 });
          /* FILTERING FUNCTION ON FORMATION ARCHIVE PAGE */
            $('#post_filters').change(function(){

              $.ajax({
                url : cc_loadmore_params.ajaxurl,
                data : $('#post_filters').serialize(), // form data
                dataType : 'json', // on utilise le format json pour passer directement côté serveur
                type : 'POST',

                success : function( data ){
                  
                  cc_loadmore_params.current_page = 1; 
                  
                  cc_loadmore_params.posts = data.posts;
                 
                  cc_loadmore_params.max_page = data.max_page; 
                  
                  $('#cc_posts_wrap').html(data.content); 
               
                  if ( data.max_page < 2 ) {
                    $('#cc_loadmore').hide();
                  } else {
                    $('#cc_loadmore').show();
                  }
                }
              });
              // return folse pour ne pas envoyer le formulaire
              return false;
           
            });
});

Comme on le voit ici , on retrouve les différents noms donnés à nos élements :

#cc_loadmore c’est l’ID de notre bouton ajax load more dans notre fichier index.php ou home.php.

‘action’: ‘loadmorebutton’, c’est donc le nom de notre action ajax,

cc_loadmore_params c’est le nom donné en argument à notre fonction wp_localize_script()

#cc_posts_wrap c’est le nom de notre conteneur principal, dans notre fichier index.php ou home.php.

#post_filters, c’est l’ID de notre formulaire de filtrage.

Utiliser le même système pour ses pages d’archives

Pour aller plus loin, vous pouvez aussi faire fonctionner votre bouton ajax load more dans vos pages d’archives.

Je mets ici tout le code d’une page archive, dans laquelle j’intègre ce bouton. C’est le même css finalement que dans la page blog, et on utilise le même appel au script js. J’utilise donc la fonction function cc_loadmore_ajax_handler(){} et la boucle contenue à l’intérieur



	
		
			
					
					

					
												the_archive_title( '', '
' );
						the_archive_description( '', '
' );
						?>
					

				

				
				
								/* Start the Loop */
				while ( have_posts() ) : the_post(); ?>

					
						>
							
																if ( has_post_thumbnail() ) { 
									if($count == 1){
										the_post_thumbnail('blog_featured');										
									}else{
										the_post_thumbnail();
									}
								}

								if ( 'post' === get_post_type() ) :
								?>
								
																		numgrade_category_sticker(); 	
									?>
								


								
							


							
								
																		if ( is_singular() ) :
									the_title( '', '
' );
									else :
									the_title( '', '
' );
									endif;
									?>
								

								
									
								



							


							
								Lire
							


						

					


		
		
 
					global $wp_query; // you can remove this line if everything works for you
			if (  $wp_query->max_num_pages > 1 ) :
				echo 'Voir plus d\'articles
'; // you can use  as well
			endif;
		else :
			get_template_part( 'template-parts/content', 'none' );

		endif;
		?>
				

		

	



get_footer();?>

Dans un prochain article, on va voir comment pousser encore plus loin et faisant la même chose avec les custom post type.

Recommandations :

The post Filtrer ses articles et ajouter un bouton « loadmore » appeared first on Copier coller.

Créer des blocs de différentes tailles dans vos pages d’archives

copier coller — Wed, 15 Apr 2020 18:04:56 +0000

Comment créer des pages d’archives originales ?

Aujourd’hui on va voir ou revoir une façon de disposer ses blocs d’articles différemment.

Dans un thème classique, toutes les vignettes d’articles sont réparties de manière équivalentes, faisant toutes la même taille et la même largeur.

Le schéma

Voici ce à quoi on veut parvenir

Le schéma a été fait rapidement, mais en gros on veut obtenir une première vignette qui s’étend sur 12 colonnes, puis 6, puis 4.

Je donne d’autres exemples d’affichages originaux dans des précédents articles, ici, là, ou encore ici.

Le code

Ici, je n’utilise pas bootstrap, mais une grille flexbox équivalente. Vous pouvez la retrouver ici.

				$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
				$args = array(
				    'post_type' => 'post',
				    'post_status' => 'publish',
				    'posts_per_page' => 5,
				    'paged' => $paged
				   
				);
				$query = new WP_Query( $args ); ?>
								if ( $query->have_posts() ) :
				$count = (int)0;?>
				  	
												while ( $query->have_posts() ) : $count++;
							$query->the_post();
							if($count == 1){
								$span = 'flex-col-xs-12';
								
								
								
							}
							if($count == 2 || $count == 3){
						   	$span = 'flex-col-sm-6';
						   	
							}
							if($count > 3){
						   	$span = 'flex-col-sm-4';
						   	
							}
							//If its not 3 or higher, increase the count
							$termsArray = get_the_terms($post->ID, "category");  //Get the terms for this particular item
							 $termsString =""; //initialize the string that will contain the terms
							 foreach ( $termsArray as $term ) { // for each term 
							 $termsString .= $term->slug;  
							 }
						?>
								 
									>
										
																							if ( has_post_thumbnail() ) { 
													if($count == 1){
											 		the_post_thumbnail('blog_featured');										
												}else{
											 		the_post_thumbnail();
											 	}
											}
											 
											 if ( 'post' === get_post_type() ) :
												?>
												
																										numgrade_category_sticker(); 	
													?>
												


											
										


										
											
																								if ( is_singular() ) :
													the_title( '', '
' );
												else :
													the_title( '', '
' );
												endif;
												?>
											

											
												
											

																						if($count == 1){ ?>
												
													Lire
												

											
										

										
										
											Lire
										

										
									

								



								?>

L’idée pour ce genre de cas est toujours la même. On crée notre boucle, et à l’intérieur, on crée un compteur qu’on va incrémenter. Dans ce cas particulier, on place nos différentes tailles de colonnes dans une variable, et on dit : »si c’est le premier article, entoure mon article d’une classe « flex-col-sm-12 » (12 colonnes), Si ce sont les deuxième et troisième article, entour les d’une classe « flex-col-sm-6 ». Puis, pour toutes les autres, attribue leur une classe « flex-col-sm-4 » pour créer 3 colonnes.

A vous ensuite de styliser le tout pour un rendu optimal, comme ici.

The post Créer des blocs de différentes tailles dans vos pages d’archives appeared first on Copier coller.

Préremplir les champs d’un formulaire à l’aide d’une chaîne de requête

copier coller — Fri, 10 Apr 2020 18:00:00 +0000

Comment personnaliser ses formulaires et les rendre dynamiques ?

Voici un tutoriel complet sur la possibilité de préremplir certains champs de formulaire.

Ce dont on a besoin

Nous allons ici utiliser :

un custom post type
Un widget
un formulaire Ninja form
des champs additionnels ACF

Le scénario

Le scénario est le suivant. Nous sommes dans un article ou un custom post type « formation ». Il s’agit de cours informatiques, répartis par catégories et par niveaux. Chaque post doit contenir des dates et des lieux spécifiques. Ces informations sont des « champ additionnels » ou « cutom fields » crées à l’aide d’ACF.

Dans la sidebar, on a un widget qui affiche les formations à venir. On les regroupe par ville puis par date de début et de fin.

Ces dernières sont entourées d’un lien dynamique qui doit renvoyer vers notre formulaire, en pré-remplissant certains champs. Par exemple, si je suis dans un article dont le titre est « python expert », et que je clique sur le premier lien « Orléans, du 18/05/2020 au 22/50/2020 », mon formulaire affichera alors en en-tête le titre et les informations de ville et de dates, comme ci-dessous.

Lorsque l’utilisateur valide le formulaire, on reçoit alors un mail indiquant entre autre les préférences de lieu et de date.

C’est parti !

Le custom post type

Notre custom post formation a deux taxonomies, une pour les catégories de formation, une deuxième pour le niveau des formations. Je mets ici le code entier de mon CPT.

function cc_formation_cpt() {
	/* Formation */
	$labels = array(
		'name'                => _x('Formations', 'Post Type General Name', 'text_domain'),
		'singular_name'       => _x('Formation', 'Post Type Singular Name', 'text_domain'),
		'menu_name'           => _x('Formations', 'text_domain'),
		'name_admin_bar'      => _x('Formations', 'text_domain'),
		'all_items'           => _x('Toutes les formations', 'text_domain'),
		'add_new_item'        => _x('Ajouter une nouvelle formation', 'text_domain'),
		'add_new'             => _x('Ajouter', 'text_domain'),
		'new_item'            => _x('Nouvelle formation', 'text_domain' ),
		'edit_item'           => _x('Editer la formation', 'text_domain'),
		'update_item'         => _x('Mettre à jour la formation', 'text_domain'),
		'view_item'           => _x('Voir la formation', 'text_domain'),
		'search_items'        => _x('Rechercher une formation', 'text_domain'),
		'not_found'           => _x('Aucune formation trouvée', 'text_domain'),
		'not_found_in_trash'  => _x('Aucune formation trouvée dans la corbeille', 'text_domain'),
	);
	
	$args = array(
		'label'               => _x('Formation', 'text_domain'),
		'description'         => _x('Formations', 'text_domain'),
		'labels'              => $labels,
		'supports'            => array('title', 'editor', 'thumbnail', 'comments', 'revisions', 'custom-fields'),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-admin-home',
		'show_in_admin_bar'   => true,
		'show_in_nav_menus'   => true,
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'query_var'           => true,
		'rewrite'             =>  array( 'slug' => 'toutes-nos-formations' ),
		'capability_type'     => 'post',
		'show_in_rest'			=>'true',
	);
	register_post_type('formation', $args);	
}
add_action('init', 'cc_formation_cpt', 10);



function cc_formation_category_taxonomies() {

	$labels_cat_formation = array(
		'name'                       => _x( 'Catégories de la formation', 'taxonomy general name'),
		'singular_name'              => _x( 'Catégories de la formation', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher une catégorie'),
		'popular_items'              => __( 'Catégories populaires'),
		'all_items'                  => __( 'Toutes les catégories'),
		'edit_item'                  => __( 'Editer une catégorie'),
		'update_item'                => __( 'Mettre à jour une catégorie'),
		'add_new_item'               => __( 'Ajouter une nouvelle catégorie'),
		'new_item_name'              => __( 'Nom de la nouvelle catégorie'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer une catégorie'),
		'choose_from_most_used'      => __( 'Choisir parmi les catégories les plus utilisées'),
		'not_found'                  => __( 'Pas de catégories trouvée'),
		'menu_name'                  => __( 'Catégorie de formation'),
	);

	$args_cat_formation = array(
		'hierarchical'          => true,
		'labels'                => $labels_cat_formation,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'categories-formations' ),
	);

	register_taxonomy( 'categories-formations', 'formation', $args_cat_formation );
}
add_action( 'init', 'cc_formation_category_taxonomies', 0 );

function cc_formation_level_taxonomies() {

	$labels_level_formation = array(
		'name'                       => _x( 'Niveaux de la formation', 'taxonomy general name'),
		'singular_name'              => _x( 'Niveau de la formation', 'taxonomy singular name'),
		'search_items'               => __( 'Rechercher un niveau'),
		'popular_items'              => __( 'Niveaux populaires'),
		'all_items'                  => __( 'Tous les Niveaux'),
		'edit_item'                  => __( 'Editer un niveau'),
		'update_item'                => __( 'Mettre à jour un niveau'),
		'add_new_item'               => __( 'Ajouter un nouveau niveau'),
		'new_item_name'              => __( 'Nom de le nouveau niveau'),
		'add_or_remove_items'        => __( 'Ajouter ou supprimer un niveau'),
		'choose_from_most_used'      => __( 'Choisir parmi les nivexau les plus utilisées'),
		'not_found'                  => __( 'Pas de niveau trouvé'),
		'menu_name'                  => __( 'Niveau de formation'),
	);

	$args_level_formation = array(
	
		'hierarchical'          => true,
		'labels'                => $labels_level_formation,
		'show_ui'               => true,
		'show_in_rest'			=> true,
		'show_admin_column'     => true,
		'query_var'             => true,
		'rewrite'               => array( 'slug' => 'niveau-formations' ),
	);

	register_taxonomy( 'niveau-formations', 'formation', $args_level_formation );
}
add_action( 'init', 'cc_formation_level_taxonomies', 0 );

Les champs ACF

Depuis le backoffice et les options d’Acf, je rajoute mes trois champs ville, date de début et date de fin.

Champ ville ou location

Pour le champ « ville », je choisi un champ select et renseigne les différentes options.

Champ date

Pour le champ « date_de_debut » et « date_de_fin« , je choisir le type « date » et son format.

Enfin, je précise les conditions d’affichage : ici le « type de publication » doit être égal à « Formation » (le nom de mon custom post type.)

Dans mon projet, je n’affiche pas ces champs dans le fichier single-formation. Ces articles ne doivent pas contenir de dates ni de lieu attitrés. Mais ces informations sont bien enregistrées en base de donnée au moment de l’édition du CPT. On va donc pouvoir les récupérer et les afficher ailleurs.

Le widget des « formations à venir »

Voici le code complet de mon widget.

	class Cc_Upcoming_Events extends WP_Widget {
	 		function __construct() {
	 		parent::__construct(
					'cc_upcoming_events', // Base ID
					__( 'Cc Upcoming Events', 'text_domain' ), // Name
					array( 'description' => __( 'Shows Formations dates', 'text_domain' ), ) // Args
			);
		}

	 
	 
	public function form( $instance ) {
		   $tax_id = '';
		    if( !empty( $instance['tax_id'] ) ) {
		    	 $tax_id = absint( $instance['tax_id'] ) ;
		 	}
		 	  $niveau_id = '';
		    if( !empty( $instance['niveau_id'] ) ) {
		    	 $niveau_id = absint( $instance['niveau_id'] ) ;
		 	}
		 $widget_defaults = array(
		    'title'         =>   'Upcoming Events',
		    'number_events' =>   5
		);
	 
		$instance  = wp_parse_args( (array) $instance, $widget_defaults );?>
		
		    
		    
		

		
		    
		    
		

		  
	            
	            
	        
	        


	        
	            
	            
	        
	        

		}
	 
	 
	   
	public function update( $new_instance, $old_instance ) {
	    $instance = $old_instance;
	 
	    $instance['title'] = $new_instance['title'];
	    $instance['number_events'] = $new_instance['number_events'];
		$instance['tax_id'] = ( ! empty( $new_instance['tax_id'] ) ) ? strip_tags( $new_instance['tax_id'] ) : '';
		$instance['niveau_id'] = ( ! empty( $new_instance['niveau_id'] ) ) ? strip_tags( $new_instance['niveau_id'] ) : '';
	    return $instance;
	}
	    
	 
	 
	public function widget( $args, $instance ) {
		echo $args['before_widget'];
	  	extract( $args );
	    $title = apply_filters( 'widget_title', $instance['title'] );
	    $tax_id     = absint( $instance['tax_id'] ) ;
		$niveau_id     = absint( $instance['niveau_id'] ) ;
	 	$args = array(
		    'post_type' => 'formation',
            'posts_per_page'    => $instance['number_events'],
            'tax_query' => array(
            	'relation' => 'AND',
                array(
                    'taxonomy' => 'categories-formations',
                    'field' => 'term_id',
                    'terms' => $tax_id,
                ),
                 array(
			        'taxonomy' => 'niveau-formations',
			        'field'    => 'term_id',
			        'terms'    =>  $niveau_id,
			    ),
            ),
           
            );

		$upcoming_events = new WP_Query($args);
		
		if ( $title ) {
		    echo $before_title . $title . $after_title;
		}
		// vars
	?>						 
		
		    		   
			$title = get_the_title();
				// First, group the posts by the city.
			$groups = array();
			foreach ( $upcoming_events->posts as $i => $p ) {
			    $city = get_field( 'ville', $p->ID );

			    if ( ! isset( $groups[ $city ] ) ) {
			        $groups[ $city ] = array();
			    }
			    $groups[ $city ][] =& $upcoming_events->posts[ $i ];
			}

			// Optional, sort the city names.
			ksort( $groups, SORT_FLAG_CASE );

			// Then display the posts.
			if ( ! empty( $groups ) ) {
			    echo '';
			    foreach ( $groups as $city => $posts ) {
			        if ( ! empty( $posts ) ) {
			            // Display city name.
			            echo '' . $city . '
';

			            // Display posts in that city.
			            echo '';
			            foreach ( $posts as $post ) {
			                $event_start_date = get_field( 'date_de_debut', $post->ID );
			                $event_end_date   = get_field( 'date_de_fin', $post->ID );
			                
			                echo ' Du ' . $event_start_date . ' au ' . $event_end_date . '
';				
			            }
			            echo '
';
			        }
			    }
			    echo '
'; // close .event_entries
			}
		 ?>
		
		 
				
		 
		echo $after_widget;
	}
}

Dans la fonction « form« , on a plusieurs champs select : un pour le nombre de post à afficher, un second pour ma taxonomie « catégorie », un dernier pour ma taxonomie « niveau ».

Pour pouvoir boucler sur notre CPT en fonction de ces deux taxonomies et des terms sélectionnés par l’utilisateur, on va créer la boucle avec une « multiple tax_query » comme expliqué dans le codex

	$args = array(
		    'post_type' => 'formation',
            'posts_per_page'    => $instance['number_events'],
            'tax_query' => array(
            	'relation' => 'AND',
                array(
                    'taxonomy' => 'categories-formations',
                    'field' => 'term_id',
                    'terms' => $tax_id,
                ),
                 array(
			        'taxonomy' => 'niveau-formations',
			        'field'    => 'term_id',
			        'terms'    =>  $niveau_id,
			    ),
            ),
           
            );

		$upcoming_events = new WP_Query($args);

Le reste du code nous permet, à travers des boucles imbriquées, d’afficher les custom post type, en les regroupant par ville. On a ainsi une répartition avec la ville en titre, et tous les CPT enregistrés avec la même ville dans une liste juste en dessous.

Le lien dynamique et notre query string

Dans le dernier foreach, on récupère nos custom field « date_de_debut » et « date_de_fin« , et on construit le lien avec notre requête dynamique. Je récupère aussi le titre de l’article avec $title = get_the_title(); , et les champs ACF.

  foreach ( $posts as $post ) {
			                $event_start_date = get_field( 'date_de_debut', $post->ID );
			                $event_end_date   = get_field( 'date_de_fin', $post->ID );
			                
			                echo ' Du ' . $event_start_date . ' au ' . $event_end_date . '
';				
			            }

Au besoin je récupère aussi les taxonomies choisies dans les champs select du widget.

Le formulaire : Ninja Form

Pour mon formulaire, j’utilise Ninja Form, mais d’autres proposent les mêmes fonctionnalités : wp_form, gravity form etc. C’est aussi possible avec Contact form 7 et le plugin contact form 7 dynamic text extension.

Avec la version gratuite de Ninja Form, construisez votre formulaire. Un tuto explique très bien comment créer et récupérer les données d’un lien dynamique dans Ninja Form.

Créer deux champs additionnels pour mes « query string »

Pour suivre mon exemple, je vais donc devoir créer deux champs additionnels : un pour afficher le titre du CPT de provenance, l’autre pour afficher les valeurs de mes champs ACF.

Je crée donc deux « lignes de texte« .

Querystring pour le titre du CPT

On efface les libellés, et dans les restrictions, on désactive la saisie. Si les restrictions ne s’affichent pas, il faut retourner dans les options du plugin et activer le mode « développeur ».

Dans l’affichage, je définis comme valeur par défaut ma première query string : {querystring:titre}. Le champ va donc récupérer ici ma variable titre insérée plus tôt dans mon lien.

Si je suis dans une formation dont le titre est « python expert » par exemple, je le retrouverai donc dans mon formulaire. On peut ensuite le styliser, comme ci-dessous.

Dans les « noms de classe personnalisées« , j’ajoute mes classes qui vont justement me servir à styliser mon titre : enlever les bordures, changer la taille de police, modifier les marges etc.

Querystring pour la ville et les dates

Mon deuxième champ va me permettre de récupérer les informations de ville et de dates envoyés depuis mon widget.

Ici aussi j’efface le libellé, je désactive la saisie. Je personnalise la valeur de ma chaîne de requête avec du texte additionnel. Je nomme mes tags exactement de la même manière que dans mon lien dynamique : {querystring:date_de_debut}, {querystring:date_de_fin} et {querystring:ville}. :

&ville=’. $city .’&date_de_debut=’ . $event_start_date .’&date_de_fin=’ . $event_end_date

Un autre affichage

Si pour une raison quelconque l’utilisateur peut accéder à la page du formulaire sans passer par le widget, il se peut que vous ayez envie de cacher l’en-tête. Sinon on verra une mention « Session du au », ce qui pourra paraître bizarre.

Dans ce cas, on peut tout à fait ne laisser que {querystring:date_de_debut}, {querystring:date_de_fin} {querystring:ville}. dans le champ « valeur par défaut » de ninja form et ajouter ces informations dans le html directement

&ville= à ‘. $city .’&date_de_debut= Session du’ . $event_start_date .’&date_de_fin= au ‘ . $event_end_date

Tester !!

Maintenant, au clic sur une des dates de mon widget, je suis redirigé vers mon formulaire, c’est la partie « http://localhost/monsite/inscription/ » de mon lien. Si vous avez bien fait les choses, vous verrez dans l’url vos query après le « ? » et les valeurs correspondantes à chaque query string.

N’hésitez pas, si vous avez des idées d’amélioration ou des corrections à apporter à ce tuto !

The post Préremplir les champs d’un formulaire à l’aide d’une chaîne de requête appeared first on Copier coller.