Le header.php - Ce qui doit y aller et ce qui ne marche pas

Dans ce tutoriel, parlons de la header.php, un fichier essentiel pour tout thème WordPress. Je vais vous montrer un bel exemple de fichier d'en-tête et vous donner des conseils sur ce qui doit être inclus et ce qui ne l'est pas..

Étape 1: Introduction

La première chose que vous devez savoir sur le header.php le fichier est votre fonction.

Mais nous avons plus qu’un logo et un menu dans ce fichier, nous avons aussi le tête tag et beaucoup d'autres tags, comme: lien, scénario, méta et Titre.

J'ai écrit un exemple header.php fichier, j’ai essayé de créer un fichier aussi complet que possible, mais n'hésitez pas à commenter ce tutoriel en donnant des conseils sur le fichier.

Rappelez-vous que votre en-tête est tout le contenu affiché sur toutes les pages de votre site. Par exemple, le logo et le menu sont affichés sur toutes les pages, donc… les deux seront ajoutés à la liste. header.php

Si un élément n'apparaît que sur une page spécifique, vous devez repenser si cet élément doit réellement figurer dans votre en-tête..

Travaillons et j'espère que vous l'aimez!

Étape 2: Le code final

Ici, vous pouvez obtenir le code final à utiliser dans votre thème. Lisez les autres étapes pour savoir exactement ce que chaque ligne fait..

Tout d’abord, collez ces lignes en haut de votre functions.php fichier: (N'oubliez pas que vous devez modifier les chemins d'accès à vos fichiers CSS et JavaScript)

 define ("THEME_DIR", get_template_directory_uri ()); / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES function enqueue_styles () / ** REGISTER css / screen.css ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('style d'écran');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', faux); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personnalisé');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Maintenant dans votre header.php ajoutez ces lignes: (N'oubliez pas que vous devez modifier les chemins d'accès à vos fichiers CSS et JavaScript)

       >              <?php wp_title(); ?> - <?php bloginfo( 'name' ); ?>    >

Un en-tête "doit" avoir certaines choses, ce modèle que j'ai créé fait ce qui suit (pour les étapes suivantes, je parlerai de chacune d'elles):

Doctypes
Conditions préalables à IE8, 7, 6
Meta Tags pour s'assurer que votre thème est correctement rendu
Favicon, RSS et Pingback
Titre
Suivre les directives officielles de WordPress, ajouter des scripts et des styles avec wp_enqueue_script et wp_enqueue_style les fonctions
Optimisé avec l'utilisation de constantes et la suppression de la balise Meta Generator pour renforcer la sécurité
Code propre et commenté

Les étapes ci-dessous parleront du code utilisé et vous apprendrez pourquoi l'utiliser.

Étape 2: le functions.php Fichier

Commençons par parler de la functions.php fichier, nous avons ajouté ces lignes dans le fichier:

 define ("THEME_DIR", get_template_directory_uri ()); / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES function enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'tous '); wp_enqueue_style ('style d'écran');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', faux); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personnalisé');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

La première ligne crée simplement une constante appelée THEME_DIR qui stocke le répertoire de modèles, nous créons cette constante pour optimiser le thème, si vous regardez dans notre header.php fichier, nous avons besoin du répertoire plusieurs fois et nous l’utilisons dans functions.php fichier également pour imprimer le chemin du thème. Si on appelle le get_template_directory_uri () tout le temps, nous ne faisons que créer des demandes. En créant une constante et en l'utilisant, nous économisons le traitement du serveur, car nous appelons la fonction une fois..

 / * --- REMOVE GENERATOR META TAG --- * / remove_action ('wp_head', 'wp_generator');

Cette ligne supprime la balise Meta Generator, car cette balise indique à quiconque la version de WordPress installée. Ce type d’information peut permettre à un envahisseur de connaître les bugs de votre version et de les exploiter.

Ajout de votre CSS

 // ENQUEUE STYLES function enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'tous '); wp_enqueue_style ('style d'écran');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Ici, nous avons créé une fonction pour ajouter le lien balises à header.php. Les directives officielles de WordPress indiquent que la meilleure façon d’ajouter des styles (.css) et des scripts (.js) consiste à wp_enqueue_script et wp_enqueue_style les fonctions. Vous pouvez en apprendre plus à ce sujet dans notre article, Comment inclure JavaScript et CSS dans vos thèmes et plugins WordPress.

Tout d'abord, nous créons une fonction appelée styles de file d'attente et ensuite on appelle le add_action fonction, cette ligne indique à WordPress qu’elle doit appeler notre fonction lorsque l’événement 'wp_enqueue_scripts' est déclenché, ce qui se produit lors de notre appel à wp_head () dans header.php!

