lab.elastik

a la une - Bloc 3

Derniers cours : a la une

Les cours sont classés par ordre où ils ont été donnés, du plus récent au plus ancien.

Totalement désactiver les commentaires dans WordPress

Totalement désactiver les commentaires dans WordPress

Vous trouverez ici toutes les fonctions à introduire dans functions.php afin de totalement désactiver les fonctionnalités liées aux commentaires dans WordPress.
				
					add_action('admin_init', function () {
    // Redirect any user trying to access comments page
    global $pagenow;
     
    if ($pagenow === 'edit-comments.php') {
        wp_safe_redirect(admin_url());
        exit;
    }
 
    // Remove comments metabox from dashboard
    remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
 
    // Disable support for comments and trackbacks in post types
    foreach (get_post_types() as $post_type) {
        if (post_type_supports($post_type, 'comments')) {
            remove_post_type_support($post_type, 'comments');
            remove_post_type_support($post_type, 'trackbacks');
        }
    }
});
 
// Close comments on the front-end
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
 
// Hide existing comments
add_filter('comments_array', '__return_empty_array', 10, 2);
 
// Remove comments page in menu
add_action('admin_menu', function () {
    remove_menu_page('edit-comments.php');
});
 
// Remove comments links from admin bar
add_action('init', function () {
    if (is_admin_bar_showing()) {
        remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
    }
});


				
			

Faire des requêtes personnalisées dans des Custom Post Types (CPT) contenant des Advanced Custom Fields (ACF)

Faire des requêtes personnalisées dans des Custom Post Types (CPT) contenant des Advanced Custom Fields (ACF)

Cet article fournit un exemple complet sur la manière dont je filtre les utilisateurs sur base de valeurs introduites via ACF (âge, genre…)

Etude cas d’une requête dans les Users

Dans quasiment tous les projets que je réalise en WordPress j’utilise des CPT combinés à des ACF. Dans mes pages j’utilise également régulièrement des filtres avec lesquels je charge en AJAX des contenus sur base de requêtes personnalisées. Ces requêtes sont basées sur des arrays qui contiennent:

  • le champ à comparer
  • la valeur à comparer avec la valeur contenue dans le champ de la DB
  • le type de comparaison « > = <« 

Il est ensuite possible d’inclure tous ces arrays dans la requête.

Dans l’exemple ci-dessous je charge des utilisateurs sur base de critères comme l’âge, la région, le genre etc. au moyen de la fonction get_users()

Dans cette fonction je passe les arrays que j’ai définis préalablement et que je décrirai plus bas

Requête au moyen de la fonction get_users() et meta_query

				
					$blogusers = get_users( array( 
    'role__in' => array(  'subscriber' ),
    //  'meta_key' => "genre",
     'meta_query' => array($arraygenre,$arrayage,$arrayregion,$arrayetudes,$arrayenfants),
     
     ) ); // recuperation des users sur base des filtres

				
			

