Publié par Arnaud le 17 fév 2011 dans
Développement 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
?> |
Publié par Arnaud le 3 fév 2011 dans
Développement 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
Publié par Arnaud le 24 jan 2011 dans
Développement 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.
Publié par Arnaud le 21 jan 2011 dans
Développement 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 :
Publié par Arnaud le 30 déc 2010 dans
Développement 
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 »
- Ouvrez le fichier wp-admin/includes/media.php
- Recherchez la fonction image_link_input_fields
- Trouvez les lignes suivantes :
return "
<input class="text urlfield" name="attachments[$post->ID][url]" type="text" value="" . esc_attr($link) . "" />
<button class="button urlnone">" . __('None') . "</button>
<button class="button urlfile" title="" . esc_attr($file) . "">" . __('File URL') . "</button>
<button class="button urlfile" title="" . esc_attr($link) . "">" . __('File URL') . "</button>
"; |
- Remplacez-les par :
return "
<input class="text urlfield" name="attachments[$post->ID][url]" type="text" value="" . esc_attr($file) . "" />
<button class="button urlnone">" . __('None') . "</button>
<button class="button urlfile" title="" . esc_attr($file) . "">" . __('File URL') . "</button>
"; |
- Appréciez le résultat :
Publié par Arnaud le 23 déc 2010 dans
Réalisations …c’est le bordel mais c’est beau :
