Créer une page d'accueil statique sur un blog WordPress
Par défaut, la page d’accueil d’un blog WordPress affiche la liste des derniers articles publiés. Or, si l’on souhaite intégrer WordPress à un site déjà existant, il peut être intéressant de transformer la page d’accueil en une version statique et proposer un lien vers le blog du site contenant la liste des derniers articles publiés. Pour mettre en place cette idée, suivez ce tutoriel !
N.B : cet article fait suite à une question de The Alien sur le forum. Si comme cette personne vous avez des idées de tutoriels, soumettez vos requêtes via le formulaire de contact.
Notez également que cet article requiert un minium de connaissances en matière de blogging sous WordPress et qu’il peut paraître complexe sous certains aspects. Néanmoins, c’est une bonne voie d’apprentissage et les commentaires sont faits pour partager vos problèmes et autres suggestions d’améliorations.
Bonne lecture !
Présentation
Dans ce tutoriel, nous allons dans un premier temps créer une page que nous intitulerons articles.php. Celle-ci remplira le rôle d’une page d’accueil standard, c’est-à-dire listant l’ensemble de vos articles mais qui ne sera pas située à la racine de votre blog. Elle sera tout simplement accessible via un lien depuis la page d’accueil.
En second lieu, nous créerons une seconde page home.php qui nous servira de page statique laquelle restera localisée à la racine du site.
La dernière étape consistera à modifier quelques paramètres dans l’interface de gestion de votre blog WordPress.
Ce n’est pas forcément très évident à comprendre au premier abord, mais la suite du tutoriel devrait vous éclaircir les idées.
Création de la page articles.php
A l’aide du Bloc-notes de Windows ou d’un calepin de votre choix, créer un nouveau fichier que vous enregistrerez sous le nom suivant : articles.php. N’oubliez pas l’extension.
Rendez-vous ensuite dans votre administration WordPress, puis ouvrez l’Editeur à partir du menu Apparence. Dans la liste des fichiers, cliquez sur index.php.
Capture d'écran - Édition du fichier index.php
Sélectionnez la totalité du code via la commande Ctrl+A ou le menu contextuel de votre navigateur favori, puis copiez / collez le tout dans le fichier articles.php nouvellement créé. En agissant de la sorte, nous conserverons le thème de votre blog.
Nous allons à présent ajouter le bout de code suivant en haut du fichier. Ceci aura pour effet d’indiquer à WordPress qu’il s’agit d’un modèle de page (template) :
<?php /* Template Name: Articles */ ?>
Le nom du modèle peut être modifié à votre guise – Articles dans l’exemple.
Capture d'écran - Notepad++, création du modèle articles.php
Ajoutez ensuite le bout de code suivant juste après votre première <div>, soit dans le thème par défaut, de cette manière :
<div id="content" class="narrowcolumn">
<?php query_posts('showposts=10');?>
A l’aide votre client FTP préféré – par exemple FileZilla ou FireFTP, mettez en ligne ce fichier dans le dossier de votre thème :
wp-contentthemesVOTRE_THEME
Retournez à présent dans l’administration WordPress, puis créez une nouvelle page via le menu Pages. Nommez celle-ci comme vous le souhaitez mais n’oubliez pas de choisir le modèle Articles que nous venons de créer. Pour ce faire, un module Attributs situé par défaut sur votre droite, permet de le faire via une liste déroulante.
Pour valider la création de la page, cliquez sur Publier.
Création de la page home.php
Via le Bloc-notes, créez un nouveau fichier que vous enregistrez sous ce nom : home.php.
Comme précédemment, ajoutez en haut du fichier, le code suivant qui permet de définir la page en tant que modèle :
<?php /* Template Name: Home */ ?>
Dans le cas présent, j’ai indiqué le nom Home. Là encore, vous êtes libre de donner le nom que vous souhaitez.
Cependant, il est nécessaire que vous ayez au préalable créer votre propre page d’accueil contenant les informations de votre choix. De ce côté, ce n’est plus de mon ressort ! 
Par conséquent, une fois que vous aurez créé une page – en HTML par exemple, copiez / collez ce dernier dans le fichier home.php. Au final, vous devriez obtenir quelque chose comme cela :
<?php /* Template Name: Home */ ?> <?php /** * @package WordPress * @subpackage Default_Theme */ get_header(); ?> <div>VOTRE CODE</div> <?php get_sidebar(); ?> <?php get_footer(); ?>
Il est vivement conseillé de garder les requêtes PHP pour le header, la sidebar et le footer.
Pour finir, enregistrez le fichier puis mettez-le en ligne – toujours dans le dossier de votre thème.
Retournez à présent dans l’administration WordPress, puis créez une nouvelle page via le menu Pages. Nommez celle-ci comme vous le souhaitez mais n’oubliez pas de choisir le modèle Home que nous venons de créer. Pour ce faire, un module Attributs situé par défaut sur votre droite, permet de le faire via une liste déroulante.
Pour valider la création de la page, cliquez sur Publier.
Félicitations, vous avez désormais créé 2 nouveaux modèles de pages opérationnels : articles.php et home.php. Toutefois, une dernière modification s’impose pour terminer ce tutoriel.
Intégration de votre page statique à votre blog dynamique
Cette dernière partie va nous permettre de définir les modèles de pages que nous venons de créer en tant que page d’accueil et page d’articles.
Pour ce faire, déroulez le menu Réglages puis cliquez sur Lecture.
Cochez ensuite Une page statique puis sélectionnez les pages correspondantes via les listes déroulantes. Les intitulés sont ceux que vous avez définis lors de la création de vos pages directement via l’administration de votre blog. Il ne s’agit donc pas des noms donnés aux modèles.
Capture d'écran - Paramétrage des options de lecture dans WordPress
Pour terminer, cliquez sur Enregistrer les modifications.
Dans un nouvel onglet, ouvrez votre site et constatez le résultat : une page d’accueil statique avec votre contenu préalablement créé et une page d’articles contenant les différents écrits s’affichent. Lorsque vous aurez atteint les 10 articles, des liens de navigation s’afficheront automatiquement.
Si un jour vous souhaitez faire machine arrière, pas de problèmes ! Il vous suffira de cliquer sur Vos derniers articles dans les Options de lecture et valider le tout.
Crédits photographiques : Wordpress Poster by ~wherewillyoube on deviantART
Après avoir suivi ce long tutoriel, j’espère que vous en saurez plus sur l’intégration d’un blog dans un site Web à base de WordPress. Comme quoi, cette plateforme de blogging est capable de nous suprendre un peu plus chaque jour et sa flexibilité n’a pas de limites !
18 commentaires pour “Créer une page d'accueil statique sur un blog WordPress”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Et un grand merci, je m’enquerrais d’essayer ce tuto dès cette semaine !!!
Génial Maigret
@The Alien : j’espère que cela correspond à ce que tu souhaitais et que tu parviendras à le mettre en œuvre pour ton projet. Bonne continuation !
Très interessant, je me demandais dernièrement si une telle chose était possible, merci Maigret
@Alexis : la question à se poser avec WordPress serait de savoir si quelque chose est impossible à mettre en œuvre !
Car au final on peut toujours sans sortir même par des moyens compléments farfelus.
Vraiment très bon tutoriel!
Super tutoriel, très facile à suivre même pour des novices. J’ai juste un problème avec la fonction « attributs », je ne vois pas où on peut choisir articles.php…
[...] L’adresse (URL) principale de la page d’accueil (nom de domaine) peut aboutir sur une page statique sur laquelle un lien renverra vers le blog qui lui est dynamique. Un très bon article à ce sujet pour WordPress. [...]
Merci pour ce tutorial mais il me reste 2 interrogations,
1- Comment afficher les x derniers articles de son blog sur cette fameuse page d’accueil
2- Comment afficher les x articles les plus lus, sachant que j’utilise wp-postviews ?
Merci à tous
@Erwin : il existe plusieurs méthodes. Soit tu ajoutes une sidebar sur la page d’accueil et qui te permettra ensuite d’insérer des widgets, soit tu passes par le code en ajoutant sur ta page d’accueil la commande suivante :
< ?php if (have_posts()) : ?> < ?php while (have_posts()) : the_post(); ?> < ?php endwhile; ?>Pour les pages vues, essaie avec ceci :
< ?php if(function_exists('the_views')) { the_views(); } ?>Merci pour ce code mais en fait je me suis mal exprimé, ce que je souhaiterai étant donné que j’ai une page d’accueil statique c’est de pouvoir
1- lister les titres de mes derniers articles publiés
2- lister les titres de mes articles les plus lus
Merci de m’aider car je n’ai encore rien trouvé à ce sujet.
PS: Merci inspecteur !
@Erwin : vu que le code passe mal dans les commentaires et que visiblement il n’existe pas de solutions pour parer ce problème, je te mets les différents bouts de code nécessaires sur le forum.
Je te remercie pour toutes ces informations, je vais mettre ça en place dès que possible.
Pour le grade de Maigret j’ai du louper l’épisode où il est passé commissaire, en fait j’ai vraiment hésité mais en tapant inspecteur maigret sur google j’ai eu des résultats alors je me suis dis que ça devait être ça …
Bonne continuation à toi aussi.
Bonjour,
En fait, il n’est pas du tout utile de créer un template.
Créer une page dans wordpress suffit amplement… Ce sera dont les paramètres de l’admin qui seront utilisé (10 derniers articles, …)
@Luc : avec beaucoup de retard, l’utilité tient dans le fait que ta page d’accueil pourra être entièrement personnalisée. Dans le cas d’une page WordPress standard, tu auras le header, la sidebar et le footer comme sur un article.
Cela dit, c’est tout à fait envisageable !
Bonjour,
De mon côté je n’y arrive pas. J’ai doublement de la sidebar de gauche à la place des articles. Merci de me dire où j’ai pu faire l’erreur. Voici mon code pour la page article.php :
get_queried_object_id(); }
?>
<?php
// Next/Previous PAGE Links (on multi post pages)
// in next_posts_link "next" means older posts
if ( !is_single() AND !is_page() AND strpos($bfa_ata_location_multi_next_prev,'Top')!==false AND show_posts_nav() ) {
if (function_exists('wp_pagenavi')) {
echo '’; wp_pagenavi(); echo »;
} else {
echo ‘
‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
next_posts_link(bfa_escape($bfa_ata_multi_next_prev_older)) :
previous_posts_link(bfa_escape($bfa_ata_multi_next_prev_newer));
echo ‘ ’ . $nav_home_div . ‘ ‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
previous_posts_link(bfa_escape($bfa_ata_multi_next_prev_newer)) :
next_posts_link(bfa_escape($bfa_ata_multi_next_prev_older));
echo ‘
‘;
}
}
?>
<?php
// Next/Previous POST Links (on single post pages)
// in next_post_link "next" means newer posts
if ( is_single() AND strpos($bfa_ata_location_single_next_prev,'Top')!==false ) {
echo '
‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ? previous_post_link(bfa_escape($bfa_ata_single_next_prev_older)) :
next_post_link(bfa_escape($bfa_ata_single_next_prev_newer));
echo ‘ ’ . $nav_home_div_on_single . ‘ ‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ? next_post_link(bfa_escape($bfa_ata_single_next_prev_newer)) :
previous_post_link(bfa_escape($bfa_ata_single_next_prev_older));
echo ‘
‘;
} ?>
<div class="post »>
<?php // Post Kicker
if( (is_home() && $bfa_ata_post_kicker_home != "") OR
(is_page() && $bfa_ata_post_kicker_page != "") OR
(is_single() && $bfa_ata_post_kicker_single != "") OR
( (is_archive() OR is_search() OR is_author() OR is_tag()) && $bfa_ata_post_kicker_multi != "") ) {
echo '’;
if ( is_home() ) { echo postinfo(« $bfa_ata_post_kicker_home »); }
elseif ( is_page() ) { echo postinfo(« $bfa_ata_post_kicker_page »); }
elseif ( is_single() ) { echo postinfo(« $bfa_ata_post_kicker_single »); }
else { echo postinfo(« $bfa_ata_post_kicker_multi »); }
echo »;
} ?>
<a href=" » rel= »bookmark » title= »Permanent Link to « >
<?php // Post Byline
if( (is_home() && $bfa_ata_post_byline_home != "") OR
(is_page() && $bfa_ata_post_byline_page != "") OR
(is_single() && $bfa_ata_post_byline_single != "") OR
( (is_archive() OR is_search() OR is_author() OR is_tag()) && $bfa_ata_post_byline_multi != "") ) {
echo '’;
if ( is_home() ) { echo postinfo(« $bfa_ata_post_byline_home »); }
elseif ( is_page() ) { echo postinfo(« $bfa_ata_post_byline_page »); }
elseif ( is_single() ) { echo postinfo(« $bfa_ata_post_byline_single »); }
else { echo postinfo(« $bfa_ata_post_byline_multi »); }
echo »;
} ?>
<?php if ((is_home() && $bfa_ata_excerpts_home == "Full Posts") OR
(is_category() && $bfa_ata_excerpts_category == "Full Posts") OR
(is_date() && $bfa_ata_excerpts_archive == "Full Posts") OR
(is_tag() && $bfa_ata_excerpts_tag == "Full Posts") OR
(is_search() && $bfa_ata_excerpts_search == "Full Posts") OR
(is_author() && $bfa_ata_excerpts_author == "Full Posts") OR
is_single() OR
is_page() OR (is_home() AND !is_paged() AND $postcount
<?php // Post Pagination
if ((is_home() && $bfa_ata_excerpts_home == "Full Posts") OR
(is_category() && $bfa_ata_excerpts_category == "Full Posts") OR
(is_date() && $bfa_ata_excerpts_archive == "Full Posts") OR
(is_tag() && $bfa_ata_excerpts_tag == "Full Posts") OR
(is_search() && $bfa_ata_excerpts_search == "Full Posts") OR
(is_author() && $bfa_ata_excerpts_author == "Full Posts") OR
is_single() OR
is_page() ) {
wp_link_pages('before=‘ . __(‘Pages:’,'atahualpa’) . ‘ &after=&next_or_number=number’);
} ?>
<?php // Post Footer
if( (is_home() && $bfa_ata_post_footer_home != "") OR
(is_page() && $bfa_ata_post_footer_page != "") OR
(is_single() && $bfa_ata_post_footer_single != "") OR
( (is_archive() OR is_search() OR is_author() OR is_tag()) && $bfa_ata_post_footer_multi != "") ) {
echo '’;
if ( is_home() ) { echo postinfo(« $bfa_ata_post_footer_home »); }
elseif ( is_page() ) { echo postinfo(« $bfa_ata_post_footer_page »); }
elseif ( is_single() ) { echo postinfo(« $bfa_ata_post_footer_single »); }
else { echo postinfo(« $bfa_ata_post_footer_multi »); }
echo »;
} ?>
<?php // Next/Previous POST Links (on single post pages)
if ( is_single() AND strpos($bfa_ata_location_single_next_prev,'Middle')!==false ) {
echo '
‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ? previous_post_link(bfa_escape($bfa_ata_single_next_prev_older)) :
next_post_link(bfa_escape($bfa_ata_single_next_prev_newer));
echo ‘ ’ . ($bfa_ata_home_single_next_prev!= » ? ‘‘ .
$bfa_ata_home_single_next_prev . ‘‘ : ») . ‘ ‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ? next_post_link(bfa_escape($bfa_ata_single_next_prev_newer)) :
previous_post_link(bfa_escape($bfa_ata_single_next_prev_older));
echo ‘
‘;
} ?>
<?php // Next/Previous POST Links (on single post pages)
// in next_post_link "next" means newer
if ( is_single() AND strpos($bfa_ata_location_single_next_prev,'Bottom')!==false ) {
echo '
‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
previous_post_link(bfa_escape($bfa_ata_single_next_prev_older)) :
next_post_link(bfa_escape($bfa_ata_single_next_prev_newer));
echo ‘ ’ . ($bfa_ata_home_single_next_prev!= » ? ‘‘ .
$bfa_ata_home_single_next_prev . ‘‘ : ») . ‘ ‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
next_post_link(bfa_escape($bfa_ata_single_next_prev_newer)) :
previous_post_link(bfa_escape($bfa_ata_single_next_prev_older));
echo ‘
‘;
} ?>
<?php
// Next/Previous PAGE Links (on multi post pages)
// in next_posts_link "next" means older
if ( !is_single() AND !is_page() AND strpos($bfa_ata_location_multi_next_prev,'Bottom')!==false AND show_posts_nav() ) {
if (function_exists('wp_pagenavi')) {
echo '’; wp_pagenavi(); echo »;
} else {
echo ‘
‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
next_posts_link(bfa_escape($bfa_ata_multi_next_prev_older)) :
previous_posts_link(bfa_escape($bfa_ata_multi_next_prev_newer));
echo ‘ ’ . $nav_home_div . ‘ ‘;
$bfa_ata_next_prev_orientation == ‘Older Left, Newer Right’ ?
previous_posts_link(bfa_escape($bfa_ata_multi_next_prev_newer)) :
next_posts_link(bfa_escape($bfa_ata_multi_next_prev_older));
echo ‘
‘;
}
} ?>
@guy : je t’invite à venir poster sur le forum car les bouts de code deviennent vite ingérable via les commentaires – j’ai récupéré le tien dans le spam et j’ai bien reçu ton mail.
Une fois inscrit, détailles-nous précisément ton problème avec l’URL de la page concernée pour qu’on puisse t’aider au mieux.
@ron101 : merci !
@Thalie : le module Attributs est-il présent dans l’interface ou non ? Es-tu bien dans l’onglet Pages ? As-tu vérifié dans les Options de l’écran que cette fonctionnalité était cochée ?