Support WordPress Francophone / Intégrer une page en php dans WordPress et la mettre en page d'accueil

Furor · 20-04-2008 22:10:36

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5
- Thème utilisé : Glossy Blue 1.4
- Plugins en place : Akismet 2.1.4 ; Google XML Sitemaps 3.0.3.1; Simple Tags 1.5.6; TinyMCE Advanced 3.0; WordPress.com Stats 1.2.1; WP AJAX Edit Comments v1.1.5.1
- Nom de l'hebergeur : free.fr
- Adresse du site : http://invision.me.free.fr/

Problème(s) rencontré(s) :

Tout d'abord, merci du temps que vous allez m'accorder, je vous en suis infiniment reconnaissant. Voilà mon problème. J'ai, il y a quelques temps, découvert un theme qui s'appelle Revolution Pro Business, disponible à l'adresse suivante : http://www.revolutiontheme.com/business/ . Je me suis intéressé surtout à la disposition de la page d'accueil et j'ai voulu me servir de ce modèle pour créer à mon tour une page d'accueil dans le même ton, cette fois-ci en accord avec mon thème. Grâce à l'aide d'un ami, j'ai réalisé cette page d'accueil, disponible à cette adresse : http://invision.me.free.fr/accueil.php

A présent, mon problème est de réussir à intégrer cette page dans WordPress afin de la mettre en page d'accueil, au lieu de tomber sur la page d'accueil du blog. Je ne veux pas forcément faire de wordpress un CMS (si c'est la solution, aidez moi !) et après plusieurs recherches infructueuses, je me tourne donc vers la communauté de WP France. Alors, quelqu'un pourrait-il me dire comment faire, s'il faut modifier les fichiers du theme dans le répertoire de celui-ci...
Merci d'avance !

Furor

Damino · 20-04-2008 22:33:40

Petite vidéo simple : http://www.youtube.com/watch?v=IAi3ZM1h4SY ou lire notre ami Fran6art.

Dernière modification par Damino (20-04-2008 22:36:10)

Furor · 22-04-2008 19:15:06

Merci pour cette réponse rapide et de très bonne qualité big_smile
Ce qu'il me fallait, je vous tiendrai au courant de l'évolution de ce problème. Normalement, je ne devrais pas avoir trop de difficultés à le régler grâce à ces deux liens. Merci beaucoup ^^

Furor · 22-04-2008 22:27:23

Alors (re)bonsoir à tous, je viens vous tenir au courant de la progression de cette page d'accueil.
J'ai donc surtout suivi la méthode donnée sur le site de Fran6art (au passage, de très bonne facture wink ) qui consistait à rajouter un Template afin de l'utiliser donc de la rédaction de ma page d'accueil.
J'ai donc voulu rajouter

Code:

/*
Template Name: Accueil
*/

Et à ma grande surprise, j'ai constaté plusieurs problèmes :
- le premier est d'abord du à l'utilisation de la "box" modèle de page. En effet, je possédais dans mon répertoire wp-content\themes deux versions du thème Glossy Blue (ne me demandez pas pourquoi, je n’ai pas d’explication rationnelle, un oubli sans doute ^^). Bref, en voyant ce doublon, je décide de le supprimer et mystère, après suppression, la box modèle de page n’apparait plus ! Les fichiers sont en place pourtant… Et dès que je recrée un autre doublon, cette box réapparait… Savez d’où cela peut-il venir ?
- ensuite, il s’agit d’accents. Mon accueil.php est codé en utf-8 mais l’utilisation de caractères spéciaux (accents, ponctuation…) crée de nombreux problème. Grâce à un ami, il a pu résoudre cela en contournant le problème mais je reste assez sceptique. Existe-t-il une solution ?
Je me propose de mettre à disposition le code entier du fichier. Il a été rédigé en réalisant quelques hacks pour l’intégrer à WordPress avant que je vous fasse part de mon problème..

Code:

<?php
 
/*
Template Name: Accueil
*/
 
function htmlspecialchars_decode_home($String)
{
  $String = preg_replace('#&amp;#', '&', $String) ;
  $String = preg_replace('#&lt;#', '<', $String) ;
  $String = preg_replace('#&gt;#', '>', $String) ;
  $String = preg_replace('#&quot;#', '"', $String) ;
  return $String ;
 
}
function PremiereLettre($String)
{
  while(!preg_match('#^[A-Z]#', $String))
  {
    $String = substr($String,1) ;
  }
  return $String ;
}
@mysql_connect("sql.free.fr","invision.me","");
$select_base=@mysql_selectdb("invision.me");
$retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM wp_posts WHERE post_status="publish" ');
$donnees = mysql_fetch_array($retour);
$retour = mysql_query('SELECT * FROM wp_posts WHERE post_title="Home Page"') ;
$data = mysql_fetch_array($retour) ;
$contenu = htmlspecialchars_decode_home(htmlentities(preg_replace('#'.chr(146).'#', '\'', $data['post_content'])));
$retour = mysql_query('SELECT * FROM wp_posts WHERE post_title="Ressource accueil"') ;
$data = mysql_fetch_array($retour) ;
$ressource = htmlspecialchars_decode_home(htmlentities(preg_replace('#'.chr(146).'#', '\'', $data['post_content'])));
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <link media="all" type="text/css" href="./accueil.css" rel="stylesheet" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Bienvenue sur invision.me</title>
    <script type="text/javascript">
    var Position = 3 ;
    var NbMax = <?php echo $donnees['nbre_entrees'] ; ?> ;
    </script>
    <script type="text/javascript" src="accueil.js"></script>
  </head>
  <body>
    <div id="page">
      <div id="header">
        <div id="headerimg">
          <h1><a href="http://invision.me.free.fr/">Invision.me</a></h1>
          <div class="description">On se détend; mais pas trop non plus</div>
        </div>
        <ul id="nav">
          <li class="page_item"><a href="http://invision.me.free.fr/" title="Home">Accueil</a></li>
          <li class="page_item page-item-38"><a href="http://invision.me.free.fr/?page_id=38" title="Ressources">Ressources</a></li>
        </ul>
      </div>
      <div id="contenu">
      <p> </p>
        <div id="gauche">
          <?php
          echo $contenu ;
          ?>
        </div>
        <div id="droite">
        <h2>Les dernières nouvelles</h2>
        <div id="News">
<?php
  $retour = mysql_query('SELECT * FROM wp_posts WHERE post_status="publish" ORDER BY Id DESC LIMIT 0,3') ;
  while ($donnees = mysql_fetch_array($retour))
  {
    $texte = preg_replace('#<(.+)>#isU', '', $donnees['post_content']) ; // On détruit les balises html
    $texte = substr(PremiereLettre($texte),0,75) ; // On limite a 75 caractères et on détruit les alinéas
    $texte = preg_replace('#'.chr(146).'#', '\'', $texte) ; // Méthode de correction des apostrophes
    $donnees['post_title'] = preg_replace('#'.chr(146).'#', '\'', $donnees['post_title']) ;
    $retour2 = mysql_query('SELECT * FROM wp_posts WHERE post_parent="'.$donnees['ID'].'" AND post_mime_type LIKE "%image%"') ;
    $image = mysql_fetch_array($retour2) ;
    if ($image['guid'] == '')
    {
      $image['guid'] = "defaut.png" ;
      $image['post_name'] = "image par defaut" ; // Attribut alt ( xhmlt 1.0 strict )
    }
    echo '<p class="breve"><img style="float:left; margin-right:3px ;" width="76" height="50"  src="'.$image['guid'].'" alt="'.$image['post_name'].'" /><strong>'.addslashes(htmlentities($donnees['post_title'], ENT_QUOTES)).'</strong><br />'.htmlentities($texte, ENT_QUOTES).'... <a href="'.$donnees['guid'].'">lire la suite</a></p>' ;
  }
  echo '<span class="previous-entries"><a href="javascript:back()">Articles précédents</a></span><span class="next-entries"><a href="javascript:next()">Articles suivants</a></span>'
?>        
        <p style="clear : right ;">  </p>
        </div>
          <?php
          echo $ressource ;
          ?>
        </div>
      <p style="clear : left ;"></p>
      </div>
    </div>
  </body>
</html>
<?php
mysql_close() ;
?>

Dernière modification par Furor (24-04-2008 19:42:34)

dlo · 23-04-2008 09:42:04

Juste un petit avis sur la façon dont a été codé le template.

Il est préférable d'utiliser les fonctions natives de WordPress quand on crée un template de page. D'une part, on évite de réinventer la roue et d'autre part cela assure l'efficacité de son code et la pérennité de son thème en cas de changement de version de WordPress.
A mon avis, cela vaut la peine d'investir du temps à étudier la façon dont fonctionne WordPress et de s'y adapter. On en sort gagnant en fin de compte.

Cordialement

PS: Cette remarque n'est en aucun cas une critique de la qualité intrinsèque du code ou des connaissances en PHP de son auteur. C'est simplement le constat que ce qui nous est présenté n'est pas un template WordPress...

Furor · 23-04-2008 17:08:22

Alors, pour répondre à ce que tu me dis.
Je suis d'accord que le code que je viens de te fournir n'est pas un template à proprement parler, j'ai juste bidouillé afin de voir si le principe expliqué sur le site de Fran6art fonctionnait. Je reconnais que le code n'est pas propre du tout au passage, même si ce n'est pas le reproche que tu me fais, j'en conviens. Je m'intéresse depuis un petit moment au fonctionnement de WordPress, mais malheureusement, mon niveau dans la langue de Shakespeare m'empêche de me retrouver dans le codex de WordPress (je parle de celui en anglais, c'est dommage que celui en français soit très incomplet). Par exemple, je ne sais pas comment fonctionne précisément les thèmes en général et mon ami, celui qui a codé la page, l'a fait sans savoir ce principe de fonctionnement. Maintenant que j'en sais plus, tout est à refaire et j'aurai du mal à partir d'un fichier du thème car je veux virer la sidebar entre autres... Mais je reste quand même sceptique sur ce bug lorsque j'enlève une copie du thème dont je ne me sers pas.

En tout cas, je reste optimiste, je suis sûr d'en venir à bout pour créer un VRAI template pour wordpress. Enfin, pour la gestion des derniers articles du blog, affiché à droite de la page (comme sur le thème Revolution) évoqué un peu plus haut, je tiendrai au courant ce que ça intéresse, comment le faire proprement en tirant parti de WP wink .

Bonne journée.

dlo · 23-04-2008 17:44:55

Alors, juste pour aider, voici la version "WordPress" de la liste des 3 derniers articles avec un extrait:

Code:

<?php
 $lastnews = get_posts('numberposts=3');
 foreach($lastnews as $post) :
    setup_postdata($post);
 ?>
 <div class="lastnews">
 <h2><a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
 <?php the_excerpt(); ?>
 </div>
 <?php endforeach; ?>

En espérant que cela puisse servir.

Cordialement

Furor · 23-04-2008 18:04:53

Merci beaucoup, je vous tiendrai au courant de l'avancement de la page. Et mille merci pour tout wink

Et bonne (fin) de journée.

Furor · 09-05-2008 22:51:34

Bonsoir à tous, après 2 semaines d'absence, je viens mettre à jour quelques informations utiles pour ceux qui voudraient réaliser une page d'accueil similaire. J'ai donc suivi les conseils de dlo, à quelques exception près, étant donné que le codex recèle encore de nombreux secrets pour moi. Malgré tout, je veux bien mettre à disposition le code utilisé et les fichiers à modifier pour la mettre en place.

J'ai donc créer une sorte de template, je vous le dis tout de suite, ce n'en est pas un. J'ai encore quelques progrès à faire mais la solution me semble assez propre pour la publier. Voici d'abord le code de ma page d'accueil :

Code:

<?php
/*
Template Name: Accueil
*/
?>
<?php get_header(); ?> 
 
<div id="homepage">
  
  <div id="hpmain">
        
    <div class="hpmainleft">
    
      <h3>Bienvenue sur Invision.me</h3>
 
      <img src="<?php bloginfo('template_url'); ?>/images/hp-main.png" alt="<?php bloginfo('name'); ?>" />
      
      <p>Voilà mon nouveau blog perso sur lequel je pourrai m'exprimer librement et commenter l'actualité. Je mettrai également des ressources pour le lycée, toutes sortes de liens, de documents que je vous recommande. Passez une bonne visite !</p>
      <p></p>
      <p></p>
      <p></p>
      
    </div>
    
    <div class="hpmainright">
      
      <div class="hpfeaturedtop">
      
      <!--Remplacer cat=1 avec l'ID de la catégorie que vous voulez faire apparaître ici.-->
 
        <h3>Actualités</h3>
        <?php $recent = new WP_Query("cat=0&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>
      
        <div style="padding-top:10px;border-top:1px dotted #C0C0C0; clear:both;"></div>
        
        <div style="float:left; margin:0px 10px 5px 0px;">
          <a href="<?php the_permalink() ?>" rel="bookmark"><img style="padding:5px 0px 25px 0px;" src="<?php echo get_post_meta($post->ID, "homepage", true); ?>" alt="<?php echo get_post_meta($post->ID, "Theme Name", true); ?> Thumbnail" /></a>
        </div>
        
        <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php the_content_limit(100, "En savoir plus..."); ?>
                                  
        <?php endwhile; ?>
        
      </div>
      
      <div class="hpfeaturedbottom">
      
      <!--Remplacer cat=1 avec l'ID de la catégorie que vous voulez faire apparaître ici.-->
 
        <h3>Ressources</h3>
        <?php $recent = new WP_Query("cat=6&showposts=2"); while($recent->have_posts()) : $recent->the_post();?>
        
        <div style="padding: 10px 0px 0px 0px;border-top: 1px dotted #C0C0C0;"></div>
        
        <div style="float:left; margin:0px 10px 5px 0px;">
          <a href="<?php the_permalink() ?>" rel="bookmark"><img style="padding:5px 0px 17px 0px;" src="<?php echo get_post_meta($post->ID, "homepage", true); ?>" alt="<?php echo get_post_meta($post->ID, "Theme Name", true); ?> Thumbnail" /></a>
        </div>
        
        <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php the_content_limit(100, "En savoir plus..."); ?>
        
        <div style="clear:both;"></div>
                          
        <?php endwhile; ?>
        
      </div>
 
    </div>
    
  </div>
      
</div>
 
<!-- Fin de la colonne  -->
<?php get_footer(); ?>

J'ai donc modifié mon code CSS afin de faire ma mise en page et vous pouvez voir le résultat obtenu sur ma page d'accueil. Pour pouvoir afficher mes articles récents postés à droite de la présentation du site, j'ai utilisé un plugin (comme quoi je commence à tirer parti de WP wink ) nommé limit-post. Alors ne chercher pas de complication pour ceux qui se demandent où se trouve le plugin, il n'y a qu'à copier le code dans un fichier en l'enregistrer sous limit-post.php puis comme tout plugin, le placer dans le dossier /wp-content/plugins/ . Ensuite, il suffit de suivre les indications du code source pour placer le code au bon endroit dans vos templates (moi je l'ai fait, comme vous avez du le remarquer, dans mon fichier accueil.php). Pour faire apparaitre l'image ensuite, à coté du résumé, il suffit d'utiliser les champs personnalisé en indiquant en clé "homepage" (pour ce qui me concerne) et en valeur, le lien de l'image désiré.

Et voilà comment obtenir ma mise en page. Je vous tiens au courant des prochaines améliorations, quand j'aurai réussi à créer un vrai template, avec le texte de gauche et l'image modifiable sur WP.
Sur ce, bonne soirée à tous!