Lipaonline

Menu

Catégorie : Créer un blog

Blog & SEO : Anatomie d'une Homepage parfaite

Dans une vie antérieure pas si lointaine, où je réalisais essentiellement des sites vitrines, une grande partie de mon attention se focalisait sur la Homepage du site. Google n’était pas encore ce qu’il est aujourd’hui, la plupart de mes clients souhaitaient une « présence » sur Internet. Il n’y avait pas encore les réseaux sociaux. Le « web » n’était pas encore (à mon grand regret) intégré dans une stratégie Marketing/Commerciale globale.

Aujourd’hui, avoir un blog est devenu « à la mode » dans la stratégie marketing, vous trouverez souvent des termes comme « Content Marketing » ou « Inbound Marketing« . Derrière ces noms « pompeux », se cache un principe assez simple. Avant lorsqu’on se posait une question, on allait voir sa grand mère, le Larousse, ou pour les plus riches, l’Universalis… maintenant on va voir Google !

Ex: « Comment bien se brosser les dents ? » ou « Comment avoir une grosse *** ? « . Si vous vendez des brosses à dents ou du dentifrice, un visiteur qui se pose la première question, sera plus facilement un client potentiel pour vos produits. Vous feriez certainement plus de trafic en répondant à la deuxième, mais vous n’auriez pas ce qu’on appelle du trafic ciblé, le seul qui est « utile », car le seul qui peut vous rapporter de l’argent, que se soit avec vos produits, ou ceux de vos annonceurs si vous ne vendez rien directement, avec des affiliations ou des publicités…

Un article parfait

Il y a moult sites qui vont vous expliquer comment bien écrire vos articles, pour qu’ils plaisent à vos lecteurs mais aussi aux moteurs de recherche. Pour n’en citer que quelques uns, qui me viennent à l’esprit sans réfléchir (si vous avez d’autres suggestions, je le ajouterai):

Pourquoi optimiser la Homepage d’un blog ?

C’est vrai que la plupart des blogueurs partages leurs articles sur les réseaux sociaux, et font des liens avec d’autres articles (ou des plugins comme CommentLuv permettent de lier votre dernier article dans un commentaire), si bien qu’une grande majorité de vos visiteurs viendront directement sur un article de votre blog.  Mais, par rapport à mon expérience sur différent sites de type « pur blog » ( cad. pas un site vitrine avec un blog en complément), entre 10-20% du trafic entrant arrive sur la Homepage, et si on regarde uniquement le trafic provenant des moteurs de recherches, cela monte à 30% voir même 60% ! Et tout ceci sans aucune optimisation !

Il serait dommage de ne pas choyer ce trafic gratuit, et pourquoi pas l’augmenter par la même occasion non ? De plus, sur le long terme, cette page sera la plus visitée de votre site !

Pour vos visiteurs

Comme disait un grand philosophe « On n’a pas deux fois l’occasion de faire une bonne première impression » 😉 , il faut donner envie à votre visiteur de naviguer sur votre site, avec une ergonomie claire (menu, widget, sidebar, header…) et un contenu de qualité. Vos derniers articles ne sont pas forcément les meilleurs. Il serait intéressant de mettre en avant les articles à succès, ou au contraire ceux qui n’ont pas eu l’effet escompté sur vos visiteurs…

Pour les moteurs

Faites le test avec http://alyze.info/ , vous verrez à quoi « ressemble » votre homepage pour les moteurs… et attendez-vous à être surpris ! Ce site fonctionne aussi très bien pour vérifier la qualité au niveau du référencement de vos articles, mais en général, si vous avez bien suivi les recommandations des sites cités plus haut, il ne devrait pas y avoir trop de surprise…

Comment optimiser la Homepage d’un blog ?

La plupart des blogs proposent en page d’accueil, les derniers articles avec un extrait, et une sidebar, qui reprend ces mêmes articles, plus des commentaires.. tout un tas de choses qui peuvent brouiller la compréhension du contenu réel de votre blog.

Heureusement, sous WordPress, vous avez la possibilité de définir votre page d’accueil. Il suffit de créer une page « Home » et ensuite d’aller dans réglages/lecture :

wp-reglage-homepage

Selon le thème que vous avez choisi, le résultat ne sera pas toujours à la hauteur, l’objet du prochain article, sera justement les différentes astuces pour réaliser facilement une Homepage parfaite avec WordPress 🙂

Note: La Homepage de ce site est en cours rafraîchissement 🙂

 

 

VotreVPN : Bloguez et voyagez en toute sécurité

