Créer un thème WordPress intégralement N°3 : l’index.php, création de sites.

Pour créer l’index.php, nous reprenons quelques informations présentes dans le header.php. N’hésitez pas à relire l’épisode N°2 si quelques notions vous échappent!

L’index peut contenir de multiples informations : vous y intégrerez tout ce qui concerne la page d’accueil, ce qui permet de personnaliser celle-ci indépendamment du reste du site.

Créer l’index.php lors de la création du site WordPress

Comme pour le header.php créé dans le billet précédent, ouvrez un fichier Notepad et appelez-le index.php. Pour que la page d’accueil ouvre le fichier header.php, nous indiquons ceci :

<?php get_header(); ?> <!– ouvrir header,php –>

Ce que vous voyez en orange n’a pas d’incidence sur votre site, ce n’est qu’une indication : pour cela on l’encadre des symboles <!– et –>.  Cette astuce sert de repère pour la suite : lorsque vous voudrez faire évoluer votre thème, vous trouverez les balises plus aisément.

Ensuite, nous intégrons un espace texte dédié à vos articles, le content :

<div id="content">

Nous laissons la div ouverte puisque nous allons détailler plusieurs choses du content. Notamment les postmetadata : données relatives au contenu comme le nom de l’auteur, la catégorie etc. Elles sont personnalisables :

<p class="postmetadata">

Avant cela, nous intégrons certains renseignements qui s’afficheront en correlation avec l’article : le titre par exemple. La balise h2 est importante pour le SEO : elle est l’une des premières lectures du moteur de recherche qui parcours le site.

En orange le if devra être fermé plus bas avec <?php endif; ?> :

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="post_content">

Intégrer des commentaires lors de l’élaboration de votre blog

Nous notons le code suivant, en sachant que si vous souhaitez à l’avenir retirer l’accès aux commentaires il suffit d’enlever ce code du fichier index, page ou single.php, ou les trois, à votre guise! Il va appeler comment.php :

Ensuite nous fermons les div ouvertes précédemment hormis quelques unes car nous n’avons pas tout inséré dans l’index:
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>
</div>
</div>

<?php endwhile; ?>

Les div sont sources de nombreuses « catastrophes » quant à l’apparence du site : si un jour vous retrouvez votre sidebar en bas de page par exemple, pensez de suite à vérifier vos que vos div sont bien fermées. Le problème est donc solutionné en quelques secondes.

Intégrer la sidebar et le footer à l’index du site

Nous appelons les fichiers correspondants, au même titre que nous l’avons fait pour le header.php :

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Nous clôturons le if comme précisé tout à l’heure, ainsi que la page que nous avions ouverte dans le header.php, de même que le body :

</div>

</body>

Voilà une bonne chose de faite! Vous verrez que les autres fichiers php iront plus vite à créer car nous reprendrons la majorité des éléments de l’index.php.

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