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 } 

La fonction settings_fields() crée des balises <input type="hidden"> pour conserver les réglages.

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 } 

Laisser un commentaire

Votre adresse e-mail 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.