Kune.fr » Wordpress http://kune.fr Bougeons le web Fri, 18 Sep 2009 17:11:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 WP Serie: Les meilleurs hacks wordpress #2 http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress/ http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress/#comments Tue, 11 Aug 2009 16:09:07 +0000 Mat_ http://kune.fr/?p=210 Suite de la série des meilleurs hacks WordPress. Au sommaire:

  1. Reconnaissance du navigateur de vos visiteurs,
  2. Proposer un flux RSS personnalisé
  3. Tester si l’article consulté contient au moins une image
  1. Reconnaitre le navigateur de vos visiteurs dans WordPress:

    Rendre son site compatible avec internet explorer tous les navigateurs est souvent un travail de longue haleine.
    Voilà une fonctions aux multiples usages qui vous permettra de savoir quel est le navigateur de vos visiteurs, afin de changer le style css de votre page.
    Pour ce faire, ouvrez (ou créez) votre fichier functions.php (situé dans le dossier de votre thème et collez-y:

    		<?php
			add_filter('body_class','browser_body_class');
			function browser_body_class($classes) {
				global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

				if($is_lynx) $classes[] = 'lynx';
				elseif($is_gecko) $classes[] = 'gecko';
				elseif($is_opera) $classes[] = 'opera';
				elseif($is_NS4) $classes[] = 'ns4';
				elseif($is_safari) $classes[] = 'safari';
				elseif($is_chrome) $classes[] = 'chrome';
				elseif($is_IE) $classes[] = 'ie';
				else $classes[] = 'unknown';

				if($is_iphone) $classes[] = 'iphone';
				return $classes;
			}
			?>

    Une fois l’opération terminée, votre balide devrait ressemble à ceci pour un visiteur utilisant safari:

    		<body class=&quot;home blog logged-in safari&quot;>

    Pratique non? Une fonction trouvée via http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/

  2. Proposer un flux RSS personnalisé:
    Si vous passer par Feed-Burner pour proposer votre flux RSS ou si vous souhaitez simplement fournir un lien vers un flux RSS perticulier et personnalisé (avec par exemple une catégorie en moins et comportant le tag « WordPress »), voilà une fonction simple est utile.
    Commencez par créer un template de page (que vous enregistrerez dans le dossier de votre thème), en la nommant par exemple custom-feed.php, et collez-y ceci:

    			<?php
/*
Template Name: Custom Feed
*/

$numposts = 5;

function yoast_rss_date( $timestamp = null ) {
  $timestamp = ($timestamp==null) ? time() : $timestamp;
  echo date(DATE_RSS, $timestamp);
}

function yoast_rss_text_limit($string, $length, $replacer = '...') {
  $string = strip_tags($string);
  if(strlen($string) > $length)
    return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
  return $string;
}

$posts = query_posts('showposts='.$numposts);

$lastpost = $numposts - 1;

header("Content-Type: application/rss+xml; charset=UTF-8");
echo '<?xml version="1.0"?>';
?><rss version="2.0">
<channel>
  <title>VotreSite E-mail Update</title>
  <link>http://votresite.com/</link>
  <description>Les articles personnalise de mon blog.</description>
  <language>en-us</language>
  <pubDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></pubDate>
  <lastBuildDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></lastBuildDate>
  <managingEditor>votre@email.com</managingEditor>
<?php foreach ($posts as $post) { ?>
  <item>
    <title><?php echo get_the_title($post->ID); ?></title>
    <link><?php echo get_permalink($post->ID); ?></link>
    <description><?php echo '<![CDATA['.yoast_rss_text_limit($post->post_content, 500).'<br/><br/>Keep on reading: <a href="'.get_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.']]>';  ?></description>
    <pubDate><?php yoast_rss_date( strtotime($post->post_date_gmt) ); ?></pubDate>
    <guid><?php echo get_permalink($post->ID); ?></guid>
  </item>
<?php } ?>
</channel>
</rss>

    Maintenant une modification s’impose. Repérez la ligne:

    			$posts = query_posts('showposts='.$numposts);

    Dans les parenthèses, mettez les conditions qui vous interressent. Si vous n’y connaissez rien, visitez cette page: Les requetes query_post() de wordpress
    Ensuite, allez créer une nouvelle page, que vous nommerez comm vous voulez. N’y mettez pas de texte à l’interieur et choisissez ‘Custom Feed’ comme modèle de page.

    Il ne vous reste plus qu’à cliquer sur le lien de la page est vous verrez votre flux RSS!

    Article original: http://www.wprecipes.com/creating-user-defined-rss-feeds-in-wordpress

  3. Tester si l’article consulté contient au moins une image:

    Si vous souhaitez savoir si un article possède au moins un image (pratique si on veut l’afficher par exemple!), collez ce morceau de code dans la boucle des articles (loop):

    			<?php
			$content = $post->post_content;
			$searchimages = '~<img [^>]* />~';

			preg_match_all( $searchimages, $content, $pics );

			// verifie que l'on ait au moins 1 image
			$iNumberOfPics = count($pics[0]);

			if ( $iNumberOfPics > 0 ) {
				 // afficher l'image, par exemple ...
			}

			?>

    Article original: http://www.wprecipes.com/wordpress-tip-detect-if-a-post-has-at-least-one-image

    Dans la même idée, on peut essayer d’afficher directement une image que l’on aurait uploadé lors de la création de l’article. Il suffit d’ajouter ce code à la place:

    			<?php echo wp_get_attachment_image($post->ID); ?>

C’est terminé pour aujourd’hui! Si vous avez des questions, n’hésitez pas à me laisser un commentaire! Si vous avez manqué l’article précédent, suivez le lien:

]]> http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress/feed/ 3 WP Serie: Les meilleurs hacks wordpress #1 http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress-1/ http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress-1/#comments Tue, 11 Aug 2009 16:00:46 +0000 Mat_ http://kune.fr/?p=188 Parce que tout le monde ne parle pas forcément anglais (difficile aujourd’hui dans le métier de développer), parce que souvent les meilleurs tutoriaux qui transforment wordpress sont souvent dans la langue de Shakespeare, je me suis dis que vous faire partager les hack que je préfère en francais.

