F8EOZ » index http://www.f8eoz.com Informatique - Electronique - Ham radio Thu, 11 May 2017 15:37:43 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5 Mon blog – Partie 13 – Créer son thème WordPress – Autres Templates http://www.f8eoz.com/?p=519 http://www.f8eoz.com/?p=519#comments Thu, 08 Dec 2011 14:24:42 +0000 admin http://www.f8eoz.com/?p=519 Erreur 404
Le template 404.php est utilisé quand un lien est fait vers une page qui n’existe pas. Je me suis contenté du minimum, afficher sur une page le message « Erreur 404 page non trouvée ». Cette page est néanmoins complète. Elle est construite simplement à partir du template index.php. Elle permet ainsi de se rebrancher facilement sur les pages du blog et de poursuivre la recherche.

Liens vers les réseaux sociaux, flux de syndication, contact
J’ai regroupé dans un template appelé social.php tous les liens vers les réseaux et médias sociaux, les flux de syndication de contenu, ma boîte aux lettres. Ces liens sont affichés en barre sous forme d’ icônes normalisés. Je les ai placé dans un template pour les raisons suivantes:
- un seul fichier à maintenir,
- possibilité de les utiliser en plusieurs emplacements de la page,
- suppression ou ajout de nouveaux icônes simplifié.

Les icônes sont placés dans /montheme/images/social .

Avec l’éditeur de texte ouvrir le nouveau fichier social.php, insérer dans ce fichier les lignes suivantes:

<div>
    <a href="http://facebook.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/facebook.png" height=32 width=32 alt="Facebook" title="Facebook" /></a>
    <a href="http://twitter.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/twitter.png" height=32 width=32 alt="Twitter" title="Twitter" /></a>
    <a href="https://plus.google.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/gplus.png" height=32 width=32 alt="Gplus" title="Google Plus" /></a>
    <a href="http://linkedin.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/linkedin.png" height=32 width=32 alt="LinkedIn" title="LinkedIn" /></a>
    <a href="http://youtube.com/" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/youtube.png" height=32 width=32 alt="YouTube" title="YouTube" /></a>
    <a href="http://google.com/maps/"><img src="<?php echo get_template_directory_uri(); ?>/images/social/googlemaps.png" height=32 width=32 alt="Google Maps" title="Google Maps" /></a>
    <a href="mailto:<?php bloginfo('admin_email'); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/email.png" height=32 width=32 alt="E-mail" title="<?php _e('Contact', 'montheme'); ?>" /></a>
    <a href="<?php bloginfo('rss2_url'); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/rss.png" height=32 width=32 alt="RSS articles" title="<?php _e('Flux RSS des articles', 'montheme'); ?>" /></a>
    <a href="<?php bloginfo('comments_rss2_url'); ?>" target="_blank"><img src="<?php echo get_template_directory_uri(); ?>/images/social/rsscomment.png" height=32 width=32 alt="RSS comment" title="<?php _e('Flux RSS des commentaires', 'montheme'); ?>" /></a>
</div>

Afficher la barre d’ icônes
Pour des raisons pratiques, la barre est placée en haut et en bas de page, dans le header et en fin d’article. Elle est habillée d’une classe de style icons .

Avec l’éditeur de texte ouvrir le fichier header.php. Sous la balise  </h1> <!– retour à home si clic sur nom –>, insérer les lignes suivantes:

<div id="social" class="alignright">
    <?php get_template_part('social', 'header'); ?>
</div><!-- end social -->

La fonction get_template_part() charge ce template soit à partir de social-header.php (n’ existe pas) soit ici à partir de social.php.

Avec l’éditeur de texte ouvrir le fichier single.php. Sous la balise  </div><!– fin du post –>, insérer les lignes suivantes:

<div id="social" class="alignleft">
    <?php get_template_part('social', 'single'); ?>
</div><!-- end social -->
<div style="clear:both"></div><!-- met le reste de la page dessous -->

Avec l’éditeur de texte ouvrir le fichier style.css. En fin de fichier, insérer les lignes suivantes:

/* Social Icons  */

#social {
padding: 0.5em 0 0 0;
}

.icons a img {
opacity:.7;filter:alpha(opacity=50);
}

.icons a:hover img {
opacity:1;filter:alpha(opacity=100);
}

Enregistrer les fichier sous /themes/montheme.

Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Tester les liens. C’est terminé.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=519 5
Mon blog – Partie 11 – Créer son thème WordPress – Template Comments http://www.f8eoz.com/?p=448 http://www.f8eoz.com/?p=448#comments Tue, 06 Dec 2011 14:43:41 +0000 admin http://www.f8eoz.com/?p=448 Objet
Le template comments est chargé:
- d’afficher le nombre de commentaires par type,
- d’afficher les méta-données du commentaire (origine, date)
- d’afficher le commentaire selon son niveau de profondeur,
- de créer le lien vers la réponse à un commentaire,
- de ne pas afficher les commentaires en attente de modération,
- d’afficher le bloc de saisie d’un commentaire.

Les commentaires sont affichés dans l’ordre hiérarchique des réponses. Le niveau de profondeur maximum est modifiable dans le réglage des options de discussion du tableau de bord, paramètres:  Enable threaded (nested)  et comments levels deep.

Structure du template
S’il y a des commentaires
- compter les commentaires par type: commentaire ou pings
- afficher le nombre de commentaires
- s’il y a des pings, afficher le nombre de pings
- boucle d’affichage des commentaires: fonctions wp_list_comments et mytheme_comment
- s’il y a trop de commentaires par page, afficher la navigation par page
Sinon
- si les commentaires ne sont pas ouverts, afficher un message
Fin Si
Si les commentaires sont ouverts
- afficher le bloc de saisie d’un commentaire
- contrôler la présence des informations obligatoires, nom et email (1)
Fin Si

