Administrateur Systèmes d'Information mais aussi Développeur Web.
Passionné de tennis et de plein d’autres choses.
J’ai créé mon premier site internet en 2000, à l’âge de 13 ans, ça ne m'a pas quitté depuis.

Arnaud Bosquet

Administrateur Systèmes d'Information / Dev Web / Tennis
“Le risque est acceptable”

Récupérer la date du premier jour de la semaine

Un petit bout de code PHP, qui fait écho à une question qu’on m’a posée : comment récupérer la date du premier jour de la semaine ?
Très utile pour les scripts de calendrier, par exemple.

MAJ : Si votre serveur utilise une version >= PHP 5.1.0 vous pouvez utiliser la fonction suivante :

<?php
echo date('l d F Y', mktime(0, 0, 0, date('m'), date('d')-date('N')+1, date('Y')));
// Affiche par exemple : monday 26 september 2011
?>

Sinon, vous pouvez utiliser le bout de code ci-dessous mais attention; la fonction date(‘w’) retourne 0 pour le dimanche. Il faudrait améliorer un peu la ligne ci-dessous :

<?php
echo date('l d F Y', mktime(0, 0, 0, date('m'), date('d')-date('w')+1, date('Y')));
// Affiche par exemple : monday 14 february 2011
?>

Comment faire un « infinite scroll » en jQuery

Il parait que c’est la tendance pour l’année 2011 : l’infinite Scroll. Beuh, qu’est-ce qui se cache derrière ce nom bizarre ?

L’infinite Scroll va charger du contenu pendant que la barre de défilement descend. Concrètement, ça permet aux utilisateurs de ne pas cliquer sur les liens « pages suivantes ». On allège aussi le chargement de ses pages en affichant uniquement le début.
On trouve ça sur les albums photos Facebook, les pages Tumblr, et autres…

Dans l’exemple ci-dessous, on va afficher les 5 derniers commentaires et avant d’arriver en fin de scroll, on charge les 5 suivants, etc…

1. Live Demo

2. Explications :

Index.php

<html>
<head>
<title>Infinite Scroll</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){ // Quand le document est complètement chargé
 
	var load = false; // aucun chargement de commentaire n'est en cours
 
	/* la fonction offset permet de récupérer la valeur X et Y d'un élément
	dans une page. Ici on récupère la position du dernier div qui 
	a pour classe : ".commentaire" */
	var offset = $('.commentaire:last').offset(); 
 
	$(window).scroll(function(){ // On surveille l'évènement scroll
 
		/* Si l'élément offset est en bas de scroll, si aucun chargement 
		n'est en cours, si le nombre de commentaire affiché est supérieur 
		à 5 et si tout les commentaires ne sont pas affichés, alors on 
		lance la fonction. */
		if((offset.top-$(window).height() <= $(window).scrollTop()) 
		&& load==false && ($('.commentaire').size()>=5) && 
		($('.commentaire').size()!=$('.nb_com').text())){
 
			// la valeur passe à vrai, on va charger
			load = true;
 
			//On récupère l'id du dernier commentaire affiché
			var last_id = $('.commentaire:last').attr('id');
 
			//On affiche un loader
			$('.loadmore').show();
 
			//On lance la fonction ajax
			$.ajax({
				url: './ajax_comment.php',
				type: 'get',
				data: 'last='+last_id,
 
				//Succès de la requête
				success: function(data) {
 
					//On masque le loader
					$('.loadmore').fadeOut(500);
					/* On affiche le résultat après
					le dernier commentaire */
					$('.commentaire:last').after(data);
					/* On actualise la valeur offset
					du dernier commentaire */
					offset = $('.commentaire:last').offset();
					//On remet la valeur à faux car c'est fini
					load = false;
				}
			});
		}
 
 
	});
 
});
 
</script>
<style>
body{
background:#ffffff;
}
/* Juste pour l'affichage, aucun intérêt ici ;) */
</style>
</head>
 
