Utilisation d'un type d'article personnalisé pour créer une bannière de page d'accueil

Parfois, il est utile d’afficher une jolie bannière sur la page d’accueil de votre site, par exemple pour des annonces et / ou des extraits qui ne sont pas assez longs pour mériter une publication sur un blog ou des liens vers du nouveau contenu du site. Vous ne souhaitez pas modifier le contenu de votre page d'accueil chaque fois que vous ajoutez un nouveau contenu, ni explorer le code pour ajouter du contenu..

Il y a quelques options pour cela. Une simple consiste à utiliser un widget que vous ajoutez en enregistrant une zone de widget à l'emplacement correct dans les fichiers de modèle de votre thème. Mais une approche que j’aime utiliser, qui vous donne plus de souplesse, consiste à créer un type de message appelé "bannière" et à l’utiliser pour afficher une ou plusieurs bannières. Vous pouvez même l'utiliser pour afficher des bannières d'une certaine catégorie différemment des autres, si vous avez plusieurs bannières mais que vous souhaitez en mettre une en surbrillance..

Dans ce tutoriel…

•  Je vais vous montrer comment enregistrer un type de message personnalisé pour vos bannières..
•  Je vais vous montrer comment créer une fonction dans le fichier de fonctions de votre thème pour afficher les bannières..
• Je vais vous montrer comment ajouter cette fonction au fichier d'en-tête de votre thème pour qu'il ne s'exécute que sur la page d'accueil..
• Enfin, je vais vous montrer comment coiffer vos bannières..

Ce dont vous aurez besoin

Pour compléter ce tutoriel, vous aurez besoin de:

• une installation de développement de WordPress
• accès aux fichiers modèles de votre thème

Je vais créer un thème enfant du vingt douze thème pour plus de commodité, mais vous pouvez tout aussi facilement ajouter ce code à votre propre thème.

Une autre solution consiste à créer un plug-in permettant d’enregistrer le type de publication personnalisé et de créer la fonction permettant d’afficher des bannières. Ainsi, si le thème de votre site change, vous ne perdez pas votre travail. Ici, je vais utiliser un eux pour que tout le code soit au même endroit pour que vous puissiez le télécharger.

Enregistrement du type de message de bannière

La première étape consiste à enregistrer un nouveau type de message. Créer un functions.php fichier pour votre thème, ou ajoutez le code suivant à votre fichier de fonctions existant:

// enregistre un type de message personnalisé appelé "bannière" function wptutsplus_create_post_type () $ labels = array ('name' => __ ('Bannières'), 'nom_s singulier' => __ ('bannière'), 'add_new' => __ ('Nouvelle bannière'), 'add_new_item' => __ ('Ajouter une nouvelle bannière'), 'edit_item' => __ ('Modifier la bannière'), 'new_item' => __ ('Nouvelle bannière'), 'view_item '=> __ (' View banner '),' search_items '=> __ (' Search banners '),' not_found '=> __ (' Aucune bannière trouvée '),' not_found_in_trash '=> __ (' Aucune bannière trouvée dans Poubelle' ), ); $ args = array ('labels' => $ labels, 'has_archive' => true, 'public' => true, 'hierarchical' => false, 'supports' => array ('titre', 'éditeur', ' extrait ',' custom-fields ',' thumbnail ',' attribut de page '),' taxonomies '=> array (' post_tag ',' category '),); register_post_type ('bannière', $ args);  add_action ('init', 'wptutsplus_create_post_type');

Cela crée un nouveau type de message appelé "bannière"..

Après avoir créé le type de publication, créez une nouvelle bannière à l'aide de l'administrateur WordPress. Le mien est montré dans la capture d'écran:

Création d'une fonction pour afficher des bannières

L'étape suivante consiste à créer une fonction à l'aide de WP_Query, qui interrogera le type de message de bannière et affichera toutes les bannières. Vous ajoutez ensuite cette fonction à n'importe quel endroit de votre thème où vous souhaitez afficher vos bannières..

Encore dans votre functions.php fichier (ou dans votre fichier plugin si vous utilisez cette approche), ajoutez ce qui suit:

// fonction pour afficher la bannière de la page d'accueil à l'aide d'une requête de type de message de type bannière function wptutsplus_home_page_banner () // commence par configurer la requête $ query = new WP_Query (array ('post_type' => 'banner',)); // vérifie maintenant si la requête contient des publications et, dans l'affirmative, affiche son contenu dans une boîte div div if ($ query-> have_posts ()) ?> 
 have_posts ()): $ query-> the_post (); ?> 
>
  
  
Cela exécute une requête sur le type de publication de bannière, puis affiche le contenu de chaque bannière si des publications sont trouvées. Notez que je ne sors que le contenu, pas le titre. Si vous souhaitez inclure des titres dans vos bannières, vous pouvez facilement le faire en ajoutant le titre() à votre fonction.
 
Ajout de la fonction à votre fichier de modèle
 
Pour le moment, les bannières ne seront toujours affichées nulle part sur votre site. Vous devrez pour cela ajouter la fonction que vous venez de créer à un fichier de modèle..
 
Je vais ajouter ma fonction à mon header.php fichier, mais vous pouvez l’ajouter où vous voulez, par exemple dans votre pied de page ou votre barre latérale, dans le menu contextuel. page.php fichier ou dans un spécial front-page.php fichier.
 
Comme je ne souhaite afficher que des bannières sur ma page d’accueil, je vais envelopper ma fonction dans le if (is_home_page ()) balise conditionnelle. Ceci vérifiera pour la page d'accueil si votre page de blog principale ou une page statique est définie comme page d'accueil de votre site..
 
Dans mon header.php fichier, j'ajoute le suivant juste à l'intérieur de l'ouverture 
 étiquette. Comme je travaille avec un thème pour enfants, j'ai créé un nouveau header.php fichier dans mon thème enfant, qui est une copie du fichier d'en-tête du thème parent, à l'exception de ce nouveau code.
 
 
La bannière que j'ai créée précédemment est maintenant affichée sur ma page d'accueil:
  
Styliser la bannière
 
Pour le moment, ma bannière n'est pas très accrocheuse ou visible. Je vais changer ça avec un peu de style.
 
Dans la feuille de style de votre thème, ajoutez ce qui suit:
 
.home .banner-box text-align: center; La couleur rouge; taille de police: 1.2em; bordure: 1px rouge uni; rembourrage: 1em; 
 
Cela mettra la bannière dans une superbe boîte rouge sale, pas trop subtile mais qui attirera certainement l’attention!
  
Si vous avez plusieurs bannières à afficher en même temps et que vous souhaitez en mettre une en surbrillance, vous pouvez le faire avec un certain style. Je vais créer une autre bannière et lui attribuer la catégorie "surbrillance", puis ajouter quelques styles aux bannières de la catégorie correspondante dans ma feuille de style:
 
.accueil .banner-box .category-highlight background: red; couleur: #fff; marge: 0; rembourrage: 0.5em; 
 
Cela rend la bannière en surbrillance encore plus visible:
  
Cela n'a pas l'air trop subtil ou attrayant, mais cela montre comment vous pouvez réaliser cette technique.
 
Par défaut, les bannières sont affichées par ordre chronologique décroissant. Vous pouvez changer cela si vous le souhaitez en ajoutant des arguments à la requête que vous avez créée à la deuxième étape ci-dessus..
 
Résumé
 
Les bannières de page d'accueil peuvent être un outil utile pour afficher des messages temporaires ou générer du trafic vers d'autres parties de votre site. Dans ce tutoriel, je vous ai montré comment créer une simple bannière de page d'accueil à l'aide d'un type de message personnalisé, que vous pouvez utiliser n'importe où dans le thème de votre site..
 
Ressources
 
Fonctions, balises et classes utilisées dans ce tutoriel:
 
 
register_post_type ()
 
WP_Query
 
if (is_front_page ())
 



		
			
	   
	




Code