Remarque (1). Le traitement en cas d’erreur est assez brut. Un simple message sur une page blanche. Je m’en contente pour l’instant.

Avec l’éditeur de texte ouvrir un nouveau fichier comments.php. Insérer dans ce fichier les lignes suivantes:

<?php
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
    die ( __('Veuillez ne pas passer directement par cette page. Merci!', 'montheme') );

/* Récupère le réglage de l'option de discussion du tableau de bord:
L’auteur d’un commentaire doit renseigner son nom et son e-mail
1 : Yes (default)
0 : No
Data type: Integer */
$requireoption = get_option('require_name_email');
?>

<div id="comments">
    <?php
    /* S'il y a des commentaires les afficher! */
    if ( have_comments() ) :
        // Compter le nombre de commentaires et pings
        $ping_count = $comment_count = 0;  // init compteur de pings et de commentaires
        foreach ( $comments as $comment ) get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;
        ?>

        <!-- affiche le nombre de commentaires -->
        <h3>
            <?php if ( $comment_count != 0 || $ping_count != 0) : ?>
                <?php printf($comment_count == 0 ? __('Aucun Commentaire', 'montheme') :
                    ($comment_count == 1 ? __('1 Commentaire', 'montheme') :
                    __('%d Commentaires', 'montheme')), $comment_count) ?>
            <?php endif; ?>
            <?php if ( $ping_count != 0 ) : ?>
                &middot;
                <?php printf($ping_count == 1 ? __('1 R&eacute;trolien', 'montheme') :
                    __('%d R&eacute;troliens', 'montheme'), $ping_count) ?>
            <?php endif; ?>
        </h3>
        <div style="clear:both"></div>

        <!-- Une liste classée des commentaires, voir custom_comments() dans functions.php -->
        <ol class="commentlist"> <!-- type=comment filtre les commentaires -->
            <?php wp_list_comments('type=all&callback=custom_comments'); ?>
        </ol>

        <?php
        /* S'il y a trop de commentaires placer les liens de navigation  */
        $total_pages = get_comment_pages_count();
        if ( $total_pages > 1 ) : ?>
            <div class="navigation" style="clear:both">
                <div class="alignleft"><?php previous_comments_link(__('&laquo; Commentaires plus anciens', 'montheme')) ?></div>
                <div class="alignright"><?php next_comments_link(__('commentaires plus r&eacute;cents &raquo;', 'montheme')) ?></div>
            </div>
        <?php endif; ?>
        <div style="clear:both"></div>

    <?php else : // pas de commentaires ?>
        <?php if ( $post->comment_status == 'open') : ?>
            <!-- commentaires ouverts -->
        <?php else : // comments are closed ?>
            <!-- commentaires fermés-->
            <p class="nocomments"><?php _e('Commentaires ferm&eacute;s.', 'montheme'); ?></p>
        <?php endif; /* if ( open ) */ ?>

    <?php endif; // have_comments() ?>

    <?php
    /* Si les commentaires sont ouvert, afficher le bloc de saisie d'un commentaire */
    if ( $post->comment_status == 'open' ) : ?>
        <div id="respond">
            <b><?php comment_form_title( __('Publier un commentaire', 'montheme'), __('Publier un commentaire &agrave; %s', 'montheme') ); ?>
            </b>&nbsp&nbsp&nbsp<?php cancel_comment_reply_link( __('(Annuler)', 'montheme')); ?>

            <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
                <p><?php _e('Vous devez &ecirc;tre', 'montheme'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('connect&eacute;', 'montheme'); ?></a> <?php _e('pour publier un commentaire.', 'montheme'); ?></p>
            <?php else : ?>
                <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
                    <?php if ( $user_ID ) : ?>
                        <p><?php _e('Connect&eacute; comme', 'montheme'); ?>
                          <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>
                        | <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Logout', 'montheme'); ?>"><?php _e('D&eacute;connexion &raquo;', 'montheme'); ?></a>
                        </p>
                    <?php else : ?>
                        <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
                           <label for="author"><small><?php _e('Nom', 'montheme'); ?> <?php if ($requireoption) _e('(requis)', 'montheme'); ?></small></label>
                        </p>
                        <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
                           <label for="email"><small><?php _e('Mail (non publi&eacute;)', 'montheme'); ?> <?php if ($requireoption) _e('(requis)', 'montheme'); ?></small></label>
                        </p>
                        <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
                           <label for="url"><small><?php _e('Site web', 'montheme'); ?></small></label>
                        </p>
                    <?php endif /* if ( $user_ID ) */ ?>
                    <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

                    <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
                    <p><input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Valider', 'montheme'); ?>" />
                    <?php comment_id_fields(); ?> <!--Génère 2 champs cachés: comment_post_ID et comment_parent -->
                    </p>
                    <?php do_action('comment_form', $post->ID); ?>
                </form><!-- #commentform -->
            <?php endif; // If registration required and not logged in ?>
        </div><!-- #respond -->
    <?php endif; // if ( 'open' == $post->comment_status ) ?>
</div><!-- #comments -->

Structure de la fonction mytheme_comment
La fonction mytheme_comment est une itération de la fonction d’affichage des commentaires wp_list_comments . Elle affiche les éléments suivants:
- les méta-données: auteur, date, type
- le lien modifier,
- le message non approuvé pour le commentaire en attente de modération,
- le lien répondre s’il s’agit bien d’un commentaire.

Avec l’éditeur de texte ouvrir le fichier functions.php. Insérer dans ce fichier les lignes suivantes:

<?php
// Une itération de la boucle de traitement des commentaires wp_list_comments
// Affiche le commentaire, ping, trackback, ses méta-données, la possibilté de modifier et d'y répondre
// $comment = commentaire affiché
// $args contient les arguments par défaut de la fonction wp_list_comments
// $depth = niveau de profondeur du commentaire affiché = 1 à n
// Voir tableau de bord, options de discussion Enable threaded (nested) comments
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$GLOBALS['comment_depth'] = $depth;
?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
    <div>
        <span class="comment-author">
            <cite class="fn"><?php comment_author_link() ?></cite> &middot;
        </span>
        <span class="comment-meta">
            <!--La fonction __() (2 underscore) traduit une chaîne de caractères en utilisant le gettext PHP.
            Le 1er paramètre est le string à traduire,
            le second, appelé le domain, dit à WordPress où se trouve la traduction.
            Il est ainsi possible de fournir un fichier.po qui contient la traduction du thème-->
            <?php printf(__('<a href="%3$s" title="Lien vers ce commentaire">%1$s &agrave; %2$s </a>', 'montheme'),
                           get_comment_date('l j F Y'),
                           get_comment_time('H:m:s'),
                           '#comment-' . get_comment_ID() ); ?> &nbsp;&nbsp;
            <?php edit_comment_link(__('(Modifier)', 'montheme'), ''); ?>
        </span>
    </div>
    <div>
        <?php if ($comment->comment_approved == '0') : ?>
            <span class='comment-unapproved'>
                <?php _e("En attente de mod&eacute;ration.", 'montheme'); ?>
            </span>
        <?php else : comment_text(); // le commentaire est affiché s'il est approuvé?>
        <?php endif ?>    <!-- fin comment_approved -->
    </div>
    <div class="reply">
        <?php if(get_comment_type() == 'comment') : //réponse possible au commentaire?>
            <?php // lien pour la réponse
            comment_reply_link(array_merge($args, array(
                'reply_text' => __('R&eacute;pondre','montheme'),
                'login_text' => __('Connexion pour r&eacute;pondre.','montheme'),
                'depth' => $depth,
                'before' => '<div>',
                'after' => '</div>'
            )));?>
        <?php else : ?>
            <?php comment_type(); ?>
        <?php endif ?><!-- comment_type() == 'comment' -->
    </div><!--end class="reply-->
</li><!--end li id="comment-"-->
<?php } // end mytheme_comment
?>

