Catégories
Plugin WordPress Site Web WordPress

WordPress: faire un diaporama avec le plugin Nivo Slider sans conflit ou incompatibilité

Dans un site Web, il est de plus en plus courant de publier un diaporama web dans l’en-tête. Il m’arrive régulièrement d’installer un plugin qui permet d’afficher un diaporama présentant des images mettant en valeur des produits et services. Mais dans le projet sur lequel je travaille actuellement, je me suis butée à un problème d’incompatibilité entre 2 plugins « extensions » WordPress.

Dans ce projet, j’avais besoin d’un plugin diaporama (exemple ici) et un plugin qui présente du contenu HTML  dans une fenêtre de type « Lightbox » (exemple ici). Lorsque je faisais l’installation et la configuration de ces plugins, il y avait toujours un  des deux qui ne fonctionnait pas.

Voici les plugins Diaporama WordPress dont j’ai fais l’essai :

Les plugins permettant d’afficher du contenue HTML (pour présenter des extraits de livre)

La seule combinaison qui réussit à fonctionner pour moi est celle-ci :

Nivo Slider for WordPress et Shadowbox JS

Nivo Slider permet en plus de mettre une légende (caption) sur l’image, (ce qui je trouvais intéressant pour mon client) et il est très simple d’utilisation.

Wordpress diaporama plugin - nivo slider exemple

nivo-slider-plugin-diaporama

Shadowbox JS me permet d’afficher des extraits de livre dans une fenêtre de type « Lightbox » en insérant un code très simple dans la page.

extrait-contenu-html

La méthode utilisée ici est de mettre des fichiers HTML simple dans un répertoire créé exprès pour ces fichiers. Chaque extrait est un fichier .html. Dans la page où on veut présenter les extraits il suffit de mettre un lien href qui ressemble à ceci :

<a title= »Extrait 1″ href= »http://URL/wp-content/extraits/extrait1.html » rel= »lightbox[Extraits];width=600;height=400″>Extrait 1</a>

J’espère que ce tout petit article pourra peut-être aider quelqu’un, qui comme moi n’avait pas le goût de modifier le code des plugins pour corriger le problème.

Catégories
Plugin WordPress Site web - général Site Web WordPress Thème WordPress

Utilisez les polices Google sur votre blog WordPress – Google Fonts Web

polices habituellement utilisées sur le WebGoogle Fonts Web permet d’utiliser des polices différentes et moins restrictives que : Verdana, Arial, Georgia et la non moindre Comic. Les polices Google peuvent être utilisées gratuitement alors pourquoi s’en priver.

Il y a deux façons d’installer et utiliser les polices Google sur votre blog WordPress. Personnellement je préfère le faire manuellement.

  1. Manuellement en copiant le code indiqué par Google
  2. Vous pouvez aussi installer ce plugin – WP Google Fonts 

 

Voici une marche à suivre pour installer les polices Google – Google fonts Web manuellement

Choisir votre police sur le site de Google Fonts Web

Google fonts Web Bouton Quick useGoogle fonts - sélection par NomMoi j’aime bien choisir en mettant le nom des polices en sélectionnant FONT NAME dans la boîte « Preview text ».

Lorsque j’ai fait mon choix de police, je clique sur Quick use pour obtenir les codes à insérer sur mon blog WordPress. Dans mon exemple j’ai choisi la police Raleway ultra-light 100.

Information sur la police « Google Fonts Web » qu’on a choisie

Google Fonts impact du temps de chargement de la pageOn peut avoir une idée temps de chargement de la page lorsqu’on utilise cette police. Dans le cas de Raleway, il n’y a pas un impact majeur sur le temps de chargement. Je vous conseille de ne pas mettre plus que 2 polices diffiérentes afin de ne pas nuire en temps de chargement de la page. De toute façon la modération à toujours meilleur goût, trop de polices différentes ne seraient pas très esthétiques.

Insérer le code dans votre thème WordPress

Il y a deux façons d’insérer le code dans votre thème WordPress :

  1. Soit en copiant le code HTML (onglet STANDARD dans l’interface Google Fonts Web) dans votre fichier header.php. Trouvez le tag <header> et coller le code tout de suite après le tag.
    Code google fonts Web - HTML
  2. Copier le code dans votre feuille de style CSS (onglet @IMPORT dans l’interface Google Fonts Web) juste après les informations du modèle « template » (généralement dans le fichier styles.css)
    Google fonts Web - IMPORT css

Appliquer la police Google à une balise de votre page

Voici un exemple sur perspective-jardins.com j’ai appliqué la police Raleway au menu, j’ai donc collé le code dans me fichier css pour la balise #nav a :

