Manuel d utilisation. wordpress Galigeo. 05 juin Tél : Fax :

Transcription

1 Manuel d utilisation wordpress Galigeo 05 juin 2013 INDEXEL - 10, passage du chantier, PARIS Tél : Fax :

2 Sommaire Accès à l interface de gestion des contenus...03 Familiarisation avec l interface...04 Navigation...04 Variantes d affichage de l interface...05 Ajout et modification d un contenu...05 Content builder...07 Mise en forme du contenu...08 Les visuels, images, sons et médias...09 Menus...10 Ajout d une vidéo Youtube/ Vimeo...11 Actualité...12 Portfolio...12 Footer...13 Génération de Leads...13 Formulaire Selsforce...14 Revolution slider...15 L url (permalien) du contenu (documentation avancée)...15 SEO...16 Widget logic...17 Notion d HTML

3 Accès à l interface de gestion des contenus Un site web est composé de deux parties : La partie publique, accessible à tous :. La partie privée :. c est l interface d administration et de gestion des contenus (parfois appelée back-office) : com/wp-admin Dans notre cas, l outil de gestion de contenus utilisé est WordPress (parfois abrégé WP, ce qui explique l adresse (url) du back-office). Par mesure de sécurité, les identifiants et mots de passe pour s y connecter sont communiqués séparément. Attention : Une fois le site en production, les url changeront : 3

4 Familiarisation avec l interface Une fois connecté avec votre identifiant et votre mot de passe, vous arrivez sur une page qui ressemble à celle ci-dessus. Navigation La navigation dans l interface s effectue grâce au menu à gauche. Au départ, seules les sections principales de l interface apparaissent. Cependant, chacune d entre elles comporte généralement des sous sections. Il suffit de passer la souris dessus, pour les faire apparaître. Notre conseil : visitez chacune d entre elles pour avoir un aperçu de vos possibilités. 4

5 Variantes d affichage de l interface L interface liée à votre compte a été optimisée pour vous faciliter la gestion des contenus en fonction des besoins spécifiques du site web. Cela signifie que l affichage de l interface peut varier. S il vous arrive de ne pas trouver quelque chose là où il devrait être, pensez à regarder partout sur la page (le bloc peut avoir été déplacé), ainsi qu à vérifier que ce que vous cherchez n a pas été désactivé dans les options de l écran (spécifique à chaque section de l administration) : Les contenus du site web peuvent être de plusieurs types différents. Pour le site, il y a : Les pages Les posts (actualités) Le Revolution Slider Le Portfolio Ajout et modification d un contenu : Pages Qu il s agisse d une page ou d un autre type de contenu, la base des contenus est la même (voir p.6) 5

6 Le titre Le contenu La méthode de mise en page de ce contenu est expliquée ci-contre. Arborescence Les pages fonctionnent comme une arborescence, comme un arbre aux branches successives. Il faut donc définir, lorsque c est pertinent, la page parente, ainsi que l ordre d affichage (par rapport aux autres pages qui sont au même niveau). Choix du modèle de page Cette option ne doit pas être modifiée, sauf si vous voulez créer une page portfolio. Par défaut, les pages ont comme modèle Modèle par défaut. Certaines pages ont un modèle différent. Il ne faut pas modifier ce comportement. Les champs personnalisés Les pages peuvent contenir des champs supplémentaires grâce aux champs personnalisés. Enregistrer le brouillon, aperçu et publier Une fois que vous avez tapé votre contenu, vous pouvez en voir un aperçu en situation réelle en cliquant sur le bouton Aperçu. Si cela vous satisfait, vous avez ensuite deux options : Enregistrer le brouillon, si vous souhaitez sauvegarder ce que vous venez de faire, sans que cela apparaisse sur le site public pour l instant, ou Publier, pour sauvegarder le contenu et l afficher immédiatement sur le site public. En cas de modification le bouton Publier se transforme en Mettre à jour. 6

7 Pour l une ou l autre de ces deux opérations, pensez à bien attendre qu un message de confirmation d enregistrement apparaisse, pour éviter les mauvaises surprises. Enlever les commentaires Il faut vérifier que la page créée ou modifiée n accepte pas les commentaires (la case Autoriser les commentaires ne doit pas être cochée). Pour acceder à cette box activez les options de l écran (en jaune tout en haut de votre fenêtre) et cochez la case commentaire et discussion. Content builder Création de page Créer sa page web est un jeu d enfant. Pour commencer à composer une page, il suffit de sélectionner un des éléments, puis cliquez sur le bouton add item. Vous pouvez choisir la taille de votre box (1/4, 1/3, 1/2, 2/3, 3/4, 1/1) en utilisant le bouton + et -. Vous pouvez supprimer l article si vous n en avez plus besoin grace à la croix. Vous pouvez modifier chaque article en cliquant sur crayon dans le coin inférieur droit de l élément. Vous pouvez également déplacer un objet par simple drag & drop Nous vous rappelons que le Content Builer fonctionne uniquement avec le modèle de page par défaut. 7