Style
Insérer dans le fichier style.css les lignes suivantes:

/* COMMENTAIRES */

#comments {
margin: 3em 0 0 0; /* séparation du post et des commentaires */
padding: 0 0 0 0;
font-size:1.2em;
font-family: Arial;
font-weight:normal;
}

#comments h3 {
font-size:1.0em;
font-weight:bold;
}

#comments div.navigation {
font-size:0.9em;
}

#comments p,  #comments ol{
margin:1em 0 0 0;
padding:0 0 0 0;
}

#comments ol{
margin:1em 0 0 1.5em; /* marges de chaque tête de commentaires */
padding:0 0 0 0;
}

/*Je définis une taille de caractère dans mes ul en em (0.76em par exemple).
Mais comme j'ai des "ul d'ul", je me retrouve avec une taille qui diminue
jusqu'à devenir illisible dès le second niveau (0.76x0.76=0.5776). Solution mettre 1em */
#comments li ul, #comments ul li {
margin: 0 0 0 1.0em; /* marge d'indentation */
padding:0 0 0 0;
list-style:none;
font-size:1em; /* très important pour garder la même taille: taille des caractères X 1 */
}

.comment-author {
font-size:1.2em;
font-style:normal;
}

.comment-author cite {
font-style:normal;
font-weight:bold;
}

.comment-meta, .reply {
margin:0;
padding:0;
font-size:0.9em;
}

.reply {
margin: 1em 0 1em 0; /* séparation du post et des commentaires */
}

.comment-unapproved {
color:#e55c0c; /*orange*/
font-style:normal;
}

textarea#comment {
width:95%; /* largeur de l'espace pour la saisie du commentaire */
}

/* balise HTML des acronymes, sigles et abréviations */

acronym, abbr, span.caps {
border: 0;
cursor: help; /* curseur = point d'interrogation */
text-decoration: underline;
}

Enregistrer les fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Entrer quelques commentaires et réponses. Mettre quelques commentaires en attente. Vérifier l’affichage des commentaires et  du bloc commentaire soit en cliquant sur le nombre de commentaires de l’article dans la page index, soit en cliquant sur le titre de l’article dans la page index pour en afficher le contenu.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=448 5
Mon blog – Partie 10 – Créer son thème WordPress – Template Single http://www.f8eoz.com/?p=433 http://www.f8eoz.com/?p=433#comments Mon, 05 Dec 2011 08:41:06 +0000 admin http://www.f8eoz.com/?p=433 Objet
A ce stade du développement de notre thème si vous cliquez sur le titre de l’article pour afficher son contenu, vous remarquez qu’il manque la possibilité d’introduire un commentaire et la navigation d’un article à l’autre, bien pratique pour suivre une série d’articles traitant du même sujet. Comme pour les templates archive et search, plusieurs solutions sont possibles:
- utiliser le template index et ajouter des instructions conditionnelles qui déterminent dans quel contexte on se trouve,
- utiliser le template single qui est la copie du template index modifié.
L’avantage de la première solution est de n’avoir qu’un seul template à maintenir. La seconde solution est intéressante si vous voulez personnaliser la page. La programmation de l’index devient alors plus complexe et moins facile à maintenir.
Nous allons utiliser cette dernière solution.