Définition des arrays (que j’annule si une valeur vide est passée

				
					// filtre GENRE
// si pas de valeur dans ce filtre, on en fait un array vide comme ça pas pris en compte dans la requête
if ($genre == "tous") {
    $arraygenre = array();
} else {
    $arraygenre =  array(
        'key' => 'genre',
        'value' => $genre,
        'compare' => '='
    );
}


// filtre REGION
// si pas de valeur dans ce filtre, on en fait un array vide comme ça pas pris en compte dans la requête
if ($region == "tous") {
    $arrayregion = array();
} else {
    $arrayregion =  array(
        'key' => 'region',
        'value' => $region,
        'compare' => '='
    );
}


// filtre ETUDES
// si pas de valeur dans ce filtre, on en fait un array vide comme ça pas pris en compte dans la requête
if ($etudes == "tous") {
    $arrayetudes= array();
} else {
    $arrayetudes =  array(
        'key' => 'niveau_detudes',
        'value' => $etudes,
        'compare' => '='
    );
}


// filtre ENFANTS
// si pas de valeur dans ce filtre, on en fait un array vide comme ça pas pris en compte dans la requête
if ($enfants == "tous") {
    $arrayenfants= array();
} else {
    $arrayenfants =  array(
        'key' => 'enfants',
        'value' => $enfants,
        'compare' => '='
    );
}



// filtre AGE MIN ET MAX
$arrayage = array(
    array(
    'key' => 'age',
    'value' => $agemax,
    'compare' => '<='
    ),
        array(
            'key' => 'age',
            'value' => $agemin,
            'compare' => '>='
        )
);
				
			

Boucle à travers les résultats.

En suite je récupère toutes les valeurs dans une boucle while

				
					foreach ( $blogusers as $user ) {

    $author_id = $user->ID;
    $image = get_field('tsm_local_avatar', 'user_'.$author_id );
    $genre = get_field('genre', 'user_'.$author_id );
    $age = get_field('age', 'user_'.$author_id );
    $celibataire_depuis= get_field('celibataire_depuis', 'user_'.$author_id ); 

}
				
			

Comment détecter qu’il s’agit d’un device mobile

Comment détecter qu’il s’agit d’un device mobile

Lorsque je développe des sites web, je m’assure qu’ils rendent bien sur tous les types d’écrans, dont les mobiles. En général les mediaqueries en CSS sont suffisantes. Mais récemment j’ai développé un site où la version mobile était assez différente de la version desktop. Il me fallait donc une redirection sur base de… la taille de l’écran. En tout cas c’est ce que je pensais dans un premier temps. Car après quelques tests je me suis aperçu que certains smartphones avaient des résolutions d’écran parfois supérieures à des laptops. Ce guide sur les résolutions d’écran iPhone l’illustre fort bien.

J’ai donc cherché un peu et trouvé qu’il y a moyen de détecter le userAgent (çad le navigateur). Cela fonctionne très bien mais comme un utilisateur peut manipuler le userAgent utilisé cette méthode n’est pas trop recommandée. Mon avis perso p/r à cela est qu’un utiliser qui manipule son userAgent est un utilisateur avancé et s’il se rend compte que le site ne fonctionne pas bien à cause de cela il saura quoi faire.

La dernière solution que j’ai trouvée et qui est pour la moi la meilleure, c’est de détecter en JS si le device à une fonction Hover. On sait que cela n’est pas possible sur un device mobile et donc détecter cette fonctionnalité permet de savoir à coup sur si on a à faire à un device mobile ou non. Seul bémol, cette façon ne permet pas d’exclure les iPads du choix. Or dans le site qui m’a posé ce problème je devais avoir une version iPad identique à la version desktop. Il faudra donc combiner  les solutions entr’elles pour obtenir le résultat désiré.

Détection de la taille

				
					$(window).on('load resize',function(){

 if($(window).width() < 769){
// redirection ou autre action
	 }
    });
				
			

Détection du userAgent

				
					$(window).on('load resize',function(){

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
   
        // redirection ou autre action

        }
    });
				
			

Détection de la fonctionnalité :hover

				
					 $(window).on('load resize',function(){

 if(window.matchMedia("(any-hover: none)").matches) {
           
// redirection ou autre action

        }
    });
				
			

Créer son propre thème WordPress à partir de zéro

Créer son propre thème WordPress à partir de zéro

Ce petit tuto a pour but de vous permettre de créer en quelques minutes seulement votre propre thème en WordPress. Ce tuto s’adresse à tout public qui est à l’aise avec le HTML & le CSS. Il permet d’aller chercher tous les contenus WordPress pour les intégrer dans une production HTML & CSS pré-existante. Ou à faire dans un 2e temps une fois tous les contenus WordPress affichés.

Créer les fichiers minimum requis

Pour obtenir un premier résultat, il suffit de :

  • créer un nouveau répertoire dans wp-contents/themes p.ex. mon-propre-theme
  • y créer un fichier index.php
    • dans ce fichier écrire p.ex. Salut, ça fonctionne
  • y créer un fichier style.css
    • dans ce fichier copier le code suivant et modifier les informations
				
					/* Theme Name: NOM DE VOTRE THEME
   URI: http://www.VOTRE-SITE.COM
   Description: DESCRIPTION DE VOTRE THEME.
   Version: 1.0
   Author: VOTRE NOM   
*/
				
			
  • y créer un fichier screenshot.png (dimensions 1200×900) illustrant le thème
  • aller dans le backend apparence > thèmes et y activer le nouveau thème
  • retourner sur l’URL publique du site et rafraichir la page
  • La page affichera: Salut, ça fonctionne

