Cet article est le premier d’une série qui a pour nom « Tips & Tricks ». Chaque lundi, je vous proposerai une petite astuce. Il y a de forte chance pour que ça soit du Flash, du PHP, ou le combo magique CSS/HTML. Je vais m’efforcer de vous apporter mes petites découvertes techniques que j’ai pu faire durant la semaine. Le rendez-vous est donc pris! Lundi, c’est Tips & Tricks! 

Pour cette premiere astuce, nous allons voir comment améliorer le graphisme des titres de vos blog grâce au PHP. J’ai eu cette idée suite à une discussion sur le blog de Christophe de logiste.be

Le reste est dans la suite, car c’est vraiment un article très long! (ce qui explique l’absence de news durant le week-end)

Comme vous le savez sûrement, en HTML, nous sommes limités aux polices dites « système ». Grosso-modo vous avez le droit à :

• Arial
• Verdana
• Times new roman
• Courrier
• Georgia
• Gevena

Bon c’est sympa, mais pas super fun tout de même! Il existe quelques méthodes qui permettent d’utiliser d’autres polices, je dirais même toutes les polices (TTF).

Avant de mettre les mains dans cambouis, je tiens à préciser que cette petite astuce demande tout de même quelques connaissance technique, aussi bien au niveau du PHP que de WordPress. En cas de problème n’hesitez pas à poser vos questions en commentaire, je répondrais et je vous aiderais dans la mesure du possible…et de mes capacités!

Alors, c’est parti!

Méthode 1 :

En premier, je vous présente la solution que j’ai préférée et que je compte installer sur mon blog dans quelques temps (je suis déjà sur un nouveau thèmes ^^). Je vous propose de voir comment la mettre en place sur le votre. Pour commencer, rendez-vous sur le site de João Makray qui à créé le script. Pour ceux qui parlent anglais, je vous invite à lire ses explications afin de mieux comprendre le fonctionnement du système.  

Nous allons procéder étapes par étapes dans l’installation du code :

1. Pour commencer, si vous travaillez directement en ligne, pensez à faire une sauvegarde de vos fichiers! (on est jamais trop prudent!)
2. Pour commencer, il faut télécharger ce fichier zip, et le dezipper!
3. Dans le dossier « dtr » ouvrez le fichier « dtr.php« .
4. Modifiez la variable « $dtr_dir » par le chemin complet vers votre thème.
   Par exemple pour moi : var $dtr_dir = « wp-content/themes/montheme/dtr »;
5. Vous pouvez maintenant uploader le dossier « dtr » dans votre dossier « themes » sur votre serveur.
6. Ce qu’il reste à faire c’est lier le tout! Pour cela, vous allez ouvrir le fichier « index.php » de votre thème et ajouter en première ligne ceci : 
   <?php include ‘wp-content/themes/montheme/dtr/dtr.php’; ?>
7. A la dernière ligne de votre fichier « index.php« , vous allez ajouter ceci :
   <?php ob_end_flush(); ?> 
8. Il nous reste maintenant à lier la CSS qui va nous servir à configurer et afficher notre texte en image. Vous devez donc ajouter au fichier CSS de votre thèmes cette ligne :
   @import « dtr/headings.css »; 
9. Pour la dernière étape, ouvrez le fichier « headings.css » et modifiez-le comme bon vous semble.

Pour avoir essayé rapidement, je peux vous assurer que cela marche très bien, cependant suivant les thèmes et le fichier CSS de votre thèmes la configuration du fichier « headings.css » se révèle plus ou moins facile…Bref, si vous touchez votre bille (et hop, une petite expression en direct des années 80) en HTML/CSS pas de problème, sinon vous aurez peut-être quelques surprise.

J’ai échangé quelques email rapides avec l’auteur du script, il travaille visiblement sur une version pour WordPress et devrait me prévenir quand il aura fini. Il m’a aussi prévenu que son emploi du temps était assez chargé et qu’il n’avait donc aucune date de livraison, mais on ne peut pas lui en vouloir pour ça!

Méthode 2 :

La deuxième méthode fonctionne avec un script php, et un javascript, j’ai aussi réussi à le faire marcher sans soucis, par contre il ne semble pas intégrer le retour à la ligne automatique. Bref, il à l’air un peu moins puissant que l’autre. Pour toutes les informations, c’est par ici.

Méthode 3 :

J’ai trouvé celle-ci grâce à rez0.info, merci à lui! C’est encore le combo Javascript/PHP pour le remplacement de texte. vous trouverez toutes les informations sur le site de FaceLift. Personnellement j’ai trouvé que c’était un peu plus complexe à première vu. Je n’ai donc pas vraiment était plus loin, mais vous pouvez le voir en action sur rez0.info!

Méthode 4 :

Et encore une dernière pour la route! Alors celle-la je ne l’ai même pas testée. Pourquoi ? Parce qu’elle utilise Flash, et que personnellement je ne veux pas que mes titres soient remplacés par du Flash. Je vous donne quand même le lien, vous vous ferez votre propre opinion! sIFR c’est par ici! 

Et bien voilà, pour une première de « Tips & Tricks » je pense que c’est pas mal. Beaucoup d’information. Je dois avouer que j’ai passé pas mal de temps à regarder tout ça j’espère que ça vous inspirera pour vos prochain thème ou site internet! N’hesitez pas à me donner votre avis ou à poser des questions!

Pour voir tous les « Tips & Tricks » c’est par ici!