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

Concevoir un site vitrine avec WordPress Voici un petit cours simple pour concevoir un site vitrine avec WordPress. Dans cet exercice, nous allons concevoir le site d'un restaurant imaginaire nommé Restaurant Chez Lulu. ...
Installation d'un thème issu de ThemeForest ThemeForest est un catalogue de thèmes payants dans les formats HTML/CCS, WordPress et Prestashop. Il permet de développer rapidement des sites plutôt modernes et suffisamment cons...
Création d'un thème WordPress Dossier du thème Créez un dossier nommé jonathan et déposez-le dans wordpress/wp-content/themes Feuille de style Créez un fichier nommé style.css et écrivez le code suiva...
Créer un modèle de page sur WordPress La création d'un modèle de page peut s'avérer très utile quand un thème ne correspond pas tout à fait à vos besoins. Voici quelques exemples de modèles fréquemment rencontrés : ...
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 CM...

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.