WordPress : ajoutez une colonne d’images en vedette à votre liste de publications dans votre thème à l’aide de function.php

Un plugin WordPress implique une surcharge supplémentaire, obligeant WordPress à charger et gérer le plugin. Cela inclut la lecture du répertoire du plugin, la vérification des mises à jour et la maintenance des métadonnées du plugin. Chaque fois que je travaille sur l’optimisation de Martech Zone ou de l’installation WordPress d’un client, j’analyse toujours les plugins utilisés, la qualité du code, l’impact sur le site et la quantité de fonctionnalités du plugin utilisé.

Je trouve souvent que les plugins sont surchargés, mal développés et ajoutent une surcharge inutile qui peut ralentir le site ou l’administration. S’il s’agit d’une fonctionnalité simple, je supprimerai généralement le plugin et modifierai le thème enfant function.php à la place. Lorsque le code est placé dans le thème enfant functions.php fichier, il est directement intégré au thème, ce qui peut être légèrement plus efficace en termes d’utilisation des ressources.

En fin de compte, votre choix doit également prendre en compte des facteurs tels que l’organisation du code, la maintenance et les besoins spécifiques de votre projet.

Ajouter une colonne d’images en vedette à la liste des publications

J’exécutais un plugin sur Martech Zone qui ajoutait une colonne à la liste des publications avec le l’image sélectionnée. Malheureusement, le plugin présentait des paramètres et des ressources supplémentaires inutiles, comme une vidéo supprimée depuis longtemps. J’ai disséqué le plugin et compris comment ils ajoutaient la colonne d’image… puis j’ai modifié le plugin avec quelques fonctionnalités supplémentaires comme avoir le titre et les dimensions de l’image présentée au survol de la souris.

Voici le code :

function add_featured_image_column($columns) {
    // Create a new column with the name "img"
    $columns['img'] = 'Featured Image';
    return $columns;
}

function customize_featured_image_column($column_name, $post_id) {
    if ($column_name == 'img') {
        // Get the featured image URL
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail');

        // Check if a featured image is set
        if ($thumbnail_url) {
            // Get the original image URL
            $original_url = get_the_post_thumbnail_url($post_id, 'full');
            // Get the dimensions of the original image
            list($original_width, $original_height) = getimagesize($original_url);

            // Get the actual title
            $actual_title = get_the_title($post_id);

            // Define the title attribute for the image
            $image_title = $actual_title . ' (' . $original_width . 'px by ' . $original_height . 'px)';

            // Display the thumbnail image with a maximum height of 80px and add dimensions to the title attribute
            echo '<img src="' . esc_url($thumbnail_url) . '" style="max-height: 80px;" title="' . $image_title . '" />';
        } else {
            // No featured image is set, display "No featured image"
            echo 'No featured image';
        }
    }
    return $column_name;
}
add_action('manage_posts_columns', 'add_featured_image_column');
add_action('manage_posts_custom_column', 'customize_featured_image_column', 10, 2);

Voici une explication du code :

• add_featured_image_column fonction:
  • Cette fonction ajoute une colonne personnalisée à la liste des publications dans le panneau d’administration WordPress. Il prend comme argument un tableau de colonnes existantes ($columns).
  • Il ajoute une nouvelle colonne nommée img avec l’étiquette L’image sélectionnée.
  • Il renvoie le tableau de colonnes modifié avec le nouveau img colonne ajoutée.
• customize_featured_image_column fonction:
  • Cette fonction est chargée de personnaliser le contenu du img colonne pour chaque message de la liste.
  • Il faut deux paramètres : $column_name (le nom de la colonne en cours de traitement) et $post_id (l’ID du message actuel).
  • Il vérifie si la colonne actuellement traitée est img (la colonne personnalisée que nous avons ajoutée).
  • Si c’est le img colonne, il récupère et affiche l’image sélectionnée et des informations supplémentaires.
  • Il utilise get_the_post_thumbnail_url pour récupérer l’URL de l’image sélectionnée au format « miniature ».
  • Il vérifie si une image sélectionnée est définie en vérifiant si le $thumbnail_url n’est pas vide.
  • Si une image sélectionnée est définie, elle récupère également l’URL de l’image originale (en taille réelle) et ses dimensions en utilisant get_the_post_thumbnail_url et getimagesize.
  • Il récupère le titre réel du message en utilisant get_the_title.
  • Il construit le title attribut pour l’image au format « Titre : titre réel (largeur originale px par hauteur originale px). »
  • Il affiche l’image miniature avec une hauteur maximale de 80 px et définit l’attribut title sur la valeur construite. $image_title. Vous pouvez modifier cette hauteur comme vous le souhaitez.
  • Si aucune image sélectionnée n’est définie, il affiche « Aucune image sélectionnée ».
  • La fonction renvoie le contenu modifié pour le img colonne.
• add_action lignes:
  • Ces lignes accrochent le add_featured_image_column fonction à la manage_posts_columns l’action et le customize_featured_image_column fonction à la manage_posts_custom_column action. Cela associe ces fonctions à l’écran de gestion des publications WordPress.