<body>
<div class="article">
	<div class="nb_com">
		25
	</div> commentaires
	<br /><br />
	Un article par exemple...
</div>
<div class="cont_com">
	Les commentaires sur l'article : 
 
	<?php
	$sql=mysql_query("SELECT * FROM commentaires
	ORDER BY id DESC LIMIT 5");
	while($data=mysql_fetch_assoc($sql))
	{
		// On affiche les commentaires avec l'ID comme attribut du div
	?>
		<div class="commentaire" id="<?php echo $data['id']?>">
			<?php echo $data['text_com']; ?>
		</div>
	<?php
	}
	?>
 
	<div class="loadmore">
		Chargement en cours...
	</div>
</div>
</body>
 
</html>

ajax_comment.php

<?php
$sql=mysql_query("SELECT * FROM commentaires WHERE 
id < ".mysql_real_escape_string($_GET['last'])." ORDER BY id DESC LIMIT 5");
while($data=mysql_fetch_assoc($sql))
{
?>
	<div class="commentaire" id="<?php echo $data['id']?>">
		<?php echo $data['text_com']; ?>
	</div>
<?php
}
?>

Note : jfefe est parti de ce code pour développer un plugin Spip. Vous pouvez le retrouver ici : http://www.spip-contrib.net/defilement-infini-sur-les-articles

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 :

Supprimer le bouton « Adresse web de l’article » pour les images dans WordPress

Avec la version 3.0.1 de WordPress, lorsqu’on upload une image, par défaut, la cible du lien pointe vers la page « attachment ». Du coup ça ne fonctionne pas avec les LightBox. Alors, certes, le bouton « Adresse web du fichier » permet de faire pointer vers l’image originale.

Quand on a des utilisateurs pas très attentifs et qu’on ne veut pas utiliser la page « attachment », c’est une vrai galère.

Le code suivant permet de lier l’image originale par défaut et de supprimer le bouton « Adresse web de l’article »

  1. Ouvrez le fichier wp-admin/includes/media.php
  2. Recherchez la fonction image_link_input_fields
  3. Trouvez les lignes suivantes :
  4. return "
    <input class="text urlfield" name="attachments[$post-&gt;ID][url]" type="text" value="&quot; . esc_attr($link) . &quot;" />
    <button class="button urlnone">" . __('None') . "</button>
    <button class="button urlfile" title="&quot; . esc_attr($file) . &quot;">" . __('File URL') . "</button>
    <button class="button urlfile" title="&quot; . esc_attr($link) . &quot;">" . __('File URL') . "</button>
    ";
  5. Remplacez-les par :
  6. return "
    <input class="text urlfield" name="attachments[$post-&gt;ID][url]" type="text" value="&quot; . esc_attr($file) . &quot;" />
    <button class="button urlnone">" . __('None') . "</button>
    <button class="button urlfile" title="&quot; . esc_attr($file) . &quot;">" . __('File URL') . "</button>
    ";
  7. Appréciez le résultat :

CSS – Un contenu pleine page avec 2 colonnes de taille fixe

Une petite astuce CSS très rapidement. Comment faire un contenu pleine page avec une colonne à gauche et à droite qui ont une taille bien définie ? La réponse avec le petit bout de code ci-dessous :

  • Le code HTML :
1
2
3
<div class="col_milieu">Le contenu du milieu</div>
<div class="col_gauche">La colonne de gauche</div>
<div class="col_droite">La colonne de droite</div>
  • Le code CSS :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.col_milieu{
	float:left;
	width:100%;
	background:grey;
}
.col_gauche{
	float:left;
	margin-left:-100%;
	min-height:270px;
	overflow:hidden;
	width:168px;
	background:red;
}
.col_droite{
	float:left;
	margin-left:-168px;
	min-height:270px;
	overflow:hidden;
	width:168px;
	background:yellow;
}

Vous pouvez tester avec une live démo