Création d'une extension WordPress : Polices des titres

Voici le code d'une extension WordPress « fabrication maison » permettant de changer les polices de caractères des titres h1, h2 et h3 selon des réglages validés dans le Tableau de bord.

Déclaration de l'extension

Enregistrez le code suivant sous le nom polices.php dans le dossier plugins :

<?php
/*
Plugin Name: Polices
Plugin URI: https://lesdocs.fr/extension-wordpress-:-polices-des-titres
Description: L'extension Polices de LesDocs.fr
Version: 1.0
Author: Guillaume Guittenit
*/

Le commentaire permet de valider le nom de votre extension dans WordPress. Elle est désormais activable.

Extension Polices WordPress

Effet de l'extension Polices

Il faut ensuite écrire le code actif de l'extension permettant d'assigner une police de caractère pour les titres de votre thème.

Voici la suite du code :

// Effet de l'extension Polices
add_action('wp_head', 'polices');

function polices() {
?>
<style>
    @import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Roboto');

    h1 {
        font-family: <?php echo get_option('police_h1');
        ?> !important;
    }

    h2 {
        font-family: <?php echo get_option('police_h2');
        ?> !important;
    }

    h3 {
        font-family: <?php echo get_option('police_h3');
        ?> !important;
    }

</style>
<?php
}

Grâce à la fonction add_action('wp_head', ...), le code CSS interne se positionner dans la zone d'entête <head> du code HTML. Ce premier paramètre, qui accroche un code à un endroit précis, s'appelle le Hook.

Les valeurs des polices sont recueillies par les fonctions get_option() qui lisent les réglages enregistrés dans la table MySQL wp_options.

La page des réglages

Le choix des polices sera validé par l'utilisateur qui accédera aux réglages de l'extension dans le tableau de bord.

extension polices wordpress

Pour commencer, créons un lien dans le Tableau de bord vers la page de réglages de l'extension :

// Lien vers la page des réglages
function enregistre_page_menu() {
    add_menu_page('Réglages Polices', 'Polices', 'administrator', 'polices_reglages', 'polices_page_reglage', 'dashicons-editor-textcolor');
}
add_action('admin_menu', 'enregistre_page_menu');

La fonction add_menu_page() contient de nombreux paramètres :

  • Titre de la page de réglages de l'extension
  • Titre du lien 'Polices'
  • Grade de l'utilisateur WordPress pouvant utiliser l'extension
  • Fonction pour l'enregistrement des réglages
  • Fonction pour la page des réglages
  • Icône du lien de l'extension dans le Tableau de bord

La page de réglages de l'extension Polices est conçue dans la suite du code :

// Page réglages
add_action('admin_init', 'polices_reglages');

function polices_reglages() {
    register_setting('groupe-polices-reglages', 'police_h1');
    register_setting('groupe-polices-reglages', 'police_h2');
    register_setting('groupe-polices-reglages', 'police_h3');
}

function polices_page_reglage() {
?>
<h2>Réglages des polices</h2>
<form method="post" action="options.php">
    <?php settings_fields('groupe-polices-reglages'); ?>
    <?php do_settings_sections('groupe-polices-reglages'); ?>
    <label>h1</label>
    <select id="police_h1" name="police_h1">
        <option <?php if(get_option('police_h1')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h1')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h1')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select><br>
    <label>h2</label>
    <select id="police_h2" name="police_h2">
        <option <?php if(get_option('police_h2')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h2')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h2')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select><br>
    <label>h3</label>
    <select id="police_h3" name="police_h3">
        <option <?php if(get_option('police_h3')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h3')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h3')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select>
    <?php submit_button(); ?>
</form>
<?php } 

Cette page de réglages, matérialisée par la fonction polices_page_reglage(), propose pour chaque titre une liste déroulante permettant de choisir entre 3 Google Fonts. Libre à vous d'en ajouter d'autres. Les réglages seront enregistrés dans la table wp_options sous le nom de groupe groupe-polices-reglages.

Code final

Voici le code final de l'extension qui tient dans l'unique fichier polices.php :

<?php
/*
Plugin Name: Polices
Plugin URI: https://lesdocs.fr/extension-polices
Description: L'extension Polices de Guillaume
Version: 1.0
Author: Guillaume Guittenit
*/


// Effet de l'extension Polices
add_action('wp_head', 'polices');

function polices() {
?>
<style>
    @import url('https://fonts.googleapis.com/css?family=Lato|Open+Sans|Roboto');

    h1 {
        font-family: <?php echo get_option('police_h1');
        ?> !important;
    }

    h2 {
        font-family: <?php echo get_option('police_h2');
        ?> !important;
    }

    p {
        font-family: <?php echo get_option('police_h3');
        ?> !important;
    }

</style>
<?php
}


// Lien vers la page des réglages
function enregistre_page_menu() {
    add_menu_page('Réglages Polices', 'Polices', 'administrator', 'polices_reglages', 'polices_page_reglage', 'dashicons-editor-textcolor');
}
add_action('admin_menu', 'enregistre_page_menu');


// Page réglages
add_action('admin_init', 'polices_reglages');

function polices_reglages() {
    register_setting('groupe-polices-reglages', 'police_h1');
    register_setting('groupe-polices-reglages', 'police_h2');
    register_setting('groupe-polices-reglages', 'police_h3');
}

function polices_page_reglage() {
?>
<h2>Réglages des polices</h2>
<form method="post" action="options.php">
    <?php settings_fields('groupe-polices-reglages'); ?>
    <?php do_settings_sections('groupe-polices-reglages'); ?>
    <label>h1</label>
    <select id="police_h1" name="police_h1">
        <option <?php if(get_option('police_h1')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h1')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h1')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select><br>
    <label>h2</label>
    <select id="police_h2" name="police_h2">
        <option <?php if(get_option('police_h2')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h2')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h2')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select><br>
    <label>h3</label>
    <select id="police_h3" name="police_h3">
        <option <?php if(get_option('police_h3')=="Open Sans" ) echo "selected" ?> value="Open Sans">Open Sans</option>
        <option <?php if(get_option('police_h3')=="Lato" ) echo "selected" ?> value="Lato">Lato</option>
        <option <?php if(get_option('police_h3')=="Roboto" ) echo "selected" ?> value="Roboto">Roboto</option>
    </select>
    <?php submit_button(); ?>
</form>
<?php } 

Articles connexes

Module WordPress chez OVH Il est possible d'installer WordPress assez simplement avec l'hébergeur OVH grâce à la formule Module en 1 clic (qui nécessite au moins 8 clics). Considérons que nous avons acheté...
Installation de Wamp Pour installer quelques CMS comme WordPress ou Prestashop sous Windows, vous pouvez utiliser Wamp qui vous fournira notamment un serveur Web Apache, MySQL, PHP et phpMyAdmin. Voic...
Extensions utiles Vous cherchez à faire quelque chose qui n'est pas prévu par WordPress ? sachez qu'il existera probablement une extension (plugin) pour le faire. C'est là toute la richesse de ce C...
Mise en ligne d'un site WordPress avec Duplicator Voici les étapes pour mettre en ligne un site WordPress avec l'extension Duplicator. Cette extension permet de dupliquer, déplacer ou sauvegarder l'intégralité de votre site. S...
Installer MAMP et WordPress Pour construire un site Web avec WordPress, vous pouvez utiliser un bon hébergeur qui propose des modules d'installation automatisés. Cette solution est payante, mais in...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.