En ajoutant ces actions, le code crée effectivement une nouvelle colonne personnalisée dans la liste des publications de l’administrateur WordPress qui affiche l’image en vedette de chaque publication ainsi que son titre et ses dimensions. S’il n’y a pas d’image sélectionnée, elle affiche Aucune image sélectionnée. Cela peut s’avérer une fonctionnalité utile pour gérer et réviser les publications dans la zone d’administration, en particulier lorsque vous travaillez avec des thèmes qui s’appuient fortement sur les images présentées.

Voici un aperçu de cela en action sur Martech Zone où je passe la souris sur l’image présentée dans la troisième rangée :



Filtrer les publications sans image en vedette

Une autre fonction que j’ai ajoutée était un filtre afin que je puisse facilement identifier toute publication ne comportant pas d’ensemble d’images en vedette.

function add_no_featured_image_filter() {
    global $post_type;
    
    // Check if the current post type is 'post' (you can change it to the desired post type)
    if ($post_type == 'post') {
        $selected = (isset($_GET['no_featured_image']) && $_GET['no_featured_image'] == '1') ? 'selected' : '';
        echo '<select name="no_featured_image" id="no_featured_image">
            <option value="" ' . $selected . '>All Posts</option>
            <option value="1" ' . selected('1', $_GET['no_featured_image'], false) . '>No Featured Image</option>
        </select>';
    }
}

function filter_no_featured_image_posts($query) {
    global $pagenow;

    // Check if we are on the posts page and the filter is set
    if (is_admin() && $pagenow == 'edit.php' && isset($_GET['no_featured_image']) && $_GET['no_featured_image'] == '1') {
        $query->set('meta_key', '_thumbnail_id');
        $query->set('meta_compare', 'NOT EXISTS');
    }
}
add_action('restrict_manage_posts', 'add_no_featured_image_filter');
add_action('parse_query', 'filter_no_featured_image_posts');

Ce code améliore les fonctionnalités de la zone d’administration de WordPress en ajoutant un filtre personnalisé pour les publications afin de permettre aux utilisateurs de filtrer les publications selon qu’elles disposent ou non d’un ensemble d’images en vedette. Voici une explication du code :

• add_no_featured_image_filter fonction:
  • Cette fonction crée une liste déroulante de filtres personnalisés pour les publications dans le panneau d’administration WordPress.
  • Cela commence par vérifier le type de publication actuel. Dans ce code, il vérifie spécifiquement si le type de publication actuel est « post », mais vous pouvez le remplacer par n’importe quel type de publication souhaité.
  • Si le type de publication correspond, la liste déroulante des filtres est générée.
  • La liste déroulante des filtres est un HTML <select> élément avec le nom « no_featured_image » et l’ID « no_featured_image ».
  • Il contient deux options :
    • « Tous les messages » (option par défaut) : cette option est sélectionnée lorsqu’aucun filtrage spécifique n’est appliqué.
    • « Aucune image en vedette » : cette option est sélectionnée lorsque l’utilisateur souhaite filtrer les publications sans image en vedette.
  • La sélection de ces options est déterminée en fonction des paramètres de requête URL ($_GET) et si le no_featured_image Le paramètre est réglé sur « 1 ».
  • Le selected La fonction est utilisée pour déterminer si une option doit être marquée comme « sélectionnée » en fonction des valeurs des paramètres de requête.
  • La fonction fait écho au code HTML de la liste déroulante des filtres.
• filter_no_featured_image_posts fonction:
  • Cette fonction modifie la requête pour filtrer les publications en fonction de la présence ou de l’absence d’une image sélectionnée.
  • Il vérifie d’abord si nous sommes dans la zone d’administration de WordPress et sur la page « edit.php », qui est la page de gestion des publications.
  • Il vérifie ensuite si le no_featured_image Le paramètre de requête est défini sur « 1 », indiquant que l’utilisateur souhaite filtrer les publications sans image sélectionnée.
  • Si le filtre est actif, il utilise le set méthode pour modifier la requête :
  • Il définit le meta_key à _thumbnail_idla clé utilisée pour stocker l’ID de l’image sélectionnée dans les métadonnées de la publication.
  • Il définit le meta_compare à « NON EXISTE », qui filtre efficacement les publications pour lesquelles la clé méta « _thumbnail_id » n’existe pas. En d’autres termes, il filtre les publications sans image en vedette.
  • Cette fonction ajuste la requête en fonction de la sélection du filtre.
• add_action lignes:
  • La première add_action la ligne accroche le add_no_featured_image_filter fonction à l’action ‘restrict_manage_posts’. Cette action est appelée lors de l’affichage de la section de gestion des publications et vous permet d’ajouter des filtres et des contrôles personnalisés.
  • La deuxième add_action la ligne accroche le filter_no_featured_image_posts fonction à l’action ‘parse_query’. Cette action est appelée avant l’exécution de la requête, vous permettant de modifier la requête en fonction de filtres personnalisés.

Voici un aperçu du filtre :



En ajoutant ces actions, le code crée un filtre personnalisé dans la liste des publications de l’administrateur WordPress qui vous permet de filtrer les publications selon qu’elles comportent ou non un ensemble d’images en vedette, ce qui facilite la gestion et l’organisation de vos publications.