Dans notre fonction, nous avons les lignes suivantes:

 / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'tous'); wp_enqueue_style ('style d'écran');

Tout d'abord, nous enregistrons notre feuille de style, puis nous l'ajoutons à la file d'attente de WordPress.

Nous utilisons la fonction wp_register_style pour enregistrer un style, cette fonction demande ce qui suit:

# 1 Param: Un nom que vous pouvez choisir, quelque chose comme mon style, médiasquies…
# 2 Param: Le chemin du fichier, notez que nous utilisons le THEME_DIR constante ici.
# 3 Param: Ici, vous tapez les dépendances, le nom des fichiers de style qui doivent être chargés avant ce fichier.
# 4 Param: La version.
# 5 Param: L'attribut média de la balise link.

Et puis, nous appelons le wp_enqueue_style fonction et nous passons en paramètre le nom de notre style qui sera ajouté.

Pour ajouter plus de styles à votre fichier, il suffit de dupliquer ces deux lignes et de modifier le nom, le répertoire et les autres paramètres..

Ajout des scripts

Maintenant, nous verrons la fonction qui ajoute nos scripts.

 // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', faux); wp_enqueue_script ('html5-shim'); / ** REGISTER HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personnalisé');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Ici le processus est le même, la différence ici est que nous utilisons d'autres fonctions pour ajouter des scripts.

Pour ajouter des scripts, nous utilisons le wp_register_script et wp_enqueue_script les fonctions. le wp_register_script fonction nécessite les éléments suivants:

# 1 Param: Un nom que vous pouvez choisir, quelque chose comme jquery, dojo, etc..
# 2 Param: Le répertoire de fichiers, notez que nous utilisons le THEME_DIR constante ici.
# 3 Param: Ici, vous tapez les dépendances, le nom des fichiers de script devant être chargés avant ce fichier..
# 4 Param: La version.
# 5 Param: Ici, vous dites si ce script sera ajouté dans le wp_head () (généralement dans header.php) ou la wp_footer () (généralement dans footer.php) appels de fonction. Si vous passez faux, il sera chargé sur wp_head (). Si vous passez vrai, sera chargé sur wp_footer ()

Et puis, nous appelons le wp_enqueue_script fonction et nous passons en paramètre le nom de notre script qui sera ajouté.

Pour ajouter plus de scripts à votre fichier, il suffit de dupliquer ces deux lignes et de modifier les noms, le répertoire et les autres paramètres..

Étape 3: le header.php

Tout d'abord, je vais énumérer ici les liens vers les bibliothèques que vous pouvez utiliser sur ce modèle. J'utilise déjà jQuery et HTML5 Shim dans ce modèle, mais vous pouvez en ajouter d'autres..

jQuery - bibliothèque pour ajouter de jolis effets à votre thème, je pense que vous connaissez probablement déjà cette bibliothèque, et elle est en fait déjà incluse dans WordPress par défaut
Modernizr - cette bibliothèque vous permet de connaître exactement les fonctionnalités supportées par le navigateur de l'utilisateur
HTML5 Shim - cette bibliothèque permet aux navigateurs ne prenant pas en charge nativement le balisage HTML5 de commencer à le prendre en charge.
Respond.js - autorise les navigateurs n’ayant pas de support natif pour Requêtes de médias CSS3 pour commencer à le soutenir

Vous pouvez télécharger ces bibliothèques et mettre à jour les chemins dans votre header.php fichier.

Doctype

Dans ce modèle, nous utilisons simplement le doctype HTML5 par défaut:

Étiquette

Dans cette partie, j'ai utilisé quelques éléments conditionnels d'IE pour ajouter une classe selon la version d'IE ou rien n'a été ajouté si le navigateur n'est pas IE 8 ou une version inférieure (Firefox, IE9, Chrome et autres)..

Cela est très utile car vous pouvez créer une règle dans votre fichier CSS pour affecter un objet si le navigateur est IE 7 en procédant comme suit:

 / * S'exécute sur tous les navigateurs * / #mymenu width: 400px;  / * FONCTIONNE UNIQUEMENT SUR IE7 * / .ie7 #mymenu width: 200px;

Mais vous pouvez également créer un fichier CSS séparé et le lier dans la zone des conditions, nous en parlerons dans les étapes ci-dessous. Le choix t'appartient.

Mots clés

Les balises META sont très importantes car elles transmettent certaines informations au navigateur pour assurer le rendu correct de votre thème..

Cette ligne garantit que les navigateurs ne vont pas utiliser Mode de quirks, très utile car ce mode de rendu peut casser la mise en page.

Cette ligne indique au jeu de caractères au navigateur, en évitant les caractères inconnus!

Des balises méta de base qui peuvent aider le SEO de votre thème. Vous pouvez ajouter des mots clés décrivant votre site Web et saisir votre nom ou le nom de votre entreprise..

Cette balise supprime / réinitialise tout zoom par défaut d'un appareil mobile tel qu'un iPad ou un iPhone., très utile si vous travaillez sur une mise en page responsive.

Mots clés

Cela ajoute un favicon sur votre page, en donnant une touche plus professionnelle à votre site web.

Un lien vers le fil RSS de votre site web.

Un lien pour l'URL Pingback de votre site.

</code> Étiquette</h3> <pre> <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?> La balise title est très importante car elle remplace le titre par défaut et est utile pour améliorer votre classement dans les moteurs de recherche..
 wp_head ()
  
 C’est une fonction très importante, vous DOIT appelez cette fonction! Grâce à cette fonction, WordPress ajoute du code provenant de plugins, d’autres bibliothèques JavaScript et bien plus encore..
 
 Conclusion
 Et c'est fait! J'espère vraiment que vous avez apprécié cet article et s'il vous plaît, n'hésitez pas à commenter le modèle et à donner votre extrait de code pour l'améliorer!



		
			
	   
	




Code