Bien évidement, je citerai la source des sites où j’ai pu trouver les articles.

Et on va commencer aujourd’hui avec une série qui vous permettra de marier jQuery, la célèbre librairie javascript et wordpress. On commence:

  1. Afficher un article au hasard (avec rafraichissement AJAX)
    1. Préparer la zone de l’article à afficher (HTML)
      Prenons par exemple notre sidebar (sidebar.php), et ajoutons le code suivant:

      <h4>Article au hasard</h4>
<ul>
	<li id="randomPost">... loading ...</li>
</ul>
<a href="#" id="another">Je veux en voir un autre!</a>
    2. Créer un nouveau template de page:Le seul intérêt de cette page est de faire une requète sur un article et de l’afficher. C’est simple, créez une nouvelle page dans le dossier de votre thème et collez-y: 
      <?php
/*
Template Name: Random Post
*/
?>

<?php
	query_posts('showposts=1&orderby=rand');
	the_post();
?>

<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

      Publiez maintenant une page avec un contenu vide, et comme modèle de page ‘Random Post’. Notes bien l’adresse, plus particulièrement la fin qui est générée selon votre titre (pour nous ce sera /random/).

    3. La requète:
      Dans le dossier de votre thème, créez un fichier javascript et collez-y ce code:

      $("#randomPost").load("/random/");
$("#another").click(function(){
   $("#randomPost")
			.text("... loading ...")
			.load("/random/");
   return false;
});

      Si vous avez publiez votre page avec un autre nom, pensez à changer /random/ sur les 2 lignes.
      Enfin, il faut appeler votre script et jQuery. Pour ce faire, ajoutez ces lignes dans votre header:

      <?php wp_enqueue_script("jquery"); ?>
<script src="<?php bloginfo("template_url"); ?>/votreScript.js" type="text/javascript"></script>

      Pensez à modifier une fois encore, le nom du fichier javascript si vous ne l’avez pas appelé votreScript.js !

      Et voilà, nous avons terminé! Plutôt simple non?
      L’article original a été trouvé ici: Display a Random Post (with AJAX Refresh)

  2. Colorer les mots recherché avec jQuery:

    Un excellent moyen de d’améliorer votre page de recherche est de surligner les mots qui ont été recherché dans les résultats. Voici comment s’y prendre:

    1. Installation:
      Copiez collez le code suivant dans votre fichier functions.php (qui se trouve dans le dossier du thème que vous utilisez). Si il n’existe pas, créez le!

      function hls_set_query() {
  $query  = attribute_escape(get_search_query());

  if(strlen($query) > 0){
	echo '
	  <script type="text/javascript">
		var hls_query  = "'.$query.'";
	  </script>
	';
  }
}

function hls_init_jquery() {
  wp_enqueue_script('jquery');
}

add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

    2. Maintenant, copier ce code entre les balises de votre fichier header.php: 
      <br />