Afficher des contenus dynamiques relatifs au site (nom, description, chemin vers le dossier du thème)

Maintenant que nous avons affiché le contenu de notre page index.php en activant le thème, passons en revue les quelques tags WP les plus utiles pour commencer, je pense notamment à:

  • titre du site
  • description / slogan du site
  • chemin vers le répertoire du thème, afin de pouvoir lier notre feuille de style style.css à notre page index.php
				
					<?php bloginfo('stylesheet_directory'); ?> <!-- chemin vers le répertoire/thème du site du site -->
<?php bloginfo('name'); ?> <!-- nom du site -->
<?php bloginfo('description'); ?> <!-- description du site -->
				
			

Bonne méthode pour lier la feuille de style

				
					function ajouter_style() {
     wp_enqueue_style( 'monstyle', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'ajouter_style', PHP_INT_MAX );
				
			

Créer une boucle pour afficher tous les articles et leurs contenus

Nous allons maintenant créer une boucle qui permet d’afficher tous les aritcles / posts. Par défaut ils seront affichés par ordre antéchronologique (les plus récent en premier)

				
					<!-- Commencer la boucle -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<!-- Afficher les contenus de la boucle -->
<?php the_post_thumbnail(); ?> <!-- remplace la balise <img> ! 
alternativement, on peut remplacer l'attribut src de la balise <img> 
par --> <?php echo get_the_post_thumbnail_url(); ?>
<?php the_title(); ?>  <!-- titre du post -->
<?php the_content(); ?> <!-- contenu du post -->
<?php the_excerpt() ?> <!-- extrait du post-->
<?php echo get_the_date(); ?> <!-- date du post / on le fait des cette façon car
sinon WP n'affiche qu'une fois la date si plusieurs posts on la même date-->
<?php the_permalink(); ?> <!-- lien vers le détail du post -->
<?php the_time(); ?> <!-- date de création du post -->
<?php the_author(); ?> <!-- auteur du post -->
<?php the_category();?> <!-- la/les catégorie(s) assignée(s) au post -->

<!-- on peut également afficher le nom et/ou le slug du post type-->
<?php 
// Get current post type
$post_type = get_post_type();
// Get post type object
$post_type_obj = get_post_type_object( $post_type );
// Display post type name
echo 'Post Type Name: ' . esc_html( $post_type_obj->labels->singular_name );
// Display post type slug
echo 'Post Type Slug: ' . esc_html( $post_type_obj->name );
?>

<!-- Terminer la boucle -->
<?php endwhile; endif; wp_reset_query(); ?>

				
			

On peut aussi filtrer les boucles pour n’afficher que ce qui nous intéresse.

				
					<!-- n'afficher que les contenus de type 'post' (dans une page p.ex. -->
<?php query_posts('post_type=post') ?>

<!-- n'afficher que le premier post. On n'affiche qu'un post -->
<?php query_posts('posts_per_page=1'); ?>

<!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total-->
<?php query_posts('offset=1&posts_per_page=3'); ?>

<!-- afficher tout excepté le premier post. -->
<?php query_posts('offset=1'); ?>

<!-- afficher tout excepté les 4 premiers  posts. -->
<?php query_posts('offset=4'); ?>

<!-- afficher tous les posts de la catégorie trucmachin -->
<?php query_posts('category_name=trucmachin'); ?>

<!-- afficher les 3 derniers posts de la catégorie trucmachin -->
<?php query_posts('posts_per_page=3&category_name=trucmachin'); ?>
				
			

Requête plus complexe permettant de passer plus d’arguments. plus d’infos

				
					<?php
// 1) définir les arguments/filtres de la requête
$args = array(
   'post_type' => 'prof'
);

// 2) exécuter la requête et lancer la boucle
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
?>

<?php the_title(); ?> 

<?php
} // end while
} // end if
wp_reset_query(); ?>
				
			

Activer la possibilité d’ajouter une image mise en avant et créer des tailles personnalisées d'images

Dans functions.php, ajouter le code suivant

				
					//activer image mise en avant
add_theme_support( 'post-thumbnails' );

//créer des propres tailles
add_image_size( 'images-moyennes', 312, 255, true );
add_image_size( 'images-grandes', 527, 390, true );

				
			

