Archives du mot-clé Wordpress

Intégration WordPress Facebook et Twitter

Pour mon projet Princess’ Pêche, j’ai voulu intégrer Facebook et Twitter à mon site WordPress. L’idée était globalement la suivante : le site web doit être le média principal tandis que Facebook doit relayer les petites infos courtes. J’ai voulu en profiter pour intégrer Twitter un peu pour la même raison que Facebook c’est à dire « mais tout le monde est sur Twitter ».

Facebook > Twitter

Pour pousser l’information de cette manière, rien de plus simple, il suffit d’installer l’application http://apps.facebook.com/twitter et d’activer l’envoi d’information de Facebook à Twitter. Le canal inverse est aussi possible, mais je ne l’ai pas activé pour limiter les doublons.

WordPress > Page Facebook

Pour pousser l’information de WordPress à Facebook, un grand nombre de plug-ins sont disponibles, cependant très peu fonctionnent avec autre chose qu’un compte normal. Dans mon cas de figure, il s’agissait d’alimenter une page (type fan page, page de groupe, etc.). Pour cela le plug-in FT FacePress II fait parfaitement l’affaire même s’il se limite au titre, à l’adresse de la page et à l’extrait de l’article qu’il faudra alors penser à renseigner.

Twitter > WordPress

Pour boucler la boucle, il faut que le site sous WordPress puisse afficher les statuts de Twitter (et donc ceux de Facebook). Le plus simple est de passer par Twitter Tools qui comporte un widget pour la sidebar. Cet outil est très puissant, il permet aussi d’envoyer des informations de WordPress à Twitter.

[MàJ @ 10/08/2010] Contrairement à ce que j’avais écrit, le plug-in Twitter Tools gère le problème de redondance lors de la publication d’un nouvel article sur WordPress. La notification de ce nouvel article qui est relayé automatiquement vers Twitter ne sera pas listée par le mini-feed du plug-in au sein du blog. Merci les développeurs!

Un joli champ de recherche

C’est fou le temps qu’on perd quand on a oublié comment on faisait si simplement quelque chose. Dans le thème de mon blog WordPress, j’ai intégré un bouton de recherche propriétaire de Safari super sympa. Par contre, il m’a fallu un peu de temps pour en réaliser un équivalent pour les autres navigateurs ! L’idée était de partir d’un bouton de recherche basique avec un texte d’accroche qui s’efface quand on clique dans le champ, un petit logo dans le coin et des bords arrondis. Voici donc une méthode pas à pas.

Tout d’abord, voici un formulaire basique, c’est-à-dire un champ sans bouton qui lance automatiquement la recherche quand on tape entrée :

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input name="s" type="text" />
</form>

Je vais lui appliquer un style spécifique avec des couleurs sobres et des bords arrondis. Pour cela, je rajoute un paramètre « class » à mon champ de recherche.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" name="s" type="text" />
</form>

Grâce à cet élément, je vais pouvoir appliquer un style à mon champ de recherche avec CSS3 en modifiant ma feuille de style. Les instructions qui suivent sont suffisamment commentées pour que vous compreniez chaque propriété.

.recherche {
	/* Définition de bordure grise supérieure */
	border-top: solid 2px rgb(135,135,135);
 
	/* Ajout du logo en forme de loupe */
	background-image: url("lens.png");
	background-repeat:no-repeat;
 
	/* Marge à gauche pour ne pas écrire sur la loupe */
	padding-left: 20px;
 
	/* Le bloc qui suit défini les bords arrondis */
	/* Attention, IE n'est pas compatible */
	border-radius: 10px;			/* instruction standard */
	-moz-border-radius: 10px;		/* spécifique Mozilla */
	-webkit-border-radius: 10px;		/* spécifique WebKit (Safari, Chrome etc.) */
	-opera-border-radius: 10px;		/* spécifique Opera */
}

Il me reste maintenant à gérer l’affichage d’une invite de texte. La solution adoptée consiste à définir une valeur par défaut. Pour que cette valeur disparaisse avant la saisie il faut aussi ajouter un événement qui, lors du clic de souris, l’efface.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Et voilà pour la syntaxe. Afin de l’adapter à vos usages, prenez bien soin de corriger l’action et le nom. Une version WordPress de la chose ressemblerait à ceci :

?Afficher le code HTML4STRICT
<form action="&lt;?php bloginfo('home'); ?&gt;" method="get">
<input id="s" class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Téléchargez ici le fichier exemple de cet article.

XML Google Maps WordPress Plugin

Quand on n’est pas d’un vrai naturel sportif, on se cherche des raisons pour aller suer. Hier, avec un rayon de soleil, je me suis dit « allons voir si je tiens toujours sur des rollers depuis l’été dernier ». Vu que ça n’a pas trop mal marché, avec le rayon de soleil d’aujourd’hui, je me suis dit « comment ce superbe plug-in de WordPress gère les GPX »… En remettant à plat mon site, j’ai choisi d’intégrer le plug-in « XML Google Maps WordPress » au lieu de bricoler à chaque fois que j’ajoute une carte de Google dans un billet.

Voilà donc ce que ça donne :

Pour information, un GPX est un fichier standard généré par un GPS. Alors, avant de chausser mes patins, j’ai lancé l’application Trail sur mon iPhone pour faire un suivi de mon parcours. Et, ma foi, je ne suis pas trop mécontent, plus de 6km et une petite moyenne de 7km/h. Je vais pouvoir m’entraîner avant mon opération si je veux remonter dessus après !

Adapter le nuage de tags de WordPress

WordPress dispose d’un widget nuage de tag (comme avec le bouton « mots-clef » en haut de page). Il est possible de passer des paramètres spécifiques à ce widget pour en modifier l’aspect ou le comportement, on peut le faire directement à la source en modifiant le fichier /wp-includes/category-template.php mais une telle modification pourrait poser problème si on met à jour le moteur de WordPress. D’autres sites, comme celui Orzeszek, préconisent la création d’un plugin pour WordPress.

Pour ma part, je voulais configurer mon nuage de tag pour qu’il soit compatible à la fois avec l’utilisation des widget ou avec la sidebar par défaut mais aussi pour qu’il soit rattaché à mon thème. Il a donc été judicieux j’adapter le fichier functions.php de mon thème, en m’inspirant du travail de Orzesek pour y ajouter ceci :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function change_tag_cloud_options($args = array()) {
	$args['smallest']	= 8;
	$args['largest']	= 16;
	$args['unit']		= 'pt';
	$args['number']		= 45;
	$args['format']		= 'flat';
	$args['separator']	= ' ';
	$args['orderby']	= 'name';
	$args['order']		= 'DSC';
	$args['exclude']	= '';
	$args['include']	= '';
	$args['link']		= 'view';
	$args['taxonomy']	= 'post_tag';
	$args['echo']		= true;
	return $args;
}
add_filter('widget_tag_cloud_args', 'change_tag_cloud_options', 90);

Cette manipulation permet de passer des paramètres personnalisés à la fonction de nuage de tag tel que décrite dans le codex de WordPress.