Code Google fonts Web appliqué à la balise #nav a
Vérifier l’affichage

Perspective-jardin AVANT

Perspective-jardin avant Google fonts Web

Perspective-jardin  APRÈS

 

Perspective-jardin après Google fonts Web

 

Dites-moi si vous avez essayé les polices Google déjà où si vous allez l’utiliser dans un site web futur.
Peut-être avez-vous utilisé Typekit ou autres services semblables?

Catégories
Plugin WordPress Site web - général Site Web WordPress Thème WordPress

WordPress: thème français? Traduire un thème wordpress avec Codestyling Localization

Il y a longtemps que je voulais changer le thème de mon blog WordPress. Eh voilà c’est fait! J’ai fait l’achat d’un thème chez WooThemes, il s’agit du thème Canvas.

Thème WordPress Canvas de WoothemesTous les thèmes chez Woothemes utilisent les fonctionnalités GNU gettext (qui est la technologie de « localization » de WordPress) qui permettent de traduire les thèmes dans la langue de notre choix. Chaque thème comprend son fichier (en_GB.PO) qui contient tous les termes anglais à traduire. L’avantage de cette méthode est que la traduction n’affecte pas les fichiers modèles (templates) donc si on doit mettre le thème à jour nos traductions ne sont pas exposées aux mises à jour (en fait nous n’avons pas à  refaire la traduction lorsque WooThemes publie une version actualisée du thème) .

Plugins Codestyling Localization

Tel que proposé par WooThemes, j’ai utilisé le plugin Codestyling Localization pour faire la traduction du thème Canvas.

Une fois, le thème installé et activé le plugin, il suffit d’aller dans le menu OUTILS > LOCALISATION

Codestyling Localization-menu

 

Ensuite, on clique sur le menu THÈMES (ici je veux traduire mon thème Canvas, mais on peut aussi l’utiliser pour traduire autre chose comme un plugin).Codestyling Localization-menu-themes

 

On ajoute la langue de notre choix en cliquant sur le menu AJOUTER UNE NOUVELLE LANGUE. Codestyling Localization-menu-langue

Dans la boîte de dialogue, j’ai choisi fr_CA car je n’ai pas trouvé fr_FR. J’ai donc créé le fichier fr_CA.PO mais je suis allée modifier le nom du fichier par la suite pour fr_FR.PO. Car j’utilise la version de WordPress en français et le code dans mon fichier de configuration est fr_FR.