Fichier single.php
Avec l’éditeur de texte ouvrir un nouveau fichier single.php. Copier dans ce fichier le contenu de index.php.
Modifier la division navigation, entre les balises <div class= »navigation »> et </div> de façon suivante:

<span class="alignleft" ><?php previous_post_link('&laquo; %link') ?></span>
<span class="alignright"><?php next_post_link('%link &raquo;') ?></span>

Juste avant <?php endwhile; ?> <!– fin boucle post –> insérer la fonction:

<?php comments_template(); ?>

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’affichage du bloc commentaire soit en cliquant sur le nombre de commentaires de l’article dans la page index, soit en cliquant sur le titre de l’article dans la page index pour en afficher le contenu. Remarquez aussi en bas de page, la navigation sur l’ article précédent et suivant.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=433 6
Mon blog – Partie 9 – Créer son thème WordPress – Template Search http://www.f8eoz.com/?p=414 http://www.f8eoz.com/?p=414#comments Sun, 04 Dec 2011 17:58:49 +0000 admin http://www.f8eoz.com/?p=414 Objet
La recherche des articles dans le blog en entrant un texte par le dispositif de recherche est réalisée en utilisant par défaut le template index. Comme pour le template archive, l’affichage doit être concis et présenter un bref extrait du début du contenu de l’article. Ceci est réalisé par la fonction the_excerpt() qui remplace avantageusement the_content().
Nous allons simplement copier le template archive.

Fichier search.php
Avec l’éditeur de texte ouvrir un nouveau fichier search.php. Copier dans ce fichier le contenu de archive.php.

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Pour vérifier l’utilisation du template, entrer un texte dans le champ de recherche, cliquer surle bouton chercher. Entrer un article  assez long pour voir l’effet de la fonction the_excerpt().

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=414 6
Mon blog – Partie 8 – Créer son thème WordPress – Template Archive http://www.f8eoz.com/?p=404 http://www.f8eoz.com/?p=404#comments Sun, 04 Dec 2011 13:33:40 +0000 admin http://www.f8eoz.com/?p=404 Objet
La recherche des articles dans le blog en filtrant les dates (archives), les catégories, les tags est effectuée en utilisant par défaut le template index. L’affichage doit être concis et présenter un bref extrait du début du contenu de l’article. Ceci est réalisé par la fonction the_excerpt() qui remplace avantageusement the_content(). Plusieurs solutions sont possibles:
- utiliser le template index et ajouter des instructions conditionnelles qui déterminent dans quel contexte on se trouve,
- utiliser le template archive qui est la copie du template index légèrement modifié.
Nous allons utiliser cette dernière solution.

Fichier archive.php
Avec l’éditeur de texte ouvrir un nouveau fichier archive.php. Copier dans ce fichier le contenu de index.php. Remplacer la fonction  <?php the_content(__(‘Lire la suite… ‘, ‘montheme’)); ?> par   <?php the_excerpt(); ?> .

Enregistrer le fichier sous /themes/montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Vérifier l’utilisation du template en faisant une sélection sur la date, la catégorie ou le tag. Entrer un article  assez long pour voir l’effet de la fonction the_excerpt().

Note:
En règle générale, en programmation, dupliquer du code identique n’est pas la bonne solution. Je le fais ici pour simplifier l’explication. Il est préférable de créer un fichier php qui permet d’inclure un morceau de code indentique ou une fonction qui sera utilisée dans les templates index, archive, single, search. La maintenance du programme s’en trouve facilité. En cas de modification, il suffit d’intervenir à un seul endroit.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=404 5
Mon blog – Partie 5 – Créer son thème WordPress – Template Index http://www.f8eoz.com/?p=247 http://www.f8eoz.com/?p=247#comments Thu, 01 Dec 2011 11:06:41 +0000 admin http://www.f8eoz.com/?p=247 Objet
Dans la partie 4 nous avons vu que le template index.php était le fichier nécessaire et suffisant (avec style.css) pour faire fonctionner notre thème. Il vaut bien un chapitre!

Que doit-il faire?

Il est chargé de présenter les Posts, titre et contenu, dans la page Web. Problème classique de la programmation, nous ne savons s’il y a des Posts, ni combien il y en a. S’il n’y a pas de Posts, il est intéressant de le signaler par un message. S’il y a des Posts,  il faut éviter la saturation et en limiter le nombre par page Web tout en ayant un moyen d’en balayer l’ensemble. D’autre part, nous ne souhaitons pas encombrer notre page avec des Posts trop longs, il faut un moyen d’en présenter le début avec un lien pour en lire la suite.
Tout cela est réalisé simplement dans WordPress par une instruction conditionnelle, une boucle  while un index et quelques fonctions.

Nous allons programmer cela pas à pas.

L’instruction conditionnelle
Dans index.php,  entre la balise <div id= »content »> et    </div><!–END content–> insérer le code PHP suivant:

<?php if (have_posts()) : ?> <!-- si post -->
<?php else : ?> <!-- si non post -->
<?php endif; ?>    <!-- fin si post -->

1er cas il y a des posts – la boucle while
Dans cette boucle il faut un index qui nous placera sur le Post suivant de l’ensemble des Posts de la sélection et qui est incrémenté à chaque boucle. Ceci est réalisé par la fonction the_post(). Entre la ligne if et else de l’instruction précédente placer le code PHP suivant:

