L’excellent plugin wordpress wp-postratings permet de pouvoir voter pour les articles de son blog.

On peux avec ce dernier afficher un top des meilleurs articles par exemple.
Cependant on ne peux pas y faire figurer une miniature de son article (on suppose que pour la gestion des miniatures de vos articles vous utilisez un champs personnalisé qui contiendra l’url de votre miniature)

Nous allons voir ensemble comment faire cela.

Dans notre cas, nous allons modifier le script pour cette fonction ### Function: Display Highest Rated Page/Post

Ouvrez le fichier postratings-stats.php et allez à la ligne 217.
Nous allons trouver la requête qui nous permet d’aller récupérer les informations dans notre base de donnée, nous allons la modifier comme ci dessous.

$highest_rated = $wpdb->get_results("SELECT DISTINCT $wpdb->posts.*, (t1.meta_value+0.00) AS ratings_average, (t2.meta_value+0.00) AS ratings_users, (t3.meta_value+0.00) AS ratings_score , (t4.meta_value) AS image FROM $wpdb->posts LEFT JOIN $wpdb->postmeta AS t1 ON t1.post_id = $wpdb->posts.ID LEFT JOIN $wpdb->postmeta As t2 ON t1.post_id = t2.post_id LEFT JOIN $wpdb->postmeta AS t3 ON t3.post_id = $wpdb->posts.ID LEFT JOIN wp_postmeta AS t4 ON t4.post_id = wp_posts.ID WHERE t1.meta_key = 'ratings_average' AND t2.meta_key = 'ratings_users' AND t3.meta_key = 'ratings_score' AND t4.meta_key = 'image' AND $wpdb->posts.post_password = '' AND $wpdb->posts.post_date < '".current_time('mysql')."' AND $wpdb->posts.post_status = 'publish' AND t2.meta_value >= $min_votes AND $where ORDER BY $order_by DESC, ratings_users DESC LIMIT $limit");

Avec cette requête nous allons donc pouvoir récupérer l’url de notre miniature qui est contenu dans un champs personnalisé ‘image’.
Vous pouvez l’adapter à votre guise pour récupérer d’autres champs personnalisés par exemple.

Maintenant nous allons ouvrir le fichier wp-postratings.php et nous allons modifier la fonction function expand_ratings_template qui se trouve à partir de la ligne 934.

Par défaut nous avons ceci.

// Get post related variables
	if(is_null($post_ratings_data)) {
		$post_ratings_data = get_post_custom($post_id);
		$post_ratings_users = intval($post_ratings_data['ratings_users'][0]);
		$post_ratings_score = intval($post_ratings_data['ratings_score'][0]);
		$post_ratings_average = floatval($post_ratings_data['ratings_average'][0]);
	} else {
		$post_ratings_users = intval($post_ratings_data->ratings_users);
		$post_ratings_score = intval($post_ratings_data->ratings_score);
		$post_ratings_average = floatval($post_ratings_data->ratings_average);
	}

Nous allons le transformer comme ceci.

// Get post related variables
	if(is_null($post_ratings_data)) {
		$post_ratings_data = get_post_custom($post_id);
		$post_ratings_users = intval($post_ratings_data['ratings_users'][0]);
		$post_ratings_score = intval($post_ratings_data['ratings_score'][0]);
		$post_ratings_average = floatval($post_ratings_data['ratings_average'][0]);
		//MODIF ICI
		$img = $post_ratings_data['image'][0];
	} else {
		$post_ratings_users = intval($post_ratings_data->ratings_users);
		$post_ratings_score = intval($post_ratings_data->ratings_score);
		$post_ratings_average = floatval($post_ratings_data->ratings_average);
		//MODIF ICI
		$img = $post_ratings_data->image;
	}

Ensuite dirigez vous vers les lignes 1000 ou il y a une succession de str_replace.

Nous allons rajouter ceci.

$value = str_replace("%THUMB%", $img, $value);

Le tour est joué.
Dans les options de template de wp-postratings, vous allez pouvoir utiliser %THUMB% pour afficher une miniature de votre article.

<a href="%POST_URL%" title="%POST_TITLE%"><img class="top-articles" src="http://localhost/wordpress/wp-content/themes/votre theme/thumb.php?src=%THUMB%" alt="%POST_TITLE%"  width="91" height="67"/></a>

Le principe général est exposé, j’espère que cela vous aura été utile.

Nous allons essayer d’apprendre à utiliser le LOAD DATA INFILE qui nous permet d’importer des bases de données en CSV ou même texte dans notre base de donnée MySQL, de pouvoir insérer des dates qui sont au format français, des numéros de téléphone séparées par des espaces par exemple.

