Leçon 2 : création du fichier header.php
Ce tutoriel est constitué de plusieurs parties. Je vous recommande de commencer la lecture depuis le début du tutoriel, afin de mieux comprendre les explications.
Le fichier header.php est le fichier qui va se situer en haut de votre site. Il contient le titre et la description du site.
La création du fichier header.php
Pour créer le fichier header.php, il faut vous rendre dans votre dossier (wp-content/themes/tutoriel).
Créer le fichier header.php. Une fois, crée, ouvrez-le avec votre éditeur de texte.
Modification du fichier header.php
Rajouter ces lignes :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php echo get_bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta name="description" content="<?php bloginfo('description');?>"/>
<meta http-equiv="Cache-Control" content="max-age=600" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
<?php wp_head(); ?>
</head>
<body>
l’entête est standard, avec quelques petits rajouts spécifiques à WordPress
<title><?php wp_title(); ?></title> : affiche le nom du site dans l’onglet du navigateur
<link rel= »shortcut icon » href= »/favicon.ico » type= »image/x-icon »> : Si vous utilisez une favicon, il faut la placer dans le dossier images de votre thème.
<?php wp_head(); ?> : permet aux plugins de rajouter des informations dans le head.
Ajout du titre et de la description du site WordPress
Dans le header, on va afficher le titre du site et la description.
Voici la commande pour afficher le titre : <?php bloginfo( ‘name’ );?>
Voici la commande pour afficher la description : <?php bloginfo(‘description’); ?>
Vous pouvez modifier le titre et la description dans Réglages -> Général (dans la barre latérale gauche du menu administrateur).
Pour les besoins du tutoriel et pour mieux vous montrer comment s’articulent les différents éléments, on va mettre le titre autour d’un cadre et en H1 et la description en H3.
Pour ce faire, on va rentrer dans le fichier header, en dessous de <body> :
<div class="container">
<div class="header">
<h1><?php bloginfo( 'name' );?></h1>
<h2><?php bloginfo('description'); ?></3>
</div>
La création du fichier header.php est finie, il ne vous reste plus qu’à le fermer.
Une fois ces lignes tapées dans le fichier index.php, ouvrez le fichier style.css avec l’éditeur de texte et copier les lignes suivantes, à la fin du fichier :
body{width:100%;min-width:600px;font-family:Helvetica,Arial,sans-serif}
.container{width:95%;margin:20px auto;padding:10px;border:1px solid #ccc}
.header{background:#EFFFD2;padding:10px}
h1{margin:0;font-size:48px;color:#FF8040}
h2{font-size:16px}
Ligne 1 (body) : on indique que la page fait 100% de la largeur de l’écran avec un minimum de 600 pixels et que l’on utilise une police de caractère sans empattement.
Ligne 2 (container) : on crée un cadre qui fait 95% de la largeur de l’écran, que l’on centre en largeur, avec une marge interne de 10 pixels avec un cadre de 1 pixel.
Ligne 3 (header) : c’est la div de notre titre, avec un fond vert et une marge interne de 10 pixels (sinon le titre et la description sont collées au bord du cadre).
Ligne (h1) : taille et la couleur du titre (orange).
Ligne (h2) : taille de la description
Nous allons maintenant passer au fichier sidebar.php
Les différentes parties du tutoriel :
Voici les différents fichiers du Tutoriel :
Tutoriel pour créer un thème pour WordPress
Leçon 1 : création du thème pour WordPress
Leçon 2 : création du fichier header.php
