Lipaonline

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 🙂

2014 : 3 résolutions : SEO, SEO et SEO !

Tout d’abord, je voudrais vous , très nombreux lecteurs de mon blog 😉 , souhaitez une très bonne année 2014 !

Pour ma part, j’espère qu’elle va mieux commencer que n’a fini 2013… si professionnellement je ne suis pas trop mécontent, c’est plus compliqué niveau personnel…

Alors, que nous réserve 2014, normalement pas mal de choses de mon coté, un gros projet doit se mettre en route, une réunion en fin de mois devrait me permettre d’y voir un peu plus clair dans la suite des évènements 🙂

J’ai pris 3 résolutions même si


😉

Search Engine Optimisation

J’ai toujours privilégié l’UEO au SEO, je vais continuer à le faire, en mettant toutefois quelques opérations de « SEO pur » sur mes sites.

Optimiser le maillage interne

C’est une tâche fastidieuse, et une optimisation à manier avec prudence (pour éviter les foudres de Matt) , il y a justement un plugin qui fait ça très bien c’est LiveOptim !

Google Rich Snippets ( micro datas)

Autant parler directement à Dieu 😉

J’utilise déjà l’Authorship de Google, mais je vais pousser plus à fond l’optimisation de ce coté aussi, histoire de mieux « expliquer » de quoi parle mes sites à Google, pour qu’en retour il les indexent mieux 🙂 Je suis en train de tester un autre plugin qui semble bien puissant ( WPSocial), je ne suis pas un adepte du « tout plugin », mais cela peut servir à mes clients (ou à vous :).

Social Engagement Optimisation

Qu’on se le dise, 2014 sera (Google) plus social ! (tout au moins sur Internet.. IRL c’est une autre histoire malheureusement…) Avoir un site Internet, c’est bien, qu’il soit tip top niveau SEO, c’est mieux… mais le faire savoir c’est encore mieux !

Annuaire vs. Blog

Je n’ai jamais été fan des annuaires, pour moi c’est une espèce dinosaure qui ne veut pas disparaitre… Je parle des annuaires « généralistes » qui te permettent de te retrouver entre un vendeur d’abris de jardin et des préservatifs à la fraise, pour certaines niches, ils peuvent être utiles, mais c’est rarement le cas.

Ok, il existe des annuaires de qualité, mais en regardant de plus près, pour y figurer, il faut écrire un article de qualité avec un contenu unique, ce qui n’est ni plus ni moins qu’un article de blog. Pourquoi dans ce cas, ne pas écrire sur un vrai blog, en plus d’avoir les « effets SEO », vous aurez de vrais lecteurs intéressés par votre sujet, qui vont plusser, liker, sharer… voir même vous contacter !

Google Plus ça rox !

Google intègre de plus en plus son réseau social Google Plus, dans ses résultats (il serait idiot de ne pas le faire !), il faut donc ouvrir un compte G+ et partager ses articles si on veut profiter de ce nouveau « vecteur SEO », mais cela ne suffit pas ! Même si beaucoup ne font encore que ça sur ce réseau, ayez une longueur d’avance, en vous investissant, en partageant, en commentant… un réseau social quoi !

Anne Catherine la reine du SEO ?

Hier, en cherche Feedly sur Google, j’ai remarqué une consoeur très bien placée  ! ( screen).

Comment a-t-elle fait ?

  • Elle a fait un pacte avec Matt Cutts ?
  • Elle a sacrifié quelques vendeurs de rêves ?
  • Elle a fait une séance de spiritisme avec un chapeau noir ?

Rien de tout cela, elle est simplement dans mes cercles Google Plus, et dans beaucoup d’autres, participe à des communautés, partage…du coup Google estime que sa parole a une valeur ( AuthorRank), et que tu coup ce qu’elle dit peut m’intéresser dans ma recherche.

Alors soyez actifs sur les réseaux sociaux (en particulier Google Plus !), votre SEO n’en sera que meilleur 🙂

Super Efficace et Organisé

