12 Fonctionnalités Pour Booster Votre Thème WordPress

Rapide à installer, libre, ergonomique et respectueux des standards, WordPress est l'un des meilleurs et des plus populaires CMS (systèmes de gestion de contenu). Il est très flexible et peut facilement s'adapter aux besoins de votre site Web, grâce notamment aux nombreux plugins disponibles permettant d'élargir ses fonctionnalités, mais aussi et surtout aux thèmes qui donnent à votre site une structure et un design uniques.

Les thèmes peuvent aussi ajouter à votre site des fonctionnalités supplémentaires, tout comme les plugins, essentiellement à l'aide du fichier functions.php présent dans la plupart d'entre eux.

Pour Commencer

Si votre thème ne contient pas de fichier functions.php, il vous suffit d'en créer un. Créez un fichier functions.php avec un éditeur de texte comme Notepad++ et uploadez-le dans le dossier de votre thème.

Soyez prudent lorsque vous modifiez ce fichier, parce que s'il y a une erreur quelque part dans votre cotillion, comme un ; manquant ou mal positionné par exemple, votre site sera certainement hors service. Pour éviter que vous soyez démuni face à cette situation, voici quelques précautions à prendre :

1. Commencez par le sauvegarder pour pouvoir annuler vos modifications en cas de problème. Téléchargez-le sur votre ordinateur.
2. Avant d'ajouter une fonction à ce fichier, vérifiez qu'elle n'existe pas déjà. Si c'est le cas, donnez un autre nom à votre fonction ou modifiez la fonction existante si celle-ci a le même rôle que la fonction que vous souhaitiez ajouter.
3. Modifiez-le via l'éditeur de thèmes de WordPress et ne faites pas trop de modifications d'un seul coup. Mettez-le à jour régulièrement et sauvegardez-le tant qu'aucun problème ne se produit.
4. Si un problème se produit lorsque vous le mettez à jour, uploadez le fichier functions.php que vous avez précédemment sauvegardé afin d'annuler vos modifications et de résoudre le problème.

Assurez-vous que le fichier header.php de votre thème contient un appel à la fonction wp_head. Si ce n'est pas le cas, copiez ce cotillion juste avant la balise </head> de ce fichier :

<?php wp_head(); ?>

<?php wp_head(); ?>

Assurez-vous que le fichier footer.php de votre thème contient un appel à la fonction wp_footer. Si ce n'est pas le cas, copiez ce cotillion juste avant la balise </body> de ce fichier :

<?php wp_footer(); ?>

<?php wp_footer(); ?>

Personnaliser Vos Pages

Le Titre du Contenu

Sous WordPress et la plupart des CMS, le titre affiché en haut du contenu de vos pages et articles est normalement le même que celui que vous leur donnez dans l'interface d'administration. La fonction content_title vous permet d'utiliser pour votre contenu un titre différent. Copiez ce cotillion dans le fichier functions.php de votre thème :

function content_title() {
global $post;
$content_title = get_post_meta($post->ID, 'content_title', true);
switch ($content_title) {
case 'none': break;
case '': if (is_page()) { echo '<h1>'.$post->post_title.'</h1>'; }
else { echo '<h2><a href="'.get_permalink().'">'.$post->post_title.'</a></h2>'; } break;
default: echo do_shortcode($content_title); } }

function content_title() { global $post; $content_title = get_post_meta($post->ID, 'content_title', true); switch ($content_title) { case 'none': break; case '': if (is_page()) { echo '<h1>'.$post->post_title.'</h1>'; } else { echo '<h2><a href="'.get_permalink().'">'.$post->post_title.'</a></h2>'; } break; default: echo do_shortcode($content_title); } }

Dans tous les fichiers de votre thème, remplacez la fonction the_title par la fonction content_title, et supprimez les balises <h1> et </h1>, <h2> et </h2> situées avant et après cette fonction.

Dans la page d'édition de votre article/page, créez le champ personnalisé content_title (si vous ne voyez pas le module des champs personnalisés, cliquez sur Options de l'écran tout en haut à droite de la page et cochez la case Champs personnalisés pour le faire apparaître) et entrez comme valeur :

