Ajouter des polices personnalisées
Apprenez à ajouter des polices Google Fonts personnalisées ou des polices auto-hébergées au parcours de réservation de RepairPlugin à l'aide du filtre PHP rp_get_font_options.
Que pouvez-vous faire avec ceci ?
- Correspondre à la typographie de votre marque -- utilisez exactement la même police dans le parcours de réservation que sur votre site web.
- Ajouter n'importe quelle police Google Font qui n'est pas dans la liste par défaut de 30.
- Utiliser une police auto-hébergée (comme une police propriétaire) qui n'est pas disponible sur Google Fonts.
- Réutiliser une police que votre thème charge déjà sans la charger deux fois.
Où le trouver
- Dans le menu d'administration WordPress, cliquez sur RepairPlugin.
- Cliquez sur Settings dans le sous-menu.
- Dans la barre latérale des paramètres, cliquez sur Front-End Steps.
- Dans la section Branding, trouvez le menu déroulant Choose a font.
Après avoir ajouté une police personnalisée via le code, elle apparaît dans ce menu déroulant aux côtés des polices intégrées.
Comment le configurer
C'est une fonctionnalité de niveau développeur. Vous devrez ajouter un extrait de code au fichier functions.php de votre thème ou à un plugin personnalisé.
Ajouter une police Google Font
Ajoutez ce code au fichier functions.php de votre thème (ou un plugin spécifique au site) :
add_filter( 'rp_get_font_options', 'my_custom_rp_font', 10, 1 );
function my_custom_rp_font( $fonts ) {
$fonts['my_custom_font'] = array(
'name' => 'My Custom Font',
'font_link' => '<link href="https://fonts.googleapis.com/css2?family=My+Custom+Font:wght@300;400;500;600;700&display=swap" rel="stylesheet">',
'font_family' => '"My Custom Font", sans-serif',
);
return $fonts;
}
Chaque entrée de police nécessite trois valeurs :
| Key | Type | Ce qu'elle fait |
|---|---|---|
name | String | Le libellé affiché dans le menu déroulant des polices. |
font_link | String | Une balise HTML <link> qui charge la police. Laissez vide ('') si votre thème charge déjà la police. |
font_family | String | La valeur CSS font-family, incluant une police de secours (ex. '"My Font", sans-serif'). |
La clé du tableau (ex. 'my_custom_font') doit être un slug unique -- en minuscules, sans espaces, avec des underscores.
Ajouter une police auto-hébergée
Si votre police n'est pas disponible sur Google Fonts, hébergez le fichier de police vous-même et référencez-le :
add_filter( 'rp_get_font_options', 'my_selfhosted_rp_font', 10, 1 );
function my_selfhosted_rp_font( $fonts ) {
$font_url = get_stylesheet_directory_uri() . '/fonts/MyBrandFont.woff2';
$fonts['my_brand_font'] = array(
'name' => 'My Brand Font',
'font_link' => '<style>@font-face { font-family: "My Brand Font"; src: url("' . $font_url . '") format("woff2"); font-weight: 100 900; font-display: swap; }</style>',
'font_family' => '"My Brand Font", sans-serif',
);
return $fonts;
}
Assurez-vous que le fichier de police (ex. .woff2) est placé dans le répertoire référencé au sein de votre thème.
Utiliser une police que votre thème charge déjà
Si votre thème WordPress charge déjà la police, réglez font_link sur une chaîne vide. RepairPlugin utilisera directement la valeur font_family :
add_filter( 'rp_get_font_options', 'my_theme_font_for_rp', 10, 1 );
function my_theme_font_for_rp( $fonts ) {
$fonts['theme_font'] = array(
'name' => 'My Theme Font',
'font_link' => '',
'font_family' => '"My Theme Font", sans-serif',
);
return $fonts;
}
Sélectionner votre police personnalisée
Après avoir ajouté le code :
- Allez dans RepairPlugin > Settings > Front-End Steps.
- Dans la section Branding, ouvrez le menu déroulant Choose a font.
- Votre police personnalisée apparaît maintenant dans la liste.
- Sélectionnez-la et cliquez sur Save Changes.
- Vérifiez votre page de réservation pour vous assurer que la police s'affiche correctement.
Référence des paramètres
| Paramètre | Description | Par défaut | Le client voit |
|---|---|---|---|
| Filter: rp_get_font_options | Permet aux développeurs d'ajouter, supprimer ou modifier la liste des polices disponibles dans le menu déroulant de polices de RepairPlugin | 30 polices Google Fonts intégrées (triées alphabétiquement) | Lorsque vous sélectionnez une police personnalisée, tout le texte dans le parcours de réservation -- noms de réparations, descriptions, prix et boutons -- apparaît dans cette police. |
| Paramètre | Description | Par défaut | Le client voit |
|---|---|---|---|
| name | Définit le libellé qui apparaît dans le menu déroulant des polices pour cette police | -- | Pas d'effet direct -- c'est le nom que vous voyez dans le menu déroulant d'administration. |
| font_link | Charge la police sur chaque page qui utilise un shortcode RepairPlugin. Peut être une balise <link> Google Fonts, un bloc <style> avec @font-face, ou une chaîne vide si la police est déjà chargée par votre thème | -- | Pas d'effet direct -- cela s'exécute en arrière-plan pour rendre la police disponible. |
| font_family | Définit quelle police RepairPlugin utilise réellement pour tout le texte dans le parcours de réservation Astuce : Incluez toujours une police de secours (ex. sans-serif) pour que le texte reste lisible si la police personnalisée ne se charge pas. | -- | Tout le texte dans l'interface de réservation apparaît dans cette police. |
Polices intégrées
RepairPlugin inclut ces 30 polices par défaut : Archivo, Arial, Assistant, Barlow, Cabin, DM Sans, Fira Sans, Hind, Inter, Josefin Sans, Kanit, Karla, Lato, Manrope, Merriweather, Montserrat, Muli, Noto Sans, Nunito, Open Sans, Oswald, Playfair Display, Poppins, Quicksand, Raleway, Roboto, Roboto Slab, Signika, Source Sans Pro, Titillium Web, Ubuntu et Work Sans. La police par défaut (quand aucune n'est sélectionnée) est Montserrat.
Questions fréquentes
Faut-il des connaissances en programmation pour cela ?
Oui. Ajouter une police personnalisée nécessite de modifier le fichier functions.php de votre thème ou de créer un petit plugin personnalisé. Si vous n'êtes pas à l'aise avec le code PHP, demandez à votre développeur web d'ajouter l'extrait de code pour vous.
Ma police personnalisée va-t-elle disparaître après une mise à jour du thème ?
C'est possible, si vous avez ajouté le code au fichier functions.php de votre thème parent. Placez le code dans le fichier functions.php d'un thème enfant ou dans un plugin spécifique au site pour le protéger lors des mises à jour.
Peut-on ajouter plus d'une police personnalisée ?
Oui. Assurez-vous simplement que chaque police utilise une clé de tableau unique (ex. 'brand_font_one', 'brand_font_two').