Un VPN, « Virtual Private Network » ou réseau privé virtuel en français, est un système qui vous permet de protéger l’échange de données entre votre ordinateur et un serveur, en utilisant la cryptographie, un peu comme lorsque vous êtes sur un site de ecommerce pour protéger vos coordonnées bancaires.

C’est une technique très utilisée par les entreprises lorsqu’elles veulent protéger l’échange de fichiers entre leurs employés sur plusieurs sites distants (une extension très la mode de ce système s’appelle le « cloud »), ou par des journalistes en particulier dans des pays pas très regardant sur la liberté de la presse, mais aussi, il est vrai, pour des activités illégales… mais le VPN est totalement légal en France ! (c’est ce que vous en faite qui peut ne pas l’être…)

Mais à quoi cette technique peut-elle bien me servir à moi « simple » blogueur ?

Sécuriser mon blog

Faites-en l’expérience, allez voir les statistiques de votre blog, directement de votre serveur (la plupart de hébergeur propose ce genre de service gratuitement), sans passer par un script genre Google Analytics, vous aurez certainement une sacrée surprise !

Sur mon blog, la page la plus visitée (et de très loin !) est la page de connexion à l’administration (wp-login.php), et comme il n’y a pas le code Google Analytics sur cette page, cela passe complètement inaperçu pour la plupart des blogueurs (en même temps, ce ne sont pas de réels visiteurs du blog, mais des robots qui essaient de trouver une faille dans mon mot de passe).

Il existe tout un tas de technique pour protéger son blog, dont une solution radicale : bloquer l’accès à une adresse IP spécifique, la vôtre ! (voir lashon.fr).

Malheureusement, que vous soyez chez vous ou sur un accès wifi public, votre IP change « plus ou moins régulièrement ». C’est justement là qu’intervient VotreVPN, il va vous fournir une adresse IP fixe pour vous connecter à Internet 🙂

En réalité, votre IP sera celle d’un de leurs serveurs, à l’époque où j’ai testé leur système, ils en avaient 4, il suffit de paramétrer ces 4 IPs, et le tour est joué 🙂

Et pour le blogueur voyageur ?

En plus de protéger votre blog, VotreVPN vous offre quelques services qui pourront vous être très utiles si vous être un grand voyageur !

Accéder à votre compte bancaire

Certaines banques, pour des raisons évidentes de sécurité, bloque l’acces à votre compte si vous vous connectez hors de France, avec VotreVPN plus de soucis.

Cela peut arriver aussi sur les sites de e-commerce, lorsque votre adresse IP ne correspond pas avec votre adresse de livraison.

Accédez aux sites de vidéos/musiques

Pour des raisons de droits d’auteurs, beaucoup de sites de vidéos (comme les « replay » des chaines françaises) bloquent l’accès hors de France.

Essai gratuit pour 48H

Pour tester le logiciel, ou pour un weekend en Slovénie, VotreVPN propose un compte gratuit sans engagement.

Il existe 4 durées d’abonnement: de 1mois à 3.95€ à 1 an à 29.95€ (soit 2.5€/mois)

slovenie-votrevpn

 

 

