01
May

Refresh de printemps pour les Pépites de Noisette

Ce premier semestre 2014 a été bien remplie du côté des pépites de Noisette. Avec le nombre de visiteur qui a plus que doublé au cours de l’année 2013, puis en ce début d’année quelques passages à la TV de Noisette, nous avons pu recevoir nombre d’encouragements mais aussi de feedbacks des lecteurs. Construit en mode “Fast Prototyping” il y a près de 3 ans, certains aspects de l’expérience utilisateur étaient restés en suspend. Pour 2014, c’est donc plusieurs petites nouveautés qui arrivent sur le Blog : Newsletter, Barre de recherche, et remise en forme d’une partie du thème (CSS / Javascript) notamment au niveau des commentaires.

J’ai notamment pu me rendre compte à travers cet update, que les Custom Post Type introduits avec WordPress 3, ne sont pas encore complètement supportés par les plugins. La plupart les gèrent, mais on ne peut pas toujours faire ce qu’on veut. Du coup, il faut parfois explorer le code des plugins pour faire les petites adaptations nécessaires. Je partagerai ici quelques une des petites modifications que j’ai eues à effectuer qui peuvent certainement servir à d’autres bloggers.

Barre de recherche avec filtres Custom Post Types

2014_Noisette_1

 

Plusieurs plugins permettent d’ajouter une barre de recherche dans la sidebar tout en prenant en compte de sfiltres par catégorie, Custom Post Type, …..De mon côté, afin de paramétrer moi même la recherche et d’avoir un rendu visuel plus intégré, j’ai préféré faire cela manuellement. Cette intégration s’est faite en 3 parties.

1 Ajouter la search bar dans le thème du site

Dans searchform.php vous devez avoir quelque chose de ce genre

<form role="search" method="get" id="searchform" action="">
<div id="searchbarbox">
<input type="text" value="" name="s" id="s" /> <input type="image" src="http://www.lespepitesdenoisette.fr/wp-content/themes/PepitesDeNoisette/images/searchlogo.png" id="searchsubmit" alt="Search" />
</div>
</form>

et dans votre header.php un appel de ce type
<?php get_search_form(); ?>

2 Paramétrer les filtres par Custom Post Type :

Dans votre fichier function.php ajoutez quelque chose comme ceci :