<style type="text/css" media="screen">
	.hls { background: #D3E18A; }
  </style>
  <script type="text/javascript">
  jQuery.fn.extend({
	highlight: function(search, insensitive, hls_class){
	  var regex = new RegExp("(<[^>]*>)|(\\b"+ search.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +")", insensitive ? "ig" : "g");
	  return this.html(this.html().replace(regex, function(a, b, c){
		return (a.charAt(0) == "<") ? a : "<strong class=\""+ hls_class +"\">" + c + "</strong>";
	  }));
	}
  });
  jQuery(document).ready(function($){
	if(typeof(hls_query) != 'undefined'){
	  $("#post-area").highlight(hls_query, 1, "hls");
	}
  });
  </script>

      (le code jQuery a été adapté de devthought’s JavaScript RegExp based highlighting.)

      ATTENTION: Il faut changer #post-area par l’id conteneur de vos résultats! Si par exemple ils se trouvent dans:

      <div id="search-result"> ..... </div>

      Vous devrez remplacer #post-area par #search-result

    3. Additionnellement, vous pouvez changer le css présent dans la deuxième étape afin de modifier l’affichage du surlignement.
      Source: http://weblogtoolscollection.com/archives/2009/04/10/how-to-highlight-search-terms-with-jquery/

J’espere que ces deux hacks vous seront utiles! Pensez à laisser un commentaire pour me dire ce que vous en pensez!

]]> http://kune.fr/blog/wordpress/wp-serie-les-meilleurs-hacks-wordpress-1/feed/ 2 Eshop Cart Widget (votre panier) http://kune.fr/blog/wordpress/eshop-cart-widget-votre-panier/ http://kune.fr/blog/wordpress/eshop-cart-widget-votre-panier/#comments Mon, 10 Aug 2009 07:35:37 +0000 Mat_ http://kune.fr/?p=185 Bonjour à tous ! Je reviens avec un plugin que j’ai fait et qui, il me semble, était plutôt demandé. Il va vous permettre d’afficher le panier de vos visiteur dans vos emplacements à widget, quand vous utilisez le plugin eShop.
Pour le moment il n’y a pas d’option disponible, simplement le titre. J’attend vos commentaires pour ajouter des fonctions à ce plugin!

Pour le télécharger:

Dès que WordPress m’aura ouvert le svn pour le plugin, je mettrai à jour ces liens.

]]> http://kune.fr/blog/wordpress/eshop-cart-widget-votre-panier/feed/ 0 Une galerie WordPress sans saut de ligne http://kune.fr/blog/wordpress/une-galerie-wordpress-sans-saut-de-ligne/ http://kune.fr/blog/wordpress/une-galerie-wordpress-sans-saut-de-ligne/#comments Fri, 19 Jun 2009 12:53:46 +0000 Mat_ http://kune.fr/?p=162 Je travaille en ce moment sur le site internet d’un Designer (j’ajouterais le site une fois terminé sur le site de ma société: http://www.kune-studio.com).

J’ai voulu utiliser la galerie que propose WordPress, pour créer un caroussel de photos. Le problème était simple, WP ajoute systématiquement unn saut de ligne entre les items de la galerie, et un dernier saut de ligne à la fin de la gallerie.

Voilà donc un moyen simple pour les supprimer. Ouvrez (ou créez) un fichier functions.php dans le dossier de votre thème et collez y ceci:

function my_gallery_shortcode($attr) {
	global $post;
 
	static $instance = 0;
	$instance++;
 
	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;
 
	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
 
	extract(shortcode_atts(array(
		'order'      =&gt; 'ASC',
		'orderby'    =&gt; 'menu_order ID',
		'id'         =&gt; $post-&gt;ID,
		'itemtag'    =&gt; 'div',
		'icontag'    =&gt; 'span',
		'captiontag' =&gt; 'p',
		'columns'    =&gt; 3,
		'size'       =&gt; 'full'
	), $attr));
 
	$id = intval($id);
	$attachments = get_children( array('post_parent' =&gt; $id, 'post_status' =&gt; 'inherit', 'post_type' =&gt; 'attachment', 'post_mime_type' =&gt; 'image', 'order' =&gt; $order, 'orderby' =&gt; $orderby) );
 
	if ( empty($attachments) )
		return '';
 
	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id =&gt; $attachment )
			$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
		return $output;
	}
 
	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$columns = intval($columns);
	$itemwidth = $columns &gt; 0 ? floor(100/$columns) : 100;
 
	$selector = "gallery-{$instance}";
 
	$output = apply_filters('gallery_style', "
 
			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: left;
				margin-top: 10px;
				text-align: center;
				width: {$itemwidth}%;			}
			#{$selector} img {
				border: 2px solid #cfcfcf;
			}
			#{$selector} .gallery-caption {
				margin-left: 0;
			}
 
		<!-- see gallery_shortcode() in wp-includes/media.php -->
		<div id="$selector" class="gallery galleryid-{$id}">");
 
	$i = 0;
	foreach ( $attachments as $id =&gt; $attachment ) {
		$link = isset($attr['link']) &amp;&amp; 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 
		$output .= "&lt;{$itemtag} class='gallery-item'&gt;";
		$output .= "
			&lt;{$icontag} class='gallery-icon'&gt;
				$link
			<!--{$icontag}-->";
		if ( $captiontag &amp;&amp; trim($attachment-&gt;post_excerpt) ) {
			$output .= "
				&lt;{$captiontag} class='gallery-caption'&gt;
				" . wptexturize($attachment-&gt;post_excerpt) . "
				<!--{$captiontag}-->";
		}
		$output .= "<!--{$itemtag}-->";
		if ( $columns &gt; 0 &amp;&amp; ++$i % $columns == 0 )
			$output .= '<br>';
	}
 
	$output .= "
 
		</div>\n";
 
	return $output;
}

Quelques explications pour rendre plus clair les opérations.Tout d’abord on supprime le shortcode qui affiche la galery. Ensuite j’ai recopié la fonction qui génère la galerie en y apportant de petites modifications (les icontag et itentag par défaut). Enfin, j’ai supprimé le dernier saut de ligne à la fin pour ne plus avoir a l’afficher.

Pour les sauts de ligne entre les éléments de la galerie, il vous suffit de donner 0 pour le nombre de colonne.

Et voilà, le tour est joué!

Reblog this post [with Zemanta]
]]> http://kune.fr/blog/wordpress/une-galerie-wordpress-sans-saut-de-ligne/feed/ 0 Traduction Eshop – Nouvelle version http://kune.fr/blog/wordpress/traduction-eshop-nouvelle-version/ http://kune.fr/blog/wordpress/traduction-eshop-nouvelle-version/#comments Thu, 11 Jun 2009 07:40:25 +0000 Mat_ http://kune.fr/?p=156 Voici la version corrigée de la traduction Eshop. Merci à tous vos commentaires, et désolé pour le retard dans la réponse.
Pensez à continuer à m’envoyer vos remarques, que je puisse les corriger (je ne mettrai pas aussi longtemps maintenant ;) ). Si on centralise tout ca, ca évitera d’avoir à chercher les différentes traductions à divers endroits!

eshop-fr_fr.mo

eshop-fr_fr.po

N’hésitez pas à laisser vos commentaires!

]]> http://kune.fr/blog/wordpress/traduction-eshop-nouvelle-version/feed/ 10 Index des auteurs – v1.1 http://kune.fr/blog/wordpress/index-des-auteurs-v11/ http://kune.fr/blog/wordpress/index-des-auteurs-v11/#comments Tue, 17 Mar 2009 12:45:18 +0000 Mat_ http://kune.fr/?p=134 Voici la nouvelle version du plugin index des auteurs. Je viens de rajouter un sympathique affichage des articles de l’auteur lors du survol des liens.
J’ai utilisé la librairie tooltip de jquery.

Voici un petit exemple:

auteurtooltip Encore et toujours, laissez vos commentaires !

]]> http://kune.fr/blog/wordpress/index-des-auteurs-v11/feed/ 1 Index Authors page – v1.0 http://kune.fr/blog/wordpress/index-authors-page-v10/ http://kune.fr/blog/wordpress/index-authors-page-v10/#comments Mon, 16 Mar 2009 15:48:48 +0000 Mat_ http://kune.fr/?p=125 Après le plugin qui vous permet de créer une page d’index des tags, voici celui qui part du même principe, mais avec les auteurs de votre blog.

Il se nomme Index Authors Page. L’utilisation est pratiquement la meme, avec un peu plus d’options. Vous pouvez le télécharger sur sa page officielle: http://wordpress.org/extend/plugins/authors-index-page/

Les options sont expliquées sur cette page, mais pour les non-anglophones, les voici:

  • ul => la classe de votre ul (default = iapAlpha)
  • li => la classe de votre li (default = iapAlpha)
  • letter => la classe de votre span (les lettres) (default = iapLetter)
  • hideempty => affiche les auteurs qui n’ont pas écrit d’article (default = false)
  • optioncount => affiche le nombre d’article de l’auteur (default = true)
  • showfullname => affiche le nom de l’auteur (default = false)
  • exclude_admin => exclue l’admin de l’index (default = false)
  • menu => affiche un menu alphabétique pour l’index (buddypress-like) (default = true)