Custom Post Type “Offre Spéciale” Avec Pods (4/*)

Nous avons vu dans le 1er article comment Pods peut répondre à notre besoin.

Dans le 2e, nous avons créé nos Pods et contenus.

Dans le 3e, nous avons affiché nos Pods, et vu comment modifier un template WordPress  pour qu’il puisse afficher un widget Pods (quand cela n’est pas possible dès le départ).

dans ce 4e et dernier article, nous allons mettre en forme nos Pods avec des templates. Cela nécessite quelques notions d’HTML/CSS, et un peu de copier/coller.

Création d’un template Pods

Commençons par le plus compliqué, la colonne du milieu, nous avions un code PHP WordPress, que l’on va transformer en template Pods.

<?php $posts = get_posts('orderby=rand&numberposts=10'); foreach($posts as $post) { ?>
						<div class="post addon-post">
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail">
								<?php if ( has_post_thumbnail() ) { ?> 
									<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => '')); echo '</div>'; ?>
								<?php } ?>
							</a>
							<div class="addon-post-content">	
								<h2 class="title addon-title">
									<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
								</h2>
								<div class="addon-post-info"><span class="theauthor"><span class="icon-user"></span><?php global $post; $author_id=$post->post_author; ?><a href="<?php echo get_author_posts_url($author_id); ?>"><?php the_author_meta( 'nickname', $author_id ); ?></a></span></div>
							</div>
						</div>
					<?php } ?>

Avec un peu d’habitude, cela n’est pas très compliqué, mais pour un débutant… ce qu’il faut, c’est repérer les functions de WordPress, ce sont pratiquement toujours les mêmes : get_posts , the_permalink() …

En clair : affiche moi 10 posts (numberposts=10) alétoirement (orderby=rand) …

Pour nous faciliter la vie, Pods propose encore une autre fonctionnalité très pratique, les magic tags , ainsi pour afficher un champs de notre Pods, il suffit de mettre {@nom_du_champs}. 🙂

On obtient ce template

slovenie-pods-template2

 

 

Qu’il suffit alors de sélectionner dans notre widget :

slovenie-template-widgetet voila le résultat :

slovenie-pods-finalJe peux aussi utiliser ce template dans une page « destinations » avec un shortcode :

slovenie-page-destinations Le résultat n’est pas très heureux, mais il me suffit de créer un autre template pour cette page. Vous pouvez créer autant de template que vous voulez, et les utiliser sur autant de pages que vous le jugerez nécessaire.

Voila qui clos cette série de tutoriels, une fois mes templates finis, je vous proposerai ici de télécharger l’ensemble…

 

Custom Post Type “Offre Spéciale” Avec Pods (3/*)

Voila, j’ai créé un contenu de base pour mon site slovenie-tourisme.com

Voici des copies d’écran (car il va beaucoup évolué..):

Homepage

slovenie-tourisme-homepageL’article ce trouve à gauche, au milieu je voudrais mettre les destinations (pas possible avec ce template, il faudra modifier cela). On remarque la page « offres spéciales » dans le menu en haut.[clear]

Page « offres spéciales »

slovenie-tourisme-offresJ’ai simplement créé une page avec un shortcode. Pour ajouter un shortcode a votre page, il suffit de cliquer sur le petit icone à cote de « Ajouter un média », une popup apparait avec un formulaire comme ici .[clear]

Page « Ljubljana »

slovenie-tourisme-ljubljanaJ’ai ajouté un shortcode, mais cette fois j’ai indiqué la destination « Ljubljana » , ici.
[clear]

Article « Visitez Ljubljana »

slovenie-tourisme-visite-ljuJ’ai exactement la même chose que pour la page.[clear]

 

 

 

Pour le deuxième colonne, je voudrais lister mes destinations, malheureusement, après investigation dans le code du template, il ne s’agit pas d’un widget (pourtant ça y ressemble), mais simplement une liste aléatoire de 10 articles (je n’en comprend pas vraiment l’utilité ??). Je vais devoir changer cela.

Widgetiser un template WordPress

Le plus simple est (sur Chrome) de pointer cette colonne, et faire « Procéder à l’inspection de l’élément« , on repère le code de ce morceau, et après on le recherche dans le code du template.

slovenie-screen-colonne

 

On trouve le code de cette colonne, que l’on va modifier en widget. Cela signifie que l’on va modifier notre thème (Je vous conseille d’utiliser un thème enfant … même si je ne vais pas le faire ici 😉

le code qui gère cette colonne est :

<?php $posts = get_posts('orderby=rand&numberposts=10'); foreach($posts as $post) { ?>
						<div class="post addon-post">
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="nofollow" id="featured-thumbnail">
								<?php if ( has_post_thumbnail() ) { ?> 
									<?php echo '<div class="featured-thumbnail">'; the_post_thumbnail('featured',array('title' => '')); echo '</div>'; ?>
								<?php } ?>
							</a>
							<div class="addon-post-content">	
								<h2 class="title addon-title">
									<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a>
								</h2>
								<div class="addon-post-info"><span class="theauthor"><span class="icon-user"></span><?php global $post; $author_id=$post->post_author; ?><a href="<?php echo get_author_posts_url($author_id); ?>"><?php the_author_meta( 'nickname', $author_id ); ?></a></span></div>
							</div>
						</div>
					<?php } ?>

on va le mettre de coté (il nous servira pour notre template Pods), et le remplacer par une widget.

<?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('colonne') ) ?>

Il faut bien sur déclarer cette widget dans notre fichier functions.php .Le mieux est de rechercher la fonction register_sidebar et placer notre code au même endroit.

on obtient le code

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
        'name' => 'Sidebar',
	'before_widget' => '<div class="widget_sidebar">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
      ));
register_sidebar(array(
        'name' => 'colonne',
	'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
      ));	  
	}

J’ai supprimé tous les paramètres de base d’une widget, car ils sont inutiles.

On vérifie que tout est ok:

slovenie-colonne-ok

 

Maintenant, on va pouvoir afficher nos Pods destination, et c’est la qu’intervient la puissance de Pods, cela se fait très simplement, aussi facilement qu’un shortcode dans une page/article !

Pods dispose de ses propres widgets, il suffit de choisir : Pods – List items

slovenie-pods-list-items2

 

On obtient ceci :

slovenie-colonne-sans-template

 

Voila, nous avons fini, il reste à mettre en forme, car pour l’instant ce n’est pas très joli… Ce sera l’objet du prochain tutoriel…

 

Custom Post Type “Offre Spéciale” Avec Pods (2/*)

Activation des composants de Pods

Avant de démarrer la création d’éléments de Pods, il va falloir activer quelques composants.

Advanced Content Types / Table Storage

Ce sont pour moi, 2 composants essentiels dés que l’on sort de l’utilisation standard de WordPress, pour le transformer en « vrai CMS ».

Pods permet de séparer la partie « blog » (post,page,taxonomies), du reste de vos contenus (offres, destinations), pourquoi faire cela ?:

  • Pour les performances, cela limite la taille votre base données ( cf. Compare Storage Types ).
  • On cas de problème, il suffit de supprimer la table où sont enregistré vos contenus.
  • Pour le partage : il est plus facile de relier votre système à un autre (pour proposer vos contenus à un autre site, ou pour intégrer le contenu d’un partenaire par exemple).

Migrate: Packages

Pas toujours utile, mais il va me permettre de vous proposer en téléchargement le résultat de ce tuto (pour les feignants 😉 , et permet de faire des tests en local, puis exporter/importer facilement vers votre installation distante (sans devoir tout recommencer ou importer la base dans son ensemble).

Templates

Va permettre de créer des templates pour vos Pods.

Création des Custom Post Types

Si ce n’est pas déjà fait, je vous invite à lire mes tutos précédents qui expliquent comment créer un Pods, les shortcodes etc…

Voila mes Pods:

Ou si vous préférez directement les télécharger : Pods

Quelques explications

Pods destination : rien de particulier, il n’y a pas de description, car le contenu sera dans une page « standard » de WordPress. Le champs « ordre » va me permettre de choisir l’ordre d’affichage (pas seulement alphabétique).

Pods offre : Les champs « début » et « fin », va me permettre de trier les offres en cours de celles passées ou futures (et aussi de facilement les supprimer si cela est nécessaire). Un champs « destination » qui va relier cette offre à une destination.

Pour un autre type de contenu, il suffit de changer « destination » et d’ajouter les champs qu’ils vous semble pertinent…

Création du contenu

On va créer un page « offre », une page par destination, puis les Custom Post Types « destination » qui vont avec, et enfin quelques offres.

Sans oublier un article de présentation d’une offre.

Dans le prochain épisode on verra comment afficher ces contenus dans notre template…

 

 

 

Custom Post Type "Offre spéciale" avec Pods (1/*)

Cela faisait un petit moment que je n’avez pas parlé de Pods

En discutant avec Amanda, je me suis rendu compte que j’avais le même besoin sur mon/mes site(s), autant faire un petit tuto, comme ça tout le monde en profitera. De plus j’ai noté dans ses remarques une certaine incompréhension de ce qu’est un « Custom Post Type » dut en partie je pense à son nom lui même !

Un Custom Post Type n’est pas toujours un Post !

Pour prendre l’exemple qui nous intéresse ici, une « offre spéciale » est un ensemble de données ( date, prix, photo, description…) . Mise bout à bout, toutes ces donnes ne forment pas les 300-500 mots standard d’un article, il serait donc judicieux de ne pas les afficher sur une page propre, dans le cas contraire, cela va créer des pages avec un contenu « pauvre » (et si vous copier la description fournie par votre partenaire, vous risquez un « Duplicate Content« ) . Et si vous avez du contenu pour une offre en particulier, rien ne vous empêche d’en faire un article en plus qui en parle.

On s’approche ainsi un peu plus vers le concept de CMS ( Content Manager System), où « Content » peut être toute sorte de choses…

3 études de cas

Je vais vous présenter 3 études de cas, puis la mise en oeuvre qui sera pratiquement identique pour les 3…

J’ai pris le parti de faire simple (pas besoin de beaucoup de programmation et de modification du template, grâce à l’utilisation des shortcodes de Pods), pour des besoins plus compliqués/spécifiques… contactez-moi 🙂

Site de tourisme

Je voudrais présenter des offres de voyages par rapport à une destination.

Page destinations: Page avec la liste des destinations.

Page destination: Détails d’une destination en particulier, avec une liste des offres, toujours avec un shortcode

Page offres : L’ensemble des offres du site

Custom Post Type : offre, avec un champs « destination » (qui permettra de trier par destination) et d’autres champs : prix, discount,date….

Custom Post Type : lieu, qui est en fait redondant avec destination, mais c’est plus facile à gérer ainsi, et cela permet d’éviter une adresse de type domaine.com/destination/ljubljana, je préfère domaine.com/ljubljana, je souhaite centrer le site par rapport à une destination. Mais sur un site plus étoffé j’aurai choisi domaine.com/destination/ljubljana (Comme toujours, il faut s’adapter à son besoin).

Site de mode

Il suffit de remplacer « destination » par « marque » juste au dessus 🙂

Site d’aide « WordPress »

Cette fois « destination » devient « type de produit », comme plugin, template, formation, ebook etc…

 Mise en oeuvre sur slovenie-tourisme.com

Je vais montrer sur ce site, le résultat de mon tuto, j’utiliserai le thème Pinstagram, que je trouve plutôt sympa pour ce type de site.

La première étape sera de mettre en place les Custom Post Type, et ajouter du contenu.

Ensuite, il faudra modifier le thème pour qu’il affiche notre contenu correctement, cette étape est presque toujours nécessaire, les thèmes n’étant jamais vraiment 100% comme on le voudrait.

Stay tuned… comme on dit 🙂

Black Friday : Beware the Penguin Bundle !

De ce coté de l’Atlantique ( à l’est), le Black Friday ne signifie pas grand chose… mais de l’autre coté, les cartes American Express vont chauffer aujourd’hui !

Je reçois de nombreuses offres plus alléchantes les unes que les autres, et j’avoue de temps en temps me laisser tenter…

Comme par exemple MightyDeals.com (lien affilié) qui propose encore 25% de réduction pour le Black Friday, en plus des réductions déjà monstrueuses parfois !

MAIS, je dois quand vous avertir d’un petit bémol à ces offres, et vous conter une petite mésaventure que j’ai vécu à l’ouverture de ce blog 🙁

J’ai des 10aines de templates/thèmes bien au chaud sur mon disque dur, téléchargés lors d’offres « bundle » ou gratuit, qui attendent un projet futur…

Il y a environ 3 semaines, je décide d’ouvrir un blog perso (celui que vous êtes en train de lire), je pars à la recherche d’un thème WordPress, en premier lieu en local.

J’en trouve un qui me convient graphiquement, mais lorsque je plonge dans le code de celui-ci, je découvre quelques surprises, comme par exemple l’absence du fichier « categories.php« , functions.php, header.php vide.. et j’en passe… il n’est pas indispensable d’utiliser ces fichiers.. mais avouez que c’est quand même pratique lorsqu’on veut customiser d’avoir une base devenue standard.. non ?

Je contact alors le support du thème (acheté en bundle sur ThemeForest), et voici la réponse 🙁

bundle-themeforest

Je ne lui jète pas la pierre, il a du vendre un paquet de thèmes à 5$ au lieu de 50$… mais lorsque j’ai acheté le thème, ThemeForest s’est bien gardé d’indiquer clairement ce point !

Il arrive aussi quelquefois que la version du thème vendu soit en ancienne version… une sorte de solde de fin de série

Alors, avant d’acheter un bundle… fait attention à ce genre de choses… mais quoiqu’il en soit, il y a quand même de bonnes affaires sur MightyDeals.com   (lien affilié) et ailleurs 🙂

Note: le titre fait référence à une pub Budweiser évidemment, et à un animal disparu du zoo de Google 😉

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.

Le Père Noël des blogueurs est passé !

Noël approche, si vous voulez décorer votre blog aux couleurs des fêtes de fin d’année, c’est le moment de profiter de cette offre !

9.99$ (au lieu de 225$ !) pour 250 images vectorielles de Noël 🙂

Parfait pour une « landing page« , une newsletter, un fond d’écran ou un header…

L’avantage des images vectorielles, c’est que vous pouvez les modifier à votre guise, aussi en bien en taille, couleurs ou changer le texte (qui est en anglais).

Vous pouvez aussi sélectionner qu’une partie de l’image (le Père Noël par exemple) pour une meilleure intégration à votre design.

Pour cela, il vous faudra un logiciel qui permet de modifier les images EPS, il en existe des payants ( les plus connus, Photoshop ou Illustrator de Adobe), mais aussi des gratuits (et même libre) comme Inkscape, disponible sur Windows, MacOS et Linux !

Pour télécharger ces images c’est ici : The Ultimate Christmas Vector Bundle – only $9.99! (lien affilié)

 

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 🙂