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