Jean-Marc Amiaud

Tag: Wordpress

Faire des templates de theme wordpress avec un style css qui s’adapte à la catégorie

by le 10 Nov 2011, catégorie WordPress

WordPress est initialement prévu pour faire tourner un theme selon un unique style défini par ce dernier.
Je vous propose ici une façon d’améliorer l’esthétique globale de votre blog en s’appuyant sur les catégories de WordPress pour définir des styles particuliers aux différentes sections de votre blog.

1 – L’approche

Il existe deux fonctions de l’API WordPress, body_class et post_class qui écrivent un attribut de balise class, listant des styles relatifs au contexte de la page demandée.

Pour plus de renseignement sur la fonction body_class : http://codex.wordpress.org/Function_Reference/body_class
Pour plus de renseignement sur le fonction post_class : http://codex.wordpress.org/Function_Reference/post_class

L’idée est d’ajouter à cette liste de classes css, les classes des catégories associées au contexte de la requête ainsi que celles de leurs parents en utilisant tout simplement le nom de la categorie.
Ainsi, si une catégorie n’a pas été spécialement designée dans le fichier de style, il héritera le style de la catégorie parente et ainsi de suite, jusqu’au style par défaut…
Par exemple, ma page de catégorie WordPress, ainsi que tous les articles de la catégorie héritent du style de la catégorie mère, la catégorie Programmation, qui elle même hérite du style de la catégorie Informatique.

2 – Code

function category_id_class($myClasses) {

  if(is_single())
  {
    global $post;

    foreach((get_the_category($post->ID)) as $myCategory)
    {
      // On récupère toutes les catégories de l'article
      $myCategories = array_filter(explode(' ',get_category_parents($myCategory->cat_ID, FALSE, ' ', TRUE)));
      // On récupère les doublons à supprimer par rapport à l'existant pour deux raisons :
      // 1 - Par ce que ça fait un code html plus propre en supprimant les doublons inutiles
      // 2 - Pour assurer la cohérence hiérarchique si la suppression des doublons se fait sur le tableau existant.
      //     En effet, wordpress ajoute déjà une classe au nom de la catégorie de l'article, or il faut que le style de la catégorie s'applique après le style d'une de ses catégories parentes.
      $myCatToRemove = array_intersect($myClasses, $myCategories);
      // On effectue donc bien la suppression des doublons sur le tableau existant
      $myClasses = array_diff($myClasses, $myCatToRemove);
      // On retourne les tableaux associés, les nouvelles classes définies à la suite des existantes définies par wordpress.
      // Attention, j'insiste sur l'ordre !
      $myClasses = array_merge($myClasses, $myCategories);
    }
  }
  else if(is_category())
  {
    // De même si c'est une page de catégorie
    // Seule la récupération de l'ID de la catégorie de départ est différente.
    global $wp_query;
    $myCategoryID = get_query_var('cat');

    // On rajoute le prefix 'category-' aux classes de categorie, pour indiquer qu'on se trouve dans un contexte de page de categorie.
    $myCategories = array_prefix_values('category-', array_filter(explode(' ',get_category_parents($myCategoryID, FALSE, ' ', TRUE))));
    $myCatToRemove = array_intersect($myClasses, $myCategories);
    $myClasses = array_diff($myClasses, $myCatToRemove);
    $myClasses = array_merge($myClasses, $myCategories);
  }
  return $myClasses;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

function array_prefix_values($prefix, $array)
{
  $callback = create_function('$str','return "'.$prefix.'".$str;');
  return array_map($callback,$array);
}

3 – Usage

Il suffit de faire votre appel dans votre template à la balise body de la manière suivante :

<body <?php body_class(); ?>>

</body>

Le code généré sera alors de la forme :

<body class= »single single-post postid-367 single-format-standard logged-in informatique programmation wordpress »>

</body>

Il ne reste plus qu’a définir les styles css correspondants dans votre feuille de style (style.css)

Leave a Comment :, , Lire la suite...

Replace WordPress default media icon with preview image

by le 05 Mar 2011, catégorie Programmation, WordPress

Media library in WordPress display thumbnail of the pictures but only generic icon for all other type.
It’s possible to change generics icons (eg. by video preview image) with pair of filter :

[code lang= »csharp »]

add_filter(‘wp_mime_type_icon’, ‘my_plugin_video_icon’, 10, 3);
add_filter(‘icon_dir’, ‘wp_plugin_video_icon_dir’);

function my_plugin_video_icon($icon, $mime, $post_id)
{
        if(preg_match(&quot;/^video/&quot;,$mime))
        {
                 // – Find your icon for the specified post
               
                 // – Save the repository of your icon as global
                global $_current_video_icon_dir;
                $_current_video_icon_dir =  dirname(ABSPATH . substr($new_icon, strpos($new_icon, &quot;wp-content&quot;)));

                // – Return your icon path
                return $new_icon;
        }
}

function my_plugin_video_icon_dir($dir)
{
        global $_current_video_icon_dir;

        if(!empty($_current_video_icon_dir))
        {
                $var = $_current_video_icon_dir;
                $_current_video_icon_dir = null;
                return $var;
        }
        return $dir;
}

[/code]

Leave a Comment :, , , , Lire la suite...

Filter wordpress content to replace link by your player code

by le 30 Nov 2010, catégorie WordPress

When you insert a media into a wordpress article, the media library insert just a simple link into your content.
It’s possible to replace this link by your player, for exemple, using the_content wordpress filter function.

  1. First step, add your filter function :add_filter('the_content', myFilterFunction);
  2. Second step, write your filter function to parse your required link type (.mp3, .flv, …) to replace :
    function myFilterFunction($content) {
    $content = preg_replace_callback('#^(<p>)?<a.*href=[\'"](http://.*/.*\.mp3)[\'"].*>.*</a>(</p>|<br />)?#im', myPlayerWriterCallBack, $content);
    }
    function myPlayerWriterCallBack($match) {
    // Use $match[2] to get original link url
    }

Example with my little flash audio player.

Foo Fighters – All my life

Leave a Comment : Lire la suite...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!