Une fois le fichier fr_CA.PO créé je suis allée le renommer pour fr_FR.PO en uilisant FileZilla. (NOTE le fichier PO se trouve dans le répertoire /wp-content/themes/canvas/lang/

Une fois le fichier renommé on voit que la langue est maintenant Français /France. Il suffit de cliquer sur RESCANNER pour que Codestyling Localization « scan » le thème Canvas.

Codestyling Localization-scan

Une fois le scan terminé, il faut cliquer sur MODIFIER (juste à gauche de Rescanner) pour arriver sur l’interface qui permet de traduire tous les termes anglais.

Codestyling Localization interface de traduction

 

Pour chaque terme anglais qu’on veut traduire en français, il faut cliquer sur MODIFIER (juste sous la colonne ACTIONS)

Codestyling Localization-traduction-editionOn répète cette action pour tous les termes qu’on veut traduire.

Dernière étape :

Une fois qu’on a terminé, il faut générer un fichier .mo en cliquant sur le bouton générer le fichier .mo.

Codestyling Localization générer le fichier .mo

 

Vous pouvez vérifier votre site web afin de vous assurer que la traduction a bien fonctionné.

Mise-à-jour février 2013 :

Plusieurs ont demandé le fichier de traduction (traduction partielle) : télécharger les fichiers fr_FR.po et fr_FR.mo

Catégories
Plugin WordPress Site Web WordPress

10 premiers Plugins WordPress gratuits à activer sur votre blog

10 Plugins-WordPress

WP DB Manager

  • Permet la sauvegarde et la restauration d’une base de données WordPress
  • Permet l’optimisation de la base de données, c’est-à-dire supprimer les informations inutiles et ainsi réduire la taille de la base de données.
  • Permet de réparer et supprimer des tables inutiles dans la base données

Parmis les plus populaires, WP-DBManager permet de planifier des backups automatiques de votre base de données WordPress. Le backup peut être envoyé par email (pour le moment j’utilise un email gmail pour mes backup) ou copié sur une serveur.
Plugins-WordPress-WP-DB-Manager

WordPress Backup

  • Permet de faire un backup compressé (fichier .zip) des répertoires Uploads, plugins et theme.

En plus de prendre la base de données en backup, il faut aussi prendre tous les fichiers qui sont nécessaires au site web : le theme, les plugins, les images, vidéo, pdf ou autres. WordPress Backup permet de prendre en backup ces fichiers, les zipper et les envoyer par courriel.

Plugins-WordPress-WordPress-Backup

Google XML Sitemaps

Les sitemaps (ou plans de site) permettent d’accéder rapidement au contenu d’un site web (pages, images, vidéo). Le protocole Sitemaps, proposé par Google et ensuite adopté par les autres moteurs de recherche, permet de spécifier un plan de site dans un format lisible par les robots d’indexation, au format XML. Ce fichier se trouve à la racine de votre site sous le nom de sitemap.xml (exemple https://esiteweb.net/sitemap.xml) .

Le sitemap aide à l’indexation d’un site, car il permet de s’assurer que toutes les pages sont accessibles par les robots d’indexation. C’est donc un « must » si vous voulez être trouvé par Google et compagnie.

Plugins-WordPress-Google-xml-sitemap

Google Analyticator

Grâce à Google, il est possible d’avoir les statistiques de visites de notre site web gratuitement. Tout ce qu’il vous faut c’est un compte Google Analytics.

Lorsque vous avez un compte Google Analytics, vous pouvez utiliser le plugin Google Analyticator pour connecter votre site web WordPress à Google Analytics. Une fois configuré vous pourrez voir vos statistiques directement dans votre tableau de bord WordPress.

Plugins-WordPress-Google-Analyticator

WordPress.com Stats

Affiche les statistiques de visites directement sur votre tableau de bord et se veut un complément à Google Analytics. Les statistiques de WordPress.com Stats offre une vue d’ensemble des pages vues, des termes de recherches, des pages les plus consultées.

NOTE : pour installer ce plugin vous avez besoin d’une clé API provenant de  http://wordpress.com/api-keys/. Il faut s’inscrire gratuitement chez https://fr.wordpress.com/signup/

Plugin WordPress WordPress.com Stats

All In One Seo

Ce plugin a été téléchargé 7 340 949 (février 2011), c’est donc dire que ce plugin est vraiment populaire. All in one SEO permet d’améliorer le SEO (Search engine optimisation comme son nom l’indique) en nous offrant la possibilité d’améliorer le référencement d’un site Web dans les moteurs de recherche.

Pour obtenir des visites sur votre site, il faut être trouvé par les moteurs de recherche et pour être trouvé il faut que des internautes entrent des mots-clés dans un moteur de recherche. Ces fameux mots-clé doivent être mentionnés dans votre contenu et particulièrement pour les items suivants : titres, description, mots-clés.

Plugins-WordPress-All-in-one-SEO

DiggDigg

DiggDigg est un plugin de bouton SEO tout-en-un vraiment génial. Vous pouvez ajouter les boutons J’aime de Facebook, le bouton « retweet », etc à toutes vos articles et/ou pages de votre site web. Vous choisissez à quel endroit vous voulez l’avoir flottant à gauche, horizontalement en-dessous de vos articles.

Plugins-WordPress-DiggDigg

MobilePress

Ce plugin WordPress permet d’adapter votre site web afin qu’il soit visible sur les téléphones intelligents « Smartphones » comme le Iphone, Android, blackBerry. Beaucoup d’internautes utilisent leurs Smartphones pour naviguer sur le web, alors pourquoi ne pas faciliter la visite de votre blog en permettant un affichage adapté à chacun des smartsphones.

Plugins-WordPress-MobilePress

Yet Another Related Posts Plugin

Afin d’encourager les lecteurs de votre blog à poursuivre leur lecture sur votre site, vous pouvez ajouter 4-5 liens vers d’autres articles que vous avez écrit. Le plugin Yet Another Related Posts permet justement d’ajouter ce type de liens qui peuvent être proposés en bas de page de vos articles.
Plugin WordPress Yet Another Related Posts

WP Minify

Ce plugin combine et compresse les fichiers JavaScript et les fichiers CSS afin de faire afficher les pages de votre site plus rapidement. Minify diminue le nombre de requêtes HTTP ce qui améliore les performance de votre site web.
WordPress Plugin WP Minify

Résumé : liste des 10 plugins

  1. WP DB Manager
  2. WordPress Backup
  3. Google XML Sitemaps
  4. Google Analyticator
  5. WordPress.com Stats
  6. All In One Seo
  7. DiggDigg
  8. MobilePress
  9. Yet Another Related Posts Plugin
  10. WP Minify