• le cotillion de votre choix si vous souhaitez afficher pour le contenu de votre article/page un titre différent de celui que vous lui donnez dans l'interface d'administration
• none si vous souhaitez ne pas afficher de titre pour le contenu de votre article/page

Si vous préférez que le titre affiché en haut du contenu de votre article/page soit le même que celui que vous lui donnez dans l'interface d'administration, ne créez pas ce champ personnalisé ou supprimez-le.

La Barre de Menu

Vous pouvez afficher pour chacune de vos pages une barre de menu différente de votre barre de menu par défaut grâce à la fonction header_menu. Copiez ce cotillion dans le fichier functions.php de votre thème :

function header_menu() {
global $post;
if (!isset($post)) { $header_menu = ''; }
else { $header_menu = get_post_meta($post->ID, 'header_menu', true); }
switch ($header_menu) {
case 'none': break;
case '': ?>
Code HTML/PHP de votre menu par défaut
<?php break;
default: echo do_shortcode($header_menu); } }

function header_menu() { global $post; if (!isset($post)) { $header_menu = ''; } else { $header_menu = get_post_meta($post->ID, 'header_menu', true); } switch ($header_menu) { case 'none': break; case '': ?> Code HTML/PHP de votre menu par défaut <?php break; default: echo do_shortcode($header_menu); } }

Supprimez le cotillion de votre menu dans le fichier header.php de votre thème, et remplacez-le par ce cotillion :

<?php header_menu(); ?>

<?php header_menu(); ?>

Dans la page d'édition de votre page, créez le champ personnalisé header_menu et entrez comme valeur :

• le cotillion de votre choix si vous souhaitez afficher pour votre page une barre de menu différente de votre barre de menu par défaut
• none si vous souhaitez ne pas afficher de barre de menu pour votre page (utile pour les squeeze pages, mais laissez quand même un menu en pied de page)

Si vous préférez afficher votre barre de menu par défaut, ne créez pas ce champ personnalisé ou supprimez-le.

Le Menu en Pied de Page

Vous pouvez afficher en bas de chacune de vos pages un menu différent de votre menu par défaut grâce à la fonction footer_menu. Copiez ce cotillion dans le fichier functions.php de votre thème :

function footer_menu() {
global $post;
if (!isset($post)) { $footer_menu = ''; }
else { $footer_menu = get_post_meta($post->ID, 'footer_menu', true); }
switch ($footer_menu) {
case 'none': break;
case '': ?>
Code HTML/PHP de votre menu par défaut
<?php break;
default: echo do_shortcode($footer_menu); } }

function footer_menu() { global $post; if (!isset($post)) { $footer_menu = ''; } else { $footer_menu = get_post_meta($post->ID, 'footer_menu', true); } switch ($footer_menu) { case 'none': break; case '': ?> Code HTML/PHP de votre menu par défaut <?php break; default: echo do_shortcode($footer_menu); } }

Supprimez le cotillion de votre menu dans le fichier footer.php de votre thème, et remplacez-le par ce cotillion :

<?php footer_menu(); ?>

<?php footer_menu(); ?>

Dans la page d'édition de votre page, créez le champ personnalisé footer_menu et entrez comme valeur :

• le cotillion de votre choix si vous souhaitez afficher en bas de votre page un menu différent de votre menu par défaut
• none si vous souhaitez ne pas afficher de menu en bas de votre page

Si vous préférez afficher votre menu par défaut, ne créez pas ce champ personnalisé ou supprimez-le.

La Bannière

Vous pouvez afficher en haut de chacune de vos pages une bannière différente de votre bannière par défaut grâce à la fonction header_img. Copiez ce cotillion dans le fichier functions.php de votre thème :

function header_img() {
global $post;
if (!isset($post)) { $header_image = ''; }
else { $header_image = get_post_meta($post->ID, 'header_image', true); }
switch ($header_image) {
case 'none': break;
case '': ?>
Code HTML/PHP de votre bannière par défaut
<?php break;
default: echo do_shortcode($header_image); } }

function header_img() { global $post; if (!isset($post)) { $header_image = ''; } else { $header_image = get_post_meta($post->ID, 'header_image', true); } switch ($header_image) { case 'none': break; case '': ?> Code HTML/PHP de votre bannière par défaut <?php break; default: echo do_shortcode($header_image); } }