<?php while (have_posts()) : ?> <!-- boucle post -->
    <?php the_post(); ?>
<?php endwhile; ?> <!-- fin boucle post -->

Le plus difficile est fait!  nous pouvons afficher maintenant le Post, son titre, ses méta-données. Pour habiller le Post nous allons l’insérer dans une balise <div> muni d’une classe post. La propriété id de la balise <div> est rendu unique par la fonction the_ID() . Nous allons d’abord afficher le titre du Post. Il est placé dans une balise <a> et habillé d’une balise de titre <h2> muni de la classe posttitle. Insérer dans index.php après la ligne the_post() les lignes suivantes:

<div class="post" id="post-<?php the_ID(); ?>"><!-- début du post -->
    <!-- Titre du post -->
    <h2 class="posttitle">
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Lien permanent vers', 'montheme'); ?> <?php the_title(); ?>">  <?php the_title(); ?></a>
</h2>
</div><!-- fin du post -->

Insérer dans style.css les lignes suivantes:

#post {
float: left;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

.posttitle {
font-weight:normal;
font-size:1.9em;
padding: 0 0 0 0;
margin: 1em 0 0 0;
font-family: Arial;
}

.posttitle a, .posttitle a:link, .posttitle a:visited {
color:#333; /* noir ;*/
}