Imaginons la structure suivant pour notre base de donnée.

Voici celle de notre fichier texte.

Dans notre cas nous avons juste une inversion entre le nom et le téléphone.

Voici comment nous allons procéder.

LOAD DATA INFILE 'fichier.csv' INTO TABLE `prospects` FIELDS TERMINATED BY 't' ENCLOSED BY ''  LINES TERMINATED BY 'rn' IGNORE 1 LINES (id,@telephone,nom,@date_naissance) SET date_naissance = DATE_FORMAT(STR_TO_DATE(@date_naissance,'%d/%m/%Y'),'%Y-%m-%d'), telephone = REPLACE(@telephone,' ','');

Je passe sur les différents paramètre comme FIELDS TERMINATED BY, ENCLOSED BY qui se comprennent très bien d’eux même.
Si ce n’est pas le cas vous pouvez aller jeter un coup d’oeil à la documentation MySQL.

Quand nous faisons ceci (id,@telephone,nom,@date_naissance), cela signifie que nous allons insérer la première colonne de notre CSV dans le champs id de notre table prospects, la deuxième colonne dans le champs telephone, ainsi de suite.

Cela ne permet donc bien de pouvoir insérer des données qui ne respecteraient pas forcement la structure de notre base de donnée mysql.

Les @ présents nous servent de “variables temporaires” afin de pouvoir faire des modifications sur les champs présents dans notre CSV afin de les insérer dans notre base de donnée une fois transformée.

SET date_naissance = DATE_FORMAT(STR_TO_DATE(@date_naissance,'%d/%m/%Y'),'%Y-%m-%d')

Le code ci-dessus nous permet d’insérer dans notre base de donnée MySQL, une date qui était au format français dans notre fichier CSV en format anglais.

telephone = REPLACE(@telephone,' ','')

Cela nous a permis d’insérer le téléphone qui possédait des espaces, dans notre champs téléphone (int 10).

J’espère que ces quelques petites astuces vous auront été nécessaires, vous devriez à présent pouvoir insérer tout et n’importe quoi à partir de votre fichier txt ou csv.

MooFlow (compatible avec mootools 1.2) vous permettra de réaliser de jolie coverflow.

Pré-requis

Après avoir inclus tout les fichiers nécessaires au bon fonctionnement de ce coverflow (vous pouvez voir cela en téléchargeant les sources en bas de cet article), il devient très facile de réaliser votre effet.

Inclusion javascript pour les définir les options du coverflow

Vous trouverez la documentation ici même.

<script type="text/javascript">
var myMooFlowPage = {	

	start: function(){

		var mf = new MooFlow($('MooFlow'), {
			bgColor: '#fff',
			useSlider: true,
			useAutoPlay: true,
			useCaption: true,
			useResize: true,
			useWindowResize: true,
			useMouseWheel: true,
			useKeyInput: true
		});
	}
};
window.addEvent('domready', myMooFlowPage.start);
</script>

Création du coverflow

Le petit bout de code ci-dessous permet ensuite de créer le coverflow.

<div id="MooFlow">
<div><img src="images/cover1.jpg" title="zorrito1" alt="zorrito1" /></div>
<div><img src="images/cover2.jpg" title="zorrito2" alt="zorrito2" /></div>
<div><img src="images/cover3.jpg" title="zorrito3" alt="zorrito3" /></div>
<div><img src="images/cover4.jpg" title="zorrito4" alt="zorrito4" /></div>
</div>

Démos

Vous pouvez télécharger les fichiers d’example et voir une démo.

Vous trouverez d’autres démonstrations directement sur le site de MooFlow.

Rien de bien transcendant aujourd’hui, je vais vous proposer une petite liste de sites web ou vous pourrez trouver une flopée de logos.

A partir des ces derniers vous allez peux être trouver une inspiration divine.

Ces sites m’ont quand même permis de réaliser les logos ci-dessous.
Ca m’a donc bien aidé je trouve :)

Dans le tutorial suivant nous allons apprendre à utiliser les cookie avec la libraire javascript jquery.

Nous allons réaliser ensemble un bouton qui nous permettra de switcher entre deux vues différentes pour les articles de votre blog par exemple et de pouvoir ainsi garder sa préférence d’affichage.

1 - Pré-requis

Vous devez tout d’abord télécharger Jquery ainsi que le javascript de gestion des cookies.

Vous devez insérer le code suivant pour prendre en compte ces fichiers javascript.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

