Lipaonline

Menu

Catégorie : WordPress

WPTech = WPHumain, une belle première pour moi ! :)

Me voila de retour à la maison après mon grand périple (tout est relatif comparé aux aventures que je lis régulièrement sur certains blogs « voyages ») pour le WPTech 2015.

Si vous voulez savoir ce qu’il s’est passé lors de cet évènement, je vous conseille un très bon résumé réalisé par Alex de WPMarmite ou le site officiel WPtech.

Pour ma part, je voudrais surtout mettre l’accent sur l’aspect humain, car même si le WPtech est un évènement technique dédié à WordPress, les techos, derrière leurs corps de rêve et leurs cerveaux hookés, il y a des hommes et des femmes (encore peu nombreuses) ! 🙂

Même si vous connaissez pas grand chose en « technique » WordPress, ce genre d’évènement peut vous donner envie d’essayer, et surtout vous faire rencontrer « la communauté WordPress« , qui est le point fort de ce CMS.

Avec trampolinn.com, j’ai partagé la maison d’un très sympathique photographe (vous pouvez retrouver une partie de ses photos sur son site  photokarhu.fr ), avec 5 – non moins sympathiques (enfin sauf un ! 😉 – confrères dans la grande famille WordPress : Aude , Didier , Jérome, Fx , JB . Avant de descendre en covoiturage avec 2 de mes nouveaux amis vers Bordeaux pour retrouver mes associés.

Ce fut aussi pour moi, ma toute première conférence et qui plus est en tant qu’orateur ! Moyennement satisfait de ma prestation (qui a été filmé ! ), mais je n’ai reçu que de bons retours… alors, on va dire que pour une première, cela ne devait pas être si mal 🙂

Le support de ma conférence se trouve ici : https://bitbucket.org/lipaonline/wp-tech/overview , pour la vidéo et l’ITW…. ça arrive.. patience…

Je tiens à remercier:

Daniel, Willy pour l’organisation (et tous les bénévoles),

Déborah pour l’ITW,

Céline pour le before,

Amanda pour les encouragements,

sans oublier bien sur Isaure et Amaury ,mes ninjas préférés , pour un after fort agréable 🙂

Pour certains, j’aurai le plaisir de les revoir à Paris pour le WorldCamp , et j’espère à l’année prochaine pour le WPTech 2016 !

WP Tech et autres news…

Cela faisait un bon moment que je n’avais pas publié sur ce blog… le vieil adage du cordonnier vous connaissez ?

Quoi de neuf ?

Pleins de choses.. et d’autres qui vont arriver… je l’espère 🙂

Depuis maintenant 1 an, je travaille en étroite collaboration avec deux autres freelancers comme moi, Jean-Michel (Jmsil Communication) et Benjamin (Bewod). Avec mes 2 comparses, nous avons déjà réalisé quelques beaux projets… et je ne doute pas que d’autres arriveront très bientôt 🙂

WP Slovenija

J’ai donné ma première conférence à Ljubljana lors d’un meetup, j’essai de dynamiser la communauté WP en Slovénie (qui est en devenir..).

WP Tech

La « grosse actu » du moment, c’est ma prochaine conférence lors du WP tech à Nantes le 5 décembre !!

J’y parlerai Custom Post Field avec un framework que j’utilise CMB2.

A ce propos, j’ai réservé un appartement grace à mon partenaire (je suis ambassadeur) :  trampolinn.com .

Si vous cherchez un hébergement pour cette évènement, il y a de la place (et c’est gratuit ! ), la réservation est prise du jeudi 3 au dimanche 6.

Il y aura déjà Jean-Bernard Huet, que certains connaissent sur les groupes WP sur Facebook…

(EDIT)

2 nouveaux pensionnaires :

Didier : http://www.wptrads.com/

FX: https://fxbenard.com/

Et deuxième chose, je suis à la recherche d’une solution pour « descendre » sur Bordeaux après la conférence.. Si vous venez de cette région, un covoiturage serait idéal.

 

Attention aux plugins WordPress même désactivés !

Le weekend dernier, comme je suis dans l’admin de mon hébergement, j’en profite pour regarder l’espace disque que j’occupe, ça devait faire quelques mois que je n’avais pas regardé…

waouh 16Go… la dernière fois j’avais moins de 2Go !… Comme je prête un petit peu de place pour les podcasts d’un pote, je me dis qu’il abuse quand même ! Je regarde… 2Go de podcasts.. ce n’est donc de la que vient le problème ?

Je me connecte en ssh (l’avantage avec un MacOSX, c’est que c’est d’origine, sous Windows il faut utiliser telnet il me semble).

Muni de quelque commandes de base (mes cours Unix datent un peu..)

// pour lister les répertoires et fichiers

ls

// pour changer de répertoire

cd le_repertoire

// pour remonter au répertoire parent

cd ..

// pour connaitre la taille d'un répertoire

du -sh ./le_repertoire

// pour supprimer un répertoire et son contenu

rm -rf le_repertoire/*

Après quelques minutes de recherche, je m’apperçois que le répertoire fautif est « wp-minify« , un plugin de minification de WordPress.

Le plus étrange est que ce plugin, je l’ai désactivé il y a plusieurs mois lorsque j’ai installé WP Rocket, mais j’ai fait l’erreur de ne pas le supprimer carrément !

Voila, si ma petite mésaventure peut servir à d’autres…

Responsive design : Etes-vous vraiment "mobile friendly" ?

Il y a quelques années, les intégrateurs HTML devaient redoubler d’ingéniosité pour coder des pages créées par leurs (chers) collègues webdesigners. Entre les différents navigateurs, et les différentes résolutions d’écrans, c’était un vrai casse tête ! Avec la démocratisation d’Internet et l’ADSL, un certain standard c’est dégagé… et patatra, les mobiles et tablettes arrivent, remettant tout à plat, avec des systèmes différents, des tailles d’écrans réduites et aussi, on l’oublie trop souvent, un réseau très aléatoire, car avoir un site en « responsive design » ne suffit pas, il faut aussi penser à l’expérience utilisateur et sa connexion à Internet pas toujours optimum, je que j’appelle le Responsive Behaviour.

Heureusement, il existe de nombreuses solutions, plus ou moins compliquées et onéreuses, adaptées à tout site et budget.

Testez votre site responsive

Avant de mettre en ligne votre site, ou avant d’acheter un template déjà fait, la première chose à faire est de tester vous même le comportement de celui-ci dans différentes configurations. Vous pouvez très simplement redimensionner votre navigateur et voir ce que cela donne, tester sur chaque appareil, mais cela est fastidieux et onéreux, ou alors utiliser l’un des nombreux sites qui permettent de le faire en ligne, comme responsivetest.net ou Responsivator.

Attention aux sidebars !

De nombreux templates se contentent de déplacer (et redimensionner) le contenu de votre site, lorsque vous avez 2 ou 3 colonnes (avec 1 ou 2 sidebars), chaque colonnes s’affichera dans l’ordre l’une en dessous de l’autre, votre contenu sera alors placé après votre sidebar de gauche. La manière la plus simple de résoudre se problème est de n’utiliser uniquement des sidebars à droite. L’autre méthode est d’utiliser les medias queries.

Les medias queries

Les medias queries sont des spécifications technique de CSS3 qui permettent de définir précisément le comportement de votre site pour chaque résolution, et d’adapter le design en fonction du média utilisé (téléphone, tablette, TV …). C’est une technique un peu compliquée pour le profane, si vous voulez en savoir plus ( Les Media Queries CSS3 ), mais heureusement on est pas obligé de tout refaire à chaque fois.

Le cas twitter bootstrap

Pour simplifier la vie des webdesigners, de grandes entreprises ont créée des CSS prêtes à l’emploi, dont le fameux bootstrap de twitter utilisé sur beaucoup de sites. Vérifiez si votre template l’utilise aussi, dans ce cas, vous pourrez utiliser les classes prédéfinies comme .visible-phone ou .hidden-desktop, etc… la documentation est ici : Scaffolding · Bootstrap ( merci à +Raphael  pour ce tips 🙂

Utilisez des images adaptées

Redimensionner vos images au niveau de l’affichage c’est bien, mais si par exemple vous avez un slider avec de belles photos de grandes tailles sur votre Homepage, celle-ci peut facilement atteindre 15Mo de données, ce qui ne va pas être du goût de votre visiteur (en particulier si son forfait 3/4G lui facture les transfert de données !). Dans ce cas, il ne s’agit plus de simple notion de design, mais une programmation au niveau du serveur pour envoyer la bonne image adaptée à la configuration du visiteur. Pour cela on se sert de l’User Agent, qui est le « nom » de votre navigateur.

Cette technique n’est pas à la portée de tous, un service payant propose de tout gérer à votre place : Responsive.io , qui ajoute en plus l’utilisation d’un CDN, ce qui ne peut pas faire de mal à votre site 🙂

Lazy load et système cache

Toujours dans l’optique de réduire la quantité de données transférées de votre site, les systèmes de cache permettent de réduire significativement celle-ci.

Le lazy load permet quant à lui de charger uniquement les images réellement à afficher à l’écran, si votre site en comporte de nombreuses, c’est une solution à appliquer d’urgence !

Les plugins WordPress pour le responsive ?

Comme toujours, à chaque problème sous WordPress, son plugin… à utiliser avec modération ! 😉

Mobble

A la manière des medias queries en CSS, ce plugin ajoute des directives comme  is_iphone() ou is_ios() à WordPress, pour adapter votre site.

Hammy

Lui se concentre sur les images et fourni la version adaptée, c’est en fait la même chose que Responsive.io, gratuit et en interne mais sans CDN.

Lazy Load

Vous trouverez de nombreux plugins WordPress pour faire du lazy load : WordPress Lazy Load , je ne saurai trop lequel vous conseiller, car j’utilise désormais un plugin de cache qui a déjà cette fonctionnalité en interne.

WP Rocket

Le couteau Suisse de l’optimisation de site sous WordPress, WP Rocket est un plugin presque indispensable.

Comment bien organiser son blog avec WordPress ?

… avec les catégories, tags, champs personnalisés, contenus personnalisés, taxonomies personnalisées…

Cet article complète celui-ci (que je vous invite à lire pour éviter de me répéter) qui lui était en complément de celui sur Travelplugin.

WordPress propose de nombreux outils pour vous aider dans la gestion de votre blog, encore faut-il les connaitre et surtout bien les utiliser.

Lorsqu’on démarre un blog, on ne sait que rarement ce qu’il va devenir plusieurs années après, il évolue, un peu comme dans la vie, pour reprendre l’analogie des tiroirs de l’article précédent, vous démarrer dans une collocation d’étudiant où vous devez partager quelques tiroirs, pour arriver 30ans plus tard, avec un pavillon, une femme, 3 enfants, 1 chien.. A votre avis, vous aurez une énorme commode pour ranger vos habits, ceux de votre femme, les jouets des enfants, vos outils de jardinage, les affaires de ski… ou alors plusieurs armoires, des commodes, une cabane de jardin etc… ?

N’utilisez QUE les tags/catégories de WordPress, cela revient à n’avoir QUE 2 commodes avec pleins de tiroirs ! Cela peut suffire sur certains blogs, mais avouez que c’est un peu limité non ? Et en plus votre blog étant virtuel, vous pouvez avoir autant d’armoires que vous voulez, même dans vos 20m2 !! 🙂

Voyons ce que propose WordPress.

Catégories,tags et taxonomies

C’est certainement la fonctionnalité la plus utilisée des webmasters, et la plus mal, j’explique pourquoi ici.

Au départ d’un blog, il est difficile de savoir à long terme le nombre de taxonomies qu’il sera nécessaire, essayez quand même d’avoir une vue à moyen terme et de dégager quelques tendances de ce que vous allez écrire. Une idée de classement est indiquée sur Travelplugin, mais il y en a beaucoup d’autres, surtout que beaucoup de thèmes proposent des formats d’articles (vidéo,galerie,image..) , vous pouvez trier par pays, créer 2 taxonomies « vie d’expat » et « tourisme »…Vous êtes le mieux placé pour savoir ce que vous voulez écrire et donc organiser !

Hiérarchique ou pas ?

Pour reprendre l’exemple des pays, si vous voulez séparer ces pays en continents ( Europe/France, Asie/Vietnam), vous serez obligé d’utiliser des taxonomies hiérarchique (comme les catégories de WordPress), dans le cas contraire vous avez le choix, mais je conseillerai plutôt hiérarchique, voici les raisons:

  • Vous pouvez avoir besoin plus tard de séparer les régions d’un même pays.
  • Comme vous l’aurez certainement remarqué, les catégories sont affichés dans l’interface de WordPress lorsque vous écrivez un article, c’est plus pratique de cocher un catégorie que d’écrire un tags, sans compter les erreurs de frappes possible avec un tag.

Doit-on utiliser des taxonomies personnalisées ? (Custom Taxonomy)

Pour un blog qui démarre, cela n’est pas vraiment nécessaire, 2 taxonomies sont suffisantes, par la suite on pourra les ajouter progressivement. Mais avec 300 articles, il est fastidieux (c’est pour cela que peu le font) de reprendre tous ses articles pour y ajouter des taxonomies, c’est la qu’intervient des champs personnalisés, pour éviter ce travail 🙂

Champs personnalisés (Custom Field)

Contrairement aux taxonomies, cette fonctionnalité est peu exploitée, et pourtant bien utile ! Si on réfléchi, un mot clé est un mot qui décrit un texte, rien ne dit qu’il apparaitra dans un autre article… sa place est donc toute trouvée dans les champs personnalisés de l’article !

Par exemple: Vivant en Slovénie, la plupart de mes articles parlent de Slovénie, un jour je vais en Croatie, j’en fais un article, puis un 2e, j’y retourne, me voila avec 3 articles puis 4 …. au bout d’un moment mon blog contient 15 articles sur la Croatie, ça sera intéressant de pouvoir les trier non ?

Solution : Sur chaque article, j’ai créé un champ personnalisé « pays« , où j’ai indiqué Croatie. Arrivé à un nombre d’articles intéressants, je transforme ce champ personnalisé en taxonomie avec le plugin : Custom Field Taxonomies , et le tour est joué ! 🙂

Contenus personnalisés (Custom Post Type)

Je ne vais pas trop développer cette partie car il faut plusieurs articles pour faire le tour de la question (que je ferai plus tard), pour faire simple, cela va vous permettre de créer autre chose que de simple article, des tests produits (avec des notes, carte), des fiches pays, des recettes de cuisines etc… la seule limite devient votre imagination !

Pour cette partie, et les autres, je vous invite à lire mes articles à propos de Pods, un plugin vraiment des plus utiles si vous voulez vraiment avoir un blog au petits oignons 🙂

Hook WordPress: Read more personnalisé avec excerpt

Sur la plupart des blogs, pour présenter les derniers articles, on utilise une image (visuellement plus attrayant ) et un extrait de l’article.

Pour faire cela votre thème utilise une fonction de WordPressthe excerpt , ce qui créé 2 soucis majeurs : un « Read More » en anglais, car la plupart des thèmes ne sont pas traduit, et la répétition de ces mots brouille la perception de votre site par les moteurs de recherche (enfin les… Google en fait 😉

Il y a 3 solutions pour y remédier :

– le supprimer :

function new_excerpt_more($more)
{
    return '';
}

add_filter( 'excerpt_more', 'new_excerpt_more' );

 – mettre un autre message :

function new_excerpt_more($more)
{

return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">Continuer la lecture</a>';
}

add_filter( 'excerpt_more', 'new_excerpt_more' );

 – créer un message personnalisé pour chaque article

function new_excerpt_more($more)
{

$key_1_value = get_post_meta( get_the_ID(), 'readmore', true );
// check if the custom field has a value
if( ! empty( $key_1_value ) ) {
  return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">'. $key_1_value .'</a>';
} else {
  return ' <a class="read-more" href="'. get_permalink( get_the_ID() ) . '">Continuer la lecture...</a>';
} 

}

add_filter( 'excerpt_more', 'new_excerpt_more' );

Il suffit alors, sur chaque article où vous voulez changer le message, de créer un champ personnalisé s’appelant « readmore ».

Ces codes sont à ajouter dans le fichier « functions.php » de votre thème.

 

 

WordPress permaliens et RESTful API ?

Une petite réflexion du matin, suite à la discussion avec +Anne Catherine à propos de son problème de « stop word » sur le plugin SEO by YOAST, le célèbre plugin pour vous aider (ou pas 😉 à faire du SEO sur votre blog.

Cette fonctionnalité du plugin permet d’éliminer les mots « inutiles » dans l’adresse de votre article, mais si on en croit la théorie de +Laurent Bourrelly aucun mot n’est vraiment utile ! Au mieux ça n’apporte pas grand chose, au pire c’est néfaste pour votre SEO !

Travaillant sur des projets qui utile des API RESTful, du JSON etc… c’est surement du chinois pour beaucoup, mais pour moi cela veut dire beaucoup 😉 …

Je me suis dit, pourquoi mon blog ne pourrait-il pas utiliser la même norme d’URL, après tout un blog c’est une application web qui peut avoir vocation à communiquer avec d’autre non ?

Voila ce que pourrai donner les permaliens à la sauce RESTful :

  • /post/135 : post de l’ID 135
  • /post/ : list des posts du blog
  • /post/wordpress/ list des posts de la catégorie « wordpress »
  • /review/ : liste des post de type review
  • /tag/ : liste des tags
  • /wordpress/ : liste des éléments (post ou autres custom post type) de la catégorie « wordpress »

etc…

Ensuite, il me suffit de tester l’entête HTTP pour savoir si je dois renvoyer de l’HTML du JSON, XML etc…

Et mon blog devient une vraie application web, prêt pour le web 3.0  🙂

Qu’en pensez-vous ?