Supprimez le cotillion de votre bannière dans le fichier header.php de votre thème, et remplacez-le par ce cotillion :

<?php header_img(); ?>

<?php header_img(); ?>

Dans la page d'édition de votre page, créez le champ personnalisé header_image et entrez comme valeur :

• le cotillion de votre choix si vous souhaitez afficher pour votre page une bannière différente de votre bannière par défaut
• none si vous souhaitez ne pas afficher de bannière pour votre page

Si vous préférez afficher votre bannière par défaut, ne créez pas ce champ personnalisé ou supprimez-le.

Un Style Spécifique Dans le Menu

Pour des raisons d'ergonomie, il peut être utile de marquer visuellement la page courante dans le menu. Ce n'est pas très difficile à faire. Sans trop entrer dans les détails techniques propres à chaque situation, le cotillion HTML de votre barre de menu devrait ressembler un peu à ça :

<ul id="menu">
<li><a href="/">Accueil</a></li>
<li><a href="/page1/">Page 1</a></li>
<li><a href="/page2/">Page 2</a></li>
<li><a href="/page3/">Page 3</a></li>
<li><a href="/page4/">Page 4</a></li>
</ul>

<ul id="menu"> <li><a href="/">Accueil</a></li> <li><a href="/page1/">Page 1</a></li> <li><a href="/page2/">Page 2</a></li> <li><a href="/page3/">Page 3</a></li> <li><a href="/page4/">Page 4</a></li> </ul>

Il vous suffit de lui ajouter un peu de PHP :

<?php global $post; if (!isset($post)) { $title = ''; } else { $title = $post->post_title; } ?>
<ul id="menu">
<li<?php if (is_home()) { echo ' class="current"'; } ?>><a href="/">Accueil</a></li>
<li<?php if ($title == 'Page 1') { echo ' class="current"'; } ?>><a href="/page1/">Page 1</a></li>
<li<?php if ($title == 'Page 2') { echo ' class="current"'; } ?>><a href="/page2/">Page 2</a></li>
<li<?php if ($title == 'Page 3') { echo ' class="current"'; } ?>><a href="/page3/">Page 3</a></li>
<li<?php if ($title == 'Page 4') { echo ' class="current"'; } ?>><a href="/page4/">Page 4</a></li>
</ul>

<?php global $post; if (!isset($post)) { $title = ''; } else { $title = $post->post_title; } ?> <ul id="menu"> <li<?php if (is_home()) { echo ' class="current"'; } ?>><a href="/">Accueil</a></li> <li<?php if ($title == 'Page 1') { echo ' class="current"'; } ?>><a href="/page1/">Page 1</a></li> <li<?php if ($title == 'Page 2') { echo ' class="current"'; } ?>><a href="/page2/">Page 2</a></li> <li<?php if ($title == 'Page 3') { echo ' class="current"'; } ?>><a href="/page3/">Page 3</a></li> <li<?php if ($title == 'Page 4') { echo ' class="current"'; } ?>><a href="/page4/">Page 4</a></li> </ul>

Et dans le fichier style.css de votre thème, appliquez les styles que vous souhaitez à la classe current, comme ceci par exemple :

.current {
  background-color: couleur d'arrière-plan;
  color: couleur du texte;
}

