Gestion de la Taille de Police de Caractère | (niss.fr)

Gestion de la Taille de Police

Par niss • 10 fév, 2008 • Catégorie: Customisations •

Suite à de nombreuses demandes par mail, j’ai décidé de vous mettre un petit tuto sur la façon d’intégrer à vos thème un module de gestion des tailles de caractères pour vos chers thèmes WordPress.

Vous allez voir, ce n’est pas bien compliqué.

Première chose : uploadez le fichier textsize.js dans un répertoire “js” que vous allez créer dans le répertoire de votre thème.

Ensuite, dans le fichier header.php, juste avant la balise < /head >, collez le bout de code suivant :

<script src="<?php bloginfo(’template_directory’); ?>/js/textsize.js" type="text/javascript"></script>

Ensuite, direction le fichier style.css, ajoutez-y les 3 classes suivantes :

#textsize {
opacity:0.4;
float:right;
margin-right:0px;
margin-top:3px;
padding:0px;
width:155px;
}

#textsize:hover {
opacity:1;
}

#textsize a {
text-decoration:none;
}

Enfin, insérez où bon vous semble dans votre thème (pour moi je l’ai mis dans le fichier header.php, de manière à ce qu’il apparaisse juste sous la fonction recherche), ce bout de code :

<p id="textsize">
Police: <a href="index.php" onclick="changeFontSize(1);return false;" title="Augmenter la Taille">A+</a> <a href="index.php" onclick="changeFontSize(-1);return false;" title="Diminuer la Taille">A-</a> <a href="index.php" onclick="resetFontSize(); return false;" title="Retour à la Taille par défaut">A</a>

Et voilà, c’est tout, le tour est joué Enjoy!

Partagez cette page:

Ces icones representent les sites de bookmarking social dans lesquels vos lecteurs peuvent partager et faire découvrir vos pages.

Articles Relatifs

Marqué comme: customisation, Taille des caractères

niss est le Webmaster de (niss.fr)
Email à cet auteur | Tous les Articles par niss

30 Responses »

rainbow le 16 février, 2008 à 20:45:
salut,
tout d’abord quelques petits compliments : excellent site, continue ainsi, c’est une vraie mine d’or !

bon, mais voilà petit problème :
je suis toutes les étapes indiquées pour augmenter et réduire la taille des caractères, les liens pour réduire et augmenter s’affichent mais il ne se passe rien !

adresse du blog : http://www.blog.liverainbow.com
niss le 16 février, 2008 à 21:00:
Salut Rainbow,

Laisse moi quelques heures, je jette un oeil au thème TMA et je vois si ce tuto fonctionne avec ou si il faut des choses particulières… Mais laisse moi juste un peu de temps, histoire que je teste de mon côté Promis, je te tiens au courant.
niss le 17 février, 2008 à 9:05:
Me revoilou Rainbow,

Donc problème vient du copier/coller de ce bout de code :
```
<script src="<?php bloginfo('template_directory'); ?>/js/textsize.js" type="text/javascript"></script>
```
Apparemment les “cotes (’)” entourant le mot “template_directory” sont déformées par le plugin que j’utilise afin d’afficher du code dans l’article ci-dessus… Je sais pas si c’est bien clair ce que je raconte? Bref, reccopie ce morceau de code dans ton fichier header.php au dessus de la balise < / head>

D’autre part, je te conseille de remplacer les lignes 1 à 22 du fichier textsize.js par cela :
```
var prefsLoaded = false;
var defaultFontSize = 75;
var currentFontSize = defaultFontSize;

function resetFontSize(){

	currentFontSize = defaultFontSize;
	changeFontSize(0);

}

function changeFontSize(sizeDifference){
	currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

	if(currentFontSize > 150){
		currentFontSize = 150;
	}else if(currentFontSize < 40){
		currentFontSize = 40;
	}

	setFontSize(currentFontSize);
};
```
Voilà, tiens moi au courant
rainbow le 17 février, 2008 à 9:37:
Excellent ca marche
merci pour la rapidité de la réponse !
Vive Niss.fr
rainbow le 18 février, 2008 à 11:36:
petite question supplémentaire (profitons avec un tel professionalisme de la part du webmaster ) :
je voudrais changer le texte A+, A- et A par des images. Est ce possible et si oui comment ?
merci d’avance !
rainbow le 18 février, 2008 à 11:43:
c’est bon j’ai fini par trouver la solution. désolé pour la question inutle !
Gracias le 10 juillet, 2008 à 0:18:
Bonsoir.

Moi j’ai un petit problème de police par défaut depuis que j’ai installer les codes pour le réglage de la police.

En effet, depuis que j’ai installé le script j’ai la police qui est toute petite, à la base elle n’est pas si petite, je ne sais pas si c’est normal, j’ai modifié la taille de la police dans le fichier de style.css en plus grand pour voir si ça changerait quelque chose mais rien a faire, je ne sais pas si j’ai été clair mais voici ce que ça donne sur mon blog de test http://graciashome.free.fr/ dans la sidebar c’est pire, peut-être ai-je fait une erreur dans les lignes de code?

Merci d’avance.
JR le 17 juillet, 2008 à 9:18:
bonjour,
super code, mais j’ai des difficultés à l’apliquer sur une seule partie de la page:
j’ai un header, un footer, un menu à gauche et un contenu à droite. Je voudrais l’appliquer uniquement au contenu. J’ai bien des div sur chaque partie, mais le javascript s’applique sur le body. Est-ce possible ?
merci
Bruce le 28 février, 2009 à 8:38:
Bonjour,

