Créer un thème WordPress intégralement N°2 : le header et la création de site

Dans ce deuxième numéro nous allons attaquer les choses sérieuses et créer le header le plus simplement possible. Pour cela, quelques pré-requis sont nécessaires.

Pré-requis à la création du site et des templates.

Pour créer un thème, il faut déjà savoir où vont être stockés les fichiers : rendez-vous dans le dossier WordPress de votre ordinateur. Ouvrez « wp-content » puis « thèmes » : engendrez un nouveau dossier que vous sauvegardez sous le nom qui représente votre futur thème ( ceci est modifiable à tout moment).

Créer le header.php

Ouvrez Notepad et sauvegardez la page en la nommant header.php. Nous allons entrer quelques codes qui sont de précieuses indications pour les moteurs de recherche et navigateurs :

Le DOCTYPE annonce le codage utilisé sur la page. Ne nous encombrons pas avec les détails que vous n’aurez pas à modifier par la suite : copiez le code ci-dessous et intégrez le dans votre template.

Ensuite, copiez le code dans l’image ci-dessous lorsque vous avez saisi l’utilité des éléments…

 Comprendre les termes utilisés dans les codes lors de la construction de site

</head> concerne les données informatives pour les moteurs de recherche. Mais pourqoi y a-t-il / devant le mot? Parce que ce symbole annonce la fin du contenant. Si vous n’avez pas de base en html ni php, comprenez simplement qu’on ouvre une balise avec un symbole, ici <blabla> et pour la fermer on note la même chose avec /, soit </blabla>. Attention la moindre ponctuation inexacte peut rendre votre site illisible donc, cramponnez-vous.

 

<body> C’est le plus grand contenant : il englobe la page, le header, le footer… Pour qu’il joue ce rôle convenablement, on doit fermer la balise dans un autre fichier : l’ index car il contient le footer et d’autres données.

<div id="header"> Si vous vous souvenez bien, le header correspond à l’entête. Nous allons y insérer menus, images…

<p class="menu"> Voici justement le menu qui se trouve bien à l’intérieur du header, puisque celui-ci est placé en amont et la balise </header> n’est pas encore fermée (elle le sera aussi dans l’index). Dans ce thème, nous avons placé le menu en haut du Header.

Pour que le menu fonctionne, on écrit le code :
<?php wp_nav_menu (); ?></p>

Celui-ci va solliciter function.php lorsqu’il sera créé : il est « la pile » du menu (c’est lui qui rend le menu actif).

Remarquez qu’on a fermé le balise du menu avec </p>.

Pour faire apparaître le titre et la description de votre site, nous rédigeons :

<h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p class"description"><?php bloginfo('description'); ?>

<div id="page"> Ceci va appeler la page de votre site. Dans l’exemple que vous verrez dans les prochains billets, le contenant page contiendra l’article et la sidebar.On la refermera donc après ces éléments, dans l’index.

Enfin, nous fermons le header avec </div>.

Le code final de notre header est donc :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<title>
<?php bloginfo('name') ?> <span></span> <?php if ( is_404() ) : ?> &raquo;
<?php _e('Not Found') ?>
<?php elseif ( is_home() ) : ?> &raquo; <?php bloginfo('description') ?>
<?php else : ?><?php wp_title() ?><?php endif ?>
</title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<link rel="stylesheet" href="<?php 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'); ?>" /<?php wp_head(); ?>

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>

</head>
<body>

<div id="header">

<p>
<?php wp_nav_menu (); ?></p>

<h1><a href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p class"description"><?php bloginfo('description'); ?>
<div id="page">
</div>

Demain vous apprendrez à créer le template index.php, qui est plus fourni!

Catégorie: Création de sites web, Spécial débutants
2 février 2012
O2switch Hébergement web