13.02
2011

Est-ce que mon titre est claire ? Non, pas réellement :)

Comme on peut  le constater sur ce site j’ai un bouton « A PROPOS », du moins pas réellement un bouton mais au moment au je le survole avec le curseur de la souris il m’affiche les pages que j’ai pu créer !

La manière dont étaient appelées mes pages ne m’arrangeait guère, car en gros le menu se complétait automatiquement au fil des pages créées. Donc pour arranger tout ça j’ai gratté un tout peu le HTML et le CSS afin d’avoir un rendu correct !

Tout d’abord direction le site de WordPress pour trouver des fonctions concernant l’appel de mes pages. Où je trouve mon bonheur :

Include Pages in List

<ul>
<?php wp_list_pages('include=7,13,26,35&title_li=<h2>' . __('Pages') . '</h2>' ); ?>
</ul>

Je rappelle que la fonction originelle était :

<?php wp_list_pages('title_li='); ?>

Donc le ‘title_li’ permet de grouper vos pages sous ce titre ^^

Donc j’ai modifié de cette manière :


<?php wp_list_pages('title_li=<h1>' . __('A Propos') . '</h1>' ); ?>

Après ça le soucis c’est que je n’avais pas un rendu terrible :/ vu qu’il ne suivait pas les paramètres CSS des autres liens du menu …

Avec Firebug, j’ai pointé sur un de mes liens du menu afin de voir les caractéristiques CSS qu’il prenait en compte. Donc là si je pointe sur mon lien « 2D/3D » du menu, j’obtiens ceci en HTML, car vu que de l’autre côté c’est des fonctions PHP on a pas d’idées directes du rendu ^^


<li>
<a href="http://azerato.free.fr/?cat=23" title="Voir tous les articles classés dans 2D/3D">2D/3D</a>
<ul style="display: none; ">
<li><a href="http://azerato.free.fr/?cat=24" title="Voir tous les articles classés dans Cinéma 4D">Cinéma 4D</a> </li>
</ul>
</li>

En cliquant je vois donc la balise « a » qui sous entend un lien… Mais comme on repense à ma fonction, moi ce n’est pas le cas vu que le titre est entre balises « h1″.

Côté CSS :


div#main_navi ul.left li a {

color: #CCCCCC;
float: left;
font-size: 12px;
line-height: 18px;
margin-bottom: 0;
margin-left: 15px;
margin-right: 15px;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 8px;
padding-left: 0px;
padding-right: 4px;
padding-top: 8px;
}

Comme nous c’est « h1″ et non pas « a » on recréait une propriété similaire sauf que le « a » deviendra « h1″  :D

url image : http://www.fredzone.org/wp-content/uploads/2009/10/internetera-net-wordpress-eye-wallpaper.jpg

Les commentaires sont fermés

On remonte ?