pictos à proposJe dispose de WordPress en local, j’ai compris grâce à Fran6art comment personnaliser une page  sur WordPress, il ne me reste donc plus qu’à réaliser ma page « à propos ».

Côté design je sais à peu près ce que je veux : une galerie de pictos, chacun symbolisant une partie de mon parcours ainsi que mes centres d’intérêt, ceux-ci étant développés juste en dessous sous forme de liste, mêlant une image et du texte.

Je souhaite aussi qu’en cliquant sur chacun des pictos du haut on arrive directement sur le paragraphe qui le concerne.

Voili, voilou, nous sommes jeudi 14 octobre, il est 10h22 et je ne lâcherai pas l’affaire tant que ma page ne ressemblera pas à ce descriptif.

1ère étape : créer le fichier PHP de la page en question :

Pas trop compliqué, il suffit d’ouvrir une nouvelle page (vierge) dans son éditeur de texte (Notepad en ce qui me concerne),

De mettre en haut de cette page une indication du style :

/* <?php /* Template Name: Page à propos */ ?> */

et de l’enregistrer dans son dossier blog avec pour nom un truc qui ressemble à « pageapropos.php », c’est le « .php » qui est capital dans l’histoire.

2ème étape : signaler à WordPress que cette page existe, en la transférant via filezila pour les blogs en ligne (automatique en locale).

3ème étape : créer une page à propos dans WordPress (ou aller sur la page à propos existante) et en bas dans « attributs de la page » sélectionner la  « pageapropos.php » dernièrement crée en place et lieu du « modèle par défaut ».

4ème étape : il n’y a plus qu’à travailler sur le fichier php et sur la feuille de style pour atteindre le résultat escompté et ça j’ai l’impression que ça n’est pas gagné !

Je commence par essayer de créer ma galerie de pictos, pour cela je télécharge 2/3 thèmes sur  woothemes.com, un site recommandé par le « Campus WordPress », qui proposent ce type de présentations, afin de regarder à quoi ressemble leur « codage ».

A vrai dire, ça ne m’éclaire pas beaucoup !

Par exemple avec le thème Skeptical :

Thème WordPress Skeptical de Wootheme

Voici le contenu du fichier « template-imagegallery.php » :

/*……….. <div class= »page col-full »> <div id= »main »>

<?php if ( function_exists(‘yoast_breadcrumb’) ) { yoast_breadcrumb(‘<div id= »breadcrumb »><p>’,'</p></div>’); } ?>

<div> <h1 class= »title »><a href= »<?php the_permalink() ?> » rel= »bookmark » title= »<?php the_title(); ?> »><?php the_title(); ?></a></h1>

<div class= »entry »> <?php query_posts(‘showposts=60′); ?>

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

<?php $wp_query->is_home = false; ?>

<?php woo_get_image(‘image’,116,116,’thumbnail alignleft’); ?> ……………*/

Et bien la notion principale qu’est : ‘yoast_breadcrumb’ m’est totalement inconnue, impossible donc de m’inspirer de ce thème et c’est exactement la même chose avec les 2 autres.

J’oublie donc cette solution de facilité et recense toutes les notions que j’ai apprises ces derniers jours pour réaliser moi-même cette page à propos.


1. je crée le contenant de toute ma page :

/*<div><?php the_title(); ?></div>*/

2. je définis mon espace titre et indique où il faut aller chercher l’information

/*<div class= »galerie_titre »><?php the_title(); ?></div>*/

3. Je crée un cadre spécifique pour ma galerie de pictos :

/* div */

4. Je crée ma première ligne de pictos (3 alignés, car j’en ai 9 à mettre au total).

/*<div>*/

Et j’indique quels pictos mettre et comment les mettre les uns par rapport aux autres :

1er picto (celui tout à gauche) :

/* <a href= »#blog »> <span style= »float:left;margin-right:25px; margin-left:30px;margin-top:5px; »> <img src= »<?php bloginfo(‘template_directory’); ?>/images/picto-blog.png » alt= »<?php bloginfo(‘description’); ?> »> </span> </a> */

Avant de poursuivre, je tiens à signaler que pour arriver à ce résultat ça m’a pris 2 jours de bidouillages intensifs sur mon blog local à l’abri des regards !

Mais pour éviter de perdre trop de temps, je préfère m’épargner la description de toutes ces étapes parfois très frustrantes.

Le point central de cette « formule » est :

/*<img src= »<?php bloginfo(‘template_directory’); ?>/images/picto-blog.png » alt= »<?php bloginfo(‘description’); ?> »>*/

Car c’est là où je dis à WordPress quelle image prendre dans mon dossier image (évidemment j’ai positionné mes pictos dans mon dossier image du blog auparavant !)

Ensuite le:/* <span style= »float:left; margin-right:25px; margin-left:30px; margin-top:5px; »> */ explique comment positionner le picto en question par rapport à ces 2 voisins, en l’ocurence, il est positionné à gauche, avec une marge gauche de 30px, une marge droite de 25px et une marge en haut de 5px.

Enfin le /*<a href= »#blog »>*/ est une sorte de « lien repère », quand on cliquera sur ce picto, on ira directement au paragraphe qui le concerne plus bas dans la page.

Pour cela il faut bien  indiquer dans le dit-paragraphe la mention : « <a></a> » sinon ça ne marche pas !

J’ai ainsi répété cette opération 9 fois pour atteindre ce résultat totalement incroyable :

Page à propos au 15 octobre 2010

Pour la suite de ma page « à propos », c’est plus traditionnel, j’ai utilisé le « traitement de texte » des pages WordPress, en le  signalant dans mon fichier « pageapropos.php » avec la mention :

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

<div class= »post2″>*/

Et voilà le résultat final, on aime ou on n’aime pas, mais au moins techniquement j’y suis parvenue :

page à propos finalisée

PS: ça n’a pas été si facile de copier/coller mon codage dans cet article, car je crois que WordPress ne comprend pas bien ce que ça vient faire là, d’où les : /* et */