Fran6art 13 ans de blogging par Francis Chouquet

Créer une page statique comme page d’accueil de votre blog WordPress

0

Grosse prise de tête cet après-midi pour trouver un moyen simple et efficace qui permettrait de créer une page d’accueil différente du blog. En fait, c’est un commentaire de Fly06 qui m’a fait réagir. En effet, pour avoir une page d’accueil, un moyen simple est de créer un template home.php et l’affaire est faite ! Pas si simple que ça… La page d’accueil va prendre la place de l’index à la racine de votre site. En tapant l’URL de votre blog, vous allez attérir sur la page d’accueil et non plus sur les derniers billets. Le thème k2 a un onglet dans le menu de navigation qui permet d’arriver sur le blog. Sauf, que si on regarde bien la hiérarchie des templates, on arrive toujours sur le home.php et plus sur l’index.php…

Alors, jusqu’à il y a peu, il y avait différentes manières de s’en sortir. On pouvait installer un plugin, comme Static Front Page ou Home Page Control, ou encore utiliser différents hacks pour arriver à ces fins. Mais pour ce qui est des hacks, la solution n’était jamais idéale et parfois très périlleuse à mettre en place. En tout cas, avoir une page d’accueil différente de son blog, était un vrai boulôt de développeur et peu accessible au simple utilisateur… En tout cas, certains se sont bien pris la tête, n’est-ce-pas Ben ? 😉

Depuis l’arrivée de la version 2.1 de WordPress, les choses se sont considérablement améliorées puisque la plateforme vous propose de le faire pour vous (Options -> Lecture):

Static-Page

Cependant, ce n’est pas clair et les explications du codex wordpress sont assez simplifiées. Jusqu’à ce que je tombe sur cet article. Je vais donc vous décrire dans le détail la méthode expliquée dans cet article.

Tout d’abord, il va vous falloir créer une nouvelle page pour accueillir le contenu de votre page d’accueil. Pour cela, vous allez vous rendre dans l’onglet « Ecrire une page » et créer votre nouvelle page. Mais auparavant, il vous faut savoir quel template de page vous allez utiliser pour votre page d’accueil et quelle apparence vous voulez qu’elle ait. Si vous souhaitez garder la même organisation, vous pouvez très bien garder le template page.php ou vous pouvez aussi en créer un nouveau que vous modifierez comme vous le souhaitez.

Admettons que vous souhaitiez lui donner une apparence particulière. Vous allez créer un nouveau template que vous allez appeler « accueil.php ». Dedans, vous allez copier le contenu du template « page.php ». Sur cet article, Rich propose d’utiliser le contenu de l’index.php. Tout dépend vraiment de l’utilisation que vous allez en faire. Ici, je prendrai le template page.php qui est plus simple à utiliser, sans plus de paramétrages.

Une fois le contenu de page.php copié dans accueil.php, ajoutez la ligne de code qui suit au-dessus du contenu déjà copié et faîtes-y toutes les modifications que vous voulez:

1 2 3 
/* Template Name: Accueil */

Enregistrez le fichier et mettez le dans le dossier de votre thème. Allez créer votre page avec son contenu, et dans la colonne de droite, vous allez voir apparaître la box qui va vous permettre de choisir le modèle de page:

Modele-De-Page

Là, choisissez « Accueil », le template que vous venez de créer. Enregistrez votre page.

Maintenant, il va nous falloir déterminer la « page des articles », la page sur laquelle vont s’afficher les articles. Comme l’URL de votre blog (monsite.com) va être « occupé » par votre page d’accueil, il vous faut une autre page pour vos articles. Il va donc vous falloir créer une autre page pour ceux-ci.

On retourne donc dans l’onglet « Ecrire une page ». Ici, vous pouvez appeler la page « blog » ou « journal », comme je l’ai fait sur la copie d’écran plus haut. Ne mettez aucun contenu, les articles viendront s’insérer automatiquement ici. Le modèle page est celui par défaut. Enregistrez le tout.

Allez maintenant sous l’onglet Options > Lecture, au niveau de l' »affichage de la page d’accueil ». Cochez la case « Une page statique », et parmi les choix de page d’accueil, choisissez « Accueil » et pour la page des articles, choisissez celle que vous venez de créer, ici « Journal ». Enregistrez les modifications.