J’ai essayé d’appliquer votre tuto, en revanche, j’ai du me tromper quelque part car il ne se passe rien.

Pourriez-vous m’aider ?

http://sup.heros.free.fr

Merci d’avance.
Gracias le 28 février, 2009 à 10:36:
Salut Bruce.

Pour ton problème c’est exactement le même que moi poster plus haut. a tu mis cette ligne de code dans ton header entre les balises

<script src=”/js/textsize.js” type=”text/javascript”>
Gracias le 28 février, 2009 à 10:46:
Oups, petit problème. Cette ligne là

<script src=”/js/textsize.js” type=”text/javascript”>
Gracias le 28 février, 2009 à 10:47:
Mmmmm petit problème pour afficher le code, met le premier code du tuto entre les balises et
Bruce le 28 février, 2009 à 11:37:
Merci pour ton aide.

Alors maintenant, ça marche mais partiellement. Sa augmente et diminue la taille de la police. En revanche, quand je veux revenir à la taille par défaut, ma police est super grande.
Initialement j’étais en 11px.

Une idée d’où cela pourrait revenir ?
Gracias le 28 février, 2009 à 11:57:
As tu toucher quelque chose dans le fichier textsize.js ?
Bruce le 28 février, 2009 à 12:36:
Non.
jcpconsult le 13 avril, 2009 à 20:25:
Bonjour, merci pour toutes ces astuces,
mais j’ai un truc drôle pour info : cela ne marche pas avec la version wordpress 1.9 car il y a un bug, en effet template_directory renvoie le nom du blog à la place du nom du répertoire du thème.
Donc il faut migrer au plus vite en wordpress 1.9.1. Je me suis fait piéger !
jcpconsult le 13 avril, 2009 à 20:50:
Bonsoir,
il faut faire gaffe car dans le correctif donné dans un commentaire précédent pour le fichier javascript textsize.js il y a une erreur sur l’initialisation de la variable var defaultFontSize = 75; en fait il faut mettre var defaultFontSize = 100;
comme c’est le cas dans le contenu du fichier quand on clique sur le lien au début de la note.
jcpconsult le 15 avril, 2009 à 9:30:
concernant un de mes précédents commentaire, lundi n’était pas un bon jour ! la version de wrodpress mise en cause n’était pas la 1.9 mais 2.7, et il fallait migrer vers la 2.7.1 pour résoudre le problème.
DnB le 16 avril, 2009 à 8:46:
Excellent…. merci pour cette astuce…
Matty le 13 mai, 2009 à 9:11:

salut je trouve ce script tres interressant
cepedant, dans mon cas seul le texte suivant change de taille: Police: A+ A- A
je crois que j’ai loupé quelque chose
merci d’avance
pouet le 11 juin, 2009 à 16:04:
@jpconsult

Pour récuperer le chemin du theme, il faut remplacer bloginfo(’template_directory’); par bloginfo(’template_url’);
depannage informatique le 21 janvier, 2010 à 15:28:
je cherche un pluggin capable de récup le problème de mise à jour wordpress. Un pluggin qui gère la police d’écriture, taille de texte etc…. qqun peut m’aider?
merci
assistance informatique le 22 mars, 2010 à 15:48:
Excellent article, merci beaucoup
Julien le 13 octobre, 2010 à 8:43:
Bonjour,

Je cherche actuellement à mettre en place un module permettant de jouer sur la taille du texte de la page du genre A-, A et A+. Mais visiblement dans mon theme la zone de contenu normalement nommé content ne doit pas avoir le même nom et je ne trouve pas ce nom. Quelqu’un peut m’aider à mettre la main dessus? Merci
Cécile le 24 février, 2011 à 20:34:
Bonjour,

je tombe sur votre page vraiment très intéressante, merci !

Pouvez-vous me dire a priori si tout ceci est toujours valable avec wp 3.05 ou 3.1

merci
Pierrot le 4 mars, 2011 à 16:37:
Bonjour

Sous Win XP , je voudrais changer la taille des adresses pour un mail ; ex ; robrttalala@terre.ca , l’adresse est presqu’invisible et déformée .

Merci et bonne journée
olivier le 8 août, 2011 à 10:05:
bonjour, je viens d’essayer d’implanter votre module de gestion des police dans mon site wordpress j’utilise le thème arras 1.5.1.2 et cela ne marche pas (quand j’appuie sur les boutons A+ et A- rien ne change)

merci de votre aide…

Cordialement

Olivier
Albacrea le 13 mars, 2012 à 18:00:
Ne pas oublier de fermer la balise à la fin du code dans le dernier bout de code

cordialement

alex
Albacrea le 13 mars, 2012 à 18:01:
la balise </p>
mike le 22 avril, 2012 à 15:10:
Merci Niss pour ce site et en particulier pour cette astuce,
cependant, chez moi, ca ne fonctionne que sur la side bar et les titres. (theme enfant de twentyten)
Le texte centrale lui ne change pas…ou dois je mettre le code pour que ca intervienne partout…
(a moins que ce soit autre chose)

Cordialement

Mike

Laisser un Commentaire

Pour insérer du Code: Encadrez votre morceau de code par le caractère "¤" (Alt Gr+$) (ex: ¤Le Code¤ ) - Puis laisser une ligne blanche avant et après le bloc ¤Le Code¤.