Salut à tous,
Nous allons maintenant faire apparaître sur notre blog les éléments qui nous intéresse. En commençant par le contenu du Header.
Pour cela, nous allons faire appel à des commandes WordPress, qui iront puisez dans la base de données les éléments correspondant.
J’ai créé un petit aide mémoire en regroupant les commandes WordPress principales que nous utiliserons tout au long de ces tutoriels.

Ouvrez le template header.php, et ajouter les commandes suivante sous la balise body :

<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>

Cela affichera le titre de votre blog ainsi que la description (slogan). Si vous lancer maintenant votre navigateur internet et que vous tapez l’adresse de votre site en local, ces premiers éléments apparaîtront.

Bien sur, pour l’instant aucune mise en forme n’est visible.

Elle sera réalisée dans le fichier style. Mais pour cela, il faut créer, dans nos différents templates, des balises pour que fichier style sache où pointer. Nous utiliserons pour cela, la commande <div id « nom_à_rappeller_dans_le_fichier_style »> , pour encadrer la zone à gèrer.

<div id="header">
  <?php bloginfo('name'); ?>
  <?php bloginfo('description'); ?>
</div>

Changeons maintenant la taille du texte pour mettre en évidence le titre du blog par rapport à la description. Nous allons également ajouter un lien url sur notre titre pour que celui-ci nous ramène à la page d’accueil lorsque l’on cliquera dessus.
Pour cela utilisons les commandes suivantes :

Commande html pour la taille du texte : <h1> et <h3>
Commande html pour créer un lien url : a href=”URL”
Commande WordPress pour communiquer l’url : <?php bloginfo(‘url’);?>
Et ceci, de la façon suivante :

<div id="header">
  <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  <h3><?php bloginfo('description'); ?></h3>
</div>

Si vous souhaitez mettre une image ou un logo à la place du nom de votre site, vous pouvez le faire de la façon suivante :

  • Créez un dossier images dans votre dossier thème.
  • Enregistrez votre image dans ce dossier. Je vous conseille de faire une image au format png sans fond de façon à ce que celle-ci s’intègre parfaitement au fond que vous choisirez par la suite.
  • Ensuite remplacer la commande <?php bloginfo(‘name’); ?> par la commande suivante <img src= »url_de votre_image » width= » » height » »> qui va chercher l’image à son emplacement et définir sa largeur et hauteur.

Vous aurez ce nouveau scripte :

<div id="header">
  <a href="<?php bloginfo('url'); ?>"><img src="url_de votre_image" width="300" height="100" border="0" ></a>
  <h3><?php bloginfo('description'); ?></h3>
</div>

Vous pouvez si vous le souhaitez ajouter un petit menu qui vous permettra d’avoir accès aux éléments suivants : Accueil – A propos – Connexion.
Je ne détaillerai pas ce paragraphe, mais il se présente comme cela :

<div id="menu">
  <ul id="menuList">
    <li><a href="<?php echo get_settings('home'); ?>">
    <?php _e('Home'); ?>
    </a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=-1&title_li='); ?>
    <li>
    <?php wp_loginout(); ?>
    </li>
    <?php wp_register(); ?>
  </ul>
</div>

Ce paragraphe est à positionner, selon vos goûts, soit avant soit après le paragraphe header. Pour cela, il vous suffit d’écrire ces lignes avant ou après le paragraphe header.
Nous allons ajouter une balise


<div id="page">

juste après la balise d’ouverture du body, que nous fermerons dans l’index juste avant la balise de fermture du même body.

Voila c’est tout pour aujourd’hui.
Voir aussi :

Articles Créer son thème WordPress : 1234 – 5 – 67891011

En attendant bon blog.@ plus

Articles similaires :