Leçon 5 : modification du fichier index.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 index.php est l’un des fichiers les plus importants du thème. Car comme nous l’avons vu, c’est le fichier le plus utilisé dans le thème.

Nous avons déjà crée le fichier index.php, mais il n’est pas vraiment utile en l’état.

Nous allons donc optimiser le fichier index.php.

Pour l’instant, le fichier index.php doit ressembler à ceci :

<?php get_header(''); ?>
<?php if (have_posts() ):?><?php while (have_posts()):the_post();?>
<?php the_content(''); ?>
<?php endwhile;endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php wp_footer(); ?>

Nous allons donc modifier le fichier comme ceci :

<?php get_header(''); ?>
<div class="texte"> <!-- on crée une div pour le texte -->
<?php if (have_posts() ):?><?php while (have_posts()):the_post();?>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2> <!-- affiche le titre de l'article avec un lien -->
Fiche publi&eacute;e le <?php the_time('j F Y') ?></br> <!-- Affiche la date de publication -->
Modifi&eacute;e le <?php the_modified_time('j F Y') ?></br> <!-- Affiche la date de modification -->
Cat&eacute;egorie : <?php the_category(' , ') ?></br> <!-- Affiche la catégorie -->
Auteur <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>"><?php the_author_meta('display_name'); ?></a></br> <!-- Affiche le nom de l'auteur -->
<?php edit_post_link('Editer', ' ', ''); ?><!-- Permet d'éditer l'article (ouvre directement l'article), si vous êtes connecté -->
<?php the_excerpt(); ?> <!-- afficher un extrait du texte -->
<?php endwhile;endif; ?>
</div>
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
<div class="clr"></div> <!-- sans cette div, le footer se retourve sous la sidebar -->
<?php get_footer(); ?>
<?php wp_footer(); ?>
</div> <!-- ferme la div container, qui se trouve dans le fichier header.php -->
</body>
</html>

Une fois modifié, je vous propose de modifier le fichier style.css. Remplacer tout le fichier style.css par :

/*
Theme Name: tutoriel
Author: Philippe
Theme URI: http://buldozer.wordpress.fr
Version: 1.0
Description: création du premier thème
*/
/* couleur */
.header{background:#EFFFD2}
.h1{color:#FF8040}
.texte {background:#FFFBCA}
.sidebar {background:#F5F5F5}
.footer {background:#CCFFDE}
/* couleur */
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{padding:10px}
h1{margin:0;font-size:48px}
h2{font-size:16px}
.puce{list-style-type:none}
.texte {width:70%;float:left}
.sidebar {width:27%;float:right}
.clr {clear:both}
.footer {width:100%}

Une fois modifier, enregistrer le fichier.

Les codes couleur ont été mis à part, juste pour une question pratique. Faites un test avec les couleurs (c’est plus facile à reconnaitre les div) et supprimer les couleurs.

Voici ce que vous devriez avoir maintenant : http://buldozer.fr/labo/page-02

Comme vous pouvez le constater, le texte ne s’affiche pas en entier.

Nous allons donc créer la page single.php : cette page va servir à afficher un article seul.

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

Leçon 3 : création du fichier sidebar.php

Leçon 4 : création du fichier footer.php

Leçon 5 : modification du fichier index.php