Maintenant, allez sur votre site. La nouvelle page d’accueil apparaît à la racine de l’URL: www.monsite.com. Vous remarquez également que dans la liste des pages du blog (et j’espère que vous en avez une, sinon direction ce tutoriel !!) de nouvelles pages sont apparues. Ce sont celles que l’on vient de créer. Maintenant, cliquez sur la page qui va vous amenez vers vos articles. Revoilà votre blog ! Par contre, un changement, et pas des moindres, l’URL de votre blog est modifiée. Maintenant, vous avez quelque chose du style: www.monsite.com/journal. Toujours pénalisant pour Google quand la page est référencée depuis longtemps… Par contre, les articles gardent, quant à eux, les mêmes URL.

Voilà donc un moyen simple d’installer une page d’accueil sur votre blog. Même si les incidences en terme de référencement peuvent ne pas être trop conséquentes, il est toujours important de penser à la création de cette page d’accueil quand on crée son blog ou pendant les premières semaines qui suivent sa création.

Bon week-end

Fran6

96 Commentaires

  • Fly06

    Merci Francis pour ta réactivité, c’est cool !
    J’avais entre temps résolu le problème grâce au forum à un détail près, le lien entre une page et un template. J’étais partie sur l’idée d’utiliser un plugin permettant d’intégrer du php dans une page WP mais d’après l’article que tu cites, il semble que ce ne soit pas nécessaire, il suffit de créér un template pour la page d’accueil et de le lier à la page en question dans la config…
    Je vais tester ça demain 😉
    Bon week-end !

  • C’est marrant, j’ai passé ma soirée d’hier sur un problème similaire : je sens qu’il va y avoir des backlinks qui ne vont pas se perdre entre nos deux blogs quand j’aurais terminé le billet ^_^
    A bientôt 🙂

  • C’est clair !!! 😀

  • Merci pour cet article, j’avais bien du mal à comprendre comment faire.

    Pour des raisons de structure cependant, il est aussi intéressant de changer les permaliens des articles pour qu’ils soient « dans » journal : http://www.fran6art.com/journal/2007/06/08/truc serait plus logique, puisqu’on peut ainsi « tronquer » l’url au fur et à mesure, conformément aux règles d’usabilité !

    Patrice

  • Salut Patrice

    Effectivement, on peut faire aussi de cette manière là. A ce moment-là, le blog n’est pas à la racine et il est également plus simple de créer une page d’accueil « séparée » pour le blog.

  • Un grand merci. Ton tutorial m’a été d’une aide précieuse…
    Très utile pour mettre en place un site qui ne ressemble pas à un blog…

  • amo

    Salut,
    Merci our ce bon tutoriel. Néanmoins, je ne sais pas pourquoi, le pluggin Page Navi ne fonctionne plus sur cette nouvelle page ainsi créée. J’ai beau paramétrer un nombre de post important dans options > lecture > nb de post sur une page, seule une page est dispo…
    Avez vous la solution ?

  • Odilon

    Bonjour Fran6, et merci pour tous ces excellents articles.
    J’ai un petit souci avec la solution proposée, à moins que je ne loupe quelque chose d’essentiel: dans la liste des pages (utilisée entre autres en ul-li pour le menu de navigation du site), WordPress affiche maintenant, outre la page « journal », « home » (par défaut) et « accueil ». Comment faire pour supprimer l’une des deux afin d’éviter cette répétition?
    Merci d’avance pour ta réponse!

  • Odilon

    J’ai trouvé la réponse à ma question ci-dessus : il suffirait d’exclure l’ID de la page « accueil » au niveau du menu grâce à WP-list-pages ( (la page « accueil » porte l’ID 17).

    Mais voici ma nouvelle question : comment inclure sur cette page « accueil » devenue la homepage du site, des éléments du blog utilisant une boucle? Comme, par exemple, les derniers commentaires, ou encore certains articles? Il semblerait qu’une fois qu’une page est reprise en statique, elle ne fait plus appel à la boucle présente dans le template…

    Une idée pour contourner cet inconvénient? Cela dépasse un peu mes faibles compétences de wordpresseur débutant 🙂

    Merci encore!

    O.

  • Je suis fan de cheval et de tous les autres animaux

  • Alleluia, 2 jours que je me prends la tête pour réussir à récupérer la page de mes articles !

    Merci.

  • Bonjour,

    Super ces tutoriaux, et celui-ci en particulier. Cependant, j’aimerais faire un systeme différent : une page web indépendante du blog qui arrive sur ma racine www. et qui dirige ensuite sur le site wordpress comme ici : http://www.anthonycocain.com (c’est pas moi qui l’ais fait 🙂 )

    Vous savez comment faire svp?

    Merci

    Anthony

  • @anthony cocain

    C’est très simple : il te suffit de créer un fichier html que tu nommes index.html et que tu places à la racine de ton site. Tu peux faire ce que tu veux sur cette page sans aucun souci.

    Ensuite, il faut que tu installes WordPress dans un sous-répertoire, comme « blog » ou « site », et faire pointer les liens que tu auras inséré sur ton index.html vers ce sous répertoire, soit http://www.tonsite.com avec une jolie page, avec un gros lien pour http://www.tonsite.com/blog

    et voilà !

  • @odilon : peut-être que cette page pourra t’aider (mais c’est en anglais..) http://codex.wordpress.org/Con.....Front_Page

    Avec un tag de conditionnalité pour indiquer que tu es sur la page statique d’accueil te permettra ensuite d’afficher la boucle que tu veux.

    Si tu ne te sens pas le courage de toucher autant au code, tu peux insérer du code php dans la page elle-même (via l’interfaec d’admin wordpress) et installer le plugin runPHP (http://www.nosq.com/blog/runphp/) qui permettra à ce code d’être interprété. Note que je n’ai pas encore réussi à le faire marcher :p

    Note, j’ai oublié la fois d’avant, mais MERCI BEAUCOUP pour cet article, qui m’a montré à quel point on peut perdre 2h sans que quoi ce soit fonctionne quand on place le code une ligne plus haut que normal :p !!!

  • Questions par rapport aux postes d’Odilon.

    Effectivement, dans le tuto Fran6 nous expliquent pas comment supprimer le doublon page Accueil dans la header. Peut-être que quelque chose ma échappé, sinon je veux bien une piste.

    Odilon tu dit qu’il suffirait ce servir de WP-list-pages mais est-ce la seule solution?
    Je ne souhaite pas installer d’extensions pour cette manip.

    Merci encore pour ce site si précieux.

  • obido > Normalement, il ne devrait pas y avoir de page « accueil », en tout cas, pas dans les dernières versions. J’ai fait plusieurs tests et je n’avais pas cette page… Faudrait que j’y regarde de plus près… 😉

  • Comme tu peux le voir sur lesite dont je m’occupe, cela ne marche pas, ou plutot j’ai cette fameuse page Accueil deux fois. Je ne sais pas comment régler ce problème.
    Si quelqu’un à la soluce…

  • Bonjour Anthony,

    Ton site et tes dessins sont vraiment magnifiques.

    J’ai lu sur sur un forum que tu avais demander des conseils pour mettre en place ta page web d’accueil , pourais tu m’aider, car jai bien créer mon fichier html que j’ai nommer index.html, j’ai ensuite installer wordpress dans un sous répertoire /blog/, et j’ai bien fait pointer les liens de mon index.html vers ce sous répertoire…
    Le résultat est que ma page d’accueil s’affiche bien, mais lorsque l’on clique dessus pour rentrer sur le blog, l’affichage du blog n’est pas correct, et de plus lorsque je cliques sur n’importe quel page, catégorie ou quoi que ce soit, cela me renvoi à la page d’accueil!

    Je vous remercie d’avance à l’aide que tout le monde pourra m’apporter car je perd espoir.

    Christelle

  • Ben

    Le problème avec wordpress 2.6, c’est que les modèles de pages ne sont pas accessibles depuis le menu de rédaction, c’est vraiment galère… Si t’as un conseil, ça m’éviterait de réinstaller une version plus ancienne de la bête.

  • Je vais revenir sur ton article car je viens d’avoir une commande similaire pour un client, en l’occurence un festival. Il veut une page d’accueil toute simple avec juste l’affiche du festival, on clique dessus et on arrive sur le blog.

  • Moi, je n’arrive pas à avoir le modèle de page « Accueil ».

    C’est dingue !

    Un conseil ?

    Je suis sous WP 2.6.

    Je ne vois que défaut et archives comme modèles ….

  • fred > il faut que tu crée un nouveau modèle ! 😉

  • Ben oui, je l’ai fais !
    Si j’ai bien compris, je prends le répertoire de mon thème, en local.
    Je copie le contenu du fichier « index.php » dans un autre fichier accueil.php (par exemple), et j(uppe ce fichier sur mon serveur dédié, au même endroit que les autres fichiers php, c’est bien ça ?
    En n’oubliant pas de mettre

    /*
    Template Name: Accueil
    */

    Dans le nouveau php ?

    C’est bien ça ?

    Et ce fichier accueil.php, je dois le trouver dans le modèle de page, non ?

  • Jule

    Même soucis qu’Obido…

    2 pages d’accueil et pas de possibilité d’éffacer l’ancienne.

    De plus lorsque je clique sur la nouvelle page « Blog » (j’ai bien mon blog qui est là) mais cela sélectionne en même temps l’ancienne page d’accueil du site.
    Et donc c’est pô beau du tout!! 🙂

    Je ne sais pas si quelqu’un à trouver une solution mais je suis preneur (Où effacer cette vieille page d’acceuil inutilisée???)

    Merci bcp,
    Jule

  • Jule

    J’oubliais cela fonctionne bien avec certain design mais pas tous… dans mon cas c’est http://wordpress.org/extend/themes/oriental qui me pose soucis.

    Jule

  • Jule > Et avec le thème par défaut, ça fonctionne bien ?

  • Jule

    Francis > Yep !

  • Jule > Donc c’est qu’il y a un bug dans le thème parce que normalement, ça ne devrait poser un aucun souci ce genre de manip…

  • Jule

    Ok je vais creuser ça au cas où je trouverais qque chose ! Merci!

  • Yannik

    Bonjour Francis,
    Tout d’abord bravo pour la formation sur wordpress que je viens d’acheter et de finir, elle est parfaite pour moi qui n’y connaissais rien au blog !

    Je suis entrain de suivre le tutorial sur la création de theme sur ton blog et ça marchait vraiment jusqu’au……Bref j’ai une petite question mais je vois que les commentaires sont clos ! 🙁
    As tu un forum ou unendroit ou je pourrais poser ma question???
    Mercci d’avance et encore bravo pour ce DVD de formation sur wordpress

    Yannik

  • Yannik > Tu peux répondre sur le blog directement ou m’envoyer un formulaire de contact que tu trouveras dans la colonne de droite ! 😉

  • Fred

    Jule > J’ai eu le même problème que toi mais avec un autre thème. Il faut simplement supprimer (ou du moins rendre inactive) la ligne de code du fichier header.php qui inscrit le premier élément de menu. En effet, celui-ci n’est pas dynamique et donc…
    Voici le code, dans mon cas la page d’accueil est appelée Home par défaut :

    <!–<a href= »/ » class= »active »>Home–>

  • Bonjour Fran6, tout d’abord merci pour ces tutoriels qui m’ont été d’une très grande aide pour mon blog qui n’est pas encore en ligne.
    Effectivement je rencontre un problème au niveau de la recherche.
    J’ai une page statique en page d’accueil et une page blog pour mon blog.
    Le problème est que lorsque j’effectue une recherche sur mon blog et que je clique sur le bouton « ok » je me retrouves directement sur la page d’accueil. Donc aucune réponse ne s’affiche vu qu’en page d’accueil je n’ai qu’un diaporama.

    Je pense que ceci est du à la variable :

    action= »/ »

    dans searchform.php. Par quoi faudrait il remplacer ‘home’ pour que le résultat de ma recherche s’affiche sur la page dédié à mon blog ?

    Merci d’avance.

  • bonnand

    Petit problème,

    j’ai suivi à la lettre les indications du tutorial « Créer une page statique comme page d’accueil de votre blog WordPress »

    voici ce que j’obtiens:

    Accueil et blog apparaissent
    dans PAGE de la sidebar

    Mes articles s’affichent dans CATEGORIE « non classé » de la sidebar,
    ils fonctionnent

    la page d’accueil semble fonctionner sous l’url:
    http://localhost/wordpress/
    Elle est vide au départ, et le texte s’y affiche sous la forme d’un texte continu, et non d’un article

    Par contre lorsque je clique BLOG, page blanche et erreur suivante:
    Parse error: parse error in C:\xampp\htdocs\wordpress\wp-content\themes\creation-theme\featured.php on line 18
    L’url est: http://localhost/wordpress/?page_id=29

    Si Francis ou quelqu’un peut me dire quelle erreur j’ai pu faire, car je n’ai
    aucune idée ?

    Merci de votre aide

  • Bonjour,

    J’ai bien suivi ton tutoriel pour créer un site WP, de A à Z. A part quelques ratées, je suis parvenu enfin un un petit résultat (en local).Toutefois, tu nous parles de décrire, à un certain moment, la façon de procéder afin de mettre une image dans le header tout en supprimant, du moins visuellement, titre et définition du titre.
    Nulle part sur le reste de ton excellent site, je n’ai trouvé la méthode pour y parvenir.
    Pourrais-tu me/nous éclairer sur la marche à suivre dans ce sens?
    J’ai tenté par ailleurs de trouver cette info mais n’ai rien trouvé de satisfaisant et clair.
    Merci d’avance pour tes lumières

  • Shimrhod

    Je fais remonter ce sujet :

    Est-il possible d’avoir dans le même « site » wordpress deux pages dynamiques différente,s n’affichant pas les mêmes catégories ?

    L’idée est que la page d’accueil contienne uniquement les articles d’une catégorie « nouvelles » et qu’une autre page contienne des articles scientifiques, mais accessible via un autre lien du menu.

    Merci d’avance.

  • UN GRAND MERCI À TOI ! pour ton aide, après 1 journée à m’arracher les cheveux pour trouver la solution.
    Je tombe sur ton Blog et tout devient limpide…

  • ben

    olalala, je ne comprends rien. Je veux mettre une photo plein écran en accueil demon blog puis accéder au moyen d’un clic sur le blog lui-même. Etant novice, je ne pige pas du tout le tuto.

    « Vous allez créer un nouveau template que vous allez appeler “accueil.php”. Dedans, vous allez copier le contenu du template “page.php »

    ça veut dire quoi? commet on « crée un nouveau template », c’est où?

    moi, dans apparence, je vais dans editeur et je vois boen les « modèles, maus aucun clic avec créer nouveau modèle »…

    help help

  • lambda

    salut
    Encore merci pour tout ses tutoriaux !
    Je ne connaissais rien de WordPress il y a 10 jours et là je commence à comprendre et à faire des choix !!

    j’ai essayer celui ci mais lorsque je mets au premier niveau de mon accueil :

    /*
    Template Name: Accueil
    */

    je peux effectivement choisir une template dans ma page, cependant lorsque que je test le site il ya afficher /* Template Name: Accueil */ juste en dessus de mon header…???

    est ce que quelqu’un peut me dire pourquoi ..?

    merci

  • yacino

    merci infiniment

  • JY

    Merci pour ce petit tuto !

  • Halleluhia euh je sais pas si ca s’ecrit comme ça ,
    bref , non plus sérieusement depuis le temps que je cherche a faire ca ,
    j’étais en train de visiter la bdd lire les codes sources ca commencait un peu
    a me saouler je dois l’avouer :s !!

    Super blog merci .

  • Sébastien

    @lambda je me demandais si tu avais réussi à enlever le /* Template Name: Accueil */
    au dessus de ton header.. j’ai le même problème et je ne trouve pas de solution..

  • lambda

    Bein non, du coup j’ai gardé le template par default..
    Mais j’aimerais bien savoir si quelqu’un sait comment faire car en fait j’en ai besoin.!!??
    Je viens de re-essayer mais toujours le même probleme..
    Merci d’avance

    S.

  • Merci pour ce tuto facile, clair et précis 😉

  • botox

    Tout d’abord félicitations pour cet article et pour l’ensemble de ton travail Francis.
    Cependant je suis en train de faire un site client et ayant utilisé cette méthode, je me demandais si suite à une recherche dans le moteur de google il n’y aurait pas un problème en terme de référencement. A savoir si google n’afficherait pas l’url qui pointe vers la page des articles (ex: http://www.nomdusite.com/articles/) plutôt que cette page « accueil.php » (www.nomdusite.com). J’espère avoir été clair.
    Sinon ca marche parfaitement lorsque l’on rentre l’url dans la barre d’outils du navigateur.
    Merci d’avance

  • Non, si tu penses à mettre le bon sitemap qui va avec pour que le moteur de recherche sache dans quel ordre effectuer sa recherche ! 😉

Success, your comment is awaiting moderation.