Il est de plus en plus courant que les blogs affichent certains messages en haut de la page. Dans ce tutoriel, nous allons vous montrer comment implémenter cela dans WordPress. Nous utiliserons le thème par défaut, Kubrik, comme thème de base, mais il devrait être adaptable à la plupart des thèmes, moyennant quelques modifications. Il y a très peu de code et mettre en vedette est simple.

Ce que nous visons

Nous allons modifier le thème Kubrik qui est pré-emballé dans WordPress pour pouvoir afficher des publications en haut de la page. Ce didacticiel n’a été testé que sur WordPress 2.5.x, mais il devrait également fonctionner sur la série 2.3.x. Nous allons supposer que vous utilisez 2.5.x ou une version ultérieure. À la fin du tutoriel, vous aurez quelque chose comme ceci:

Étape 1 - Création de l'image par défaut

Avant de faire quoi que ce soit, allez dans le dossier themes de votre installation WordPress (wp-content / themes /) et faites une sauvegarde du dossier "default". C'est le thème Kubrik que nous allons éditer. La sauvegarde est au cas où vous voudriez revenir au thème original, non modifié.

Tout d'abord, nous allons créer une image par défaut si aucune image de publication sélectionnée n'est spécifiée. Restons doux et simple pour ce tutoriel. Ouvrez votre éditeur d'images préféré et créez un rectangle de 233 x 130 pixels avec des coins arrondis de 10 pixels. J'ai créé à l'arrière-plan un dégradé radial allant du blanc au gris et mis du texte par-dessus. Voici ce que j'ai

Enregistrez l'image en tant que "no-featuring-image.jpg" dans le dossier "images" situé dans le dossier "par défaut"..

Étape 2 - Ajoutez le code PHP

Maintenant pour le code. Ouvrez le fichier "header.php" dans le dossier "default". À la fin du fichier, vous verrez un bloc div et une balise hr comme ceci:

 
 
/ ">
 
 
 
 

Entre la balise div finale et le hr, insérez le code suivant:

 
 ID); $ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-selected-image.jpg"; printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title); ?> 
 
 

Ce code produira trois images dans une liste non ordonnée. Chaque image est un lien vers un article en vedette. Nous parlerons de la façon de configurer le code après avoir ajouté le CSS.

Étape 3 - Style avec CSS

Ensuite, nous devons ajouter des styles CSS. Ouvrez le fichier "style.css" et placez le code suivant ci-dessous à la fin du fichier. Tout cela ne fait que déplacer les éléments de la liste vers la gauche et les espacer uniformément.

/ * Article en vedette Carrousel * / #featured padding: 10px 10px 0 20px;  #carousel list-style: none; marge: 0; rembourrage: 0;  #carousel li float: left; rembourrage: 0; marge droite: 10px; 

Étape 4 - Comprendre le code

Jetons un coup d'oeil à ce que le code que nous avons ajouté fait. Dans le conteneur div (id = "sélectionnée"), nous avons une liste non ordonnée et du code PHP pour générer des éléments de liste.

$ Featured_posts = get_posts ('numberposts = 3 & category =1');

La première ligne ci-dessus récupère les informations de publication à l'aide de la fonction get_posts () et attribue les données de publication à la variable $ Featured_posts. La fonction get_posts () exclut un seul paramètre sous la forme d'une chaîne de requête similaire à ce que vous pourriez voir à la fin d'une URL (sans le point d'interrogation initial). Le premier paramètre est "numberposts" que nous avons défini sur 3 pour ce tutoriel. Ce paramètre définit le nombre de messages en vedette que nous afficherons. Le deuxième paramètre est "catégorie", valeur que nous avons définie sur 1. La valeur du paramètre "catégorie" doit correspondre à l'ID de la catégorie que vous utilisez pour vos publications présentées. Vous pouvez trouver l'ID d'une catégorie en accédant à la page de gestion des catégories et en survolant le titre de la catégorie avec votre souris. La barre d'état affichera un lien. Le dernier numéro est l'ID de la catégorie.

La ligne suivante est une boucle foreach qui parcourt les publications que nous avons extraites à l’aide de la fonction get_posts (). La première ligne de la boucle foreach récupère l'URL de l'image à l'aide de la fonction get_post_custom_values ​​() et stocke l'URL dans la variable $ custom_image. Le premier paramètre spécifie la clé de la valeur personnalisée que nous utilisons, "Featured_image". Le deuxième paramètre spécifie quel poste nous obtenons la valeur de.

$ custom_image = get_post_custom_values ​​('Featured_image', $ post-> ID);

Dans la ligne suivante, nous vérifions rapidement si une image a bien été spécifiée. Si aucune image n'a été spécifiée, nous affectons à la variable $ image l'URL de l'image par défaut. Si une image a été spécifiée, nous l'utilisons.

$ image = $ custom_image [0]? $ custom_image [0]: get_bloginfo ("template_directory"). "/ images / no-selected-image.jpg";

Dans la dernière ligne, nous sortons les éléments de la liste. Chaque élément est une image qui mène au message en vedette..

printf ('
', get_permalink ($ post-> ID), $ post-> post_title, $ image, $ post-> post_title);

Étape 5 - Création de messages en vedette

C'est tout! Désormais, chaque fois que vous souhaitez mettre en vedette un article, assignez-le à la catégorie sélectionnée et créez une valeur personnalisée avec une clé "vedette_image" et une valeur de l'URL de l'image. Les images doivent être 233x130px.

Voyez-le en action

Vous pouvez voir le thème en action sur notre serveur de démonstration WordPress NETTUTS: