par AFI Aveyron | 14, Mar 2017 | Aide et tutoriels, Blog, Web, Wordpress
Depuis juin 2016, Google n’autorise plus de créer des cartes « Google Map » à la volée.
Vous êtes obligé de créer une clef API afin d’affiché une carte.
Créer une clef API
Pour ce faire, rendez-vous sur le site Google Developers
https://developers.google.com/?hl=fr
Et connectez-vous à votre compte ou créez en un.
Une fois cela fait, rendez-vous dans le menu « Google Map API » et cliquez sur « Démarrer ».

Ensuite cliquez sur « Obtenir une clé ».
Après avoir validé une fenêtre de dialogue, vous arriverez sur la page de création de projet.
Vous cliquerez sur continuer après avoir choisi « Créer un projet ».

Après quelques instants, vous aurez la possibilité d’obtenir votre clé.
Vous pourrez nommer votre clé : remplacer le nom « Clé API 1 » par celui de votre choix.
Vous devrez ensuite, restreindre l’accès à cette clé en choisissant le référent http (sites web)
url.com
url.com/*
*.url.com/*
Où vous remplacez url.fr par votre adresse
Par exemple :
afi-aveyron.fr
afi-aveyron.fr/*
*.afi-aveyron.fr/*
Cliquez ensuite sur « enregistrer » et vous aurez une boite de dialogue qui vous donnera le précieux sésame.

Activer Google Maps Javascript Api and Javascript Geocoding Api
Vérifier que ces deux options sont activées.
Cliquez sur « Bibliothèque »

et dans « API Google Maps, cliquez tout d’abord sur :
- Google Maps JavaScript API et activer le service si ce n’est déjà fait.
- Puis sur Javascript Geocoding Api et activer le service si ce n’est déjà fait
Une fois cela réalisé, vous pouvez afficher votre carte Google sur votre site.
Exemple avec le thème DIVI
Je vous propose un exemple avec le thème DIvi mais le procédé est le même pour toutes les extensions « Carte » : vous devez renseigner la clé API dans les options soit de l’extension soit du thème.
Renseignez la clé API
Pour afficher une carte avec le thème Divi, vous devez renseignez votre clé API dans les «options du Thème.
Copier votre clé API dans « le champs Google API Key.

Une fois cela réalisé, vous pourrez créer une carte sur une page.
Création d’une carte avec le module Map
Vous mettrez en place le module carte dans le Divi Buider

et tout d’abord renseigner la vue générale de carte (ici Rodez).

Puis vous « Ajouterez une nouvelle épingle », en choisissant :
- Titre
- Votre adresse en cliquant sur Trouvez
- Des informations complémentaires dans le champs texte.

Après avoir enregistré, votre carte sera visible.

par AFI Aveyron | 15, Sep 2015 | Aide et tutoriels, Web, Wordpress
Simple Download Monitor esy un plug (ou extension) in WordPress qui permet de gérer les téléchargements de fichier sur votre site Web.
Il est extrêmement simple à utiliser et largement suffisant si vous n’avez besoin de fonctionnalités avancé (téléchargement après inscription, paiement…).
Installation de Simple Download Monitor
Tout d’abord, vous devez l’installer comme toutes les extensions WordPress.
Rendez-vous dans votre administration, puis dans extension et cliquez sur « Ajouter »
Entrez dans la barre de recherche (à droite), le nom de votre extension (ici Simple Download Monitor).
Cliquez ensuite sur « Installer maintenant ». Continuez le processus d’installation jusqu’à la fin.
Une fois installé, Simple Download Monitor installe une nouvelle entrée de menu nommée « Download » ou « Téléchargement » si vous avez traduit votre plug in.
Vous pouvez également le télécharger sur WordPress.org (https://wordpress.org/plugins/simple-download-monitor/)
Créer un lien de téléchargement
Simple Download Monitor installe un nouveau type de contenu qui se comporte comme les articles de base de WordPress.
Vous aurez donc la possibilité de classer vos téléchargement en fonction de catégories ou de mots clefs (ou Tag).
Pour créer une catégorie, rendez-vous dans Catégorie de Simple Download Monitor et cliquez sur ajouter.

Vous aurez donc la possibilité de classer vos téléchargement en fonction de catégories
Une fois cela réalisé, vous pourrez commencer à créer vos téléchargements.
Pour ce faire, cliquez sur « Ajouter » dans le menu « Téléchargement ».
Une nouvelle fenêtre s’ouvre et vous invite à renseigner les champs principaux :
- Choisissez Le titre
- Sélectionnez le fichier
- Ajoutez une vignette
- Activer ou non les statistiques
- Choisissez une catégorie

Ajoutez une vignette
Enregistrez ensuite comme vous le feriez pour un article ou une page.
Afficher son lien de téléchargement
Pour afficher le fichier à télécharger sur une page ou un article, rendez-vous à l’endroit où vous voulez qu’il s’affiche.
Vous remarquerez que le plug-in à fait apparaitre dans l’éditeur de texte une petit icône bleu en forme de flèche.

Le plug-in à fait apparaitre dans l’éditeur de texte une petit icône bleu en forme de flèche.
En cliquant dessus, une boite de dialogue vous invite à choisir votre fichier et à activer ou non la boite Fancy Box qui fait apparaitre la vignette et les statistiques.
Un short code s’affiche alors dans votre page
[sdm_download id= »473″ fancy= »0″] : sans Fancy Box

Sans Fancy Box
[sdm_download id= »473″ fancy= »1″] avec Fancy Box

Avec Fancy Box et vignette
Mettez à jour et vérifier que le résultat vous convient.
Notez que vous pouvez changer la couleur du bouton « Télécharger » dans Page paramètres de Simple Download Monitor.
par AFI Aveyron | 24, Jan 2013 | Aide et tutoriels, Web, Wordpress

Transférer WordPress
Il se peut que vous ayez besoin un jour de transférer votre WordPress d’un hébergeur à un autre ou après un changement de nom de domaine ou bien tout simplement de basculer votre développement local vers votre serveur.
Voici donc un petit tuto qui vous permettra de réaliser cette manipulation en toute sérénité.
Préparer sa migration
En premier si vous avez un système de cache activé dans votre WordPress, désactivez-le.
Ensuite, vous pouvez installer une extension qui vous permettra de récupérer votre BDD et de faire les modifications nécessaire : WP migrate (http://wordpress.org/extend/plugins/wp-migrate-db/)
La récupération de votre site se fera en deux étapes :
- La récupération des fichiers de votre WordPress qui sert au fonctionnement de vote site web
- La récupération de votre bande de données qui est le contenu de votre site web
Récupérer ces fichiers
En local
Si vous faites un développement local, vous fichiers sont sur votre ordinateur. Par défaut avec Wamp, ils sont à la racine
Si vous avez créez des alias, vous seul savez ou ils sont.
Sur un serveur
Pour récupérer vos fichiers sur le serveur, utilisez le logiciel Filezilla ou WinSCP et connectez-vous avec les identifiants qui vous ont été communiqués par votre hébergeur.
Récupérer sa base de données
Les chemins de vos fichiers (photos, document divers) et de pages et articles sont inscrits dans votre base de données.
Vous devez donc les modifier pour si vous changer de nom de domaine.
Par exemple, en local
http://localhost/mon-site
doit devenir
http://www.mon-site.org
Pour les modifier vous avez deux solutions :
Le Plug in WPMigrate (onglet outils) s’exécute sur le site de départ (celui à transférer).
Deux informations sont à renseignées :
- L’URL d’arrivée ex : http://www.mon-site.org
- Le chemin de vos fichiers sur votre futur serveur.
Si vous le connaissez pas créez un fichier PHP toujours avec Notepad++ t collez :
<? echo realpath('chemin-ftp.php'); ?>
Transférer le sur votre serveur, lancer votre navigateur avec l’adresse
http://www.mon-site.ord/chemin-ftp.php
et notez le chemin qui s’affiche pour renseigner le champ WPMigrate manquant.
Télécharger ensuite votre BDD : « Save as file to computer »
Avec Notepad++, télécharger votre base de données via votre PhpMyAdmin, ouvrez la avec Notepad++ et lancer un remplacer de chaine de caractères : Recherche puis Remplacer ou CTRL + H.
Dans le champ « Recherche », mettez l’URL de départ, dans le champ « Remplacer » l’URL final de votre site et cliquez sur « Remplacer tout ».
Voilà votre base de données est prête.
Transférer son site sur son serveur
Vous devez donc transférer sur votre serveur vos fichiers et votre BDD.
Vos fichiers seront transférer via votre logiciel FTP (Fillezilla) et votre BDD modifié via le PhpMyAdmin de votre hébergeur.
Une fois cela fait, votre site est quasiment opérationnel, il ne vous reste plus qu’a modifier le fichier wp-config.php.
Ouvrez-le avec Notepad++ et trouvez ces lignes
// ** Réglages MySQL - Votre hébergeur doit vous fournir ces informations. ** //
/** Nom de la base de données de WordPress. */
define('DB_NAME', 'MONCODE');
/** Utilisateur de la base de données MySQL. */
define('DB_USER', 'MONCODE');
/** Mot de passe de la base de données MySQL. */
define('DB_PASSWORD', 'MONCODE');
/** Adresse de l'hébergement MySQL. */
define('DB_HOST', 'MONCODE');
Remplacer MONCODE par les valeurs données par votre hébergeur.
Voilà votre site est transféré.
Changer les DNS
Si vous changez d’hébergeur, il va falloir changer le pointage DNS de votre site web ?
Vous devrez donc vous rendre dans la gestion de vos DNS et les faire pointer vers le nouveau serveur.
La plupart du temps vous n’aurez que deux champs à remplir :
- DNS primaire ;
- DNS secondaire.
Le changement de DNS, peut pendre 24 à 48 heures. Les résultats de votre manipulation ne sont donc pas visible immédiatement.
Pour les .fr, vous avez l’AFNIC qui fournit un outil vous permettant de voir si tout est OK sur votre paramétrage :
http://www.afnic.fr/fr/produits-et-services/services/zonecheck/
Une fois vos nouveau DNS mis en place, vérifier votre site web. Si vous rencontrer des problèmes : mauvaise navigation, images manquantes vérifiez bien les liens. La solution se trouve souvent dans l’oubli de remplacement de l’URL dans la BDD.
Pour ma part, je vous conseille fortement de différencier vote hébergeur de la société qui enregistre vos noms de domaine. Cela vous laissera une plus grande marge de manœuvre si vous désirez en changer.
Une migration de serveur ou de nom de domaine est une opération peut-être un peu stressante mais qui réalisée avec méthode est relativement simple à mettre en place.
par AFI Aveyron | 30, Mar 2011 | Aide et tutoriels, Wordpress
Nous verrons ici comment insérer une galerie photo ou un diaporama dans un article ou une page statique.
Dans ces exemples, on utilisera l’extension NextGEN Gallery
Rendez-vous sur la page de votre article dans la zone de l’administration.
Cliquez ensuite, dans votre article, là où vous voulez mettre votre galerie.
Puis cliquez sur l’icône « Next-Gen Galery » en haut à droite dans votre éditeur.

Puis cliquez sur l’icône « Next-Gen Galery » en haut à droite dans votre éditeur.
Une fenêtre surgissante (Pop Up) s’ouvre. Vous devez indiquer la galerie à insérer et le type de présentation.
Vous avez trois type de présentation :
- Image List : c’est une liste d’image
- SlideShow : c’est un diaporama. Notez que vous pouvez modifier les options du diaporama dans le menu de Galery -> Options -> Slideshow.
- Image browser : pour afficher les images en cliquant sur suivant et précédant. Mais cela recharche à chaque fois la page ce qui entraine une certaine lenteur.
Cliquez ensuite sur « Insert »

Une fenêtre surgissante (Pop Up) s’ouvre. Vous devez indiquer la galerie à insérer et le type de présentation.
Vous retournez sur votre page d’édition d’article et vous remarquez un code qui définit la présentation et la galerie concernée.
Donc en fait, vous n’êtes pas obligé de faire toutes ces étapes pour insérer une galerie, vous pouvez aussi tout simplement écrire le code en modifiant le numéro final pour préciser la galerie concernée.

Remarquez un code qui définit la présentation et la galerie concernée
Ensuite vous cliquez sur « mettre à jour » et afficher l’article pour voir le résultat.
par AFI Aveyron | 30, Mar 2011 | Aide et tutoriels, Wordpress
Ou comment créer des galeries dans WordPress pour afficher des diaporama ou des listes d’images dans des artciles ou dans des pages statiques.
Dans ces exemples, on utilisera l’extension NextGEN Gallery
Tout d’abord, voyons à quoi ressemble le menu de cette extension.
Bon, il est en anglais, mais tout cela est relativement simple.

Menu de l’extension NextGEN Gallery
- Overview : page d’accueil du module avec un petit récapitulatif (nombre d’images, de galerie, d’album)
- Add Gallery /Images : pour ajouter des galeries et des images
- Manage Gallery : pour organiser les galeries et les images dans ces dernières
- Album : un album est une réunion de galeries donc vous pouvez créer des albums et y intégrer des galeries. Cela permet d’afficher des listes d’images sur des pages spécifiques.
- Tags : définir des « mots-clefs » pour vos images »
- Option : permet de jouer avec toutes les options du modules : taille des miniatures, option du slideshow… A essayer sur un site de test.
- Style : pour modifier les style CSS des galeries. Il faut mettre les mains dans les codes. A essayer sur un site de test.
- Roles : quand vous avez plusieurs groupes d’utilisateurs, vous pouvez donner des droits à certains groupes pour gérer les galeries
- About : les auteurs de l’extension
- Reset / Uninstall : tout effacer et désinstaller le modules. Ne cliquez ici que lorsque que vous savez ce quevous faites.
Voici la page d’accueil de l’extension
Pour l’instant c’est un peu vide, mais cela va s’arranger.

Accueil de l’extension NextGEN Gallery
La première chose est de créer une galerie.
Donc, on clique sur « Add Gallery /Images ».
Vous lui donnez un nom et vous cliquez sur « Add Gallery »

Créer une galerie
La galerie a été créée avec succès (ouf). Et maintenant, on peut y ajouter des images grâce à l’explorateur de fichier en cliquant sur « Browse ».
N’oubliez pas que vous pouvez sélectionner plusieurs images à la fois en cliquant sur les images et la touche contrôle (CTRL).
Ensuite, vous choisissez la galerie dans laquelle vous voulez placer les images en cliquant sur « Choose Gallery ».
Vous aurez toujours la possibilité de modifier la positions des images en vous rendant dans « Manage Gallery »

Galerie créee avec succès
Si vous n’avez pas choisi de galerie pour importer vos images vous obtiendrez ce message :

Message d’erreur
Cet écran apparait quand vos images seront en train d’être transférées. En fonction de la taille et du nombre d’images cela peut prendre un certain temps.
Soyez donc patient

Vos images sont en train d’être transférées
Quand le téléchargement est fini, vous reviendrez sur cet écran.
Le message en jaune, vous indique tout c’est bien déroulé. Ici, trois images ont été ajoutées avec succès.

Images ajoutées avec succès.
Maintenant, il faut donner un nom et une description à vos images. Cela est mieux pour l’internaute et le référencement.
Rendez-vous donc dans « Manage Gallery »
Choisissez la galerie à gérer en cliquant dessus. Ici, « statue-menhir ».

Page de gestion des galeries
Voici la page de gestion de votre galerie. Vous avez de multiples options.

Page de modification des photos
Pour l’instant, donner un titre et une description à vos images puis cliquer sur « Save change »
Voilà, vous avez paramétré votre galerie. Il n’y a plus qu’a l’insérer dans une page ou un article.
Rendez-vous dans un prochain tuto.
par AFI Aveyron | 30, Mar 2011 | Aide et tutoriels, Wordpress
Si vous avez l’intention d’utiliser plusieurs fois la même image sur votre site, vous devez la transférer sur votre site via le gestionnaire de média de WordPress puis l’insérer dans votre article ou votre page statique.
Sur votre page d’accueil de l’administration, cliquez sur « Média ». Les images déjà présentes sur votre site s’affiche. Pour ajouter une image, cliquez sur… « Ajouter »

Pour ajouter une image, cliquez sur… « Ajouter »
Une fenêtre s’ouvre, vous devez cliquez sur « Parcourir » pour télécharger votre image.

Cliquez sur « Parcourir » pour télécharger votre image
Là, l’explorateur de fichier s’ouvre et vous devez suivre le même protocole que pour insérer une image dans un article.

L’explorateur de fichier s’ouvre
Une fois votre image téléchargée (cela peut prendre quelques secondes, soyez patient), une nouvelle fenêtre s’ouvre afin que vous renseigniez certain éléments.
- Titre: le nom de votre image
- Texte alternatif : description de l’image à l’attention des malvoyant et des non-voyant. Ceci est très important à renseigner pour que vous ne fassiez pas de discrimination sur votre site
- Légende : petit texte qui apparaitra sous l’image afin de l’expliquer
- Description : description de l’image à l’attention des moteurs de recherche. En effet ceux-ci ne sont pas (encore) en mesure d’analyser les images donc vous devez leurs indiquer ce qu’elles représentent.

Renseignez les champs
Voilà votre image est présente sur votre site, il n’y plus qu’a indiquer là où elle doit être positionnée. Pour ce faire, retourner sur la page édition d’un de vos articles et cliquez là où vous voulez mettre votre image. Dans notre exemple, nous la placerons en bas de page.

Positionnez votre image
Puis cliquez sur « ajouter une image ».

Puis cliquez sur « ajouter une image ».
Une fenêtre s’ouvre, cliquez sur « Bibliothèque« . Vos images déjà présentes sur votre site s’affiche.

Choisir son image
Choisissez votre image. Normalement les champs que vous avez remplis précédemment sont pré-remplis mais vous pouvez les modifier comme bon vous semble.
N’oubliez pas de choisir l’alignement et la taille. Nous avons choisi la taille originale et centré.

Choisir les options et remplir les champs
Cliquez sur « Insérer dans l’article » puis mettre à jour. Puis « Afficher »pour voir ce que cela donne.

Cliquez sur « Insérer dans l’article » puis mettre à jour