.posttitle a:hover, .posttitle a:active {
color: #C51500; /* rouge */

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le titre de chaque Post est affiché sur fond blanc. La colonne de gauche commence à se dessiner. Ce n’est pas encore parfait. Ne vous inquiétez pas on avance. La fonction the_permalink() a récupéré l’URL du Post pour la placer dans la balise <a> de son titre. Regarder aussi la balise <div> du Post et son id. Pour ce faire, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever la boucle while en y plaçant sous le titre, la date et le l’heure, le contenu du Post, les catégories et les tags. Nous allons aussi prévoir la possibilité de modifier le Post (uniquement pour l’dministrateur). Sous la balise </h2> qui termine l’habillage du titre insérer les lignes suivantes:

<!-- Date et heure -->
<div class="postmetadata">
    <?php the_time('l j F Y') ?>  <?php the_time('H:m:s') ?>
</div>
<!-- Contenu du post - Ici on traite la balise More insérée dans le post-->
<div class="postcontent">
    <?php the_content(__('Lire la suite... ', 'montheme')); ?>
</div>
<div class="postmetadata">
    <?php if( function_exists('the_tags') ) : ?>
        <div><?php the_tags(__('Tags: '), ', ', '');?></div>
    <?php endif; ?>    <!-- fin si tag -->
    Cat&eacute;gories: <?php the_category(', ') ?>
    | <?php comments_popup_link(__('Aucun Commentaire', 'montheme'), __('1 Commentaire', 'montheme'), __('% Commentaires', 'montheme')); ?>
    | <?php edit_post_link(__('Modifier', 'montheme'), ' &#8212; ', ''); ?>
</div>

Insérer en fin de  style.css les lignes suivantes:

.postmetadata {
font-size:1.1em;
text-align:left;
font-style:italic;
}

.postcontent, .postcontent p{
font-size:1.15em;
padding: 0 1.5em 0.2em 0;
margin: 1.5em 0 0.5em 0;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le Post est affiché sur fond blanc. La fonction the_time() affiche la date et l’heure. La fonction the_content() affiche le contenu et gère le tag More qui limite le nombre de lignes affichées. La fonction the_tags() affiche les tags et établit un lien vers ceux-ci. La fonction the_category() affiche les catégories et établit un lien vers celles-ci.  La fonction comments_popup_link() affiche le nombre de commentaires et établit un lien vers ceux-ci. La fonction edit_post_link() établit un lien pour modifier le Post.

Traduction
Noter que ces dernière fonctions sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

Navigation
Il faut maintenant gérer la navigation page précédente, page suivante. Sous la ligne endwhile insérer les lignes suivantes:

<div class="navigation">
    <span class="alignleft"><?php previous_posts_link(__('&laquo; Page pr&eacute;c&eacute;dente', 'montheme')) ?></span>
    <span class="alignright"><?php next_posts_link(__('Page suivante &raquo;', 'montheme')) ?></span>
</div>

Insérer en fin de style.css les lignes suivantes:

.navigation {
margin: 1em 0 0 0;
font-size:1.1em;
}

.alignleft {
float: left;
margin: 5px 5px 5px 0;
}

.alignright {
float: right;
margin: 5px 0 5px 5px;
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Vous ne pouvez constater l’effet de cet ajout que si vous avez un nombre de Posts qui dépasse le nombre définis dans les réglages de lecture. Vous pouvez, le temps du test, modifier ce réglage et le rétablir ensuite à sa valeur par défaut.

Traduction
Noter que les fonctions previous_posts_link() et next_posts_link() sont munies de textes paramétrables que vous pouvez ainsi franciser facilement.

2ème cas il n’y a pas de Posts
Nous terminons ici l’autre branche de l’instruction conditionnelle. Inserer après la ligne else du fichier index.php les lignes suivantes:

<div class="post">
    <h2 class="posttitle"><?php _e('Non trouv&eacute;', 'montheme') ?></h2>
    <div class="postentry"><p><?php _e('D&eacute;sol&eacute;, aucune publications correspond &agrave; votre recherche.', 'montheme'); ?></p></div>
</div>

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Pour constater l’effet de cet ajout, entrer dans le champ de recherche situé dans l’en-tête, un critère de recherche qui n’existe pas, cliquer sur le bouton chercher.

Télécharger les fichiers de cette partie et les copier sous /themes/montheme .

Traduction
Noter que la  fonction_e() permet le texte de votre choix.

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=247 5
Mon blog – Partie 4 – Créer son thème WordPress http://www.f8eoz.com/?p=138 http://www.f8eoz.com/?p=138#comments Tue, 29 Nov 2011 14:57:10 +0000 admin http://www.f8eoz.com/?p=138 Définition
Un thème WordPress est un ensemble de fichiers modèles appelés template qui produit la page Web. Il donne une présentation graphique à vos données. Le thème permet aussi d’associer des fonctions qui faciliteront l’accès aux données. Il est l’interface graphique entre l’utilisateur et vos données. Ces fichiers sont liés entre-eux par un lien hiérarchique. S’il y a un schéma à retenir, il est ici .

Au minimum, un thème comprend 2 fichiers: style.css, index.php. Tout autre fichier peut être ajouté mais pour répartir la programmation et faciliter la maintenance du thème il est d’usage d’inclure les fichiers: comments.php, footer.php, header.php, sidebar.php .

Pourquoi créer son propre thème WordPress ?
Il existe des centaines de thèmes, et de très bonne qualité. La documentation de WordPress est si luxuriante qu’on ne sait par quel bout l’aborder. On craint d’y passer du temps, mais finalement… pas tant que cela.

J’ai créé mon thème pour les raisons suivantes:
- j’aime comprendre et maîtriser ce que j’utilise,
- je veux savoir comment les concepteurs ont construit ce bel outil,
- je veux un blog en français qui correspond exactement à mon souhait.

C’est un travail complet de recherche, d’analyse et de synthèse très enrichissant qui vous permet de manipuler HTML, PHP, CSS.

Cahier des charges
- Un blog minimaliste mais complet.
- Un simple journal de bord, comme un cahier.
- La page comprend un en-tête, une barre de navigation, 2 colonnes, la colonne de gauche pour les articles, celle de droite pour la recherche, les archives, tags, catégories, etc…

Méthode de travail
Elle est fondée essentiellement sur l’expérimentation. Pour comprendre la logique de WordPress et construire mon thème, j’ai sélectionné et analysé quelques thèmes simples. Je vous livre simplement le résultat de cette expérience. Si vous voulez bien me suivre au cours de cette série d’articles, nous allons procéder de la même façon avec mon propre thème en le reconstruisant progressivement ensemble, de façon logique. A chaque étape, nous allons visualiser le résultat.

TRace ON !
Votre serveur Apache est actif. Votre serveur MySql aussi. Entrons maintenant dans WordPress.

Aller sous xampp/htdocs/wordpress/wp-content/themes et créer le répertoire montheme.
Avec un éditeur de texte comme Notepad++ créer les templates vides pour l’instant: index.php, header.php .
Créer de la même façon la feuille de style vide style.css .
Enregistrer ces fichiers sous le répertoire montheme .

Avec le navigateur, se connecter à http://localhost/wordpress/.
Sur la page Gérer les thèmes du tableau de bord vous trouvez dans les thèmes disponibles votre nouveau thème vide intitulé montheme by anyone. Il vous indique aussi que le thème se trouve sur /themes/montheme .

Nous allons compléter la description du thème.
Avec l’éditeur de texte ouvrir style.css et insérer les lignes de commentaire suivantes:

/*
Theme Name: MonTheme
Theme URI: http://moi.free.fr
Description: Un thème simple. Deux colonnes. Sidebar a droite qui supporte les widgets. Tags et gravatars. Valid XHTML and CSS.
Version: 1.0
Author: moi
Author URI: http://moi.free.fr
*/

Enregistrer.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
La description du thème apparaît maintenant.
Pour voir l’image associée au thème, il suffirait de placer sous le répertoire /themes/montheme une image au format 300×225 appelée screenshot.png .

Nous allons créer maintenant notre première page Web. Notre blog est une page blanche posée sur un fond gris. Nous allons d’abord peindre le fond. Une page comprend au minimum les balises <html><head><body>. Il faut aussi lui donner un titre avec la balise <titre>, indiquer où trouver la feuille de style avec une balise <link>, indiquer le lien vers le flux RSS, indiquer le lien vers XML-RPC pour traiter les pingbacks . Attention à bien coder les balises <!DOCTYPE> et <html>. Elles sont trop souvent recopiées d’une page à l’autre sans se préoccuper de leur contenu. Bien coder ces balises, assure un fonctionnement correct des navigateurs. Depuis HTML 5, la balise <!DOCTYPE> a été simplifiée. Depuis le 26 janvier 2000, XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Le document doit respecter les normes de validation d’une des trois DTD XHTML : strict, transitional ou frameset. La DTD stricte n’autorise plus l’utilisation de certains anciens éléments de présentation mais elle a l’avantage de contraindre le développeur à séparer structure et présentation, avec les facilités de maintenance que cela apporte.

Avec l’éditeur de texte insérer les balises dans le fichier header.php :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" <?php language_attributes(); ?>>
    <head>
        <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
        <!--Lien vers la feuille de style pour affichage sur écran-->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <!--Lien vers le fichier XML de flux RSS-->
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
        <!--Lien pour les pingbacks vers le fichier XML-RPC-->
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    </head>
    <body>

Insérer les lignes dans le fichier index.php :

    <?php get_header(); ?>
</body>
</html>

Pour peindre le fond en gris nous donnons des attributs graphiques à la balise body. Nous fixons aussi la police de caractères et sa taille. Nous insérons ces lignes à la suite des commentaires dans style.css :

/* ============ STRUCTURE GENERALE DE LA PAGE =================== */
/* <BODY> balise qui enveloppe l’ensemble du thème. Les attributs de la balise <body> seront utilisés
tant que vous ne changerez rien à un niveau plus fin du thème. Peint tout le fond d'écran en gris */
body {
margin:1em 0 1em 0; /* espace entre les éléments HTML (haut, droite, bas, gauche) */
background: #3c3c3c; /* couleur du fond de l'écran gris foncé (hexadecimal) */
font-family: Verdana, Lucida Grande, Arial, Sans-Serif;
font-size: 62.5%; /* Fixe la taille des caractères de la page HTML */
color: #545454; /* couleur du texte gris foncé (hexadecimal) */
padding: 0 0 0 0; /*bords gris: distance entre le bord d'un élément HTML et son contenu (haut, droite, bas, gauche) */
min-height:100%; /*hauteur minimale sur une balise de type bloc. */
}

Enregistrer tous les fichiers.
Sur la page Gérer les thèmes du tableau de bord activer le thème montheme.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran. Avec le navigateur, se connecter à http://localhost/wordpress/. Une page grise s’affiche.

Le titre est rendu variable par la fonction  is_single() qui y ajoute un texte supplémentaire ainsi que le titre de la page wp_title(). Vous pouvez en voir l’effet simplement sur l’onglet FireFox de la page affichée ou en glissant la souris dessus. Pour l’instant vous ne voyez que le nom du blog. La fonction bloginfo() récupère l’URL de la feuille de style. Quand le fichier index.php est exécuté la fonction get_header() réunit ces 2 parties pour former la page Web. Pour vous en convaincre, clic droit sur la page grise affichée, sélectionner afficher le code source de la page.

Nous allons maintenant placer notre page blanche sur ce fond et la structurer: un en-tête, deux colonnes, un bas de page. Nous allons aussi y placer en titre le nom du blog. La balise <div> va structurer notre page comme cela: <div> de la page, qui contient <div> du header, <div> de l’article à gauche, <div> du sidebar à droite. Une classe va habiller le titre. D’autre part, vous avez remarqué que la barre d’administration du blog en haut de page est absente. Nous allons aussi l’ajouter tout de suite pour notre confort avec la fonction wp_head() dans le header.php et wp_footer() dans le footer.php.

Avec l’éditeur de texte ouvrir header.php et juste au-dessus de la balise </head> insérer les lignes suivantes:

<!-- wp_head + wp_footer du footer.php place une ligne d'administration en haut de la page pour l'administrateur-->
<?php wp_head(); ?>

Toujours dans header.php et sous la balise <body> insérer les lignes suivantes:

<div id="page">
<div id="header">
    <h1 class="bloginfoname">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a>
    </h1> <!-- retour à home si clic sur nom -->
</div><!--END header-->
<div style="clear:both"></div><!-- met le reste de la page sous le header -->

Avec l’éditeur de texte ouvrir index.php et entre la ligne get_header() et  la balise </body> insérer les lignes suivantes:

    <div id="content">
    </div><!--END content-->
    <?php get_sidebar(); ?>
    <div style="clear:both"></div><!-- met le reste de la page dessous -->
</div><!--END page-->
<?php get_footer(); ?>

Avec l’éditeur de texte ouvrir un nouveau fichier sidebar.php et insérer les lignes suivantes:

<div id="sidebar">
</div><!--END sidebar-->

Avec l’éditeur de texte ouvrir un nouveau fichier footer.php et insérer les lignes suivantes:

<!-- begin footer -->
<div id="footer">
<?php wp_footer(); ?>
</div>

Nous allons définir  pour chaque division, sa disposition à droite ou à gauche, la couleur de fond, les marges – la taille générale des titres <h1> à <h6> – l’apparence générale de la balise <a> – le style de la classe bloginfoname et de sa balise <a>. Nous insérons ces lignes à la fin du fichier style.css :

/* dessine une page blanche centrée sur le fond gris entourée de marges grises */
#page {
margin:0 auto; /* marge droite s'adapte à la largeur disponible pour centrer le blog au milieu de la page web.*/
width: 92%;
background-color:#FFF; /* fond blanc */
/*background-color: yellow;*/ /* fond jaune pour test */
padding: 0 1.8em 0 1.8em; /* marges haut, droite, bas, gauche de toute la page*/
display:block;
}

#header {
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/*background:green;*/ /* pour test */
}

#content {
width:75%;
float:left;
margin: 0 0 0 0;
padding: 0 0 0 0;
background:#FFF; /* fond blanc */
/* background-color: maroon;*/ /* pour test */
}