Lorsque l’on veut afficher cette taille personnalisée, on peut le faire de cette façon

				
					  <?php the_post_thumbnail("images-moyennes"); ?>
    <?php the_post_thumbnail("images-grandes"); ?>
				
			

On peut encore ajouter une fonction pour que ces tailles soient disponibles dans le menu dropdown des médias dans le contenu des articles

				
					<?php add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'images-moyennes' => __('Images Moyennes'), 
        'images-grendes' => __('Images Grandes'),
    ));
} ?>
				
			

Afficher le menu

Vous verrez que par défaut il ne vous est pas possible d’ajouter un menu. Il faut le spécifier à WordPress. Dans le fichier functions.php, copier le code suivant:

				
					// ajouter une zone de menu
register_nav_menu( 'primary', __( 'Navigation Menu' ) );
				
			

Ensuite dans votre thème, vous pouvez appeler votre menu de cette façon

				
					<?php wp_nav_menu(); ?>
				
			

On peut aussi passer toute une série d’arguments dans le menu, comme ici: pas de container autour du UL, un ID et des classes sur le UL

				
					<?php
wp_nav_menu(array(
  'container' => false, // Ne pas mettre de container
  'menu_class' => 'navbar-nav fw-bold justify-content-end align-items-center flex-grow-1', // Ajouter des classes à <ul>
  'menu_id' => 'navbar', // Ajouter un ID à <ul>
));
?>

				
			

Personaliser le lien Suite…

Dans functions, copier ce code:

				
					//personaliser "lire la suite" 

function modify_read_more_link() {
return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';
}
 
add_filter( 'the_content_more_link', 'modify_read_more_link' );
				
			

Ensuite dans le style personaliser la classe more-link

Ajouter une zone de widgets

Dans functions, copier ce code:

				
					// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
    register_sidebar( array(
                    'name'          => 'Ma zone de widgets',
                    'id'            => 'zone-widgets',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );




// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>
				
			

Ajouter plusieurs zones de widgets

				
					// Enregistrer une zone appelée 'Ma zone de widgets'
function add_widget_Support() {
    register_sidebar( array(
                    'name'          => 'Ma zone de widgets',
                    'id'            => 'zone-widgets',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
	
	register_sidebar( array(
                    'name'          => 'Ma zone de widgets 2',
                    'id'            => 'zone-widgets-2',
                    'before_widget' => '<div>',
                    'after_widget'  => '</div>',
                    'before_title'  => '<h2>',
                    'after_title'   => '</h2>',
    ) );
}
// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );




// puis mettre ceci dans le thème à l'endroit désiré:
<?php dynamic_sidebar( 'zone-widgets' ); ?>
<?php dynamic_sidebar( 'zone-widgets-2' ); ?>
				
			

Ajouter des classes sur le body

				
					<body <?php body_class(); ?>>
				
			

Ajouter wp_head() et wp_footer()

Pour terminer, il faut encore ajouter les 2 fonctions qui permettent à WordPress d’ajouter tout le code nécessaire au bon fonctionnement des plugins etc.

				
					<!-- Pour wp_head(), il faut le mettre juste avant la fermeture de la balise <head> -->

    <?php wp_head(); ?>    
</head>


<!-- Pour wp_footer(), il faut le mettre juste avant la fermeture de la balise <body> -->

    <?php wp_footer(); ?>    
</body> 

<!-- ou alors tout en bas si on inclut la fermeture des balises body et html dans le footer -->

				
			

Afficher les taxonomies en tant que liens (pour un post donné)

				
					<?php 
  $categories = get_the_terms(get_the_ID(), 'type-sneakers');
  $couleurs = get_the_terms(get_the_ID(), 'couleurs-sneakers');

  if (!empty($categories)) {

    foreach ($categories as $category) {
        echo '<a href="'.get_site_url().'/type-sneakers/'.$category->slug.'">'.$category->name.'</a> ';
    }

}

    echo '<br><br><br><br>';

    if (!empty($couleurs)) {
    foreach ($couleurs as $couleur) {
        echo '<a href="'.get_site_url().'/couleurs-sneakers/'.$couleur->slug.'">#'.$couleur->name.'</a> ';
    }
}


?>
				
			

Divers

				
					<!--  Insérer le nom d'une page ou d'un post suivi du nom du site dans la balise <title> -->

<title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>
				
			

Pour aller plus loin