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&amp;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!