#sidebar {
float:right;
width:25%;
margin: 0 0 0 0;
padding: 0 0 0 0;
/*background-color:LightSteelBlue;*/ /* pour test */
background:#FFF; /* fond blanc */
}

#footer {
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
font-size:1em;
color:white;
clear:both; /* force le footer sous content et sidebar */
}

/* ============ STYLE GENERAL =================== */

/* FONT-SIZE */
h1 {font-size:2.6em;}
h2 {font-size:2em;}
h3 {font-size:1.6em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:0.8em;}

/* LIENS */
a, a:link, a:visited{
color:#258; /* bleu */
text-decoration:none;
}

a:hover, a:active {
color: #C51500; /* rouge */
/* text-decoration:underline;*/
}

/* ============ STYLE PARTICULIER =================== */

/* BLOGINFO NAME */

.bloginfoname {
float:left;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:3em;
margin: 0.5em 0 0;
padding: 0 0 0 0;
}

.bloginfoname a, .bloginfoname a:link, .bloginfoname a:visited {
color: #7da939; /* vert */
text-decoration:none; /* ne pas souligner*/
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le nom du blog apparaît maintenant en titre sur fond blanc (pour l’instant seul le nom est sur fond blanc, le reste est gris). La fonction get_sidebar() du fichier index.php a  uni le fichier sidebar.php au reste de la page Web. Pour vous en convaincre, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Nous allons achever le header en y plaçant la description du blog, le dispositif de recherche, une barre de navigation pour afficher les pages. La classe bloginfodesc va habiller la description, la classe search le dispositif de recherche, la barre de navigation sera incluse dans une balise <div> .

Avec l’éditeur de texte ouvrir header.php et entre la balise </h1>  et la balise </div><!–END header–> insérer les lignes suivantes:

<div style="clear:both"></div><!-- met la description sous le nom -->
    <h2 class="bloginfodesc"><?php bloginfo('description'); ?></h2>
    <div class="search"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>
    <div id="barredenavig" ><ul>
        <li><a href="<?php echo get_option('home'); ?>/" >Accueil</a></li>
        <?php wp_list_pages('title_li='); ?><!-- retourne la liste des pages dans suite de <li> -->
        </ul>
    </div><!--END barredenavig-->

Avec l’éditeur de texte ouvrir un nouveau fichier searchform.php et insérer les lignes suivantes:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    <div>
        <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="<?php _e('Chercher', 'montheme'); ?>" />
    </div>
</form>

Nous allons définir le style de la classe bloginfodesc – de la classe search – des balises <div> <ul> <li> <a> de la barre de navigation. Nous insérons ces lignes à la fin du fichier style.css :

.bloginfodesc {
float:left;
font-size: 1.2em;
font-weight: bold;
font-style:italic;
color:#545454; /* couleur gris */
margin: 0 0 1.5em 0;
padding: 0 0 0 0;
}

.search { /* le bloc de recherche est placé en bas à droite du header */
float:right;
padding:0 2em 0 0; /* marge haut dans le header */

}

/* BARRE DE NAVIGATION gris foncé qui contient la liste des pages du thème */

#barredenavig {
background:#777; /* gris foncé */
font-size:1.1em;
clear:both; /* force la barre de navigation sous la <div> précédente */
float:left;
/*display:inline-block;*/
width: 100%; /* la barre occupe toute la largeur du header moins la marge et le padding du header */
}

#barredenavig ul {
margin: 0 0 0 0; /* marge de liste générale */
padding:0 0 0 0;
list-style: none; /*enlève les bullets de la liste */
font-size: 1.0em; /* très important pour garder la même taille: taille des caractères X 1 */
}

#barredenavig li { /* place chaque élément du menu à gauche, l'un après l'autre séparé par un léger trait de bordure */
float: left;
list-style:none;
border-right:1px solid #a9a9a9; /* bordure gris souris plus clair que le fond de la barre*/
}

/* Les éléments de la barre de navigation sont un lien placés dans la balise <a> dont les propriétés
sont changées pour la barre de navigation */
#barredenavig a, #barredenavig a:link #barredenavig a:visited {
display: block; /* l'espace forme un bloc qui tient compte des marges et du padding */
font-weight:bold;
color: #f5f5f4; /* blanc */
padding:6px 12px; /* élargit la barre, allume tout l'espace de l'élément de la barre */
}

#barredenavig a:hover, #barredenavig a:active {
background:#000; /* couleur noir */
}

Enregistrer tous les fichiers.
Presser CTRL+SHIFT+R (sous Firefox) pour vider le cache du navigateur et rafraichir l’écran.
Le header apparaît maintenant complet en titre sur fond blanc (pour l’instant seul le header est sur fond blanc, le reste est gris). La fonction wp_list_pages() du header retourne la liste des pages. Chaque titre de page est inclus dans une balise <a> elle même incluse dans une balise <li>. C’est pour rester cohérent avec HTML que la page d’accueil est aussi placée dans une balise <li> et que l’ensemble de la liste est placé dans une balise <ul>. La fonction  include () du fichier header.php a  uni le fichier searchform.php au reste de la page Web. Pour vous en convaincre, clic droit sur la page affichée, sélectionner afficher le code source de la page.

Traduction
Noter au passage que 2 textes ont été francisés: dans searchform.php le bouton chercher, dans la barre de navigation la page Accueil. Cette remarque est utile si vous avez trouvé un thème qui vous plaît que vous souhaiteriez traduire. Nous verrons par la suite qu’il y en a d’autres qu’il est aussi simple de traduire.

Télécharger les fichiers de cette première partie et les copier sous /themes/montheme .

Liens
Partie 1 – Choix des outils
Partie 2 – Environnement de développement et de qualification
Partie 3 – Installation de WordPress sur serveur local
Partie 4 – Créer son thème WordPress
Partie 5 – Créer son thème WordPress – Template Index
Partie 6 – Créer son thème WordPress – Template Sidebar
Partie 7 – Créer son thème WordPress – Template Footer
Partie 8 – Créer son thème WordPress – Template Archive
Partie 9 – Créer son thème WordPress – Template Search
Partie 10 – Créer son thème WordPress – Template Single
Partie 11 – Créer son thème WordPress – Template Comments
Partie 12 – Créer son thème WordPress – Style Print
Partie 13 – Créer son thème WordPress – Autres Templates
Partie 14 – Créer son thème WordPress – Traduction

]]>
http://www.f8eoz.com/?feed=rss2&p=138 4