Communauté
Rejoignez la communauté Geekeries sur Google+ › Découvrez mag.geekeries.fr
Personnaliser le « Read More » de WordPress

Personnaliser le « Read More » de WordPress

Publié par Valentin dans Développement web
Modifié le 23 avril 2012 à 20:17.

Le « Read More » est une fonction qui vous permet d’afficher un texte « Lire la suite… » dans vos billets WordPress. Par exemple, un blog normal n’affichera pas tout son article dans l’index, c’est pour sa qu’il va utiliser cette fonction.

Sa va vous permettre de coupé votre texte en deux pour qu’il soit plus présentable.

Mais quel est l’intérêt de laisser ce texte perturber votre blog, le « Lire la suite… » vous hante chaque nuit… sûrement. Donc voici un petit tutoriel expliquant comment modifier ce texte sadique.

Tout d’abord il faut savoir ce que vous voulez, un bouton, un simple texte (grrr..) ou tout simplement une image. Un bouton et une image c’est pas pareil… enfin pour moi.

Tout d’abord, changer le texte :
Il vous faut modifier le fichier « index.php » de votre thème, chercher ensuite la ligne contenant : « . Voilà vous pouvez modifier le texte a votre guise.

Le texte devient image :
Toujours dans cette ligne, il vous suffit simplement d’insérer une balise d’image, tels que :

<img alt="Read More" src="url_de_votre_image"/>

Un bouton « Lire la suite… » :

Les choses sérieuse commence, vous avez (ou tu a..) remarquer que j’ai mit en place ce genre de bouton sur ce blog, il est tout mignon. Je vous met a disposition le fichier source de mon bouton, à utiliser sans modération. Pour avoir le même effet, éditez le fichier « post-template.php » qui se trouve dans le dossier « wp-includes ». Modifier ensuite le code de la ligne 125 sous WordPress 2.6 et 221 sous WordPress 2.7 ! par celui-ci :

$output .= '<div class="read"><a href="'. get_permalink() . "#more-$id\"></a></div>"; }
 

Ensuite, éditer le fichier « style.css » de votre thème et ajoutez-y ce code :

.read a {
	border:0;
	vertical-align:bottom;
	display:block;
	width:100px;
	height:28px;
	background:url(images/read.png) 0 0 no-repeat;
	text-decoration:none;
}
.read a:hover {
	border:0;
	vertical-align:bottom;
	display:block;
	width:100px;
	height:28px;
	background:url(images/read.png) 0 0 no-repeat;
	text-decoration:none;
	background-position:0 -27px;
}

Modifier le lien de votre image ou laisser tel quel, sa ne me gène pas si vous utilisez mon bouton… faites moi signe si vous avez un soucis !

Je vous propose également un excellent moyen de retoucher vos photos en ligne gratuitement.

Partagez

l'Auteur


Twitter
Articles Similaires