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 | 27, Sep 2011 | Internet, Les news
Mises à jour de WordPress : la cadence infernale.
Depuis quelques mois (plus précisément depuis l’année 2011), on assiste à une multiplication des mises à jour de WordPress : deux versions majeurs 3.1 et 3.2 et cinq correctifs de ces dernières (le WordPress 3.2.1 est sorti le 12 juillet).
N’est-ce pas trop et comment procéder ?
Le nombre de mises à jour disponibles ces derniers temps est un peu déroutant. Les dernières mises à jour apportent de nouvelles fonctionnalités. Par exemple la 3.2 dite « Gershwin » prend en charge les nouvelles versions de PHP (5.2.4) et de MySql (5.0.15).
La version 3.2.1 apporte quelques correctifs dans l’interface administrateur ainsi que dans le nouveau thème par défaut Twenty Eleven.
Mais faut-il mettre à jour son site sous WordPress ?
C’est vrai que l’on peut se demander pourquoi mette à jour son site si il fonctionne correctement et que l’on a pas besoin des dernières fonctionnalités.
Pour des raisons de sécurité, il est très fortement conseillé de mettre à jour son site. En effet, si la mise à jour n’est pas réalisée, il existe une faible probabilité que son site soit piraté. Cela arrive et cela peut impliquer une suspension de l’hébergement par votre hébergeur, un message d’alerte dans les résultat de Google… Bref, une catastrophe pour votre image et celle de votre site.
Cependant les mises à jour doivent être faites avec prudence. En effet même, si le principe est simple : cliquer sur le bouton mise à jour dans l’administration, cela ne fonctionne pas toujours. En cas d’échec, on sera donc obligé de transférer ses fichiers via FTP (avec FileZilla par exemple).
Ensuite vient le problème des plugin. Sont-ils compatibles avec la nouvelle version. Si non, la nouvelle mise à jour risque de planter votre site et vous serez obligé de désactiver le ou les plugin fautifs.
Et là cela se complique si vous utilisez des plugin alternatifs ou non suivis par ses développeurs vous risquez de vous retrouvez face à un problème conséquent : se passer de la fonctionnalité du plugin ou basculer vers un autre ce qui implique une modification en profondeur de votre site.
Comment procéder ?
Nous partons du principe que soucieux de la sécurité de notre site nous allons effectuer les mises à jour proposées par la communauté WordPress de manière régulière.
Voici comment procéder :
- tout d’abord utiliser des plug-in reconnus et suivis par les développeurs et la communauté. Ne télécharger les plugin que sur le Plugin Directory de WordPress (http://wordpress.org/extend/plugins/) ou via votre interface d’administration de votre site,
- mettre à jour de manière régulière les plugin comme annoncé dans le tableau de bord et vérifier leurs compatibilités avec la version de WordPress,
- si tout vos plugin sont compatibles avec la nouvelle version alors vous pouvez normalement mettre à jour votre site web.
En règle général, il est préférable d’attendre quelques jours avant de faire la mise à jour du WordPress, histoire que les développeurs des plugin adaptent leurs modules.
Notez qu’il est très important de faire des sauvegarde de vos fichiers et de votre base de données avant toute mise à jour. Avec la fréquence des mises à jour WordPress ces derniers temps cela peut devenir fastidieux mais il faut si tenir. Cela vous sauvera la mise, un jour !
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
Dans ce petit tutoriel, nous verrons comment insérer une nouvelle image dans un article (ou dans une page statique). Nous partons du principe que votre image n’est pas encore présente sur votre site.
Tout d’abord, il faut être dans votre administration et sur votre page d’édition de votre article.
Ensuite cliquez dans votre zone texte là où vous voulez insérer votre image.
Ensuite, vous cliquez sur l’icône « Ajouter une image »
Cliquez sur l’icône « Ajouter une image »
Une fenêtre s’ouvre pour vous demander quelle image vous voulez insérer. Nous partons du principe que votre image n’est pas encore présente sur votre site. Sinon, jetez un coup d’œil à notre autre tutoriel (insérer une image déjà présente sur le site).
Cliquez sur « Parcourir »
Explorateur de fichiers
Un explorateur de fichier s’ouvre. Naviguez grâce à lui pour récupérer votre image sur votre ordinateur. Cliquez dessus et ensuite cliquez sur « Ouvrir »
Naviguez grâce à lui pour récupérer votre image sur votre ordinateur
Une fois votre image téléchargée (cela peut prendre quelques secondes, soyez patient), une nouvelle fenêtre s’ouvre afin que 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.
Ensuite, vous choisissez l’alignement par rapport au texte puis la taille de l’image.
Renseignez certain éléments ; titre, texte alternatif, légende et description
Puis cliquez sur « Insérer dans l’article. Voilà ce que cela donne dans votre éditeur.
Résultat dans l’éditeur
Ensuite, pour valider , cliquez sur « Mettre à jour » puis sur « Afficher l’article »
Résultat sur la page
Et voilà.
par AFI Aveyron | 30, Mar 2011 | Aide et tutoriels, Wordpress
Dans cet article vous trouverez en image toutes les étapes pour publier un article sous WordPress.
Tout d’abord connectez-vous à votre administration en renseignant votre identifiant et votre mot de passe.
Si vous avez perdu l’adresse (URL), elle est de ce type :
http://www.votre-site/wp-admin/
Vous arrivez ensuite sur cette page.
Page d’administration
Pour toutes les extension, il faut cliquer sur la flèche à coté de son nom pour afficher les principales options.
Pour les articles, vous avez :
- Articles : pour voir tous vos articles
- Ajouter : pour créer un nouvel article
- Catégories : pour gérer et créer des catégories afin de classer et organiser vos articles
Mots-clefs : pour gérer et créer des mots-clefs afin de faire des liens en vos articles.
Cliquez sur « Articles »
En cliquant sur « Articles », vous arrivez sur cette page :
Cliquez sur « Ajoutez » pour créer un nouvel article
Options et ajouts des articles
Vous arrivez sur cette page dont nous vous présentons ici les principales options. Notez que sa présentation peut différer selon les extensions installées sur votre site.
Page de créations d’articles
Cliquez sur l’icône « Option avancée de l’éditeur » pour afficher toutes les options que vous offre l’éditeur.
Option avancée de l’éditeur
Nous n’avez maintenant plus qu’a écrire votre article !
Ceux qui ont suivi ont remarqué qu’il y avait une différence de présentation dans la nouvelle version de WordPress (3.1) par rapport au précédentes. En effet, dans les versions précédentes, il y avait une zone texte nommée « Introduction ».
Celle-ci à disparu dans la nouvelle version mais la possibilité existe toujours.
Une fois votre texte d’introduction écrit, cliquez sur « Insérer la balise More »
Insérer la balise More
Un marqueur s’affiche alors dans votre zone texte
Marqueur de la balise « More »
Vous pouvez continuer à écrire votre article. Cela donne ceci :
Ecrire son article
Une fois votre article rédigé, vous pouvez mettre en forme votre texte avec les différentes fonctions de l’éditeur. N’abusez pas des changement de polices, de couleurs… Normalement, votre site est paramétré pour avoir une certaine homogénéité dans la présentation.
Le plus important (pour le référencement) est de bien marquer les sous-titres :
Choisir titres et sous-titres
Votre éditeur affiche les modifications effectuées.
Une fois toute la mise en page effectuée, vous pouvez afficher votre article.
Afficher votre article
Votre article apparait dans un nouvel onglet comme il sera visible pour les visiteurs. Si cela vous convient retournez sur votre page de création d’article dans l’administration (voir dans les onglets de votre navigateur) et cliquez sur mettre à jour (à droite) pour valider les modifications que vous avez effectuées sur votre article.
Votre article apparait dans un nouvel onglet
Et sur votre page d’accueil ou dans votre catégorie, il s’affichera comme ceci. Notez bien, l’effet de la balise « More »
Présence de la balise « More »
Voilà ceci est un début, il faudrait maintenant insérer des images pour illustrer notre propos. C’est ce nous allons vois dans notre prochain tutoriel.