function SearchFilter($query) {
if ($query->is_search or $query->is_feed) {
$query->set('showposts', 10);
// Recettes
if($_GET['post_type'] == "recettes") {
$query->set('post_type', array('recettes'));
}
// Paniers Gourmands
elseif($_GET['post_type'] == "paniers-gourmands") {
$query->set('post_type','paniers-gourmands');
}
// EVERYTHING!
elseif($_GET['post_type'] == "all") {
$query->set('post_type', array('recettes', 'paniers-gourmands', 'post'));
}
else{
$query->set('post_type', array('recettes', 'paniers-gourmands', 'post'));
}
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');

Ensuite dans votre page de résultats, vous pouvez ajouter le moteur de recherche comprenant les filtres de cette façon :

<form id="search" name="searchform" method="get" action="">
<div id="searchMain">
<input type="search" id="s" name="s" title="Search Blog" placeholder="Trouve ta pépite !" />
<button type="submit" value="search" id="searchsubmit">Rechercher
</section>
<section id="searchOptions" class="cufon">

Options de recherche :
<input type="radio" value="all" name="post_type" id="searchOptionsAll" checked /> <label for="searchOptionsAll">Toutes les pépites
<input type="radio" value="post" name="post_type" id="searchOptionsBlog" /> <label for="searchOptionsBlog">Pépites de Restaurants
<input type="radio" value="les-recettes" name="post_type" id="searchOptionsPortfolio" /> <label for="searchOptionsPortfolio">Pépites de recettes
<input type="radio" value="les-panier-gourmand" name="post_type" id="searchOptionsTutorials" /> <label for="searchOptionsTutorials">Pépites de Panier Gourmand
</div>
</form>

 

Newsletter Hebdomadaire avec MailPoet (Wysija)

2014_Noisette_2

MailPoet est vraiment un super plugin. En terme d’expérience utilisateur, je ne sais pas si on peut trouver plus simple avec autant de fonctionnalités. Tout est en mode Drag & Drop, le bonheur pour celui qui veut pouvoir gérer une newsletter pour ses lecteurs en toute simplicité. Si on peut faire quasiment tout ce qu’on veut, la version actuelle ne permet pas de faire ce dont j’ai besoin pour les pépites de Noisette.

Le Problème : Dans MailPoet on peut paramétrer automatiquement le contenu d’une newsletter avec les derniers articles. Cependant, si on possède plusieurs Post Types, chaque Post Type aura une section dédiée dans la newsletter. Cependant sur les Pépites de Noisette, nos Post Types sont (Standard, Recettes et Panier Gourmand). N’ayant pas chaque semaine de l’actualité sur chacun de ces post type, j’aimerais n’avoir qu’une seul section reprenant les derniers articles quel que soit leur type dans ma newsletter.

Solution : Il s’agit d’une solution en mode “Brute Force” pour le moment. Je n’ai pas eu beaucoup de temps pour faire quelque chose de plus propre, même si j’ai quelques idées en tête que j’ai déjà pu échanger avec les développeurs du plugin. Nous allons tout simplement modifier les fonctions qui gérent le chargement des articles au niveau de la vue et de la génération de la newsletter.

Modifier la vue
Pour cela rendez-vous dans : wp-content>plugins>wisija-newsletter>controllers>ajax>campaigns.php
Dans ce fichier, cherchez tous les endroits où figure la ligne get_posts($params); et ajoutez juste avant une ligne contenant cet appel avec vos propres Custom Post Types $params['post_type'] = array('post','paniers-gourmands','recettes') ;

Normalement vous avex du modifier le contenu de 3 fontions: get_articles(), insert_articles(), load_auto_post().

Modifier le générateur de newsletter
Pour cela rendez-vous dans : wp-content>plugins>wisija-newsletter>helpers>wj_engine.php
Dans ce fichier cherchez également la fonction get_posts() et préfixez la de
$params['post_type'] = array('post','paniers-gourmands','recettes') ;

Bonus: Personnaliser le lien “Read more” dans la newsletter générée
Pour faire cela allez dans le dossier helpers du plugins et dans le fichier articles.php.
Vous pouvez modifier ce qui se passe au niveau de la ligne 140 pour changer le Read More Link.

Petit MakeUp des commentaires

2014_Noisette_3

Finalement j’ai terminé ce petit refresh par un petit coup de jeune donné aux commentaires. Utilisant à l’origine la même police que le titre des articles, les commentaires étaient difficilement lisible une fois trop nombreux, j’avais un peu laissé les styles CSS de côté.

Pour ce refresh, une coloration et une indentation des commentaires (classes: .thread-odd, .thread-even) pour faciliter la lecture, identifier plus rapidement les réponses, et enfin mettre le tout aux couleurs du site.

2014_Noisette_4

Intégration des albums Facebook sur WordPress

Plusieurs internautes non membre ou utilisant peu facebook nous ont demandé d’offrir une vue des photos postées sur Facebook depuis le Blog. Après quelques recherches et plusieurs essais, je conseille vivement l’utilisation du plugin Facebook Page Photo Gallery qui propose le meilleur rendu, une ergonomie simple, pour une utilisation très simple dans WordPress à l’aide de shortcodes.

 

Ajout des posts relatifs

Les posts liés est une fonctionnalité aujourd’hui basique pour tout site web qui souhaite mettre en visibilité son contenu. Après quelques essais et recherches j’ai opté pour le plugin nRelate qui offre une bonne expérience. Un de ses avantages principaux, est qu’il ne se base pas sur les ressources locales du serveur pour parcourir le site.

Comments ( 0 )