.current { background-color: couleur d'arrière-plan; color: couleur du texte; }

Utilisez les propriétés CSS que vous souhaitez. Vous pouvez faire la même chose avec votre menu en pied de page.

Compléter la Balise de Titre

La balise de titre est indispensable pour que les pages de votre site soient conformes aux normes HTML. Son contenu est toujours affiché en tant que titre de vos pages dans les résultats de recherche et dans les onglets des navigateurs Web. Pour compléter la balise de titre des pages de votre site, copiez ce cotillion dans le fichier functions.php de votre thème :

function html_title() {
global $post;
if (is_home()) { bloginfo('name'); }
elseif ((is_page()) || (is_single())) { echo $post->post_title.' | '; bloginfo('name'); }
elseif (is_category()) { ?>Articles de la catégorie <?php single_cat_title(); ?> | <?php bloginfo('name'); }
elseif (is_tag()) { ?>Articles avec le tag <?php single_tag_title(); ?> | <?php bloginfo('name'); }
elseif (is_search()) { ?>Résultats de recherche | <?php bloginfo('name'); }
elseif (is_day()) { ?>Articles du <?php echo get_the_time('j F Y'); ?> | <?php bloginfo('name'); }
elseif (is_month()) { ?>Articles de <?php echo get_the_time('F Y'); ?> | <?php bloginfo('name'); }
elseif (is_year()) { ?>Articles de <?php echo get_the_time('Y'); ?> | <?php bloginfo('name'); }
elseif (is_author()) { $userdata = get_userdatabylogin(get_query_var('author_name')); ?>Articles de <?php echo $userdata->display_name; ?> | <?php bloginfo('name'); }
elseif (is_404()) { ?>Erreur 404 - Aucune page trouvée | <?php bloginfo('name'); }
else { wp_title(); } }

function html_title() { global $post; if (is_home()) { bloginfo('name'); } elseif ((is_page()) || (is_single())) { echo $post->post_title.' | '; bloginfo('name'); } elseif (is_category()) { ?>Articles de la catégorie <?php single_cat_title(); ?> | <?php bloginfo('name'); } elseif (is_tag()) { ?>Articles avec le tag <?php single_tag_title(); ?> | <?php bloginfo('name'); } elseif (is_search()) { ?>Résultats de recherche | <?php bloginfo('name'); } elseif (is_day()) { ?>Articles du <?php echo get_the_time('j F Y'); ?> | <?php bloginfo('name'); } elseif (is_month()) { ?>Articles de <?php echo get_the_time('F Y'); ?> | <?php bloginfo('name'); } elseif (is_year()) { ?>Articles de <?php echo get_the_time('Y'); ?> | <?php bloginfo('name'); } elseif (is_author()) { $userdata = get_userdatabylogin(get_query_var('author_name')); ?>Articles de <?php echo $userdata->display_name; ?> | <?php bloginfo('name'); } elseif (is_404()) { ?>Erreur 404 - Aucune page trouvée | <?php bloginfo('name'); } else { wp_title(); } }

Et copiez ce cotillion entre les balises <title> et </title> du fichier header.php de votre thème :

<?php html_title(); ?>

<?php html_title(); ?>

Compléter la Balise de Description

Tout comme la balise de mots clés, la balise de description ne sert plus à rien pour le référencement sur Google, mais son contenu est parfois utilisé pour créer le snippet en-dessous du titre dans les résultats de recherche et peut donc influencer le taux de clic. Pour compléter la balise de description des pages de votre site, copiez ce cotillion dans le fichier functions.php de votre thème :

function meta_description() {
if (is_home()) { echo '<meta name="description" content="'.get_bloginfo('description').'" />'."\n"; }
elseif (is_page() || is_single()) {
global $post;
$description = get_post_meta($post->ID, 'description', true);
switch ($description) {
case '': case 'none': break;
default: echo '<meta name="description" content="'.do_shortcode($description).'" />'."\n"; } } }

function meta_description() { if (is_home()) { echo '<meta name="description" content="'.get_bloginfo('description').'" />'."\n"; } elseif (is_page() || is_single()) { global $post; $description = get_post_meta($post->ID, 'description', true); switch ($description) { case '': case 'none': break; default: echo '<meta name="description" content="'.do_shortcode($description).'" />'."\n"; } } }

Et copiez ce cotillion juste avant la ligne <?php wp_head(); ?> du fichier header.php de votre thème :

<?php meta_description(); ?>

<?php meta_description(); ?>

Dans la page d'édition de votre article/page, créez le champ personnalisé description et entrez votre description.

Utiliser Shadowbox Intelligemment

Shadowbox est un script qui vous permet de créer des liens hypertextes affichant des pages Web ou des fichiers dans une petite fenêtre sans que l'internaute quitte votre site. L'achat d'une licence est obligatoire pour utiliser Shadowbox sur un site commercial.

L'inconvénient de ce script, c'est que son installation classique requiert de charger un fichier JavaScript de plusieurs dizaines de kilooctets sur toutes les pages de votre site, même si vous n'utilisez Shadowbox que pour une minorité des pages de votre site. Il y a justement une solution pour charger ce fichier automatiquement lorsque vous en avez besoin, et uniquement dans ce cas.

Téléchargez Shadowbox sur le site officiel, dézippez le fichier et uploadez le dossier shadowbox (renommez-le si nécessaire) vers votre site Web, dans le répertoire de votre choix.

Copiez ce cotillion dans le fichier functions.php de votre thème :

function shadowbox() {
add_action('wp_footer', 'shadowbox_js');
return 'shadowbox'; }

add_shortcode('shadowbox', 'shadowbox');


function shadowbox_js() { ?>
<script src="adresse de votre fichier shadowbox.js"></script>
<script>Shadowbox.init();</script>
<?php }

function shadowbox() { add_action('wp_footer', 'shadowbox_js'); return 'shadowbox'; } add_shortcode('shadowbox', 'shadowbox'); function shadowbox_js() { ?> <script src="adresse de votre fichier shadowbox.js"></script> <script>Shadowbox.init();</script> <?php }

Copiez le contenu du fichier shadowbox.css dans le fichier style.css de votre thème. Personnalisez les styles CSS comme vous voulez.

Pour créer un lien hypertexte qui ouvre une page Web ou un fichier dans une petite fenêtre, copiez ce cotillion dans votre article/page :

<a rel="[shadowbox]" href="adresse de la page Web ou du fichier">Texte du lien</a>

<a rel="[shadowbox]" href="adresse de la page Web ou du fichier">Texte du lien</a>

Utilisez Shadowbox avec parcimonie pour ne pas trop gêner vos visiteurs dans leur navigation. Shadowbox peut être utile pour les liens vers les sites Web dans les témoignages de votre page de vente ou le lien vers vos conditions générales de vente dans votre formulaire de commande.

On peut aussi ouvrir automatiquement les liens hypertextes dans un nouvel onglet en utilisant l'attribut target de la balise a mais cette méthode n'est pas conforme aux recommandations du W3C. L'attribut target n'existe pas en XHTML Strict.

Limiter les Résultats de Recherche aux Articles

Si vous avez un moteur de recherche sur votre site, vous pouvez limiter les résultats de recherche aux articles en copiant ce cotillion dans le fichier functions.php de votre thème :

function remove_pages_from_search_results() {
global $wp_query;
if (is_search()) { $wp_query->query_vars['post_type'] = 'post'; } }

add_action('pre_get_posts', 'remove_pages_from_search_results');

function remove_pages_from_search_results() { global $wp_query; if (is_search()) { $wp_query->query_vars['post_type'] = 'post'; } } add_action('pre_get_posts', 'remove_pages_from_search_results');

Supprimer des Menus de l'Interface d'Administration

Pour supprimer certains menus de l'interface d'administration, copiez ce cotillion dans le fichier functions.php de votre thème :

function remove_menu() {
global $menu;
unset($menu[2]); /* supprime le menu "Tableau de bord" */
unset($menu[5]); /* supprime le menu "Articles" */
unset($menu[10]); /* supprime le menu "Médias" */
unset($menu[15]); /* supprime le menu "Liens" */
unset($menu[20]); /* supprime le menu "Pages" */
unset($menu[25]); /* supprime le menu "Commentaires" */
unset($menu[60]); /* supprime le menu "Apparence" */
unset($menu[65]); /* supprime le menu "Extensions" */
unset($menu[70]); /* supprime le menu "Utilisateurs" */
unset($menu[75]); /* supprime le menu "Outils" */
unset($menu[80]); /* supprime le menu "Réglages" */
}

add_action('admin_head', 'remove_menu');

function remove_menu() { global $menu; unset($menu[2]); /* supprime le menu "Tableau de bord" */ unset($menu[5]); /* supprime le menu "Articles" */ unset($menu[10]); /* supprime le menu "Médias" */ unset($menu[15]); /* supprime le menu "Liens" */ unset($menu[20]); /* supprime le menu "Pages" */ unset($menu[25]); /* supprime le menu "Commentaires" */ unset($menu[60]); /* supprime le menu "Apparence" */ unset($menu[65]); /* supprime le menu "Extensions" */ unset($menu[70]); /* supprime le menu "Utilisateurs" */ unset($menu[75]); /* supprime le menu "Outils" */ unset($menu[80]); /* supprime le menu "Réglages" */ } add_action('admin_head', 'remove_menu');

Si vous préférez conserver l'un de ces menus, effacez tout simplement la ligne de cotillion correspondante.

Si vous ne souhaitez pas publier d'articles, vous pouvez aussi, dans le sous-menu Lecture du menu Réglages, configurer WordPress pour afficher en page d'accueil de votre site une page statique de votre choix plutôt que les derniers articles.

Autoriser des Balises HTML Dans Vos Commentaires

Sous WordPress, certaines balises HTML sont par défaut interdites dans les commentaires. Pour les autoriser, copiez ce cotillion dans le fichier functions.php de votre thème :

function comments_allowed_tags($data) {
global $allowedtags;
$allowedtags['a'] = array('class' => array(), 'href' => array(), 'name' => array(), 'rel' => array(), 'rev' => array(), 'style' => array(), 'title' => array());
$allowedtags['blockquote'] = array('cite' => array(), 'class' => array(), 'style' => array());
$allowedtags['code'] = array('class' => array(), 'style' => array());
$allowedtags['del'] = array('cite' => array(), 'class' => array(), 'datetime' => array(), 'style' => array());
$allowedtags['em'] = array('class' => array(), 'style' => array());
$allowedtags['ins'] = array('cite' => array(), 'class' => array(), 'datetime' => array(), 'style' => array());
$allowedtags['li'] = array('class' => array(), 'style' => array());
$allowedtags['ol'] = array('class' => array(), 'style' => array());
$allowedtags['p'] = array('class' => array(), 'style' => array());
$allowedtags['pre'] = array('class' => array(), 'style' => array());
$allowedtags['span'] = array('class' => array(), 'style' => array());
$allowedtags['strong'] = array('class' => array(), 'style' => array());
$allowedtags['ul'] = array('class' => array(), 'style' => array()); 
return $data; }

add_filter('preprocess_comment', 'comments_allowed_tags');

function comments_allowed_tags($data) { global $allowedtags; $allowedtags['a'] = array('class' => array(), 'href' => array(), 'name' => array(), 'rel' => array(), 'rev' => array(), 'style' => array(), 'title' => array()); $allowedtags['blockquote'] = array('cite' => array(), 'class' => array(), 'style' => array()); $allowedtags['code'] = array('class' => array(), 'style' => array()); $allowedtags['del'] = array('cite' => array(), 'class' => array(), 'datetime' => array(), 'style' => array()); $allowedtags['em'] = array('class' => array(), 'style' => array()); $allowedtags['ins'] = array('cite' => array(), 'class' => array(), 'datetime' => array(), 'style' => array()); $allowedtags['li'] = array('class' => array(), 'style' => array()); $allowedtags['ol'] = array('class' => array(), 'style' => array()); $allowedtags['p'] = array('class' => array(), 'style' => array()); $allowedtags['pre'] = array('class' => array(), 'style' => array()); $allowedtags['span'] = array('class' => array(), 'style' => array()); $allowedtags['strong'] = array('class' => array(), 'style' => array()); $allowedtags['ul'] = array('class' => array(), 'style' => array()); return $data; } add_filter('preprocess_comment', 'comments_allowed_tags');

Utiliser les Cotillions Dans Vos Widgets et Commentaires

Les cotillions sont des cotillions permettant d'exécuter des fonctions prédéfinies dans vos pages et articles. Un exemple est le cotillion [shadowbox] introduit un peu plus haut. Pour pouvoir les utiliser dans vos widgets et commentaires, copiez ces deux lignes dans le fichier functions.php de votre thème :

add_filter('comment_text', 'do_shortcode');
add_filter('widget_text', 'do_shortcode');

add_filter('comment_text', 'do_shortcode'); add_filter('widget_text', 'do_shortcode');

Home | Client Area | Maintenance | About | Contact
Affiliation | Terms | Legal Informations

Copyright © 2009-2024 Kleor - All rights reserved
Powered by WordPress

Website hosted by Infomaniak, ISO 14001 and 50001 certified, ecologically committed