$.cookie('cookie'); // récupérer cookie
$.cookie('cookie', 'valeur'); // créer un cookie avec une valeur
$.cookie('cookie', 'valeur'', { expires: 7 }); // créer un cookie avec une expiration dans 7 jours
$.cookie('cookie', '', { expires: -1 }); // effacer cookie

2 - Deux affichages différents pour les news

Voici un code basique permettant de créer un affichage normal de news comportant un titre, une image et un contenu; un second affichage de type liste ou seul le titre est présent.

<div class="normal">
  <p>Titre du poste  </p>
  <p><img src="images/zorrito.png" width="48" height="48" alt="zorrito" style="float:left;"/>Texte Texte Texte Texte Texte Texte Texte</p>
  <p>Texte Texte Texte Texte Texte Texte Texte</p>
  <p>Titre du poste 1 </p>
  <p><img src="images/zorrito.png" width="48" height="48" alt="zorrito" style="float:left;"/>Texte Texte Texte Texte Texte Texte Texte</p>
  <p>Texte Texte Texte Texte Texte Texte Texte</p>
</div>
<div class="liste">
  <p>Titre du poste </p>
  <p>Titre du poste 1 </p>
</div>

3 - Gestion de l’affichage lors de l’accès au site

Il va falloir récupérer le cookie et stocker la valeur de ce dernier dans une variable javascript.

<script type="text/javascript">
var affichage = $.cookie('swap_tuto'); //variable permettant de savoir le style de l'affichage
if (affichage == null) { var affichage = 'normal';} // si aucun cookie est créé, on aura un affichage standard par défaut.
if (affichage == 'normal') {$(document).ready(function(){ //si on a quitté sur un affichage normal on reviendra sur un affichage normal
    $("a.changer_vue_avec").removeClass("swap");
	$('div.liste').hide();
  });}
if (affichage == 'liste') {$(document).ready(function(){
    $("a.changer_vue_avec").addClass("swap");
	$('div.normal').hide();
  }); }
<script>

3 - Création du cookie suivant l’affichage sélectionné

Suivant le type d’affichage que nous aurons choisi, nous allons attribuer une valeur au cookie correspondant à la vue choisie.

$(document).ready(function(){
$("a.changer_vue_avec").toggle(function(){
if (affichage == 'normal')
{
	$(this).addClass("swap");
	$('div.normal').fadeOut('fast');
	$('div.liste').fadeIn('fast');
	$.cookie('swap_tuto', 'liste',{ expires: 99 });
}
if (affichage == 'liste')
{
	$(this).removeClass("swap");
	$('div.liste').fadeOut('fast');
	$('div.normal').fadeIn('fast');
	$.cookie('swap_tuto', 'normal',{ expires: 99 });
}
}, function () {
if (affichage == 'normal')
{
	$(this).removeClass("swap");
	$('div.liste').fadeOut('fast');
	$('div.normal').fadeIn('fast');
	$.cookie('swap_tuto', 'normal',{ expires: 99 });
}
if (affichage == 'liste')
{
	$(this).addClass("swap");
	$('div.normal').fadeOut('fast');
	$('div.liste').fadeIn('fast');
	$.cookie('swap_tuto', 'liste',{ expires: 99 });
}
});
});

4 - Conclusion, démo et fichiers

J’espère que ce tutorial vous aura été utile.
Vous pouvez télécharger les fichiers d’example et voir une démo.

Lorsque vous testez la démo, changer de vue, et rafraichissez votre page pour voir l’effet des cookie (sauvegarde ou non de votre vue)

Durant mes pérégrinations webistiques, j’ai écrit sur notre cher google “nouveau kopikol” et quel étonnement quand je me suis retrouvé devant cette page.

Ma première pensée, est que nous nous trouvions sur des restes de la première version mais que nenni, le site est mis à jour et la communauté semble toujours active.

J’espère que cette nouvelle vous enchante, si il fallait rester discret, faites moi signe et ce post disparaitra comme kopikol l’ancien.

Vous avec le choix entre différentes langues pour votre clavier.

Mais à quoi cela pourrait servir ?

On pourrait imaginer saisir le numéro de sa CB avec ce petit système ce qui éviterait en cas d’infection par un virus “keylogger” par exemple de se faire voler son numéro de carte.

L’autre raison pourrait être la frime.

Voici la tradionnelle démonstration (cliquez sur l’image du clavier)

Vous trouverez tout ce qu’il faut pour le clavier virtuel ici même.

Voici un petit aperçu de ce que vous aller pouvoir faire.
Faites glisser le curseur et vous verrez les pochettes bouger, ou bouger la molette de votre souris.

Cliquer directement ici et afficher la source pour pouvoir apprendre à réaliser ce coverflow.
Ou alors télécharger les fichiers ici même.