Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné par plein de choses :)

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis

Intégrer ses tweets à WordPress

Vous êtes plusieurs à me demander comment j’ai fait pour intégrer Twitter et plus particulièrement mes Tweets entres les articles du blog.

Les explications :

1 – Installation du Plugin

Il faut d’abord installer le plugin Twitter Tools pour son blog WordPress. Vous pouvez le trouver ici : http://wordpress.org/extend/plugins/twitter-tools/

Ensuite, il faut suivre la procédure d’installation classique d’un plugin. Depuis peu, il faut autoriser votre application (blog WordPress) à interagir avec Twitter. Bien que ça soit en Anglais, c’est assez simple.

J’ai créé une nouvelle rubrique qui se nomme « Tweets ». Les tweets importés sont classés automatiquement dedans.

Dans le menu « Réglages » de WordPress, un lien Twitter Tools doit apparaitre :

2 – Personnalisation du thème

Maintenant, chaque tweet importé sera considéré comme un article. Il va donc falloir personnaliser le thème sinon vous allez avoir des articles avec un titre de 140 caractères, un texte identique, la possibilité d’ajouter des commentaires, et plein de choses dont on ne veut pas.

Il faut éditer la page index.php de votre thème, pour rajouter une condition :
Dans la boucle suivante :

<?php while (have_posts()) : the_post(); ?>

Vous rajoutez la condition pour tester la catégorie :

<?php if ( in_category('tweets')) { ?>
	<div class="post-twitter">
		<div class="post-twitter-logo">
			<a href="http://twitter.com/@USER" target="_blank"><img src="./logo_twitter.gif" width="23" height="28" border="0" /></a>
		</div>
		<div class="post-twitter-post">
			<?php echo the_content(); ?>
		</div>
		<div class="post-twitter-rt">
			<a href="http://twitter.com/home?status=RT @USER <?php echo the_content_rss(); ?>" target="_blank">rt</a>
		</div>
	</div>
<?php } else{ ?>
	<!-- Votre code actuel pour afficher les articles -->
<?php } ?>

3 – Exclusion du flux RSS

Pour ne pas spammer votre flux RSS avec les tweets importés, il faut exclure la catégorie du flux.
Editons le fichier fonctions de votre thème (functions.php) pour y ajouter :

function exclude_category($query) {
	if ( $query->is_feed ) {
		$query->set('cat', '-11');
	}
return $query;
}
add_filter('pre_get_posts', 'exclude_category');

Attention, le -11 signifie qu’on exclut la catégorie qui porte l’ID 11, dans mon cas, c’est la catégorie Tweets. A vous d’adapter ce nombre en fonction de votre configuration.

Faire un « smooth scroll » sur les liens internes d’une page en jQuery

Voici un petit bout de code qui permet de faire un scroll automatique et tout en douceur sur les zones d’une même page.

1 – Imaginons le code html suivant :

<html>
<head>
<style>
.bloc{
	width:200px;
	height:200px;
	margin:50px auto 0 auto;
	background-color:#e0e0e0;
}
.bottom{
	width:200px;
	text-align:center;
	margin:1000px auto 0 auto;
	background-color:#e0e0e0;
}
</style>
</head>
<body>
	<div class="bloc"></div>
	<div class="bottom">Scroll Up</div>
</body>
</html>

2 – On souhaite que lors d’un clic sur le texte « Scroll Up », ça nous amène en haut de la page :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.bottom').click(function(){
			$('html,body').animate({scrollTop: 0}, 1000);
		});
	});
</script>

3 – Oui, mais je veux être amené à un élément bien précis de la page :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.bottom').click(function(){
			var offset = $('.bloc:first').offset();
			$('html,body').animate({scrollTop: offset.top}, 1000);
		});
	});
</script>

4 – Explications :

	$(document).ready(function(){
			/* On surveille l'évènement click sur tous les 
			    éléments qui ont la classe "bottom" */		
			$('.bottom').click(function(){
 
			/* On récupère la position ( fonction offset() ) du 
			     premier élément ( :first ) qui a la classe "bloc".
			     On la met dans la variable offset */
			var offset = $('.bloc:first').offset();
 
			/* Au lieu de remonter en haut de la page, on remonte 
			    à la position top de l'élément ( offset.top ) */
			$('html,body').animate({scrollTop: offset.top}, 1000);
		});
	});

5 – Live Demo :