8 Short code particuliers : CTA box : Cette box permet d avoir un titre avec un picto, un texte et jusqu à trois liens différents. CTA image : Cette box permet d avoir un surtitre, un titre puis d avoir une image avec deux états. (image standart, image en rollover) ainsi qu un lien. Mise en forme du contenu À propos des contenus Word Généralement, vous travaillez d abord avec des documents Word, que vous souhaitez ensuite insérer dans le site web. Cependant, Word et un site web ne fonctionnent pas du tout de la même façon. Il ne faut jamais copier-coller directement un contenu de type Word dans la zone de contenu. Word génère en effet du code, invisible pour vous, mais qui n est pas du tout adapté au web. Il faut utiliser le bouton Coller du texte simple. La mise en page classique (gras et alignement du texte) Les premiers boutons permettent la mise en page classique : gras, italique, souligné et alignement du texte (gauche, centré, droite ou justifié). 8

9 Les listes à puce Les listes à puce sont utiles et efficaces lorsque vous énumérez les éléments d une liste. Ajouter ou supprimer un lien hypertexte Ces boutons ajoutent ou suppriment un lien sur le texte sélectionné. Dans la fenêtre des paramètres, le seul champ obligatoire est. Link URL, avec deux possibilités : Un lien web. (par exemple : Un lien . (par exemple : mailto:contact@indexel.fr) Paragraphe et retour à la ligne Pour créer un nouveau paragraphe : Enter Pour faire un retour à la ligne : Shift + Enter Les styles Ce bouton permet de créer directement des style particulier comme le Chapo ou Inter titre. Les visuels, images, sons et médias Insérer une image Ce bouton permet d insérer une image dans le contenu. 9

10 Il suffit de cliquer sur Parcourir pour sélectionner l image sur votre ordinateur. En cas de souci, cliquez sur méthode du navigateur. Nb : avant de télécharger votre fichier sur le serveur, il est préférable que son nom soit au format informatique, c est-à-dire sans majuscules, sans accents, sans caractères spéciaux et sans espaces. Seules les minuscules non accentuées, les chiffres et l underscore _ sont autorisés. Par exemple Eléphant de mer. gif devrait être renommé en elephant_de_mer. gif pour éviter tout problème. Si vous aviez déjà ajouté l image auparavant (dans un autre contenu par exemple), vous pouvez directement la retrouver dans l onglet Bibliothèque de médias. Seul le champ Titre est obligatoire, mais il n est en réalité pas important et sera généralement prérempli. Le champ Légende est facultatif mais important pour le référencement lorsque l image contient du texte (auquel cas, copiez ce texte dans ce champ). L option Alignement permet de placer une image à côté d un texte. Mais il faut être prudent, elle peut parfois créer des résultats étranges sur certains navigateurs. Il faut terminer en cliquant sur le bouton Insérer dans l article (voir ci-dessous) ou utilisez comme image à la une dans certains cas. Une fois insérée, les options de l image sont modifiables en cliquant sur le bouton qui apparaît lorsque l on clique dessus. Menus Le site fait apparaître 2 menus, ils sont générés par l outil de gestion des menus : Main menu (menu principal) et Footer menu (menu pied de page). Cela se gère dans Apparence > Menus. 10

11 À droite, ce sont les différents menus existants. À gauche, ce sont les différents éléments du site web que l on peut ajouter au menu en cours de modification (par exemple ajouter une page ou un lien externe). Ajout d une vidéo Youtube / VImeo Pour ajouter une vidéo, copier l ID de la vidéo (voir ci-dessous) : Dans le backoffice allez sur la page souhaitée puis dans le content builder selectionnez Youtube/ Vimeo et collez l id dans le champ Youtube video ID. et publiez. 11

12 Actualité News & événement Allez dans le menu Posts (voir ci-contre) Pour créer une actualité, il suffit de cliquer sur Add New puis d insérer son contenu et de rajouter une image (optionnel). Ne pas oublier de sélectionner dans le menu de droite la catégorie de cette dernière (news ou event). Toutes vos dernières actualités seront affichées sur la page d accueil. Pour les events il ne faut pas oublier de remplir le champs (ci-dessus). Cela correspond à la date de votre evenement qui sera reprit sur la page d accueil. Portfolio Le portfolio est un template qui s applique à une page standard. Une fois le template activé il appelera automatiquement toutes les images du portoflio. Pour réaliser son portfolio il suffit d aller sur l onglet Portfolio (voir ci-dessous). Un élément du portfolio est composé d un titre, un texte et une image. Si vous le souhaitez vous pouvez les classer par catégories. 12

13 Footer Administrer les liens du footer Pour pouvoir changer les listes du footer voir (ci-dessous). Vous devez passer par le menu : Apparence >Widgets. Puis modifier dans la colonne de droite le Footer area #2 et #3. Il ne reste plus qu à ajouter un lien à la place du # ou modifier si besoin le texte sans supprimer les balises <a/>. generation de leads La génération de leads qualifiés est l un des principaux buts du site web de Galigeo. L une des best practice consiste à offrir un contenu à forte valeur ajoutée type livre blanc à l internaute. Pour ce faire, ce dernier devra remplir un formulaire qui alimentera un CRM (Sales Force). Nous avons mis en place un système permettant : d intégrer simplement un formulaire créé sous Sales Force dans n importe quelle page du site. de gérer tout aussi simplement le téléchargement ou la redirection vers une page invisible après que le formulaire est été dument rempli. Remarque : si vous souhaitez offrir au visiteur un contenu particulier (vidéo, page de contenu), vous devez créer une page invisible (pour les moteurs de recherche) qui accueillera ce contenu. Pour se faire, il suffit de créer la page en enfant de la page inv. Il vous suffira ensuite de copier l url de cette dernière dans le champs Link (voir p14). 13

14 formulaire SAlEsforce Importer votre formulaire Salesforce Dans Salesforce allez dans Configuration (voir ci-contre). Puis dans Personnaliser>Pistes>Web vers piste Ensuite cliquez sur le bouton et selectionnez les champs souhaités, rentrez l url de votre page (dans URL de retour). Afin que la redirection fonctionne, vous devez ajouter à la fin du lien :?dl=a8cc5esst8od2l puis cliquez sur Générer. Il ne vous reste plus qu à copier le code HTML de votre formulaire. Mais vous ne devez pas copier les éléments qui possèdent les signes suivant : <!-- --> (voir ci-dessous). Puis dans le Backoffice, sélectionnez dans le content builder Form redirection et éditez le. Collez votre code dans Column content, insérez le lien de votre page ou de votre PDF et donnez un nom au bouton qui apparaîtra une fois que l utilisateur aura remplit le formulaire correctement. 14

15 revolution slider Création d un slider Le revolution slider propose une multitude d options. Vous pourrez insérer du texte des images. ou bien des vidéos, puis les animer grâce aux animations prédéfinies. Vous pourrez choisir l ordre d apparition de vos items et la vitesse à laquelle ils vont apparaitre. L url (permalien) du contenu (documentation avancée) Ci-dessus l adresse Internet qui permet d accéder au contenu d une page. Lors de la création d un contenu, cette adresse (appelée permalien dans l administration) est générée automatiquement, à partir du titre du contenu. Cependant, une fois créée, cette adresse reste fixe. Par conséquent, s il s avère nécessaire de modifier le titre du contenu (à cause d une faute de frappe par exemple), il peut aussi parfois être conseillé de modifier le permalien en conséquence : Ce permalien doit être au format informatique : uniquement des minuscules, des tirets et des chiffres (pas d accents, pas de caractères spéciaux, pas de majuscules, pas d espaces). Il arrive parfois que certains caractères spéciaux (comme certaines apostrophes venant de Word) soient mal nettoyés automatiquement, auquel cas il faut le faire manuellement. Attention : modifier le permalien d une page qui est déjà en ligne fait revenir sa position à 0 dans les moteurs de recherche (car elle sera considérée comme une nouvelle page, différente). Ne pas oublier d enregistrer le contenu pour valider les modifications. 15

16 SEO Nous avons ajouté un plugin Yoast WordPress SEO. Grâce à ce dernier vous optimiserez le référencement de votre site web. Les réglages du plugin ont été déjà ajustés, mais vous pourrez toujours apporter quelques modifications si besoin en passant par le menu SEO (ci-contre). Des champs sont disponibles lors de l édition des pages. Il faut renseigner : Mot-cléf principal : mettre un mot ou une suite de mots clés qui décrivent le mieux votre page. Le titre SEO : donner un titre spécifique (unique) à la page. La meta Description : ce champs affiché par Google (s il le considère correct) a pour but. de donner envie aux internautes d accéder à la page. Attention de ne pas dépasser le nombre de caractères indiqué! 16

17 Widget Logic Ce widget va vous permettre de traduire tout ou partie des widget composant une sidebar. La langue par défaut du site étant l anglais, certains widget devront être traduit. Prenons un exemple : Nous avons réalisé un call to action pour la sidebar left. Ce dernier est en anglais. Le public francophone ne sera donc pas sensible à ce call to action si celui-ci n est pas traduit. Widget Logic va vous permettre de créer une traduction de ce call to action particulier sans avoir a refaire intégralement la sidebar left. Pour ajouter la traduction FR au call to action, il suffit de créer un nouveau call to action, de remplir les différents champs en français et de préciser dans la partie widget logic : ICL_LANGUAGE_CODE== fr (Cela identifiera ce call to action comme étant à afficher uniquement en langue fr.). Si vous utilisez widget logic, il vous faut donc préciser pour les différents widget nécessitant une traduction la langue. Voici les correspondances langues / code : Anglais : ICL_LANGUAGE_CODE== en Français : ICL_LANGUAGE_CODE== fr Allemand : ICL_LANGUAGE_CODE== de 17

18 les Notions d HTML Mettre en gras : <strong> </strong> Trait de séparation : <hr /> Retour à la ligne : <br /> Commencer par des Titre de niveau 2, le Titre de niveau 1 étant utilisé pour les titres des pages. Pour faire des colonnes : [jcolumns] Contenu colonne 1 [jcol/] Contenu colonne 2 [/jcolumns] Pour créer une image < img src= votre lien /> Pour créer un lien < a href= votre lien >nom du lien</a> 18