Ci-dessous les liens directs vers les différents chapitres:
Les cours sont classés par ordre où ils ont été donnés, du plus récent au plus ancien.
Ci-dessous les liens directs vers les différents chapitres:
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);
}
});
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:
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 );
}
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
}
});
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.
Pour obtenir un premier résultat, il suffit de :
/* Theme Name: NOM DE VOTRE THEME
URI: http://www.VOTRE-SITE.COM
Description: DESCRIPTION DE VOTRE THEME.
Version: 1.0
Author: VOTRE NOM
*/
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 à:
<?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 -->
function ajouter_style() {
wp_enqueue_style( 'monstyle', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'ajouter_style', PHP_INT_MAX );
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(); ?>
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'),
));
} ?>
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>
));
?>
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
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' ); ?>
// 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' ); ?>
<body <?php body_class(); ?>>
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 -->
<?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> ';
}
}
?>
<!-- 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>