Ca en fait beaucoup, mais à mon avis, les plus interressantes sont le menu qui est activé par défaut, et la possibilité de masquer ou pas les auteurs sans article.

La balise a insérer dans votre page est celle-ci: [ authorsindex], sans l’espace…

J’attend vos commentaires pour améliorer le plugin!

]]> http://kune.fr/blog/wordpress/index-authors-page-v10/feed/ 6 Index Tag PAge – v1.2 http://kune.fr/blog/wordpress/index-tag-page-v12/ http://kune.fr/blog/wordpress/index-tag-page-v12/#comments Fri, 13 Mar 2009 08:03:18 +0000 Mat_ http://kune.fr/?p=123 Encore une mise à jour légère, mais qui le fait!
Je viens de rajouter un menu (en option) pour ceux qui ont beaaaaaauuuuucoup de tags. L’option à rajouter est menu=1 ou =0. Le design de celui-ci provient de Buddypress. Comme à chaques fois, vous pouvez télécharger le plugin sur sa page sur WordPress.org et voir un exemple sur la page Index des tags (dans le menu ci dessus).

A venir très bientôt, la même chose mais avec les auteurs, dont vous pouvez voir un exemple sur la page Index des auteurs.

Dites moi ce que vous en pensez en commentaire!

]]> http://kune.fr/blog/wordpress/index-tag-page-v12/feed/ 4 Index Tag Page – v1.1 http://kune.fr/blog/wordpress/index-tag-page-v11/ http://kune.fr/blog/wordpress/index-tag-page-v11/#comments Tue, 10 Mar 2009 10:39:16 +0000 Mat_ http://kune.fr/?p=109 Une petite mise à jour de mon plugin Index-tag-page pour wordpress. Vous pouvez maintenant utiliser la balise:  [ indextag nb=XX ul=YY li=ZZ letter=LL], sans l’espace!

ZZ représente la classe que vous souhaitez donner à vos éléments de liste et LL la classe de vos lettres. Par défaut, YY vaut itpUl, ZZ vaut itpLi et letter itpLetter. A noter aussi que chaque lettre possede une classe unique itpA – itpZ (lorsque la lettre existe!).

Vous pouvez télécharger la dernière version sur la page index-tag-page de wordpress.org

Qu’attendre maintenant de ce plugin ? Eventuellement une liste alphabétique tout en haut de la page, qui conduirait aux sections grace à des ancres.

Et vous, vous aimeriez voir quoi dans les prochaines versions ?

]]> http://kune.fr/blog/wordpress/index-tag-page-v11/feed/ 3 Index tag page plugin for wordpress http://kune.fr/blog/wordpress/index-tag-page-plugin-for-wordpress/ http://kune.fr/blog/wordpress/index-tag-page-plugin-for-wordpress/#comments Thu, 05 Mar 2009 08:28:46 +0000 Mat_ http://kune.fr/?p=92 wplogo Hier, je vous ai montré comment l’on pouvait créer une page d’index comprenant les tags de son blog.

Cependant, je comprend que certains souhaitent une methode qui soit plus simple à utiliser, style glisser et déposer! Du coup j’ai eu envie de transformer ce code en plugin.

Le résultat est le plugin suivant: index-tag-page

Un nom pas très glamour mais qui, je l’espere, explique ce qu’il fera!

Vous pouvez télécharger la dernière version sur la page index-tag-page de wordpress.org

J’ai fait la demande pour qu’il soit enregistré sur la page des plugins de wordpress.org, j’attend la validation. Je changerai les liens une fois tout ça en place.  En attendant, n’hésitez pas encore une fois à poser vos question en commentaire pour des bugs, remarques, ou meme le café que vous avez bu pendant l’installation!

——

Yesterday, i wrote about how to create an index tag page with some php code and a template page.

I understand that some people would like to have a simple drag and drop solution to use with their favorite wordpress install.

So i decided to transform the code into a working wp plugin and this is the result: index-tag-page

If you want to download it, click on this link: index-tag-page for wordpress

I’ve ask wordpress.org to host my plugin, i’m just waiting for the approval. Once it’s ok, i will change the link and inform you about that. Again, feel free to post a comment, for a bug, a question or even the coffe you drink during the install of your future favorite wordpress plugin!

]]> http://kune.fr/blog/wordpress/index-tag-page-plugin-for-wordpress/feed/ 1