Comment afficher les articles en vedette avec des miniatures dans WordPress

Il existe de nombreuses manières sur le Web pour afficher les messages en vedette. Mais presque toutes les fonctions et plugins manquent de quelque chose. Dans ce didacticiel, nous allons partager une fonction qui permettra aux utilisateurs de sélectionner des ID de publication spécifiques et de les afficher sous la forme de publications en vedette avec des vignettes en utilisant la fonctionnalité Vignette de publication de WordPress ajoutée dans WordPress 2.9. De cette façon, vous évitez d’utiliser des messages collants, qui peuvent parfois être nécessaires en raison d’autres fonctions dans un projet personnalisé..

Remarque: il s'agit d'un didacticiel en plusieurs parties. Nous vous recommandons donc de connaître WordPress, PHP, HTML et CSS..

Nous avons modifié le plugin Listes de messages en vedette de San de la galerie W3C. Bien que San ait créé une version avancée de son plugin pour afficher des images, il nécessite un champ personnalisé. De cette façon, vous utiliserez simplement la fonctionnalité Post Thumbnail dans 2.9..

Produit final

Plugin modifié

Vous devez d’abord coller le code ci-dessous dans votre functions.php fichier OU dans un fichier séparé et le télécharger en tant que plugin.

la poste(); ?>        "); $ ol_flash ="; $ posts_settings = get_option ('posts_settings'); // ADMIN PANLE SEETTING function posts_add_pages () // Ajoute un nouveau menu dans l'onglet Paramètre ou Options: add_options_page ('Liste des publications en vedette', 'Liste des publications en vedette', 8, 'postsoptions', 'posts_options_page');  / * Define Constantes et variables * / define ('PLUGIN_URI', get_option ('siteurl'). '/ Wp-content / plugins /'); / * Fonctions * / fonction posts_options_page () global $ ol_flash, $ posts_settings, $ _POST, $ wp_rewrite; if (isset ($ _ POST ['posts_id'])) $ posts_settings ['posts_id'] = $ _POST ['posts_id']; update_option ('posts_settings', $ posts_settings); $ ol_flash = "Votre liste sélectionnée a été enregistrée.";  if ($ ol_flash! = ") echo '
'. $ ol_flash. '
'; écho ''; écho '
Ajouter des identifiants pour créer une liste de publications
'; écho '
 
Ce plugin donne toute liberté pour afficher plusieurs messages en tant que liste de messages en vedette sur votre site..
 
Post ID:
 
Astuce SAN: pour ajouter plusieurs ID de publication, utilisez "," par exemple: "1, 2, 3" 
 
'; écho ' 
Collez ce code là où vous voulez qu'il affiche la liste des articles en vedette  
 Ou vous pouvez passer variable avant et après comme ce paramètre par défaut ", $ après = ")?>
 '; écho '';  add_action ('admin_menu', 'posts_add_pages'); ?>

Une fois que vous avez fait cela, vous pouvez l'afficher en collant le code n'importe où dans votre fichier de modèle:

CSS personnalisé

Nous utilisons des classes CSS personnalisées, vous en aurez donc besoin également. Collez le code suivant dans votre fichier style.css.

.popcontainer border-bottom: 1px solid # D0CDC5; largeur: 274px; float: gauche; rembourrage: 0 0 15px 0; marge: 0 0 15px 0;  .popthumb width: 60px; float: gauche; arrière-plan: # D0CDC5; rembourrage: 5px; marge: 0 10 px 0 0;  .popcontent width: 185px; float: gauche;  .popcontent h2 taille de la police: 13px; marge: 0 0 3px 0; rembourrage: 0;  .popcontent h2 a text-decoration: none; 

Options avancées

Le code ci-dessus extraira votre vignette par défaut et l'affichera avec le titre de l'article et la date à laquelle l'article a été publié. Le seul problème est que si vous souhaitez utiliser une taille différente de la vignette. Votre thème utilise peut-être la fonction vignette ailleurs. Vous ne pouvez donc pas utiliser deux tailles différentes avec les codes actuels. Donc, vous devrez le peaufiner un peu et ajouter une nouvelle taille d'image.

Ouvrez votre fichier functions.php, recherchez les codes miniatures et ajoutez le code suivant:

add_theme_support ('post-vignettes'); set_post_thumbnail_size (150, 150, vrai); // Miniatures de publication normales add_image_size ('miniatures-vedette', 60, 60); // Taille de la miniature en vedette

Maintenant, trouvez la ligne suivante dans le plugin ci-dessus:

et le remplacer par:

Cela vous permettrait d'avoir deux tailles différentes.

Un autre problème connu serait que si votre vignette n'était pas proportionnelle, cela entraînerait l'affichage d'une image plus petite au lieu de 60 x 60 pixels, car WordPress ne dispose pas de la fonction de recadrage. Pour éviter cela, vous pouvez utiliser Additional Image Sizes Plugin qui permet de rogner. Nommez la taille de l'image personnalisée en tant que vignette sélectionnée et utilisez le même code que ci-dessus pour remplacer le code d'origine..

La seule raison pour laquelle nous avons utilisé cette méthode était parce que nous utilisions des posts collants pour afficher une autre liste. Vous pouvez également y parvenir en utilisant des messages collants. Pour l’astuce des vignettes, nous avons choisi le plug-in Additional Image Sizes, car nous voulons éviter d’utiliser TimThumb JavaScript et conserver un site de chargement rapide..

Si vous avez des solutions supplémentaires à ce problème, partagez-les avec nous dans les commentaires..