Depuis quelques semaines, mon « espace temporel de travail » est quelque peu malmené par des soucis personnels… dans ces conditions, il devient alors plus que vital d’avoir une organisation très efficace (ce qui n’a jamais été mon point fort 🙁 . Surtout qu’être présent sur les réseaux sociaux, c’est très chronophage, c’est comme dans la vraie vie, le social prend du temps.

En plus de LiveOptim (pour le maillage) et WPSocial , je vais tester sendible.com sur le conseil de Stéphane, cela va me permettre d’optimiser le temps des tâches les moins intéressantes, pour me consacrer à créer de la réelle valeur ajouter à ma présence (j’ai la prétention de croire qu’elle en a une..).

Sport Experience Outdoor (oups, ça fait 4 😉

Moins directement lié au web.. quoique… un meilleur équilibre mentale ne fera pas de mal à la qualité de mes articles 🙂 … et quand on habite ici

ça serait dommage de ne pas en profiter non ?

Scoop.it vs. Google +, quand la curation rencontre le réseau social

Scoop.it est un outil de curation (même si ce terme me rappelle un peu trop les corvées pendant mon service militaire ;)…

Il permet de partager ce que l’on trouve intéressant sur Internet, et parfois ses propres articles (car il arrive de s’ auto-trouver intéressant ;).

Hors, le partage, c’est justement l’essence même des réseaux sociaux, comme Google Plus ! Quand on sait l’importance grandissante que va prendre ce réseau made in Google, pourquoi ne pas profiter d’un outil qui peut faire à la fois de la curation et améliorer votre référencement ?

Communauté Google+

Votre compte Google vous donne accès à toute la galaxie des services de cette société, Gmail, Drive, Analytics, Adsense… et Google+.

Avec votre profil Google+, vous allez pouvoir « signer » vos écrits sur Internet, sur vos sites mais aussi chez les autres (pour des articles et commentaires), et comme sur tout réseau social, partager, « plusser » (la version Google+ du « liker » de Facebook).

Mais ce n’est pas tout, sur Google+ vous avez la possibilité de créer des pages pour votre site, votre entreprise, votre association… et des communauté, l’équivalent des groupes sur Facebook.

Quel type de communauté choisir ?

Il existe 5 types de communauté, chacune adaptée à des besoins particuliers, donnant des droits d’accès différents:

– Publique sans modération :

  • Accès : Tout le monde peut voir les posts, et s’inscrire.
  • Moteur de recherche : Votre communauté et ses posts sont référencés dans les moteurs de recherche.
  • Utilisation : Pour rester connecté avec vos clients, pour votre association, votre club, pour discuter de vos passions…

– Publique avec modération :

  • Accès : Tout le monde peut voir les posts, tout le monde peut faire une demande d’inscription.
  • Moteur de recherche : Votre communauté et ses posts sont référencés dans les moteurs de recherche.
  • Utilisation : Pour votre association, votre club, permet de limiter l’interaction aux seuls membres de votre communauté « réelle »

– Privée avec modération :

  • Accès : Seuls les membres peuvent voir les posts, tout le monde peut faire une demande d’inscription.
  • Moteur de recherche : Votre communauté (sans ses posts) est référencée dans les moteurs de recherche.
  • Utilisation : Pour votre association, votre club, permet de limiter l’accès aux seuls membres de votre communauté « réelle »

– Privée sur invitation :

  • Accès : Seuls les membres peuvent voir les posts, seuls les invités peuvent s’inscrire.
  • Moteur de recherche : Votre communauté n’est pas référencée dans les moteurs de recherche.
  • Utilisation : Pour votre association, votre club, permet de limiter l’accès aux seuls membres de votre communauté « réelle »

– Privée « Google App » :

Dernière née des communautés (novembre 2013), elles permettent de limiter l’accès à un domaine Google Apps for Business. Intéressant si votre entreprise utilise déjà les produits Google.

Mon utilisation

J’ai d’abord créé un communauté privée pour moi uniquement, où je mets mes partages, une sorte de service de bookmark, où je peut trier par thème, « à lire plus tard ».. etc…

Puis, je me suis dit que c’est dommage de ne pas partager avec d’autres… j’ai alors créé une deuxième, mais cette fois publique avec modération (pour éviter des spammers en tout genre..).

Pour mes projets à venir (et présent), je vais aussi créer d’autres communautés privées, limitées aux seuls intervenants du projet ( designer, client, beta-testeurs…).

Et bien sur des communautés publiques lorsque cela sera utile pour le site, client.

Et les pages Google+ ?

Sur Facebook, on peut facilement partager sur son mur, mais aussi sur une page… ce qui n’est pas le cas sur Google+ (enfin pas pour l’instant).

Pour contourner ce problème, il vous suffit de créer une communauté privée, y inviter votre page, ensuite il vous suffira de partager dans votre communauté privée, vous connecter à votre page, et repartager sur celle-ci 🙂

Et vous ? Comment utilisez-vous Google Plus ?

Pensez-vous que c’est un bon outil pour la curation ?


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 🙂

Advanced WordPress widgets with Pods

Even if you are not a PHP guru, you can feel the power of Pods with simple WordPress features as widgets and shortcodes.

(for french visitors, you can read this in french , for Shakespeare.. sorry 😉 

Lot of premium themes use (and abuse) widgets and shortcodes, but if your needs don’t fit with all features coded by the developer you will be armless with poor « text widget »…

How to add image, link, list… on widget ? Why it’s not easy as writing article ?

With Pods… it will be !

You can write 2 types of widgets : WYSIWYG widget or Template widget

WYSIWYG widget

It’s the most simple widget, you just need a Pod with a WYSIWYG ( Visual Editor) field, and show it on your widgets area with a shortcode.

WordPress doesn’t allow shortcode in widgets by default, you have change it,

by yourself, with a single line in « functions.php » file from your theme.

add_filter('widget_text', 'do_shortcode');

Or with another plugin as Shortcode Widget.

Then you can add a simple text widget with this code

Pod not found

or

Pod not found

For further information about shortcode in Pods : Shortcode in Pods

Template widget

If you need a structured widget to fit with your design or to show a Google Map for example, you should use template widget.

Instead of a single content field, you will create a field for each data you have to display. For example to display a product : a name (Plain text), a pics ( File Image), a description and a link (Plain text).

Create a template on Pods (you may have to activate a component), it could look like :

<a href="{@link}">{@image}</a>
<br/>
<a href="{@link}">{@name}</a>
<br/>
{@description}

Then you can display your pod with this shortcode:

Pod not found

More features…

Saved widget

When you update a widget, the old version is lost, with pods, you change have to change shortcode, all datas are saves in pods, if you want to display anither product, you need only change Id. For Christmas, you can create a « Christmas widget », display few days, and switch later to the « normal » widget.

List widget

To display your 3 best sellers products :

Pod not found

Rotative widget

To display one randomize product

Pod not found

They are just examples to show you the power of Pods for widget, let your imagination start !

If you need more features, you should look at this plugin : Dynamic Widget (fully compliant with Pods)